pixedi 1.0.0

package/.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install pnpm globally
+        run: npm install -g pnpm@9
+
+      # Install regular project dependencies
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Vitest Tests
+        run: pnpm test
+
+      - name: Run TypeScript Type Check
+        run: pnpm type-check
+
+      - name: Run Unified Build Configuration
+        run: pnpm build
+
+      # --- 1. Deploy to Cloudflare Pages ---
+      # This uploads the dist folder containing both the SPA app and the widget CDN
+      # Make sure you have CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID in GitHub Secrets
+      - name: Deploy SPA & Widget CDN to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: 'pixedi' # The project name inside your Cloudflare Pages account
+          directory: 'dist' # Uploads everything generated in the previous step
+
+      # --- 2. EXISTING WORKING STEP: PUBLISH TO NPM ---
+      - name: Publish React Component to NPM
+        run: |
+          pnpm config set registry https://registry.npmjs.org
+          pnpm config set //registry.npmjs.org/:_authToken "$NODE_AUTH_TOKEN"
+          pnpm publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.prettierr

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf"
+}

package/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-actions",
+    "@storybook/addon-onboarding",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import "@/app/styles/index.css";
+import "@/shared/components/ImageEditor/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: "Global theme for components",
+      defaultValue: "light",
+      toolbar: {
+        title: "Theme",
+        icon: "circlehollow",
+        items: [
+          { value: "light", icon: "sun", title: "Light Mode" },
+          { value: "dark", icon: "moon", title: "Dark Mode" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const selectedTheme = context.globals.theme || "light";
+
+      return React.createElement(
+        "div",
+        {
+          "data-theme": selectedTheme,
+          className: "root",
+          style: {
+            padding: 24,
+            minHeight: "100vh",
+            backgroundColor:
+              selectedTheme === "dark" ? "#22252a" : "oklch(1 0 0)",
+            transition: "background-color 0.2s ease",
+          },
+        },
+        React.createElement(Story),
+      );
+    },
+  ],
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

package/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```

package/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>picedi</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "pixedi",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/lib/index.umd.js",
+  "module": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "dependencies": {
+    "react-router": "^8.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-actions": "^8.6.0",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-onboarding": "^8.6.0",
+    "@storybook/blocks": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@storybook/test": "^8.6.0",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "eslint": "^10.6.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
+    "prettier": "^3.8.5",
+    "storybook": "^8.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.1",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "jsdom": "^27.4.0",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:app": "tsc -b tsconfig.app.json && vite build",
+    "build:widget": "vite build --config vite.widget.config.ts --mode production",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "build": "pnpm build:app && pnpm build:widget && pnpm build:lib",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "type-check": "tsc -b tsconfig.app.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - '.'

package/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/src/app/App.tsx

@@ -0,0 +1,10 @@
+import { RouterProvider } from "@/app/providers";
+import { AppRouter } from "@/app/router/AppRouter";
+
+export default function App() {
+  return (
+    <RouterProvider>
+      <AppRouter />
+    </RouterProvider>
+  );
+}

package/src/app/entries/index.ts

@@ -0,0 +1,145 @@
+import type { Image } from "@/shared/types";
+
+export const imagesData: Image[] = [
+  {
+    id: "20",
+    author: "Aleks Dorohovich",
+    title: "Creative desktop with laptop and smartphone",
+    width: 918,
+    height: 616,
+    ext: "jpg",
+    fileName: "sunset_over_lake.jpg",
+  },
+  {
+    id: "35",
+    author: "Shane Colella",
+    title: "Mountain Peaks in Spring Surrounded",
+    width: 2758,
+    height: 3622,
+    ext: "jpg",
+    fileName: "mountain_peaks.jpg",
+  },
+  {
+    id: "42",
+    author: "Luke Chesser",
+    width: 3456,
+    height: 2304,
+    title: "Morning in a cozy cafe",
+    ext: "jpg",
+    fileName: "calm_forest_morning.jpg",
+  },
+  {
+    id: "43",
+    author: "Oleg Chursin",
+    title: "Old Town Alleyway Bathed in Warm Golden Sunlight",
+    width: 1280,
+    height: 831,
+    ext: "jpg",
+    fileName: "old_town_alleyway_sunlight.jpg",
+  },
+  {
+    id: "57",
+    author: "Nicholas Swanson",
+    title: "Golden Wheat Fields",
+    width: 2448,
+    height: 3264,
+    ext: "jpg",
+    fileName: "golden_wheat_fields.jpg",
+  },
+  {
+    id: "75",
+    author: "Jessy Onyae",
+    title: "Ocean Waves Crashing Against Rocky Shores at Sunset",
+    width: 1999,
+    height: 2998,
+    ext: "jpg",
+    fileName: "ocean_waves_rocky.jpg",
+  },
+  {
+    id: "78",
+    author: "Paul Evens",
+    title: "Quiet Countryside Road",
+    width: 1584,
+    height: 2376,
+    ext: "jpg",
+    fileName: "quiet_countryside_road.jpg",
+  },
+  {
+    id: "90",
+    author: "Rula Sibai",
+    title: "Blooming Spring Garden",
+    width: 3000,
+    height: 1992,
+    ext: "jpg",
+    fileName: "blooming_spring_garden.jpg",
+  },
+  {
+    id: "106",
+    author: "Arvee Marie",
+    title: "Snowy Mountain Trail",
+    width: 2592,
+    height: 1728,
+    ext: "jpg",
+    fileName: "snowy_mountain_trail.jpg",
+  },
+  {
+    id: "110",
+    author: "Kenneth Thewissen",
+    title: "Starry Night Sky Illuminated by the Milky Way",
+    width: 5000,
+    height: 3333,
+    ext: "jpg",
+    fileName: "starry_night_milky_way.jpg",
+  },
+  {
+    id: "163",
+    author: "Lyhn Nguyen",
+    title: "Peaceful Riverside View",
+    width: 2000,
+    height: 1333,
+    ext: "jpg",
+    fileName: "peaceful_riverside_view.jpg",
+  },
+  {
+    id: "21",
+    author: "Alejandro Escamilla",
+    title: "White shoes on the woody floor",
+    width: 3008,
+    height: 2008,
+    ext: "jpg",
+    fileName: "white_shoes_wooden_floor.jpg",
+  },
+  {
+    id: "26",
+    author: "Vadim Sherbakov",
+    title: "Accessories",
+    width: 4209,
+    height: 2769,
+    ext: "jpg",
+    fileName: "accessories.jpg",
+  },
+  {
+    id: "88",
+    author: "Barcelona",
+    title: "Car traffic",
+    width: 1280,
+    height: 1707,
+    ext: "jpg",
+    fileName: "car_traffic.jpg",
+  },
+  {
+    id: "116",
+    author: "Anton Sulsky",
+    title: "Tuscany Hills",
+    width: 3504,
+    height: 2336,
+    ext: "jpg",
+    fileName: "tuscany_hills.jpg",
+  },
+].map((image) => ({
+  ...image,
+  thumbnail: `https://picsum.photos/id/${image.id}/400/300`,
+  original: `https://picsum.photos/id/${image.id}/${image.width}/${image.height}`,
+}));
+
+//https://picsum.photos/id/26/4209/2769

package/src/app/providers/RouterProvider.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import { BrowserRouter } from "react-router";
+
+export const RouterProvider = ({ children }: { children: ReactNode }) => {
+  return <BrowserRouter>{children}</BrowserRouter>;
+};

package/src/app/providers/index.ts

@@ -0,0 +1 @@
+export { RouterProvider } from "./RouterProvider";

package/src/app/router/AppRouter.tsx

@@ -0,0 +1,12 @@
+import { Route, Routes } from "react-router";
+import { ROUTES } from "@/shared/config";
+import { GalleryPage, ImageEditPage } from "@/features/gallery";
+
+export const AppRouter = () => {
+  return (
+    <Routes>
+      <Route path={ROUTES.HOME} element={<GalleryPage />} />
+      <Route path={ROUTES.IMAGE_EDIT} element={<ImageEditPage />} />
+    </Routes>
+  );
+};

package/src/app/styles/index.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

package/src/features/gallery/GalleryPage.tsx

@@ -0,0 +1,33 @@
+import { imagesData } from "@/app/entries";
+import { ImageCard } from "@/shared/components/ImageCard";
+import { Preloader } from "@/shared/components/ui";
+import { useImagePreload } from "@/shared/hooks";
+
+export const GalleryPage = () => {
+  const isLoaded = useImagePreload(imagesData.map((image) => image.original));
+
+  if (!isLoaded) {
+    return (
+      <div className="w-full min-h-screen flex items-center justify-center">
+        <Preloader size={64} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`
+        max-w-4xl mx-6 
+        my-6 
+        grid content-start gap-6 
+        grid-cols-1 
+        sm:grid-cols-2
+        md:grid-cols-3 md:mx-auto
+      `}
+    >
+      {imagesData.map((image) => (
+        <ImageCard key={image.id} image={image} />
+      ))}
+    </div>
+  );
+};

package/src/features/gallery/ImageEditPage.tsx

@@ -0,0 +1,37 @@
+import { useParams, useNavigate } from "react-router";
+import { imagesData } from "@/app/entries";
+import { ImageEditor } from "@/shared/components/ImageEditor";
+
+export const ImageEditPage = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const image = imagesData.find((img) => img.id === id);
+
+  if (!image) {
+    return <div>Image not found</div>;
+  }
+
+  const handleSave = async (base64: string) => {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        // TODO: Save the image
+        console.log(base64);
+        resolve();
+      }, 2000);
+    });
+  };
+
+  const handleCancel = () => {
+    navigate("/");
+  };
+
+  return (
+    <div className="w-full h-screen" style={{ width: "100%", height: "100vh" }}>
+      <ImageEditor
+        image={image.original}
+        onBack={handleCancel}
+        onSave={handleSave}
+      />
+    </div>
+  );
+};

package/src/features/gallery/index.ts

@@ -0,0 +1,2 @@
+export { GalleryPage } from "./GalleryPage";
+export { ImageEditPage } from "./ImageEditPage";

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@/app/styles/index.css";
+import App from "@/app/App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);