Acasă Explorează Ajutor
Autentificare
fszontagh
/
baas-demo-image-upload
1
0
Bifurcare 0
Fisiere Probleme 1 Trageți solicitările 0 Wiki
Răsfoiți Sursa

Initial commit: Image upload demo for BaaS

Fszontagh 1 săptămână în urmă
comite
26125d3f12
35 a modificat fișierele cu 5360 adăugiri și 0 ștergeri
Vedere unificată Arată Statisticile Diff
  1. 29 0
      .gitignore
  2. 39 0
      deploy.sh
  3. 14 0
      index.html
  4. 2697 0
      package-lock.json
  5. 28 0
      package.json
  6. 6 0
      postcss.config.js
  7. 5 0
      public/favicon.svg
  8. 69 0
      src/App.tsx
  9. 37 0
      src/components/ExpirySelector.tsx
  10. 137 0
      src/components/ImageCard.tsx
  11. 63 0
      src/components/ImageGrid.tsx
  12. 250 0
      src/components/ImageUploader.tsx
  13. 30 0
      src/components/Layout.tsx
  14. 21 0
      src/components/LoadingSpinner.tsx
  15. 163 0
      src/components/Navbar.tsx
  16. 188 0
      src/components/ShareModal.tsx
  17. 61 0
      src/config.ts
  18. 153 0
      src/hooks/useImages.ts
  19. 72 0
      src/hooks/useShare.ts
  20. 35 0
      src/index.css
  21. 19 0
      src/main.tsx
  22. 111 0
      src/pages/DashboardPage.tsx
  23. 195 0
      src/pages/HomePage.tsx
  24. 217 0
      src/pages/ImageDetailPage.tsx
  25. 111 0
      src/pages/LoginPage.tsx
  26. 206 0
      src/pages/RegisterPage.tsx
  27. 98 0
      src/pages/SharedImagePage.tsx
  28. 98 0
      src/pages/VerifyEmailPage.tsx
  29. 32 0
      src/types/index.ts
  30. 26 0
      src/utils/expiry.ts
  31. 57 0
      src/utils/formatters.ts
  32. 26 0
      tailwind.config.js
  33. 21 0
      tsconfig.json
  34. 10 0
      tsconfig.node.json
  35. 36 0
      vite.config.ts

+ 29 - 0
.gitignore
Vizualizați fișierul 

@@ -0,0 +1,29 @@
 
+# Dependencies
 
+node_modules/
 
+
 
+# Build output
 
+dist/
 
+
 
+# Environment files
 
+.env
 
+.env.local
 
+.env.*.local
 
+
 
+# Editor directories
 
+.idea/
 
+.vscode/
 
+*.swp
 
+*.swo
 
+
 
+# OS files
 
+.DS_Store
 
+Thumbs.db
 
+
 
+# Logs
 
+*.log
 
+npm-debug.log*
 
+
 
+# TypeScript build info
 
+*.tsbuildinfo
 
+vite.config.js
 
+vite.config.d.ts

+ 39 - 0
deploy.sh
Vizualizați fișierul 

@@ -0,0 +1,39 @@
 
+#!/bin/bash
 
+
 
+# Deploy script for ImageDrop demo
 
+# Copies the built files to a project's public folder
 
+
 
+# Configuration - set PROJECT_PUBLIC_DIR or pass as argument
 
+PROJECT_PUBLIC_DIR="${1:-$PROJECT_PUBLIC_DIR}"
 
+
 
+if [ -z "$PROJECT_PUBLIC_DIR" ]; then
 
+    echo "Usage: ./deploy.sh <project-public-dir>"
 
+    echo "   or: PROJECT_PUBLIC_DIR=/path/to/project/public ./deploy.sh"
 
+    echo ""
 
+    echo "Example:"
 
+    echo "  ./deploy.sh /data/daas/data/projects/my-project/public"
 
+    echo ""
 
+    echo "This will copy the built files from ./dist to the specified directory."
 
+    exit 1
 
+fi
 
+
 
+# Check if dist folder exists
 
+if [ ! -d "dist" ]; then
 
+    echo "Error: dist folder not found. Run 'npm run build' first."
 
+    exit 1
 
+fi
 
+
 
+# Create target directory if it doesn't exist
 
+mkdir -p "$PROJECT_PUBLIC_DIR"
 
+
 
+# Copy files
 
+echo "Deploying to: $PROJECT_PUBLIC_DIR"
 
+cp -r dist/* "$PROJECT_PUBLIC_DIR/"
 
+
 
+echo "Deployment complete!"
 
+echo ""
 
+echo "Files deployed:"
 
+ls -la "$PROJECT_PUBLIC_DIR/"
 
+echo ""
 
+echo "The demo is now accessible at your project's domain."
 
+echo "Routes: /#/, /#/login, /#/register, /#/dashboard"

+ 14 - 0
index.html
Vizualizați fișierul 

@@ -0,0 +1,14 @@
 
+<!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>ImageDrop - Share Images Instantly</title>
 
+    <meta name="description" content="Upload and share images instantly. No account required for anonymous uploads." />
 
+  </head>
 
+  <body>
 
+    <div id="root"></div>
 
+    <script type="module" src="/src/main.tsx"></script>
 
+  </body>
 
+</html>

+ 2697 - 0
package-lock.json
Vizualizați fișierul 

@@ -0,0 +1,2697 @@
 
+{
 
+  "name": "imagedrop",
 
+  "version": "1.0.0",
 
+  "lockfileVersion": 3,
 
+  "requires": true,
 
+  "packages": {
 
+    "": {
 
+      "name": "imagedrop",
 
+      "version": "1.0.0",
 
+      "dependencies": {
 
+        "@picobaas/client": "file:../../sdk/typescript",
 
+        "react": "^18.2.0",
 
+        "react-dom": "^18.2.0",
 
+        "react-router-dom": "^6.20.0"
 
+      },
 
+      "devDependencies": {
 
+        "@types/react": "^18.2.0",
 
+        "@types/react-dom": "^18.2.0",
 
+        "@vitejs/plugin-react": "^4.2.0",
 
+        "autoprefixer": "^10.4.16",
 
+        "postcss": "^8.4.32",
 
+        "tailwindcss": "^3.3.6",
 
+        "typescript": "^5.3.0",
 
+        "vite": "^5.0.0"
 
+      }
 
+    },
 
+    "../../sdk/typescript": {
 
+      "name": "@picobaas/client",
 
+      "version": "0.1.0",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "eventemitter3": "^5.0.0"
 
+      },
 
+      "devDependencies": {
 
+        "@types/node": "^20.0.0",
 
+        "@types/react": "^18.0.0",
 
+        "react": "^18.0.0",
 
+        "tsup": "^8.0.0",
 
+        "typescript": "^5.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "react": ">=17.0.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "react": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/@alloc/quick-lru": {
 
+      "version": "5.2.0",
 
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
 
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=10"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/sindresorhus"
 
+      }
 
+    },
 
+    "node_modules/@babel/code-frame": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
 
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/helper-validator-identifier": "^7.27.1",
 
+        "js-tokens": "^4.0.0",
 
+        "picocolors": "^1.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/compat-data": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
 
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/core": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
 
+      "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",
 
+        "@babel/helper-compilation-targets": "^7.27.2",
 
+        "@babel/helper-module-transforms": "^7.28.3",
 
+        "@babel/helpers": "^7.28.4",
 
+        "@babel/parser": "^7.28.5",
 
+        "@babel/template": "^7.27.2",
 
+        "@babel/traverse": "^7.28.5",
 
+        "@babel/types": "^7.28.5",
 
+        "@jridgewell/remapping": "^2.3.5",
 
+        "convert-source-map": "^2.0.0",
 
+        "debug": "^4.1.0",
 
+        "gensync": "^1.0.0-beta.2",
 
+        "json5": "^2.2.3",
 
+        "semver": "^6.3.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      },
 
+      "funding": {
 
+        "type": "opencollective",
 
+        "url": "https://opencollective.com/babel"
 
+      }
 
+    },
 
+    "node_modules/@babel/generator": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
 
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/parser": "^7.28.5",
 
+        "@babel/types": "^7.28.5",
 
+        "@jridgewell/gen-mapping": "^0.3.12",
 
+        "@jridgewell/trace-mapping": "^0.3.28",
 
+        "jsesc": "^3.0.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-compilation-targets": {
 
+      "version": "7.27.2",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
 
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/compat-data": "^7.27.2",
 
+        "@babel/helper-validator-option": "^7.27.1",
 
+        "browserslist": "^4.24.0",
 
+        "lru-cache": "^5.1.1",
 
+        "semver": "^6.3.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-globals": {
 
+      "version": "7.28.0",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
 
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-module-imports": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
 
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/traverse": "^7.27.1",
 
+        "@babel/types": "^7.27.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-module-transforms": {
 
+      "version": "7.28.3",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
 
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/helper-module-imports": "^7.27.1",
 
+        "@babel/helper-validator-identifier": "^7.27.1",
 
+        "@babel/traverse": "^7.28.3"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@babel/core": "^7.0.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-plugin-utils": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
 
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-string-parser": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
 
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-validator-identifier": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
 
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helper-validator-option": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
 
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/helpers": {
 
+      "version": "7.28.4",
 
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
 
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/template": "^7.27.2",
 
+        "@babel/types": "^7.28.4"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/parser": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
 
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/types": "^7.28.5"
 
+      },
 
+      "bin": {
 
+        "parser": "bin/babel-parser.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.0.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
 
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/helper-plugin-utils": "^7.27.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@babel/core": "^7.0.0-0"
 
+      }
 
+    },
 
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
 
+      "version": "7.27.1",
 
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
 
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/helper-plugin-utils": "^7.27.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@babel/core": "^7.0.0-0"
 
+      }
 
+    },
 
+    "node_modules/@babel/template": {
 
+      "version": "7.27.2",
 
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
 
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/code-frame": "^7.27.1",
 
+        "@babel/parser": "^7.27.2",
 
+        "@babel/types": "^7.27.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/traverse": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
 
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/code-frame": "^7.27.1",
 
+        "@babel/generator": "^7.28.5",
 
+        "@babel/helper-globals": "^7.28.0",
 
+        "@babel/parser": "^7.28.5",
 
+        "@babel/template": "^7.27.2",
 
+        "@babel/types": "^7.28.5",
 
+        "debug": "^4.3.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@babel/types": {
 
+      "version": "7.28.5",
 
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
 
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/helper-string-parser": "^7.27.1",
 
+        "@babel/helper-validator-identifier": "^7.28.5"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/aix-ppc64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
 
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
 
+      "cpu": [
 
+        "ppc64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "aix"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/android-arm": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
 
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
 
+      "cpu": [
 
+        "arm"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "android"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/android-arm64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
 
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "android"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/android-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
 
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "android"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/darwin-arm64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
 
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/darwin-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
 
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/freebsd-arm64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
 
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "freebsd"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/freebsd-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
 
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "freebsd"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-arm": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
 
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
 
+      "cpu": [
 
+        "arm"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-arm64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
 
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-ia32": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
 
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
 
+      "cpu": [
 
+        "ia32"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-loong64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
 
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
 
+      "cpu": [
 
+        "loong64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-mips64el": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
 
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
 
+      "cpu": [
 
+        "mips64el"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-ppc64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
 
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
 
+      "cpu": [
 
+        "ppc64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-riscv64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
 
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
 
+      "cpu": [
 
+        "riscv64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-s390x": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
 
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
 
+      "cpu": [
 
+        "s390x"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/linux-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
 
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/netbsd-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
 
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "netbsd"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/openbsd-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
 
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "openbsd"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/sunos-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
 
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "sunos"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/win32-arm64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
 
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/win32-ia32": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
 
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
 
+      "cpu": [
 
+        "ia32"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@esbuild/win32-x64": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
 
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ],
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/@jridgewell/gen-mapping": {
 
+      "version": "0.3.13",
 
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@jridgewell/sourcemap-codec": "^1.5.0",
 
+        "@jridgewell/trace-mapping": "^0.3.24"
 
+      }
 
+    },
 
+    "node_modules/@jridgewell/remapping": {
 
+      "version": "2.3.5",
 
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
 
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@jridgewell/gen-mapping": "^0.3.5",
 
+        "@jridgewell/trace-mapping": "^0.3.24"
 
+      }
 
+    },
 
+    "node_modules/@jridgewell/resolve-uri": {
 
+      "version": "3.1.2",
 
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.0.0"
 
+      }
 
+    },
 
+    "node_modules/@jridgewell/sourcemap-codec": {
 
+      "version": "1.5.5",
 
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/@jridgewell/trace-mapping": {
 
+      "version": "0.3.31",
 
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
 
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@jridgewell/resolve-uri": "^3.1.0",
 
+        "@jridgewell/sourcemap-codec": "^1.4.14"
 
+      }
 
+    },
 
+    "node_modules/@nodelib/fs.scandir": {
 
+      "version": "2.1.5",
 
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@nodelib/fs.stat": "2.0.5",
 
+        "run-parallel": "^1.1.9"
 
+      },
 
+      "engines": {
 
+        "node": ">= 8"
 
+      }
 
+    },
 
+    "node_modules/@nodelib/fs.stat": {
 
+      "version": "2.0.5",
 
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
 
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 8"
 
+      }
 
+    },
 
+    "node_modules/@nodelib/fs.walk": {
 
+      "version": "1.2.8",
 
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
 
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@nodelib/fs.scandir": "2.1.5",
 
+        "fastq": "^1.6.0"
 
+      },
 
+      "engines": {
 
+        "node": ">= 8"
 
+      }
 
+    },
 
+    "node_modules/@picobaas/client": {
 
+      "resolved": "../../sdk/typescript",
 
+      "link": true
 
+    },
 
+    "node_modules/@remix-run/router": {
 
+      "version": "1.23.1",
 
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
 
+      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=14.0.0"
 
+      }
 
+    },
 
+    "node_modules/@rolldown/pluginutils": {
 
+      "version": "1.0.0-beta.27",
 
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
 
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/@rollup/rollup-android-arm-eabi": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
 
+      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
 
+      "cpu": [
 
+        "arm"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "android"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-android-arm64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
 
+      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "android"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-darwin-arm64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
 
+      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-darwin-x64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
 
+      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-freebsd-arm64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
 
+      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "freebsd"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-freebsd-x64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
 
+      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "freebsd"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
 
+      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
 
+      "cpu": [
 
+        "arm"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
 
+      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
 
+      "cpu": [
 
+        "arm"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
 
+      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
 
+      "cpu": [
 
+        "loong64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
 
+      "cpu": [
 
+        "ppc64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
 
+      "cpu": [
 
+        "riscv64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
 
+      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
 
+      "cpu": [
 
+        "riscv64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
 
+      "cpu": [
 
+        "s390x"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-linux-x64-musl": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
 
+      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "linux"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-openharmony-arm64": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
 
+      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "openharmony"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
 
+      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
 
+      "cpu": [
 
+        "arm64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
 
+      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
 
+      "cpu": [
 
+        "ia32"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
 
+      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ]
 
+    },
 
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
 
+      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
 
+      "cpu": [
 
+        "x64"
 
+      ],
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "win32"
 
+      ]
 
+    },
 
+    "node_modules/@types/babel__core": {
 
+      "version": "7.20.5",
 
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
 
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/parser": "^7.20.7",
 
+        "@babel/types": "^7.20.7",
 
+        "@types/babel__generator": "*",
 
+        "@types/babel__template": "*",
 
+        "@types/babel__traverse": "*"
 
+      }
 
+    },
 
+    "node_modules/@types/babel__generator": {
 
+      "version": "7.27.0",
 
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
 
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/types": "^7.0.0"
 
+      }
 
+    },
 
+    "node_modules/@types/babel__template": {
 
+      "version": "7.4.4",
 
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
 
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/parser": "^7.1.0",
 
+        "@babel/types": "^7.0.0"
 
+      }
 
+    },
 
+    "node_modules/@types/babel__traverse": {
 
+      "version": "7.28.0",
 
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
 
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/types": "^7.28.2"
 
+      }
 
+    },
 
+    "node_modules/@types/estree": {
 
+      "version": "1.0.8",
 
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/@types/prop-types": {
 
+      "version": "15.7.15",
 
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
 
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/@types/react": {
 
+      "version": "18.3.27",
 
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
 
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "@types/prop-types": "*",
 
+        "csstype": "^3.2.2"
 
+      }
 
+    },
 
+    "node_modules/@types/react-dom": {
 
+      "version": "18.3.7",
 
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
 
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "peerDependencies": {
 
+        "@types/react": "^18.0.0"
 
+      }
 
+    },
 
+    "node_modules/@vitejs/plugin-react": {
 
+      "version": "4.7.0",
 
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
 
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@babel/core": "^7.28.0",
 
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
 
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
 
+        "@rolldown/pluginutils": "1.0.0-beta.27",
 
+        "@types/babel__core": "^7.20.5",
 
+        "react-refresh": "^0.17.0"
 
+      },
 
+      "engines": {
 
+        "node": "^14.18.0 || >=16.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
 
+      }
 
+    },
 
+    "node_modules/any-promise": {
 
+      "version": "1.3.0",
 
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
 
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/anymatch": {
 
+      "version": "3.1.3",
 
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "normalize-path": "^3.0.0",
 
+        "picomatch": "^2.0.4"
 
+      },
 
+      "engines": {
 
+        "node": ">= 8"
 
+      }
 
+    },
 
+    "node_modules/arg": {
 
+      "version": "5.0.2",
 
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
 
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/autoprefixer": {
 
+      "version": "10.4.23",
 
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
 
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/postcss/"
 
+        },
 
+        {
 
+          "type": "tidelift",
 
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "browserslist": "^4.28.1",
 
+        "caniuse-lite": "^1.0.30001760",
 
+        "fraction.js": "^5.3.4",
 
+        "picocolors": "^1.1.1",
 
+        "postcss-value-parser": "^4.2.0"
 
+      },
 
+      "bin": {
 
+        "autoprefixer": "bin/autoprefixer"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >=14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/baseline-browser-mapping": {
 
+      "version": "2.9.11",
 
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
 
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
 
+      "dev": true,
 
+      "license": "Apache-2.0",
 
+      "bin": {
 
+        "baseline-browser-mapping": "dist/cli.js"
 
+      }
 
+    },
 
+    "node_modules/binary-extensions": {
 
+      "version": "2.3.0",
 
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
 
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=8"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/sindresorhus"
 
+      }
 
+    },
 
+    "node_modules/braces": {
 
+      "version": "3.0.3",
 
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
 
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "fill-range": "^7.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=8"
 
+      }
 
+    },
 
+    "node_modules/browserslist": {
 
+      "version": "4.28.1",
 
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
 
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/browserslist"
 
+        },
 
+        {
 
+          "type": "tidelift",
 
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "baseline-browser-mapping": "^2.9.0",
 
+        "caniuse-lite": "^1.0.30001759",
 
+        "electron-to-chromium": "^1.5.263",
 
+        "node-releases": "^2.0.27",
 
+        "update-browserslist-db": "^1.2.0"
 
+      },
 
+      "bin": {
 
+        "browserslist": "cli.js"
 
+      },
 
+      "engines": {
 
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 
+      }
 
+    },
 
+    "node_modules/camelcase-css": {
 
+      "version": "2.0.1",
 
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
 
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/caniuse-lite": {
 
+      "version": "1.0.30001761",
 
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
 
+      "integrity": "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/browserslist"
 
+        },
 
+        {
 
+          "type": "tidelift",
 
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "CC-BY-4.0"
 
+    },
 
+    "node_modules/chokidar": {
 
+      "version": "3.6.0",
 
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
 
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "anymatch": "~3.1.2",
 
+        "braces": "~3.0.2",
 
+        "glob-parent": "~5.1.2",
 
+        "is-binary-path": "~2.1.0",
 
+        "is-glob": "~4.0.1",
 
+        "normalize-path": "~3.0.0",
 
+        "readdirp": "~3.6.0"
 
+      },
 
+      "engines": {
 
+        "node": ">= 8.10.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://paulmillr.com/funding/"
 
+      },
 
+      "optionalDependencies": {
 
+        "fsevents": "~2.3.2"
 
+      }
 
+    },
 
+    "node_modules/chokidar/node_modules/glob-parent": {
 
+      "version": "5.1.2",
 
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "is-glob": "^4.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/commander": {
 
+      "version": "4.1.1",
 
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
 
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/convert-source-map": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
 
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/cssesc": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "bin": {
 
+        "cssesc": "bin/cssesc"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/csstype": {
 
+      "version": "3.2.3",
 
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
 
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/debug": {
 
+      "version": "4.4.3",
 
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
 
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "ms": "^2.1.3"
 
+      },
 
+      "engines": {
 
+        "node": ">=6.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "supports-color": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/didyoumean": {
 
+      "version": "1.2.2",
 
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
 
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
 
+      "dev": true,
 
+      "license": "Apache-2.0"
 
+    },
 
+    "node_modules/dlv": {
 
+      "version": "1.1.3",
 
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
 
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/electron-to-chromium": {
 
+      "version": "1.5.267",
 
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
 
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
 
+      "dev": true,
 
+      "license": "ISC"
 
+    },
 
+    "node_modules/esbuild": {
 
+      "version": "0.21.5",
 
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
 
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
 
+      "dev": true,
 
+      "hasInstallScript": true,
 
+      "license": "MIT",
 
+      "bin": {
 
+        "esbuild": "bin/esbuild"
 
+      },
 
+      "engines": {
 
+        "node": ">=12"
 
+      },
 
+      "optionalDependencies": {
 
+        "@esbuild/aix-ppc64": "0.21.5",
 
+        "@esbuild/android-arm": "0.21.5",
 
+        "@esbuild/android-arm64": "0.21.5",
 
+        "@esbuild/android-x64": "0.21.5",
 
+        "@esbuild/darwin-arm64": "0.21.5",
 
+        "@esbuild/darwin-x64": "0.21.5",
 
+        "@esbuild/freebsd-arm64": "0.21.5",
 
+        "@esbuild/freebsd-x64": "0.21.5",
 
+        "@esbuild/linux-arm": "0.21.5",
 
+        "@esbuild/linux-arm64": "0.21.5",
 
+        "@esbuild/linux-ia32": "0.21.5",
 
+        "@esbuild/linux-loong64": "0.21.5",
 
+        "@esbuild/linux-mips64el": "0.21.5",
 
+        "@esbuild/linux-ppc64": "0.21.5",
 
+        "@esbuild/linux-riscv64": "0.21.5",
 
+        "@esbuild/linux-s390x": "0.21.5",
 
+        "@esbuild/linux-x64": "0.21.5",
 
+        "@esbuild/netbsd-x64": "0.21.5",
 
+        "@esbuild/openbsd-x64": "0.21.5",
 
+        "@esbuild/sunos-x64": "0.21.5",
 
+        "@esbuild/win32-arm64": "0.21.5",
 
+        "@esbuild/win32-ia32": "0.21.5",
 
+        "@esbuild/win32-x64": "0.21.5"
 
+      }
 
+    },
 
+    "node_modules/escalade": {
 
+      "version": "3.2.0",
 
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
 
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/fast-glob": {
 
+      "version": "3.3.3",
 
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
 
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@nodelib/fs.stat": "^2.0.2",
 
+        "@nodelib/fs.walk": "^1.2.3",
 
+        "glob-parent": "^5.1.2",
 
+        "merge2": "^1.3.0",
 
+        "micromatch": "^4.0.8"
 
+      },
 
+      "engines": {
 
+        "node": ">=8.6.0"
 
+      }
 
+    },
 
+    "node_modules/fast-glob/node_modules/glob-parent": {
 
+      "version": "5.1.2",
 
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "is-glob": "^4.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/fastq": {
 
+      "version": "1.20.1",
 
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
 
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "reusify": "^1.0.4"
 
+      }
 
+    },
 
+    "node_modules/fill-range": {
 
+      "version": "7.1.1",
 
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
 
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "to-regex-range": "^5.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=8"
 
+      }
 
+    },
 
+    "node_modules/fraction.js": {
 
+      "version": "5.3.4",
 
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
 
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": "*"
 
+      },
 
+      "funding": {
 
+        "type": "github",
 
+        "url": "https://github.com/sponsors/rawify"
 
+      }
 
+    },
 
+    "node_modules/fsevents": {
 
+      "version": "2.3.3",
 
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
 
+      "dev": true,
 
+      "hasInstallScript": true,
 
+      "license": "MIT",
 
+      "optional": true,
 
+      "os": [
 
+        "darwin"
 
+      ],
 
+      "engines": {
 
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 
+      }
 
+    },
 
+    "node_modules/function-bind": {
 
+      "version": "1.1.2",
 
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
 
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/gensync": {
 
+      "version": "1.0.0-beta.2",
 
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
 
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6.9.0"
 
+      }
 
+    },
 
+    "node_modules/glob-parent": {
 
+      "version": "6.0.2",
 
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
 
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "is-glob": "^4.0.3"
 
+      },
 
+      "engines": {
 
+        "node": ">=10.13.0"
 
+      }
 
+    },
 
+    "node_modules/hasown": {
 
+      "version": "2.0.2",
 
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
 
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "function-bind": "^1.1.2"
 
+      },
 
+      "engines": {
 
+        "node": ">= 0.4"
 
+      }
 
+    },
 
+    "node_modules/is-binary-path": {
 
+      "version": "2.1.0",
 
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "binary-extensions": "^2.0.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=8"
 
+      }
 
+    },
 
+    "node_modules/is-core-module": {
 
+      "version": "2.16.1",
 
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
 
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "hasown": "^2.0.2"
 
+      },
 
+      "engines": {
 
+        "node": ">= 0.4"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/is-extglob": {
 
+      "version": "2.1.1",
 
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/is-glob": {
 
+      "version": "4.0.3",
 
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "is-extglob": "^2.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/is-number": {
 
+      "version": "7.0.0",
 
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.12.0"
 
+      }
 
+    },
 
+    "node_modules/jiti": {
 
+      "version": "1.21.7",
 
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
 
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "bin": {
 
+        "jiti": "bin/jiti.js"
 
+      }
 
+    },
 
+    "node_modules/js-tokens": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/jsesc": {
 
+      "version": "3.1.0",
 
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
 
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "bin": {
 
+        "jsesc": "bin/jsesc"
 
+      },
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/json5": {
 
+      "version": "2.2.3",
 
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "bin": {
 
+        "json5": "lib/cli.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/lilconfig": {
 
+      "version": "3.1.3",
 
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
 
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=14"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/antonk52"
 
+      }
 
+    },
 
+    "node_modules/lines-and-columns": {
 
+      "version": "1.2.4",
 
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
 
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/loose-envify": {
 
+      "version": "1.4.0",
 
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "js-tokens": "^3.0.0 || ^4.0.0"
 
+      },
 
+      "bin": {
 
+        "loose-envify": "cli.js"
 
+      }
 
+    },
 
+    "node_modules/lru-cache": {
 
+      "version": "5.1.1",
 
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "dependencies": {
 
+        "yallist": "^3.0.2"
 
+      }
 
+    },
 
+    "node_modules/merge2": {
 
+      "version": "1.4.1",
 
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
 
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 8"
 
+      }
 
+    },
 
+    "node_modules/micromatch": {
 
+      "version": "4.0.8",
 
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
 
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "braces": "^3.0.3",
 
+        "picomatch": "^2.3.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=8.6"
 
+      }
 
+    },
 
+    "node_modules/ms": {
 
+      "version": "2.1.3",
 
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/mz": {
 
+      "version": "2.7.0",
 
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
 
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "any-promise": "^1.0.0",
 
+        "object-assign": "^4.0.1",
 
+        "thenify-all": "^1.0.0"
 
+      }
 
+    },
 
+    "node_modules/nanoid": {
 
+      "version": "3.3.11",
 
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "bin": {
 
+        "nanoid": "bin/nanoid.cjs"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 
+      }
 
+    },
 
+    "node_modules/node-releases": {
 
+      "version": "2.0.27",
 
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
 
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/normalize-path": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/object-assign": {
 
+      "version": "4.1.1",
 
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/object-hash": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
 
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/path-parse": {
 
+      "version": "1.0.7",
 
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
 
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/picocolors": {
 
+      "version": "1.1.1",
 
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 
+      "dev": true,
 
+      "license": "ISC"
 
+    },
 
+    "node_modules/picomatch": {
 
+      "version": "2.3.1",
 
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=8.6"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/jonschlinkert"
 
+      }
 
+    },
 
+    "node_modules/pify": {
 
+      "version": "2.3.0",
 
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
 
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/pirates": {
 
+      "version": "4.0.7",
 
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
 
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 6"
 
+      }
 
+    },
 
+    "node_modules/postcss": {
 
+      "version": "8.5.6",
 
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
 
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/postcss/"
 
+        },
 
+        {
 
+          "type": "tidelift",
 
+          "url": "https://tidelift.com/funding/github/npm/postcss"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "nanoid": "^3.3.11",
 
+        "picocolors": "^1.1.1",
 
+        "source-map-js": "^1.2.1"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >=14"
 
+      }
 
+    },
 
+    "node_modules/postcss-import": {
 
+      "version": "15.1.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
 
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "postcss-value-parser": "^4.0.0",
 
+        "read-cache": "^1.0.0",
 
+        "resolve": "^1.1.7"
 
+      },
 
+      "engines": {
 
+        "node": ">=14.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.0.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-js": {
 
+      "version": "4.1.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
 
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/postcss/"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "camelcase-css": "^2.0.1"
 
+      },
 
+      "engines": {
 
+        "node": "^12 || ^14 || >= 16"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.4.21"
 
+      }
 
+    },
 
+    "node_modules/postcss-load-config": {
 
+      "version": "6.0.1",
 
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
 
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/postcss/"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "lilconfig": "^3.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 18"
 
+      },
 
+      "peerDependencies": {
 
+        "jiti": ">=1.21.0",
 
+        "postcss": ">=8.0.9",
 
+        "tsx": "^4.8.1",
 
+        "yaml": "^2.4.2"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "jiti": {
 
+          "optional": true
 
+        },
 
+        "postcss": {
 
+          "optional": true
 
+        },
 
+        "tsx": {
 
+          "optional": true
 
+        },
 
+        "yaml": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/postcss-nested": {
 
+      "version": "6.2.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
 
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/postcss/"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "postcss-selector-parser": "^6.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=12.0"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.2.14"
 
+      }
 
+    },
 
+    "node_modules/postcss-selector-parser": {
 
+      "version": "6.1.2",
 
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
 
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "cssesc": "^3.0.0",
 
+        "util-deprecate": "^1.0.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/postcss-value-parser": {
 
+      "version": "4.2.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/queue-microtask": {
 
+      "version": "1.2.3",
 
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
 
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/feross"
 
+        },
 
+        {
 
+          "type": "patreon",
 
+          "url": "https://www.patreon.com/feross"
 
+        },
 
+        {
 
+          "type": "consulting",
 
+          "url": "https://feross.org/support"
 
+        }
 
+      ],
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/react": {
 
+      "version": "18.3.1",
 
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
 
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "loose-envify": "^1.1.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/react-dom": {
 
+      "version": "18.3.1",
 
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
 
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "loose-envify": "^1.1.0",
 
+        "scheduler": "^0.23.2"
 
+      },
 
+      "peerDependencies": {
 
+        "react": "^18.3.1"
 
+      }
 
+    },
 
+    "node_modules/react-refresh": {
 
+      "version": "0.17.0",
 
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
 
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/react-router": {
 
+      "version": "6.30.2",
 
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
 
+      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@remix-run/router": "1.23.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=14.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "react": ">=16.8"
 
+      }
 
+    },
 
+    "node_modules/react-router-dom": {
 
+      "version": "6.30.2",
 
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
 
+      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@remix-run/router": "1.23.1",
 
+        "react-router": "6.30.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=14.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "react": ">=16.8",
 
+        "react-dom": ">=16.8"
 
+      }
 
+    },
 
+    "node_modules/read-cache": {
 
+      "version": "1.0.0",
 
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
 
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "pify": "^2.3.0"
 
+      }
 
+    },
 
+    "node_modules/readdirp": {
 
+      "version": "3.6.0",
 
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "picomatch": "^2.2.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=8.10.0"
 
+      }
 
+    },
 
+    "node_modules/resolve": {
 
+      "version": "1.22.11",
 
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
 
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "is-core-module": "^2.16.1",
 
+        "path-parse": "^1.0.7",
 
+        "supports-preserve-symlinks-flag": "^1.0.0"
 
+      },
 
+      "bin": {
 
+        "resolve": "bin/resolve"
 
+      },
 
+      "engines": {
 
+        "node": ">= 0.4"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/reusify": {
 
+      "version": "1.1.0",
 
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
 
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "iojs": ">=1.0.0",
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/rollup": {
 
+      "version": "4.54.0",
 
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
 
+      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@types/estree": "1.0.8"
 
+      },
 
+      "bin": {
 
+        "rollup": "dist/bin/rollup"
 
+      },
 
+      "engines": {
 
+        "node": ">=18.0.0",
 
+        "npm": ">=8.0.0"
 
+      },
 
+      "optionalDependencies": {
 
+        "@rollup/rollup-android-arm-eabi": "4.54.0",
 
+        "@rollup/rollup-android-arm64": "4.54.0",
 
+        "@rollup/rollup-darwin-arm64": "4.54.0",
 
+        "@rollup/rollup-darwin-x64": "4.54.0",
 
+        "@rollup/rollup-freebsd-arm64": "4.54.0",
 
+        "@rollup/rollup-freebsd-x64": "4.54.0",
 
+        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
 
+        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
 
+        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-arm64-musl": "4.54.0",
 
+        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
 
+        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-x64-gnu": "4.54.0",
 
+        "@rollup/rollup-linux-x64-musl": "4.54.0",
 
+        "@rollup/rollup-openharmony-arm64": "4.54.0",
 
+        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
 
+        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
 
+        "@rollup/rollup-win32-x64-gnu": "4.54.0",
 
+        "@rollup/rollup-win32-x64-msvc": "4.54.0",
 
+        "fsevents": "~2.3.2"
 
+      }
 
+    },
 
+    "node_modules/run-parallel": {
 
+      "version": "1.2.0",
 
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
 
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/feross"
 
+        },
 
+        {
 
+          "type": "patreon",
 
+          "url": "https://www.patreon.com/feross"
 
+        },
 
+        {
 
+          "type": "consulting",
 
+          "url": "https://feross.org/support"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "queue-microtask": "^1.2.2"
 
+      }
 
+    },
 
+    "node_modules/scheduler": {
 
+      "version": "0.23.2",
 
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
 
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "loose-envify": "^1.1.0"
 
+      }
 
+    },
 
+    "node_modules/semver": {
 
+      "version": "6.3.1",
 
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
 
+      "dev": true,
 
+      "license": "ISC",
 
+      "bin": {
 
+        "semver": "bin/semver.js"
 
+      }
 
+    },
 
+    "node_modules/source-map-js": {
 
+      "version": "1.2.1",
 
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
 
+      "dev": true,
 
+      "license": "BSD-3-Clause",
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
+    "node_modules/sucrase": {
 
+      "version": "3.35.1",
 
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
 
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@jridgewell/gen-mapping": "^0.3.2",
 
+        "commander": "^4.0.0",
 
+        "lines-and-columns": "^1.1.6",
 
+        "mz": "^2.7.0",
 
+        "pirates": "^4.0.1",
 
+        "tinyglobby": "^0.2.11",
 
+        "ts-interface-checker": "^0.1.9"
 
+      },
 
+      "bin": {
 
+        "sucrase": "bin/sucrase",
 
+        "sucrase-node": "bin/sucrase-node"
 
+      },
 
+      "engines": {
 
+        "node": ">=16 || 14 >=14.17"
 
+      }
 
+    },
 
+    "node_modules/supports-preserve-symlinks-flag": {
 
+      "version": "1.0.0",
 
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 0.4"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/ljharb"
 
+      }
 
+    },
 
+    "node_modules/tailwindcss": {
 
+      "version": "3.4.19",
 
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
 
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@alloc/quick-lru": "^5.2.0",
 
+        "arg": "^5.0.2",
 
+        "chokidar": "^3.6.0",
 
+        "didyoumean": "^1.2.2",
 
+        "dlv": "^1.1.3",
 
+        "fast-glob": "^3.3.2",
 
+        "glob-parent": "^6.0.2",
 
+        "is-glob": "^4.0.3",
 
+        "jiti": "^1.21.7",
 
+        "lilconfig": "^3.1.3",
 
+        "micromatch": "^4.0.8",
 
+        "normalize-path": "^3.0.0",
 
+        "object-hash": "^3.0.0",
 
+        "picocolors": "^1.1.1",
 
+        "postcss": "^8.4.47",
 
+        "postcss-import": "^15.1.0",
 
+        "postcss-js": "^4.0.1",
 
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
 
+        "postcss-nested": "^6.2.0",
 
+        "postcss-selector-parser": "^6.1.2",
 
+        "resolve": "^1.22.8",
 
+        "sucrase": "^3.35.0"
 
+      },
 
+      "bin": {
 
+        "tailwind": "lib/cli.js",
 
+        "tailwindcss": "lib/cli.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=14.0.0"
 
+      }
 
+    },
 
+    "node_modules/thenify": {
 
+      "version": "3.3.1",
 
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
 
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "any-promise": "^1.0.0"
 
+      }
 
+    },
 
+    "node_modules/thenify-all": {
 
+      "version": "1.6.0",
 
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
 
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "thenify": ">= 3.1.0 < 4"
 
+      },
 
+      "engines": {
 
+        "node": ">=0.8"
 
+      }
 
+    },
 
+    "node_modules/tinyglobby": {
 
+      "version": "0.2.15",
 
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
 
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "fdir": "^6.5.0",
 
+        "picomatch": "^4.0.3"
 
+      },
 
+      "engines": {
 
+        "node": ">=12.0.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/SuperchupuDev"
 
+      }
 
+    },
 
+    "node_modules/tinyglobby/node_modules/fdir": {
 
+      "version": "6.5.0",
 
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
 
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=12.0.0"
 
+      },
 
+      "peerDependencies": {
 
+        "picomatch": "^3 || ^4"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "picomatch": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/tinyglobby/node_modules/picomatch": {
 
+      "version": "4.0.3",
 
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "engines": {
 
+        "node": ">=12"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/jonschlinkert"
 
+      }
 
+    },
 
+    "node_modules/to-regex-range": {
 
+      "version": "5.0.1",
 
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "is-number": "^7.0.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=8.0"
 
+      }
 
+    },
 
+    "node_modules/ts-interface-checker": {
 
+      "version": "0.1.13",
 
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
 
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
 
+      "dev": true,
 
+      "license": "Apache-2.0"
 
+    },
 
+    "node_modules/typescript": {
 
+      "version": "5.9.3",
 
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
 
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
 
+      "dev": true,
 
+      "license": "Apache-2.0",
 
+      "bin": {
 
+        "tsc": "bin/tsc",
 
+        "tsserver": "bin/tsserver"
 
+      },
 
+      "engines": {
 
+        "node": ">=14.17"
 
+      }
 
+    },
 
+    "node_modules/update-browserslist-db": {
 
+      "version": "1.2.3",
 
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
 
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "opencollective",
 
+          "url": "https://opencollective.com/browserslist"
 
+        },
 
+        {
 
+          "type": "tidelift",
 
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
 
+        },
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/ai"
 
+        }
 
+      ],
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "escalade": "^3.2.0",
 
+        "picocolors": "^1.1.1"
 
+      },
 
+      "bin": {
 
+        "update-browserslist-db": "cli.js"
 
+      },
 
+      "peerDependencies": {
 
+        "browserslist": ">= 4.21.0"
 
+      }
 
+    },
 
+    "node_modules/util-deprecate": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 
+      "dev": true,
 
+      "license": "MIT"
 
+    },
 
+    "node_modules/vite": {
 
+      "version": "5.4.21",
 
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
 
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
 
+      "dev": true,
 
+      "license": "MIT",
 
+      "peer": true,
 
+      "dependencies": {
 
+        "esbuild": "^0.21.3",
 
+        "postcss": "^8.4.43",
 
+        "rollup": "^4.20.0"
 
+      },
 
+      "bin": {
 
+        "vite": "bin/vite.js"
 
+      },
 
+      "engines": {
 
+        "node": "^18.0.0 || >=20.0.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/vitejs/vite?sponsor=1"
 
+      },
 
+      "optionalDependencies": {
 
+        "fsevents": "~2.3.3"
 
+      },
 
+      "peerDependencies": {
 
+        "@types/node": "^18.0.0 || >=20.0.0",
 
+        "less": "*",
 
+        "lightningcss": "^1.21.0",
 
+        "sass": "*",
 
+        "sass-embedded": "*",
 
+        "stylus": "*",
 
+        "sugarss": "*",
 
+        "terser": "^5.4.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@types/node": {
 
+          "optional": true
 
+        },
 
+        "less": {
 
+          "optional": true
 
+        },
 
+        "lightningcss": {
 
+          "optional": true
 
+        },
 
+        "sass": {
 
+          "optional": true
 
+        },
 
+        "sass-embedded": {
 
+          "optional": true
 
+        },
 
+        "stylus": {
 
+          "optional": true
 
+        },
 
+        "sugarss": {
 
+          "optional": true
 
+        },
 
+        "terser": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/yallist": {
 
+      "version": "3.1.1",
 
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
 
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
 
+      "dev": true,
 
+      "license": "ISC"
 
+    }
 
+  }
 
+}

+ 28 - 0
package.json
Vizualizați fișierul 

@@ -0,0 +1,28 @@
 
+{
 
+  "name": "imagedrop",
 
+  "version": "1.0.0",
 
+  "description": "Image upload and sharing application powered by PicoBaaS",
 
+  "type": "module",
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "tsc && vite build",
 
+    "preview": "vite preview",
 
+    "deploy": "npm run build && ./deploy.sh"
 
+  },
 
+  "dependencies": {
 
+    "@picobaas/client": "file:../../sdk/typescript",
 
+    "react": "^18.2.0",
 
+    "react-dom": "^18.2.0",
 
+    "react-router-dom": "^6.20.0"
 
+  },
 
+  "devDependencies": {
 
+    "@types/react": "^18.2.0",
 
+    "@types/react-dom": "^18.2.0",
 
+    "@vitejs/plugin-react": "^4.2.0",
 
+    "autoprefixer": "^10.4.16",
 
+    "postcss": "^8.4.32",
 
+    "tailwindcss": "^3.3.6",
 
+    "typescript": "^5.3.0",
 
+    "vite": "^5.0.0"
 
+  }
 
+}

+ 6 - 0
postcss.config.js
Vizualizați fișierul 

@@ -0,0 +1,6 @@
 
+export default {
 
+  plugins: {
 
+    tailwindcss: {},
 
+    autoprefixer: {},
 
+  },
 
+}

+ 5 - 0
public/favicon.svg
Vizualizați fișierul 

@@ -0,0 +1,5 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 
+  <rect width="100" height="100" rx="20" fill="#3b82f6"/>
 
+  <path d="M25 65 L50 40 L65 55 L85 35" stroke="white" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
 
+  <circle cx="35" cy="35" r="8" fill="white"/>
 
+</svg>

+ 69 - 0
src/App.tsx
Vizualizați fișierul 

@@ -0,0 +1,69 @@
 
+import { Routes, Route, Navigate } from 'react-router-dom';
 
+import { useAuth } from '@picobaas/client/react';
 
+import Layout from './components/Layout';
 
+import HomePage from './pages/HomePage';
 
+import LoginPage from './pages/LoginPage';
 
+import RegisterPage from './pages/RegisterPage';
 
+import VerifyEmailPage from './pages/VerifyEmailPage';
 
+import DashboardPage from './pages/DashboardPage';
 
+import ImageDetailPage from './pages/ImageDetailPage';
 
+import SharedImagePage from './pages/SharedImagePage';
 
+
 
+// Protected route wrapper
 
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
 
+  const { isAuthenticated, isLoading } = useAuth();
 
+
 
+  if (isLoading) {
 
+    return (
 
+      <div className="min-h-screen flex items-center justify-center">
 
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  if (!isAuthenticated) {
 
+    return <Navigate to="/login" replace />;
 
+  }
 
+
 
+  return <>{children}</>;
 
+}
 
+
 
+function App() {
 
+  return (
 
+    <Routes>
 
+      {/* Public routes */}
 
+      <Route path="/" element={<Layout />}>
 
+        <Route index element={<HomePage />} />
 
+        <Route path="login" element={<LoginPage />} />
 
+        <Route path="register" element={<RegisterPage />} />
 
+        <Route path="verify-email" element={<VerifyEmailPage />} />
 
+
 
+        {/* Protected routes */}
 
+        <Route
 
+          path="dashboard"
 
+          element={
 
+            <ProtectedRoute>
 
+              <DashboardPage />
 
+            </ProtectedRoute>
 
+          }
 
+        />
 
+        <Route
 
+          path="image/:imageId"
 
+          element={
 
+            <ProtectedRoute>
 
+              <ImageDetailPage />
 
+            </ProtectedRoute>
 
+          }
 
+        />
 
+      </Route>
 
+
 
+      {/* Shared image view (no layout) */}
 
+      <Route path="s/:shareId" element={<SharedImagePage />} />
 
+
 
+      {/* Catch all */}
 
+      <Route path="*" element={<Navigate to="/" replace />} />
 
+    </Routes>
 
+  );
 
+}
 
+
 
+export default App;

+ 37 - 0
src/components/ExpirySelector.tsx
Vizualizați fișierul 

@@ -0,0 +1,37 @@
 
+import { EXPIRY_OPTIONS } from '../config';
 
+
 
+interface ExpirySelectorProps {
 
+  value: number;
 
+  onChange: (value: number) => void;
 
+  className?: string;
 
+}
 
+
 
+export default function ExpirySelector({
 
+  value,
 
+  onChange,
 
+  className = '',
 
+}: ExpirySelectorProps) {
 
+  return (
 
+    <div className={className}>
 
+      <label className="block text-sm font-medium text-gray-700 mb-2">
 
+        Expires after
 
+      </label>
 
+      <div className="flex flex-wrap gap-2">
 
+        {EXPIRY_OPTIONS.map((option) => (
 
+          <button
 
+            key={option.value}
 
+            type="button"
 
+            onClick={() => onChange(option.value)}
 
+            className={`px-3 py-1.5 text-sm rounded-full border transition-colors ${
 
+              value === option.value
 
+                ? 'bg-primary-600 text-white border-primary-600'
 
+                : 'bg-white text-gray-700 border-gray-300 hover:border-primary-400'
 
+            }`}
 
+          >
 
+            {option.label}
 
+          </button>
 
+        ))}
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 137 - 0
src/components/ImageCard.tsx
Vizualizați fișierul 

@@ -0,0 +1,137 @@
 
+import { useState } from 'react';
 
+import { Link } from 'react-router-dom';
 
+import type { ImageFile } from '../types';
 
+import { formatRelativeTime, formatExpiryStatus } from '../utils/formatters';
 
+import ShareModal from './ShareModal';
 
+
 
+interface ImageCardProps {
 
+  image: ImageFile;
 
+  onDelete?: (image: ImageFile) => void;
 
+  showActions?: boolean;
 
+}
 
+
 
+export default function ImageCard({
 
+  image,
 
+  onDelete,
 
+  showActions = true,
 
+}: ImageCardProps) {
 
+  const [showShareModal, setShowShareModal] = useState(false);
 
+  const [isDeleting, setIsDeleting] = useState(false);
 
+
 
+  const handleDelete = async () => {
 
+    if (!onDelete) return;
 
+    if (!confirm('Are you sure you want to delete this image?')) return;
 
+
 
+    setIsDeleting(true);
 
+    try {
 
+      await onDelete(image);
 
+    } finally {
 
+      setIsDeleting(false);
 
+    }
 
+  };
 
+
 
+  const expiryStatus = image.expiresAt
 
+    ? formatExpiryStatus(image.expiresAt)
 
+    : null;
 
+
 
+  return (
 
+    <>
 
+      <div className="card overflow-hidden group">
 
+        {/* Image */}
 
+        <Link to={`/image/${encodeURIComponent(image.path)}`}>
 
+          <div className="aspect-square bg-gray-100 relative overflow-hidden">
 
+            <img
 
+              src={image.url}
 
+              alt={image.name}
 
+              className="w-full h-full object-cover transition-transform group-hover:scale-105"
 
+              loading="lazy"
 
+            />
 
+
 
+            {/* Expiry badge */}
 
+            {expiryStatus && (
 
+              <div
 
+                className={`absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-medium ${
 
+                  expiryStatus.isExpired
 
+                    ? 'bg-red-100 text-red-700'
 
+                    : expiryStatus.isExpiringSoon
 
+                    ? 'bg-yellow-100 text-yellow-700'
 
+                    : 'bg-gray-100 text-gray-600'
 
+                }`}
 
+              >
 
+                {expiryStatus.label}
 
+              </div>
 
+            )}
 
+          </div>
 
+        </Link>
 
+
 
+        {/* Info */}
 
+        <div className="p-3">
 
+          <p className="font-medium text-gray-900 truncate" title={image.name}>
 
+            {image.name}
 
+          </p>
 
+          <p className="text-sm text-gray-500">
 
+            {formatRelativeTime(image.createdAt)}
 
+          </p>
 
+
 
+          {/* Actions */}
 
+          {showActions && (
 
+            <div className="flex gap-2 mt-3">
 
+              <button
 
+                onClick={() => setShowShareModal(true)}
 
+                className="flex-1 btn btn-secondary text-sm py-1.5 flex items-center justify-center gap-1"
 
+              >
 
+                <svg
 
+                  className="h-4 w-4"
 
+                  fill="none"
 
+                  viewBox="0 0 24 24"
 
+                  stroke="currentColor"
 
+                >
 
+                  <path
 
+                    strokeLinecap="round"
 
+                    strokeLinejoin="round"
 
+                    strokeWidth={2}
 
+                    d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
 
+                  />
 
+                </svg>
 
+                Share
 
+              </button>
 
+              {onDelete && (
 
+                <button
 
+                  onClick={handleDelete}
 
+                  disabled={isDeleting}
 
+                  className="btn btn-danger text-sm py-1.5 px-3"
 
+                  title="Delete"
 
+                >
 
+                  {isDeleting ? (
 
+                    <span className="animate-spin">...</span>
 
+                  ) : (
 
+                    <svg
 
+                      className="h-4 w-4"
 
+                      fill="none"
 
+                      viewBox="0 0 24 24"
 
+                      stroke="currentColor"
 
+                    >
 
+                      <path
 
+                        strokeLinecap="round"
 
+                        strokeLinejoin="round"
 
+                        strokeWidth={2}
 
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 
+                      />
 
+                    </svg>
 
+                  )}
 
+                </button>
 
+              )}
 
+            </div>
 
+          )}
 
+        </div>
 
+      </div>
 
+
 
+      {/* Share Modal */}
 
+      <ShareModal
 
+        isOpen={showShareModal}
 
+        onClose={() => setShowShareModal(false)}
 
+        image={image}
 
+      />
 
+    </>
 
+  );
 
+}

+ 63 - 0
src/components/ImageGrid.tsx
Vizualizați fișierul 

@@ -0,0 +1,63 @@
 
+import type { ImageFile } from '../types';
 
+import ImageCard from './ImageCard';
 
+import LoadingSpinner from './LoadingSpinner';
 
+
 
+interface ImageGridProps {
 
+  images: ImageFile[];
 
+  onDelete?: (image: ImageFile) => void;
 
+  isLoading?: boolean;
 
+  emptyMessage?: string;
 
+  showActions?: boolean;
 
+}
 
+
 
+export default function ImageGrid({
 
+  images,
 
+  onDelete,
 
+  isLoading = false,
 
+  emptyMessage = 'No images yet',
 
+  showActions = true,
 
+}: ImageGridProps) {
 
+  if (isLoading) {
 
+    return (
 
+      <div className="flex items-center justify-center py-12">
 
+        <LoadingSpinner size="lg" />
 
+      </div>
 
+    );
 
+  }
 
+
 
+  if (images.length === 0) {
 
+    return (
 
+      <div className="text-center py-12">
 
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
 
+          <svg
 
+            className="h-8 w-8 text-gray-400"
 
+            fill="none"
 
+            viewBox="0 0 24 24"
 
+            stroke="currentColor"
 
+          >
 
+            <path
 
+              strokeLinecap="round"
 
+              strokeLinejoin="round"
 
+              strokeWidth={2}
 
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
 
+            />
 
+          </svg>
 
+        </div>
 
+        <p className="text-gray-500">{emptyMessage}</p>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  return (
 
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
 
+      {images.map((image) => (
 
+        <ImageCard
 
+          key={image.id}
 
+          image={image}
 
+          onDelete={onDelete}
 
+          showActions={showActions}
 
+        />
 
+      ))}
 
+    </div>
 
+  );
 
+}

+ 250 - 0
src/components/ImageUploader.tsx
Vizualizați fișierul 

@@ -0,0 +1,250 @@
 
+import { useState, useCallback, useRef } from 'react';
 
+import ExpirySelector from './ExpirySelector';
 
+import LoadingSpinner from './LoadingSpinner';
 
+
 
+interface ImageUploaderProps {
 
+  onUpload: (file: File, expirySeconds: number) => Promise<void>;
 
+  isUploading?: boolean;
 
+  showExpiry?: boolean;
 
+  compact?: boolean;
 
+}
 
+
 
+export default function ImageUploader({
 
+  onUpload,
 
+  isUploading = false,
 
+  showExpiry = true,
 
+  compact = false,
 
+}: ImageUploaderProps) {
 
+  const [dragActive, setDragActive] = useState(false);
 
+  const [preview, setPreview] = useState<string | null>(null);
 
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
+  const [expirySeconds, setExpirySeconds] = useState(86400); // Default 24h
 
+  const [error, setError] = useState<string | null>(null);
 
+  const inputRef = useRef<HTMLInputElement>(null);
 
+
 
+  const handleDrag = useCallback((e: React.DragEvent) => {
 
+    e.preventDefault();
 
+    e.stopPropagation();
 
+    if (e.type === 'dragenter' || e.type === 'dragover') {
 
+      setDragActive(true);
 
+    } else if (e.type === 'dragleave') {
 
+      setDragActive(false);
 
+    }
 
+  }, []);
 
+
 
+  const validateFile = (file: File): boolean => {
 
+    setError(null);
 
+
 
+    if (!file.type.startsWith('image/')) {
 
+      setError('Please select an image file (PNG, JPG, GIF, WebP)');
 
+      return false;
 
+    }
 
+
 
+    const maxSize = 10 * 1024 * 1024; // 10MB
 
+    if (file.size > maxSize) {
 
+      setError('File size must be less than 10MB');
 
+      return false;
 
+    }
 
+
 
+    return true;
 
+  };
 
+
 
+  const handleFile = useCallback((file: File) => {
 
+    if (!validateFile(file)) return;
 
+
 
+    setSelectedFile(file);
 
+
 
+    // Create preview
 
+    const reader = new FileReader();
 
+    reader.onload = (e) => {
 
+      setPreview(e.target?.result as string);
 
+    };
 
+    reader.readAsDataURL(file);
 
+  }, []);
 
+
 
+  const handleDrop = useCallback(
 
+    (e: React.DragEvent) => {
 
+      e.preventDefault();
 
+      e.stopPropagation();
 
+      setDragActive(false);
 
+
 
+      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
 
+        handleFile(e.dataTransfer.files[0]);
 
+      }
 
+    },
 
+    [handleFile]
 
+  );
 
+
 
+  const handleChange = useCallback(
 
+    (e: React.ChangeEvent<HTMLInputElement>) => {
 
+      if (e.target.files && e.target.files[0]) {
 
+        handleFile(e.target.files[0]);
 
+      }
 
+    },
 
+    [handleFile]
 
+  );
 
+
 
+  const handleUpload = async () => {
 
+    if (!selectedFile) return;
 
+
 
+    try {
 
+      await onUpload(selectedFile, expirySeconds);
 
+      // Reset after successful upload
 
+      setSelectedFile(null);
 
+      setPreview(null);
 
+      if (inputRef.current) {
 
+        inputRef.current.value = '';
 
+      }
 
+    } catch (err) {
 
+      setError(err instanceof Error ? err.message : 'Upload failed');
 
+    }
 
+  };
 
+
 
+  const handleClear = () => {
 
+    setSelectedFile(null);
 
+    setPreview(null);
 
+    setError(null);
 
+    if (inputRef.current) {
 
+      inputRef.current.value = '';
 
+    }
 
+  };
 
+
 
+  return (
 
+    <div className="w-full">
 
+      {/* Drop zone */}
 
+      <div
 
+        onDragEnter={handleDrag}
 
+        onDragLeave={handleDrag}
 
+        onDragOver={handleDrag}
 
+        onDrop={handleDrop}
 
+        onClick={() => inputRef.current?.click()}
 
+        className={`relative border-2 border-dashed rounded-xl transition-colors cursor-pointer ${
 
+          compact ? 'p-6' : 'p-12'
 
+        } ${
 
+          dragActive
 
+            ? 'border-primary-500 bg-primary-50'
 
+            : preview
 
+            ? 'border-gray-300 bg-gray-50'
 
+            : 'border-gray-300 hover:border-primary-400 hover:bg-gray-50'
 
+        }`}
 
+      >
 
+        <input
 
+          ref={inputRef}
 
+          type="file"
 
+          accept="image/*"
 
+          onChange={handleChange}
 
+          className="hidden"
 
+          disabled={isUploading}
 
+        />
 
+
 
+        {preview ? (
 
+          <div className="flex flex-col items-center gap-4">
 
+            <img
 
+              src={preview}
 
+              alt="Preview"
 
+              className="max-h-64 rounded-lg shadow-md"
 
+            />
 
+            <p className="text-sm text-gray-600">{selectedFile?.name}</p>
 
+            <p className="text-xs text-gray-500">
 
+              {selectedFile && formatFileSize(selectedFile.size)}
 
+            </p>
 
+          </div>
 
+        ) : (
 
+          <div className="flex flex-col items-center gap-4 text-center">
 
+            <div className="p-4 bg-primary-100 rounded-full">
 
+              <svg
 
+                className="h-8 w-8 text-primary-600"
 
+                fill="none"
 
+                viewBox="0 0 24 24"
 
+                stroke="currentColor"
 
+              >
 
+                <path
 
+                  strokeLinecap="round"
 
+                  strokeLinejoin="round"
 
+                  strokeWidth={2}
 
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
 
+                />
 
+              </svg>
 
+            </div>
 
+            <div>
 
+              <p className="text-lg font-medium text-gray-900">
 
+                Drop your image here
 
+              </p>
 
+              <p className="text-sm text-gray-500">
 
+                or click to browse (max 10MB)
 
+              </p>
 
+            </div>
 
+          </div>
 
+        )}
 
+      </div>
 
+
 
+      {/* Error message */}
 
+      {error && (
 
+        <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
 
+          <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
 
+            <path
 
+              fillRule="evenodd"
 
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
 
+              clipRule="evenodd"
 
+            />
 
+          </svg>
 
+          {error}
 
+        </p>
 
+      )}
 
+
 
+      {/* Expiry selector and upload button */}
 
+      {selectedFile && (
 
+        <div className="mt-6 space-y-4">
 
+          {showExpiry && (
 
+            <ExpirySelector value={expirySeconds} onChange={setExpirySeconds} />
 
+          )}
 
+
 
+          <div className="flex gap-3">
 
+            <button
 
+              onClick={handleUpload}
 
+              disabled={isUploading}
 
+              className="btn btn-primary flex-1 flex items-center justify-center gap-2"
 
+            >
 
+              {isUploading ? (
 
+                <>
 
+                  <LoadingSpinner size="sm" />
 
+                  Uploading...
 
+                </>
 
+              ) : (
 
+                <>
 
+                  <svg
 
+                    className="h-5 w-5"
 
+                    fill="none"
 
+                    viewBox="0 0 24 24"
 
+                    stroke="currentColor"
 
+                  >
 
+                    <path
 
+                      strokeLinecap="round"
 
+                      strokeLinejoin="round"
 
+                      strokeWidth={2}
 
+                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
 
+                    />
 
+                  </svg>
 
+                  Upload Image
 
+                </>
 
+              )}
 
+            </button>
 
+            <button
 
+              onClick={handleClear}
 
+              disabled={isUploading}
 
+              className="btn btn-secondary"
 
+            >
 
+              Clear
 
+            </button>
 
+          </div>
 
+        </div>
 
+      )}
 
+    </div>
 
+  );
 
+}
 
+
 
+function formatFileSize(bytes: number): string {
 
+  if (bytes < 1024) return bytes + ' B';
 
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+}

+ 30 - 0
src/components/Layout.tsx
Vizualizați fișierul 

@@ -0,0 +1,30 @@
 
+import { Outlet } from 'react-router-dom';
 
+import Navbar from './Navbar';
 
+
 
+export default function Layout() {
 
+  return (
 
+    <div className="min-h-screen flex flex-col">
 
+      <Navbar />
 
+      <main className="flex-1">
 
+        <Outlet />
 
+      </main>
 
+      <footer className="bg-white border-t border-gray-200 py-6">
 
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
 
+            <p className="text-gray-500 text-sm">
 
+              ImageDrop - Powered by PicoBaaS
 
+            </p>
 
+            <div className="flex gap-6 text-sm text-gray-500">
 
+              <a href="https://github.com" className="hover:text-gray-900">
 
+                GitHub
 
+              </a>
 
+              <a href="/docs" className="hover:text-gray-900">
 
+                API Docs
 
+              </a>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </footer>
 
+    </div>
 
+  );
 
+}

+ 21 - 0
src/components/LoadingSpinner.tsx
Vizualizați fișierul 

@@ -0,0 +1,21 @@
 
+interface LoadingSpinnerProps {
 
+  size?: 'sm' | 'md' | 'lg';
 
+  className?: string;
 
+}
 
+
 
+const sizeClasses = {
 
+  sm: 'h-4 w-4 border-2',
 
+  md: 'h-8 w-8 border-2',
 
+  lg: 'h-12 w-12 border-3',
 
+};
 
+
 
+export default function LoadingSpinner({
 
+  size = 'md',
 
+  className = '',
 
+}: LoadingSpinnerProps) {
 
+  return (
 
+    <div
 
+      className={`animate-spin rounded-full border-primary-600 border-t-transparent ${sizeClasses[size]} ${className}`}
 
+    />
 
+  );
 
+}

+ 163 - 0
src/components/Navbar.tsx
Vizualizați fișierul 

@@ -0,0 +1,163 @@
 
+import { Link, useNavigate } from 'react-router-dom';
 
+import { useAuth } from '@picobaas/client/react';
 
+import { useState } from 'react';
 
+
 
+export default function Navbar() {
 
+  const { isAuthenticated, logout } = useAuth();
 
+  const navigate = useNavigate();
 
+  const [menuOpen, setMenuOpen] = useState(false);
 
+
 
+  const handleLogout = async () => {
 
+    await logout();
 
+    navigate('/');
 
+  };
 
+
 
+  return (
 
+    <nav className="bg-white shadow-sm border-b border-gray-200">
 
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
+        <div className="flex justify-between h-16">
 
+          {/* Logo */}
 
+          <div className="flex items-center">
 
+            <Link to="/" className="flex items-center gap-2">
 
+              <svg
 
+                className="h-8 w-8 text-primary-600"
 
+                viewBox="0 0 100 100"
 
+                fill="currentColor"
 
+              >
 
+                <rect width="100" height="100" rx="20" />
 
+                <path
 
+                  d="M25 65 L50 40 L65 55 L85 35"
 
+                  stroke="white"
 
+                  strokeWidth="6"
 
+                  fill="none"
 
+                  strokeLinecap="round"
 
+                  strokeLinejoin="round"
 
+                />
 
+                <circle cx="35" cy="35" r="8" fill="white" />
 
+              </svg>
 
+              <span className="text-xl font-bold text-gray-900">ImageDrop</span>
 
+            </Link>
 
+          </div>
 
+
 
+          {/* Desktop menu */}
 
+          <div className="hidden md:flex items-center gap-4">
 
+            <Link
 
+              to="/"
 
+              className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
 
+            >
 
+              Upload
 
+            </Link>
 
+            {isAuthenticated ? (
 
+              <>
 
+                <Link
 
+                  to="/dashboard"
 
+                  className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
 
+                >
 
+                  My Images
 
+                </Link>
 
+                <button
 
+                  onClick={handleLogout}
 
+                  className="btn btn-secondary text-sm"
 
+                >
 
+                  Logout
 
+                </button>
 
+              </>
 
+            ) : (
 
+              <>
 
+                <Link to="/login" className="btn btn-secondary text-sm">
 
+                  Login
 
+                </Link>
 
+                <Link to="/register" className="btn btn-primary text-sm">
 
+                  Sign Up
 
+                </Link>
 
+              </>
 
+            )}
 
+          </div>
 
+
 
+          {/* Mobile menu button */}
 
+          <div className="md:hidden flex items-center">
 
+            <button
 
+              onClick={() => setMenuOpen(!menuOpen)}
 
+              className="text-gray-600 hover:text-gray-900 p-2"
 
+            >
 
+              <svg
 
+                className="h-6 w-6"
 
+                fill="none"
 
+                viewBox="0 0 24 24"
 
+                stroke="currentColor"
 
+              >
 
+                {menuOpen ? (
 
+                  <path
 
+                    strokeLinecap="round"
 
+                    strokeLinejoin="round"
 
+                    strokeWidth={2}
 
+                    d="M6 18L18 6M6 6l12 12"
 
+                  />
 
+                ) : (
 
+                  <path
 
+                    strokeLinecap="round"
 
+                    strokeLinejoin="round"
 
+                    strokeWidth={2}
 
+                    d="M4 6h16M4 12h16M4 18h16"
 
+                  />
 
+                )}
 
+              </svg>
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      {/* Mobile menu */}
 
+      {menuOpen && (
 
+        <div className="md:hidden border-t border-gray-200 bg-white">
 
+          <div className="px-4 py-3 space-y-2">
 
+            <Link
 
+              to="/"
 
+              className="block px-3 py-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"
 
+              onClick={() => setMenuOpen(false)}
 
+            >
 
+              Upload
 
+            </Link>
 
+            {isAuthenticated ? (
 
+              <>
 
+                <Link
 
+                  to="/dashboard"
 
+                  className="block px-3 py-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"
 
+                  onClick={() => setMenuOpen(false)}
 
+                >
 
+                  My Images
 
+                </Link>
 
+                <button
 
+                  onClick={() => {
 
+                    handleLogout();
 
+                    setMenuOpen(false);
 
+                  }}
 
+                  className="block w-full text-left px-3 py-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"
 
+                >
 
+                  Logout
 
+                </button>
 
+              </>
 
+            ) : (
 
+              <>
 
+                <Link
 
+                  to="/login"
 
+                  className="block px-3 py-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"
 
+                  onClick={() => setMenuOpen(false)}
 
+                >
 
+                  Login
 
+                </Link>
 
+                <Link
 
+                  to="/register"
 
+                  className="block px-3 py-2 rounded-md text-primary-600 hover:text-primary-700 hover:bg-gray-50"
 
+                  onClick={() => setMenuOpen(false)}
 
+                >
 
+                  Sign Up
 
+                </Link>
 
+              </>
 
+            )}
 
+          </div>
 
+        </div>
 
+      )}
 
+    </nav>
 
+  );
 
+}

+ 188 - 0
src/components/ShareModal.tsx
Vizualizați fișierul 

@@ -0,0 +1,188 @@
 
+import { useState, useEffect } from 'react';
 
+import { useBaaS } from '@picobaas/client/react';
 
+import type { ImageFile } from '../types';
 
+import { EXPIRY_OPTIONS, PUBLIC_BUCKET } from '../config';
 
+import LoadingSpinner from './LoadingSpinner';
 
+
 
+interface ShareModalProps {
 
+  isOpen: boolean;
 
+  onClose: () => void;
 
+  image: ImageFile;
 
+}
 
+
 
+export default function ShareModal({ isOpen, onClose, image }: ShareModalProps) {
 
+  const { client } = useBaaS();
 
+  const [shareUrl, setShareUrl] = useState<string | null>(null);
 
+  const [expiresIn, setExpiresIn] = useState(86400); // 24h default
 
+  const [isGenerating, setIsGenerating] = useState(false);
 
+  const [copied, setCopied] = useState(false);
 
+  const [error, setError] = useState<string | null>(null);
 
+
 
+  useEffect(() => {
 
+    if (isOpen) {
 
+      generateShareUrl();
 
+    }
 
+  }, [isOpen, expiresIn]);
 
+
 
+  const generateShareUrl = async () => {
 
+    setIsGenerating(true);
 
+    setError(null);
 
+
 
+    try {
 
+      const bucket = client.storage.from(PUBLIC_BUCKET);
 
+
 
+      if (image.isPublic) {
 
+        // Public images: prefer alias URL if available, otherwise direct URL
 
+        if (image.aliasUrl) {
 
+          setShareUrl(image.aliasUrl);
 
+        } else {
 
+          const url = bucket.getPublicUrl(image.path).data.publicUrl;
 
+          setShareUrl(url);
 
+        }
 
+      } else {
 
+        // Private images get a signed URL
 
+        const { data, error: signError } = await bucket.createSignedUrl(
 
+          image.path,
 
+          expiresIn
 
+        );
 
+
 
+        if (signError) throw signError;
 
+        setShareUrl(data?.signedUrl || null);
 
+      }
 
+    } catch (err) {
 
+      setError(err instanceof Error ? err.message : 'Failed to generate link');
 
+    } finally {
 
+      setIsGenerating(false);
 
+    }
 
+  };
 
+
 
+  const copyToClipboard = async () => {
 
+    if (!shareUrl) return;
 
+
 
+    try {
 
+      await navigator.clipboard.writeText(shareUrl);
 
+      setCopied(true);
 
+      setTimeout(() => setCopied(false), 2000);
 
+    } catch {
 
+      // Fallback for older browsers
 
+      const textarea = document.createElement('textarea');
 
+      textarea.value = shareUrl;
 
+      document.body.appendChild(textarea);
 
+      textarea.select();
 
+      document.execCommand('copy');
 
+      document.body.removeChild(textarea);
 
+      setCopied(true);
 
+      setTimeout(() => setCopied(false), 2000);
 
+    }
 
+  };
 
+
 
+  if (!isOpen) return null;
 
+
 
+  return (
 
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
 
+      {/* Backdrop */}
 
+      <div
 
+        className="absolute inset-0 bg-black/50"
 
+        onClick={onClose}
 
+      />
 
+
 
+      {/* Modal */}
 
+      <div className="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
 
+        {/* Header */}
 
+        <div className="flex items-center justify-between mb-4">
 
+          <h3 className="text-lg font-semibold text-gray-900">Share Image</h3>
 
+          <button
 
+            onClick={onClose}
 
+            className="text-gray-400 hover:text-gray-600"
 
+          >
 
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
 
+            </svg>
 
+          </button>
 
+        </div>
 
+
 
+        {/* Image preview */}
 
+        <div className="mb-4">
 
+          <img
 
+            src={image.url}
 
+            alt={image.name}
 
+            className="w-full h-32 object-cover rounded-lg"
 
+          />
 
+        </div>
 
+
 
+        {/* Link expiry selector (for signed URLs) */}
 
+        {!image.isPublic && (
 
+          <div className="mb-4">
 
+            <label className="block text-sm font-medium text-gray-700 mb-2">
 
+              Link expires in
 
+            </label>
 
+            <select
 
+              value={expiresIn}
 
+              onChange={(e) => setExpiresIn(Number(e.target.value))}
 
+              className="input"
 
+            >
 
+              {EXPIRY_OPTIONS.filter(o => o.value > 0).map((option) => (
 
+                <option key={option.value} value={option.value}>
 
+                  {option.label}
 
+                </option>
 
+              ))}
 
+            </select>
 
+          </div>
 
+        )}
 
+
 
+        {/* Share URL */}
 
+        <div className="mb-4">
 
+          <label className="block text-sm font-medium text-gray-700 mb-2">
 
+            Share link
 
+          </label>
 
+          {isGenerating ? (
 
+            <div className="flex items-center justify-center h-10 bg-gray-100 rounded-lg">
 
+              <LoadingSpinner size="sm" />
 
+            </div>
 
+          ) : error ? (
 
+            <p className="text-sm text-red-600">{error}</p>
 
+          ) : (
 
+            <div className="flex gap-2">
 
+              <input
 
+                type="text"
 
+                value={shareUrl || ''}
 
+                readOnly
 
+                className="input flex-1 bg-gray-50 text-sm"
 
+              />
 
+              <button
 
+                onClick={copyToClipboard}
 
+                className={`btn ${copied ? 'btn-primary' : 'btn-secondary'} whitespace-nowrap`}
 
+              >
 
+                {copied ? (
 
+                  <>
 
+                    <svg className="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
 
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
 
+                    </svg>
 
+                    Copied!
 
+                  </>
 
+                ) : (
 
+                  'Copy'
 
+                )}
 
+              </button>
 
+            </div>
 
+          )}
 
+        </div>
 
+
 
+        {/* Direct download link */}
 
+        {shareUrl && (
 
+          <a
 
+            href={shareUrl}
 
+            target="_blank"
 
+            rel="noopener noreferrer"
 
+            className="btn btn-secondary w-full flex items-center justify-center gap-2"
 
+          >
 
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 
+            </svg>
 
+            Open in new tab
 
+          </a>
 
+        )}
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 61 - 0
src/config.ts
Vizualizați fișierul 

@@ -0,0 +1,61 @@
 
+import type { BaaSClientConfig } from '@picobaas/client';
 
+
 
+// When served from the backend's public folder, API is on the same origin
 
+const isSecure = window.location.protocol === 'https:';
 
+const defaultPort = isSecure ? 443 : 80;
 
+const currentPort = window.location.port ? parseInt(window.location.port) : defaultPort;
 
+
 
+export const config: BaaSClientConfig = {
 
+  // Use the same host/port as the current page (backend serves both static files and API)
 
+  apiHost: window.location.hostname,
 
+  apiPort: currentPort,
 
+  wsHost: window.location.hostname,
 
+  wsPort: currentPort, // WebSocket on same port as API
 
+  secure: isSecure,
 
+  autoRefresh: true,
 
+  storageKey: 'imagedrop_auth',
 
+};
 
+
 
+// Bucket names
 
+export const PUBLIC_BUCKET = 'public-images';
 
+export const USER_BUCKET = 'user-images';
 
+
 
+// Expiry options
 
+export const EXPIRY_OPTIONS = [
 
+  { label: '5 minutes', value: 300 },
 
+  { label: '15 minutes', value: 900 },
 
+  { label: '30 minutes', value: 1800 },
 
+  { label: '1 hour', value: 3600 },
 
+  { label: '24 hours', value: 86400 },
 
+  { label: '7 days', value: 604800 },
 
+  { label: '30 days', value: 2592000 },
 
+  { label: 'Never', value: 0 },
 
+] as const;
 
+
 
+// Generate UUID with fallback for non-secure contexts
 
+export function generateUUID(): string {
 
+  // Try native crypto.randomUUID first (requires secure context)
 
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
 
+    return crypto.randomUUID();
 
+  }
 
+
 
+  // Fallback using crypto.getRandomValues (works in non-secure contexts)
 
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
 
+    const bytes = new Uint8Array(16);
 
+    crypto.getRandomValues(bytes);
 
+
 
+    // Set version (4) and variant (8, 9, a, or b)
 
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
 
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
 
+
 
+    const hex = Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
 
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
 
+  }
 
+
 
+  // Last resort fallback using Math.random (less secure but works everywhere)
 
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
 
+    const r = (Math.random() * 16) | 0;
 
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
 
+    return v.toString(16);
 
+  });
 
+}

+ 153 - 0
src/hooks/useImages.ts
Vizualizați fișierul 

@@ -0,0 +1,153 @@
 
+import { useState, useCallback, useEffect } from 'react';
 
+import { useBaaS, useAuth } from '@picobaas/client/react';
 
+import type { ImageFile } from '../types';
 
+import { PUBLIC_BUCKET, USER_BUCKET, generateUUID } from '../config';
 
+import { getExpiryFromMetadata } from '../utils/expiry';
 
+import type { FileMetadata } from '@picobaas/client';
 
+
 
+export function useImages(bucket: string = PUBLIC_BUCKET) {
 
+  const { client } = useBaaS();
 
+  const { userId, isAuthenticated } = useAuth();
 
+  const [images, setImages] = useState<ImageFile[]>([]);
 
+  const [isLoading, setIsLoading] = useState(false);
 
+  const [error, setError] = useState<string | null>(null);
 
+
 
+  const fetchImages = useCallback(async () => {
 
+    setIsLoading(true);
 
+    setError(null);
 
+
 
+    try {
 
+      const storage = client.storage.from(bucket);
 
+      const prefix = bucket === USER_BUCKET && userId ? `${userId}/` : '';
 
+
 
+      const { data, error: listError } = await storage.list(prefix, {
 
+        limit: 100,
 
+      });
 
+
 
+      if (listError) throw listError;
 
+
 
+      const imageFiles: ImageFile[] = (data || []).map((file: FileMetadata) => ({
 
+        id: file.id,
 
+        path: file.path,
 
+        name: file.filename || file.path.split('/').pop() || 'Unknown',
 
+        size: file.size,
 
+        mimeType: file.mime_type,
 
+        url: storage.getPublicUrl(file.path).data.publicUrl,
 
+        createdAt: new Date(file.created_at),
 
+        expiresAt: getExpiryFromMetadata(file.custom_metadata),
 
+        isPublic: bucket === PUBLIC_BUCKET,
 
+        ownerId: file.owner_id,
 
+      }));
 
+
 
+      // Sort by created date, newest first
 
+      imageFiles.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 
+
 
+      setImages(imageFiles);
 
+    } catch (err) {
 
+      setError(err instanceof Error ? err.message : 'Failed to load images');
 
+    } finally {
 
+      setIsLoading(false);
 
+    }
 
+  }, [client, bucket, userId]);
 
+
 
+  const uploadImage = useCallback(
 
+    async (file: File, expirySeconds: number): Promise<ImageFile | null> => {
 
+      try {
 
+        const storage = client.storage.from(bucket);
 
+
 
+        // Generate unique filename
 
+        const ext = file.name.split('.').pop() || 'jpg';
 
+        const uniqueId = generateUUID();
 
+        const prefix = bucket === USER_BUCKET && userId ? `${userId}/` : '';
 
+        const path = `${prefix}${uniqueId}.${ext}`;
 
+
 
+        // Calculate expiry
 
+        const expiresAt =
 
+          expirySeconds > 0
 
+            ? new Date(Date.now() + expirySeconds * 1000).toISOString()
 
+            : undefined;
 
+
 
+        // Upload
 
+        const { data, error: uploadError } = await storage.upload(path, file, {
 
+          contentType: file.type,
 
+          metadata: expiresAt ? { expires_at: expiresAt } : undefined,
 
+        });
 
+
 
+        if (uploadError) throw uploadError;
 
+
 
+        // Create a short URL alias for the uploaded file
 
+        let aliasId: string | undefined;
 
+        let aliasUrl: string | undefined;
 
+        try {
 
+          const aliasResult = await storage.createAlias(path, expiresAt);
 
+          if (aliasResult.data) {
 
+            aliasId = aliasResult.data.id;
 
+            aliasUrl = aliasResult.data.url;
 
+          }
 
+        } catch (aliasErr) {
 
+          // Alias creation failed, but upload succeeded - continue without alias
 
+          console.warn('Failed to create alias:', aliasErr);
 
+        }
 
+
 
+        const newImage: ImageFile = {
 
+          id: data?.id || uniqueId,
 
+          path: path,
 
+          name: file.name,
 
+          size: file.size,
 
+          mimeType: file.type,
 
+          url: storage.getPublicUrl(path).data.publicUrl,
 
+          createdAt: new Date(),
 
+          expiresAt: expiresAt ? new Date(expiresAt) : undefined,
 
+          isPublic: bucket === PUBLIC_BUCKET,
 
+          ownerId: userId || undefined,
 
+          aliasId,
 
+          aliasUrl,
 
+        };
 
+
 
+        setImages((prev) => [newImage, ...prev]);
 
+        return newImage;
 
+      } catch (err) {
 
+        throw new Error(
 
+          err instanceof Error ? err.message : 'Upload failed'
 
+        );
 
+      }
 
+    },
 
+    [client, bucket, userId]
 
+  );
 
+
 
+  const deleteImage = useCallback(
 
+    async (image: ImageFile): Promise<void> => {
 
+      try {
 
+        const storage = client.storage.from(bucket);
 
+        const { error: deleteError } = await storage.remove([image.path]);
 
+
 
+        if (deleteError) throw deleteError;
 
+
 
+        setImages((prev) => prev.filter((img) => img.id !== image.id));
 
+      } catch (err) {
 
+        throw new Error(
 
+          err instanceof Error ? err.message : 'Delete failed'
 
+        );
 
+      }
 
+    },
 
+    [client, bucket]
 
+  );
 
+
 
+  // Auto-fetch when authenticated for user bucket
 
+  useEffect(() => {
 
+    if (bucket === USER_BUCKET && isAuthenticated) {
 
+      fetchImages();
 
+    } else if (bucket === PUBLIC_BUCKET) {
 
+      fetchImages();
 
+    }
 
+  }, [bucket, isAuthenticated, fetchImages]);
 
+
 
+  return {
 
+    images,
 
+    isLoading,
 
+    error,
 
+    fetchImages,
 
+    uploadImage,
 
+    deleteImage,
 
+  };
 
+}

+ 72 - 0
src/hooks/useShare.ts
Vizualizați fișierul 

@@ -0,0 +1,72 @@
 
+import { useState, useCallback } from 'react';
 
+import { useBaaS } from '@picobaas/client/react';
 
+import type { ImageFile, ShareOptions } from '../types';
 
+import { PUBLIC_BUCKET } from '../config';
 
+
 
+export function useShare() {
 
+  const { client } = useBaaS();
 
+  const [isGenerating, setIsGenerating] = useState(false);
 
+  const [error, setError] = useState<string | null>(null);
 
+
 
+  const generateShareUrl = useCallback(
 
+    async (
 
+      image: ImageFile,
 
+      options: ShareOptions = { expiresIn: 86400 }
 
+    ): Promise<string | null> => {
 
+      setIsGenerating(true);
 
+      setError(null);
 
+
 
+      try {
 
+        const bucket = client.storage.from(
 
+          image.isPublic ? PUBLIC_BUCKET : 'user-images'
 
+        );
 
+
 
+        if (image.isPublic) {
 
+          // Public images get direct URLs
 
+          return bucket.getPublicUrl(image.path).data.publicUrl;
 
+        } else {
 
+          // Private images get signed URLs
 
+          const { data, error: signError } = await bucket.createSignedUrl(
 
+            image.path,
 
+            options.expiresIn,
 
+            { download: options.forceDownload }
 
+          );
 
+
 
+          if (signError) throw signError;
 
+          return data?.signedUrl || null;
 
+        }
 
+      } catch (err) {
 
+        setError(err instanceof Error ? err.message : 'Failed to generate link');
 
+        return null;
 
+      } finally {
 
+        setIsGenerating(false);
 
+      }
 
+    },
 
+    [client]
 
+  );
 
+
 
+  const copyToClipboard = useCallback(async (url: string): Promise<boolean> => {
 
+    try {
 
+      await navigator.clipboard.writeText(url);
 
+      return true;
 
+    } catch {
 
+      // Fallback
 
+      const textarea = document.createElement('textarea');
 
+      textarea.value = url;
 
+      textarea.style.position = 'fixed';
 
+      textarea.style.left = '-9999px';
 
+      document.body.appendChild(textarea);
 
+      textarea.select();
 
+      const success = document.execCommand('copy');
 
+      document.body.removeChild(textarea);
 
+      return success;
 
+    }
 
+  }, []);
 
+
 
+  return {
 
+    generateShareUrl,
 
+    copyToClipboard,
 
+    isGenerating,
 
+    error,
 
+  };
 
+}

+ 35 - 0
src/index.css
Vizualizați fișierul 

@@ -0,0 +1,35 @@
 
+@tailwind base;
 
+@tailwind components;
 
+@tailwind utilities;
 
+
 
+@layer base {
 
+  body {
 
+    @apply bg-gray-50 text-gray-900 antialiased;
 
+  }
 
+}
 
+
 
+@layer components {
 
+  .btn {
 
+    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
 
+  }
 
+
 
+  .btn-primary {
 
+    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
 
+  }
 
+
 
+  .btn-secondary {
 
+    @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
 
+  }
 
+
 
+  .btn-danger {
 
+    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
 
+  }
 
+
 
+  .input {
 
+    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
 
+  }
 
+
 
+  .card {
 
+    @apply bg-white rounded-xl shadow-sm border border-gray-200;
 
+  }
 
+}

+ 19 - 0
src/main.tsx
Vizualizați fișierul 

@@ -0,0 +1,19 @@
 
+import React from 'react';
 
+import ReactDOM from 'react-dom/client';
 
+import { HashRouter } from 'react-router-dom';
 
+import { BaaSProvider } from '@picobaas/client/react';
 
+import App from './App';
 
+import './index.css';
 
+import { config } from './config';
 
+
 
+// Using HashRouter for compatibility with static file serving
 
+// Routes will be: /#/, /#/login, /#/dashboard, etc.
 
+ReactDOM.createRoot(document.getElementById('root')!).render(
 
+  <React.StrictMode>
 
+    <HashRouter>
 
+      <BaaSProvider config={config}>
 
+        <App />
 
+      </BaaSProvider>
 
+    </HashRouter>
 
+  </React.StrictMode>
 
+);

+ 111 - 0
src/pages/DashboardPage.tsx
Vizualizați fișierul 

@@ -0,0 +1,111 @@
 
+import { useState } from 'react';
 
+import { useImages } from '../hooks/useImages';
 
+import { USER_BUCKET } from '../config';
 
+import ImageGrid from '../components/ImageGrid';
 
+import ImageUploader from '../components/ImageUploader';
 
+import type { ImageFile } from '../types';
 
+
 
+export default function DashboardPage() {
 
+  const { images, isLoading, error, uploadImage, deleteImage, fetchImages } = useImages(USER_BUCKET);
 
+  const [isUploading, setIsUploading] = useState(false);
 
+  const [showUploader, setShowUploader] = useState(false);
 
+  const [uploadError, setUploadError] = useState<string | null>(null);
 
+
 
+  const handleUpload = async (file: File, expirySeconds: number) => {
 
+    setIsUploading(true);
 
+    setUploadError(null);
 
+
 
+    try {
 
+      await uploadImage(file, expirySeconds);
 
+      setShowUploader(false);
 
+    } catch (err) {
 
+      setUploadError(err instanceof Error ? err.message : 'Upload failed');
 
+    } finally {
 
+      setIsUploading(false);
 
+    }
 
+  };
 
+
 
+  const handleDelete = async (image: ImageFile) => {
 
+    try {
 
+      await deleteImage(image);
 
+    } catch (err) {
 
+      alert(err instanceof Error ? err.message : 'Delete failed');
 
+    }
 
+  };
 
+
 
+  return (
 
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 
+      {/* Header */}
 
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
 
+        <div>
 
+          <h1 className="text-2xl font-bold text-gray-900">My Images</h1>
 
+          <p className="text-gray-600">Manage your uploaded images</p>
 
+        </div>
 
+        <div className="flex gap-3">
 
+          <button
 
+            onClick={() => fetchImages()}
 
+            className="btn btn-secondary flex items-center gap-2"
 
+          >
 
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
 
+            </svg>
 
+            Refresh
 
+          </button>
 
+          <button
 
+            onClick={() => setShowUploader(!showUploader)}
 
+            className="btn btn-primary flex items-center gap-2"
 
+          >
 
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
 
+            </svg>
 
+            Upload Image
 
+          </button>
 
+        </div>
 
+      </div>
 
+
 
+      {/* Upload section */}
 
+      {showUploader && (
 
+        <div className="card p-6 mb-8">
 
+          <div className="flex justify-between items-center mb-4">
 
+            <h2 className="text-lg font-semibold text-gray-900">Upload New Image</h2>
 
+            <button
 
+              onClick={() => setShowUploader(false)}
 
+              className="text-gray-400 hover:text-gray-600"
 
+            >
 
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
 
+              </svg>
 
+            </button>
 
+          </div>
 
+
 
+          {uploadError && (
 
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
 
+              {uploadError}
 
+            </div>
 
+          )}
 
+
 
+          <ImageUploader
 
+            onUpload={handleUpload}
 
+            isUploading={isUploading}
 
+            compact
 
+          />
 
+        </div>
 
+      )}
 
+
 
+      {/* Error message */}
 
+      {error && (
 
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
 
+          {error}
 
+        </div>
 
+      )}
 
+
 
+      {/* Image grid */}
 
+      <ImageGrid
 
+        images={images}
 
+        onDelete={handleDelete}
 
+        isLoading={isLoading}
 
+        emptyMessage="No images uploaded yet. Click 'Upload Image' to get started."
 
+      />
 
+    </div>
 
+  );
 
+}

+ 195 - 0
src/pages/HomePage.tsx
Vizualizați fișierul 

@@ -0,0 +1,195 @@
 
+import { useState } from 'react';
 
+import { Link } from 'react-router-dom';
 
+import { useAuth } from '@picobaas/client/react';
 
+import { useImages } from '../hooks/useImages';
 
+import { PUBLIC_BUCKET } from '../config';
 
+import ImageUploader from '../components/ImageUploader';
 
+
 
+export default function HomePage() {
 
+  const { isAuthenticated } = useAuth();
 
+  const { uploadImage } = useImages(PUBLIC_BUCKET);
 
+  const [isUploading, setIsUploading] = useState(false);
 
+  const [uploadResult, setUploadResult] = useState<{
 
+    success: boolean;
 
+    url?: string;
 
+    error?: string;
 
+  } | null>(null);
 
+
 
+  const handleUpload = async (file: File, expirySeconds: number) => {
 
+    setIsUploading(true);
 
+    setUploadResult(null);
 
+
 
+    try {
 
+      const image = await uploadImage(file, expirySeconds);
 
+      if (image) {
 
+        setUploadResult({ success: true, url: image.url });
 
+      }
 
+    } catch (err) {
 
+      setUploadResult({
 
+        success: false,
 
+        error: err instanceof Error ? err.message : 'Upload failed',
 
+      });
 
+    } finally {
 
+      setIsUploading(false);
 
+    }
 
+  };
 
+
 
+  const copyToClipboard = async (url: string) => {
 
+    try {
 
+      await navigator.clipboard.writeText(url);
 
+      alert('Link copied to clipboard!');
 
+    } catch {
 
+      // Fallback
 
+      const input = document.createElement('input');
 
+      input.value = url;
 
+      document.body.appendChild(input);
 
+      input.select();
 
+      document.execCommand('copy');
 
+      document.body.removeChild(input);
 
+      alert('Link copied to clipboard!');
 
+    }
 
+  };
 
+
 
+  return (
 
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 
+      {/* Hero section */}
 
+      <div className="text-center mb-12">
 
+        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
 
+          Share images instantly
 
+        </h1>
 
+        <p className="text-xl text-gray-600 mb-6">
 
+          Upload an image and get a shareable link. No account required.
 
+        </p>
 
+        {!isAuthenticated && (
 
+          <p className="text-sm text-gray-500">
 
+            <Link to="/register" className="text-primary-600 hover:text-primary-700 font-medium">
 
+              Create an account
 
+            </Link>{' '}
 
+            to manage your uploads and access more features.
 
+          </p>
 
+        )}
 
+      </div>
 
+
 
+      {/* Upload result */}
 
+      {uploadResult && (
 
+        <div
 
+          className={`mb-8 p-6 rounded-xl ${
 
+            uploadResult.success
 
+              ? 'bg-green-50 border border-green-200'
 
+              : 'bg-red-50 border border-red-200'
 
+          }`}
 
+        >
 
+          {uploadResult.success ? (
 
+            <div className="text-center">
 
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 mb-4">
 
+                <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
 
+                </svg>
 
+              </div>
 
+              <h3 className="text-lg font-semibold text-green-900 mb-2">
 
+                Image uploaded successfully!
 
+              </h3>
 
+              <div className="flex gap-2 max-w-xl mx-auto">
 
+                <input
 
+                  type="text"
 
+                  value={uploadResult.url}
 
+                  readOnly
 
+                  className="input flex-1 bg-white text-sm"
 
+                />
 
+                <button
 
+                  onClick={() => uploadResult.url && copyToClipboard(uploadResult.url)}
 
+                  className="btn btn-primary whitespace-nowrap"
 
+                >
 
+                  Copy Link
 
+                </button>
 
+              </div>
 
+              <div className="mt-4">
 
+                <a
 
+                  href={uploadResult.url}
 
+                  target="_blank"
 
+                  rel="noopener noreferrer"
 
+                  className="text-green-700 hover:text-green-800 text-sm font-medium"
 
+                >
 
+                  Open image in new tab →
 
+                </a>
 
+              </div>
 
+              <button
 
+                onClick={() => setUploadResult(null)}
 
+                className="mt-4 text-sm text-gray-600 hover:text-gray-800"
 
+              >
 
+                Upload another image
 
+              </button>
 
+            </div>
 
+          ) : (
 
+            <div className="text-center">
 
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 mb-4">
 
+                <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
 
+                </svg>
 
+              </div>
 
+              <h3 className="text-lg font-semibold text-red-900 mb-2">
 
+                Upload failed
 
+              </h3>
 
+              <p className="text-red-700 mb-4">{uploadResult.error}</p>
 
+              <button
 
+                onClick={() => setUploadResult(null)}
 
+                className="btn btn-secondary"
 
+              >
 
+                Try again
 
+              </button>
 
+            </div>
 
+          )}
 
+        </div>
 
+      )}
 
+
 
+      {/* Upload area */}
 
+      {!uploadResult?.success && (
 
+        <div className="card p-8">
 
+          <ImageUploader
 
+            onUpload={handleUpload}
 
+            isUploading={isUploading}
 
+          />
 
+        </div>
 
+      )}
 
+
 
+      {/* Features */}
 
+      <div className="mt-16 grid md:grid-cols-3 gap-8">
 
+        <div className="text-center">
 
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-100 mb-4">
 
+            <svg className="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
 
+            </svg>
 
+          </div>
 
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Instant Upload</h3>
 
+          <p className="text-gray-600">
 
+            Drop your image and get a link instantly. No sign-up needed.
 
+          </p>
 
+        </div>
 
+
 
+        <div className="text-center">
 
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-100 mb-4">
 
+            <svg className="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
 
+            </svg>
 
+          </div>
 
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Auto Expiry</h3>
 
+          <p className="text-gray-600">
 
+            Set expiration times to automatically delete images after a period.
 
+          </p>
 
+        </div>
 
+
 
+        <div className="text-center">
 
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-100 mb-4">
 
+            <svg className="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
 
+            </svg>
 
+          </div>
 
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Easy Sharing</h3>
 
+          <p className="text-gray-600">
 
+            Get shareable links for your images with just one click.
 
+          </p>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 217 - 0
src/pages/ImageDetailPage.tsx
Vizualizați fișierul 

@@ -0,0 +1,217 @@
 
+import { useState, useEffect } from 'react';
 
+import { useParams, useNavigate } from 'react-router-dom';
 
+import { useBaaS } from '@picobaas/client/react';
 
+import { USER_BUCKET } from '../config';
 
+import { formatFileSize, formatDateTime, formatExpiryStatus } from '../utils/formatters';
 
+import { getExpiryFromMetadata } from '../utils/expiry';
 
+import LoadingSpinner from '../components/LoadingSpinner';
 
+import ShareModal from '../components/ShareModal';
 
+import type { ImageFile } from '../types';
 
+
 
+export default function ImageDetailPage() {
 
+  const { imageId } = useParams<{ imageId: string }>();
 
+  const navigate = useNavigate();
 
+  const { client } = useBaaS();
 
+  const [image, setImage] = useState<ImageFile | null>(null);
 
+  const [isLoading, setIsLoading] = useState(true);
 
+  const [error, setError] = useState<string | null>(null);
 
+  const [showShareModal, setShowShareModal] = useState(false);
 
+  const [isDeleting, setIsDeleting] = useState(false);
 
+
 
+  useEffect(() => {
 
+    const fetchImage = async () => {
 
+      if (!imageId) {
 
+        setError('Image not found');
 
+        setIsLoading(false);
 
+        return;
 
+      }
 
+
 
+      try {
 
+        const storage = client.storage.from(USER_BUCKET);
 
+        const path = decodeURIComponent(imageId);
 
+
 
+        const { data, error: infoError } = await storage.getFileInfo(path);
 
+
 
+        if (infoError) throw infoError;
 
+        if (!data) throw new Error('Image not found');
 
+
 
+        setImage({
 
+          id: data.id,
 
+          path: data.path,
 
+          name: data.filename || path.split('/').pop() || 'Unknown',
 
+          size: data.size,
 
+          mimeType: data.mime_type,
 
+          url: storage.getPublicUrl(path).data.publicUrl,
 
+          createdAt: new Date(data.created_at),
 
+          expiresAt: getExpiryFromMetadata(data.custom_metadata),
 
+          isPublic: false,
 
+          ownerId: data.owner_id,
 
+        });
 
+      } catch (err) {
 
+        setError(err instanceof Error ? err.message : 'Failed to load image');
 
+      } finally {
 
+        setIsLoading(false);
 
+      }
 
+    };
 
+
 
+    fetchImage();
 
+  }, [imageId, client]);
 
+
 
+  const handleDelete = async () => {
 
+    if (!image) return;
 
+    if (!confirm('Are you sure you want to delete this image?')) return;
 
+
 
+    setIsDeleting(true);
 
+
 
+    try {
 
+      const storage = client.storage.from(USER_BUCKET);
 
+      const { error: deleteError } = await storage.remove([image.path]);
 
+
 
+      if (deleteError) throw deleteError;
 
+
 
+      navigate('/dashboard');
 
+    } catch (err) {
 
+      alert(err instanceof Error ? err.message : 'Delete failed');
 
+      setIsDeleting(false);
 
+    }
 
+  };
 
+
 
+  if (isLoading) {
 
+    return (
 
+      <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center">
 
+        <LoadingSpinner size="lg" />
 
+      </div>
 
+    );
 
+  }
 
+
 
+  if (error || !image) {
 
+    return (
 
+      <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center">
 
+        <div className="text-center">
 
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">Image not found</h2>
 
+          <p className="text-gray-600 mb-4">{error}</p>
 
+          <button onClick={() => navigate('/dashboard')} className="btn btn-primary">
 
+            Back to Dashboard
 
+          </button>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  const expiryStatus = image.expiresAt ? formatExpiryStatus(image.expiresAt) : null;
 
+
 
+  return (
 
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 
+      {/* Back button */}
 
+      <button
 
+        onClick={() => navigate('/dashboard')}
 
+        className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6"
 
+      >
 
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
 
+        </svg>
 
+        Back to Dashboard
 
+      </button>
 
+
 
+      <div className="grid lg:grid-cols-3 gap-8">
 
+        {/* Image */}
 
+        <div className="lg:col-span-2">
 
+          <div className="card overflow-hidden">
 
+            <img
 
+              src={image.url}
 
+              alt={image.name}
 
+              className="w-full h-auto"
 
+            />
 
+          </div>
 
+        </div>
 
+
 
+        {/* Details */}
 
+        <div className="space-y-6">
 
+          {/* Info card */}
 
+          <div className="card p-6">
 
+            <h1 className="text-xl font-bold text-gray-900 mb-4 break-words">
 
+              {image.name}
 
+            </h1>
 
+
 
+            <dl className="space-y-3 text-sm">
 
+              <div className="flex justify-between">
 
+                <dt className="text-gray-500">Size</dt>
 
+                <dd className="text-gray-900 font-medium">{formatFileSize(image.size)}</dd>
 
+              </div>
 
+              <div className="flex justify-between">
 
+                <dt className="text-gray-500">Type</dt>
 
+                <dd className="text-gray-900 font-medium">{image.mimeType}</dd>
 
+              </div>
 
+              <div className="flex justify-between">
 
+                <dt className="text-gray-500">Uploaded</dt>
 
+                <dd className="text-gray-900 font-medium">{formatDateTime(image.createdAt)}</dd>
 
+              </div>
 
+              {expiryStatus && (
 
+                <div className="flex justify-between">
 
+                  <dt className="text-gray-500">Expires</dt>
 
+                  <dd className={`font-medium ${
 
+                    expiryStatus.isExpired ? 'text-red-600' :
 
+                    expiryStatus.isExpiringSoon ? 'text-yellow-600' : 'text-gray-900'
 
+                  }`}>
 
+                    {expiryStatus.label}
 
+                  </dd>
 
+                </div>
 
+              )}
 
+            </dl>
 
+          </div>
 
+
 
+          {/* Actions */}
 
+          <div className="card p-6 space-y-3">
 
+            <button
 
+              onClick={() => setShowShareModal(true)}
 
+              className="btn btn-primary w-full flex items-center justify-center gap-2"
 
+            >
 
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
 
+              </svg>
 
+              Share Image
 
+            </button>
 
+
 
+            <a
 
+              href={image.url}
 
+              download={image.name}
 
+              className="btn btn-secondary w-full flex items-center justify-center gap-2"
 
+            >
 
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
 
+              </svg>
 
+              Download
 
+            </a>
 
+
 
+            <button
 
+              onClick={handleDelete}
 
+              disabled={isDeleting}
 
+              className="btn btn-danger w-full flex items-center justify-center gap-2"
 
+            >
 
+              {isDeleting ? (
 
+                <>
 
+                  <LoadingSpinner size="sm" />
 
+                  Deleting...
 
+                </>
 
+              ) : (
 
+                <>
 
+                  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 
+                  </svg>
 
+                  Delete Image
 
+                </>
 
+              )}
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      {/* Share Modal */}
 
+      <ShareModal
 
+        isOpen={showShareModal}
 
+        onClose={() => setShowShareModal(false)}
 
+        image={image}
 
+      />
 
+    </div>
 
+  );
 
+}

+ 111 - 0
src/pages/LoginPage.tsx
Vizualizați fișierul 

@@ -0,0 +1,111 @@
 
+import { useState } from 'react';
 
+import { Link, useNavigate } from 'react-router-dom';
 
+import { useAuth } from '@picobaas/client/react';
 
+import LoadingSpinner from '../components/LoadingSpinner';
 
+
 
+export default function LoginPage() {
 
+  const navigate = useNavigate();
 
+  const { login, isAuthenticated } = useAuth();
 
+  const [email, setEmail] = useState('');
 
+  const [password, setPassword] = useState('');
 
+  const [error, setError] = useState<string | null>(null);
 
+  const [isLoading, setIsLoading] = useState(false);
 
+
 
+  // Redirect if already authenticated
 
+  if (isAuthenticated) {
 
+    navigate('/dashboard', { replace: true });
 
+    return null;
 
+  }
 
+
 
+  const handleSubmit = async (e: React.FormEvent) => {
 
+    e.preventDefault();
 
+    setError(null);
 
+    setIsLoading(true);
 
+
 
+    try {
 
+      await login(email, password);
 
+      navigate('/dashboard');
 
+    } catch (err) {
 
+      setError(err instanceof Error ? err.message : 'Login failed');
 
+    } finally {
 
+      setIsLoading(false);
 
+    }
 
+  };
 
+
 
+  return (
 
+    <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+      <div className="max-w-md w-full">
 
+        <div className="text-center mb-8">
 
+          <h1 className="text-3xl font-bold text-gray-900">Welcome back</h1>
 
+          <p className="mt-2 text-gray-600">
 
+            Sign in to manage your images
 
+          </p>
 
+        </div>
 
+
 
+        <div className="card p-6">
 
+          <form onSubmit={handleSubmit} className="space-y-4">
 
+            {error && (
 
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
 
+                {error}
 
+              </div>
 
+            )}
 
+
 
+            <div>
 
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Email
 
+              </label>
 
+              <input
 
+                id="email"
 
+                type="email"
 
+                value={email}
 
+                onChange={(e) => setEmail(e.target.value)}
 
+                className="input"
 
+                placeholder="you@example.com"
 
+                required
 
+                autoComplete="email"
 
+              />
 
+            </div>
 
+
 
+            <div>
 
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Password
 
+              </label>
 
+              <input
 
+                id="password"
 
+                type="password"
 
+                value={password}
 
+                onChange={(e) => setPassword(e.target.value)}
 
+                className="input"
 
+                placeholder="Enter your password"
 
+                required
 
+                autoComplete="current-password"
 
+              />
 
+            </div>
 
+
 
+            <button
 
+              type="submit"
 
+              disabled={isLoading}
 
+              className="btn btn-primary w-full flex items-center justify-center gap-2"
 
+            >
 
+              {isLoading ? (
 
+                <>
 
+                  <LoadingSpinner size="sm" />
 
+                  Signing in...
 
+                </>
 
+              ) : (
 
+                'Sign In'
 
+              )}
 
+            </button>
 
+          </form>
 
+
 
+          <div className="mt-6 text-center text-sm text-gray-600">
 
+            Don't have an account?{' '}
 
+            <Link to="/register" className="text-primary-600 hover:text-primary-700 font-medium">
 
+              Sign up
 
+            </Link>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 206 - 0
src/pages/RegisterPage.tsx
Vizualizați fișierul 

@@ -0,0 +1,206 @@
 
+import { useState } from 'react';
 
+import { Link, useNavigate } from 'react-router-dom';
 
+import { useAuth } from '@picobaas/client/react';
 
+import LoadingSpinner from '../components/LoadingSpinner';
 
+
 
+export default function RegisterPage() {
 
+  const navigate = useNavigate();
 
+  const { register, isAuthenticated } = useAuth();
 
+  const [username, setUsername] = useState('');
 
+  const [email, setEmail] = useState('');
 
+  const [password, setPassword] = useState('');
 
+  const [confirmPassword, setConfirmPassword] = useState('');
 
+  const [error, setError] = useState<string | null>(null);
 
+  const [isLoading, setIsLoading] = useState(false);
 
+  const [success, setSuccess] = useState(false);
 
+
 
+  // Redirect if already authenticated
 
+  if (isAuthenticated) {
 
+    navigate('/dashboard', { replace: true });
 
+    return null;
 
+  }
 
+
 
+  const validateForm = (): boolean => {
 
+    if (!username.trim()) {
 
+      setError('Username is required');
 
+      return false;
 
+    }
 
+    if (username.length < 3) {
 
+      setError('Username must be at least 3 characters');
 
+      return false;
 
+    }
 
+    if (password.length < 8) {
 
+      setError('Password must be at least 8 characters');
 
+      return false;
 
+    }
 
+    if (!/[A-Z]/.test(password)) {
 
+      setError('Password must contain at least one uppercase letter');
 
+      return false;
 
+    }
 
+    if (!/[a-z]/.test(password)) {
 
+      setError('Password must contain at least one lowercase letter');
 
+      return false;
 
+    }
 
+    if (!/[0-9]/.test(password)) {
 
+      setError('Password must contain at least one number');
 
+      return false;
 
+    }
 
+    if (password !== confirmPassword) {
 
+      setError('Passwords do not match');
 
+      return false;
 
+    }
 
+    return true;
 
+  };
 
+
 
+  const handleSubmit = async (e: React.FormEvent) => {
 
+    e.preventDefault();
 
+    setError(null);
 
+
 
+    if (!validateForm()) return;
 
+
 
+    setIsLoading(true);
 
+
 
+    try {
 
+      await register(email, password, username);
 
+      setSuccess(true);
 
+    } catch (err) {
 
+      setError(err instanceof Error ? err.message : 'Registration failed');
 
+    } finally {
 
+      setIsLoading(false);
 
+    }
 
+  };
 
+
 
+  if (success) {
 
+    return (
 
+      <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+        <div className="max-w-md w-full text-center">
 
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
 
+            <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
 
+            </svg>
 
+          </div>
 
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">Check your email</h1>
 
+          <p className="text-gray-600 mb-6">
 
+            We've sent a verification link to <strong>{email}</strong>.
 
+            Please click the link to verify your account.
 
+          </p>
 
+          <Link to="/login" className="btn btn-primary">
 
+            Go to Login
 
+          </Link>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  return (
 
+    <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+      <div className="max-w-md w-full">
 
+        <div className="text-center mb-8">
 
+          <h1 className="text-3xl font-bold text-gray-900">Create an account</h1>
 
+          <p className="mt-2 text-gray-600">
 
+            Start managing your images today
 
+          </p>
 
+        </div>
 
+
 
+        <div className="card p-6">
 
+          <form onSubmit={handleSubmit} className="space-y-4">
 
+            {error && (
 
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
 
+                {error}
 
+              </div>
 
+            )}
 
+
 
+            <div>
 
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Username
 
+              </label>
 
+              <input
 
+                id="username"
 
+                type="text"
 
+                value={username}
 
+                onChange={(e) => setUsername(e.target.value)}
 
+                className="input"
 
+                placeholder="Choose a username"
 
+                required
 
+                autoComplete="username"
 
+              />
 
+            </div>
 
+
 
+            <div>
 
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Email
 
+              </label>
 
+              <input
 
+                id="email"
 
+                type="email"
 
+                value={email}
 
+                onChange={(e) => setEmail(e.target.value)}
 
+                className="input"
 
+                placeholder="you@example.com"
 
+                required
 
+                autoComplete="email"
 
+              />
 
+            </div>
 
+
 
+            <div>
 
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Password
 
+              </label>
 
+              <input
 
+                id="password"
 
+                type="password"
 
+                value={password}
 
+                onChange={(e) => setPassword(e.target.value)}
 
+                className="input"
 
+                placeholder="Create a password"
 
+                required
 
+                autoComplete="new-password"
 
+              />
 
+              <p className="mt-1 text-xs text-gray-500">
 
+                At least 8 characters with uppercase, lowercase, and number
 
+              </p>
 
+            </div>
 
+
 
+            <div>
 
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
 
+                Confirm Password
 
+              </label>
 
+              <input
 
+                id="confirmPassword"
 
+                type="password"
 
+                value={confirmPassword}
 
+                onChange={(e) => setConfirmPassword(e.target.value)}
 
+                className="input"
 
+                placeholder="Confirm your password"
 
+                required
 
+                autoComplete="new-password"
 
+              />
 
+            </div>
 
+
 
+            <button
 
+              type="submit"
 
+              disabled={isLoading}
 
+              className="btn btn-primary w-full flex items-center justify-center gap-2"
 
+            >
 
+              {isLoading ? (
 
+                <>
 
+                  <LoadingSpinner size="sm" />
 
+                  Creating account...
 
+                </>
 
+              ) : (
 
+                'Create Account'
 
+              )}
 
+            </button>
 
+          </form>
 
+
 
+          <div className="mt-6 text-center text-sm text-gray-600">
 
+            Already have an account?{' '}
 
+            <Link to="/login" className="text-primary-600 hover:text-primary-700 font-medium">
 
+              Sign in
 
+            </Link>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 98 - 0
src/pages/SharedImagePage.tsx
Vizualizați fișierul 

@@ -0,0 +1,98 @@
 
+import { useParams, Link } from 'react-router-dom';
 
+
 
+export default function SharedImagePage() {
 
+  const { shareId } = useParams<{ shareId: string }>();
 
+
 
+  // The shareId is the signed URL path
 
+  // This page provides a nice wrapper around the direct image link
 
+  const imageUrl = shareId ? `/storage/${decodeURIComponent(shareId)}` : null;
 
+
 
+  if (!imageUrl) {
 
+    return (
 
+      <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
 
+        <div className="text-center text-white">
 
+          <h1 className="text-2xl font-bold mb-4">Image not found</h1>
 
+          <p className="text-gray-400 mb-6">This link may have expired or is invalid.</p>
 
+          <Link to="/" className="btn btn-primary">
 
+            Go to Home
 
+          </Link>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  return (
 
+    <div className="min-h-screen bg-gray-900 flex flex-col">
 
+      {/* Header */}
 
+      <header className="bg-gray-800 border-b border-gray-700 py-4 px-6">
 
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
 
+          <Link to="/" className="flex items-center gap-2 text-white">
 
+            <svg
 
+              className="h-8 w-8 text-primary-500"
 
+              viewBox="0 0 100 100"
 
+              fill="currentColor"
 
+            >
 
+              <rect width="100" height="100" rx="20" />
 
+              <path
 
+                d="M25 65 L50 40 L65 55 L85 35"
 
+                stroke="white"
 
+                strokeWidth="6"
 
+                fill="none"
 
+                strokeLinecap="round"
 
+                strokeLinejoin="round"
 
+              />
 
+              <circle cx="35" cy="35" r="8" fill="white" />
 
+            </svg>
 
+            <span className="text-xl font-bold">ImageDrop</span>
 
+          </Link>
 
+
 
+          <div className="flex gap-3">
 
+            <a
 
+              href={imageUrl}
 
+              download
 
+              className="btn btn-secondary text-sm"
 
+            >
 
+              Download
 
+            </a>
 
+            <Link to="/" className="btn btn-primary text-sm">
 
+              Upload Your Own
 
+            </Link>
 
+          </div>
 
+        </div>
 
+      </header>
 
+
 
+      {/* Image */}
 
+      <main className="flex-1 flex items-center justify-center p-4">
 
+        <div className="max-w-5xl w-full">
 
+          <img
 
+            src={imageUrl}
 
+            alt="Shared image"
 
+            className="w-full h-auto max-h-[80vh] object-contain rounded-lg shadow-2xl"
 
+            onError={(e) => {
 
+              // Handle expired or invalid images
 
+              const target = e.target as HTMLImageElement;
 
+              target.style.display = 'none';
 
+              target.parentElement!.innerHTML = `
 
+                <div class="text-center text-white py-20">
 
+                  <p class="text-xl mb-4">This image is no longer available</p>
 
+                  <p class="text-gray-400">The link may have expired or the image was deleted.</p>
 
+                </div>
 
+              `;
 
+            }}
 
+          />
 
+        </div>
 
+      </main>
 
+
 
+      {/* Footer */}
 
+      <footer className="bg-gray-800 border-t border-gray-700 py-4 px-6">
 
+        <div className="max-w-7xl mx-auto text-center text-gray-400 text-sm">
 
+          Shared via{' '}
 
+          <Link to="/" className="text-primary-400 hover:text-primary-300">
 
+            ImageDrop
 
+          </Link>
 
+          {' '}- Upload and share images instantly
 
+        </div>
 
+      </footer>
 
+    </div>
 
+  );
 
+}

+ 98 - 0
src/pages/VerifyEmailPage.tsx
Vizualizați fișierul 

@@ -0,0 +1,98 @@
 
+import { useState, useEffect } from 'react';
 
+import { Link, useSearchParams } from 'react-router-dom';
 
+import { useBaaS } from '@picobaas/client/react';
 
+import LoadingSpinner from '../components/LoadingSpinner';
 
+
 
+type VerificationState = 'loading' | 'success' | 'error';
 
+
 
+export default function VerifyEmailPage() {
 
+  const [searchParams] = useSearchParams();
 
+  const { client } = useBaaS();
 
+  const [state, setState] = useState<VerificationState>('loading');
 
+  const [error, setError] = useState<string | null>(null);
 
+
 
+  const token = searchParams.get('token');
 
+
 
+  useEffect(() => {
 
+    if (!token) {
 
+      setState('error');
 
+      setError('Missing verification token');
 
+      return;
 
+    }
 
+
 
+    const verifyEmail = async () => {
 
+      try {
 
+        const result = await client.auth.verifyEmail(token);
 
+
 
+        if (result.error) {
 
+          setState('error');
 
+          setError(result.error.message || 'Verification failed');
 
+          return;
 
+        }
 
+
 
+        setState('success');
 
+      } catch (err) {
 
+        setState('error');
 
+        setError(err instanceof Error ? err.message : 'Verification failed');
 
+      }
 
+    };
 
+
 
+    verifyEmail();
 
+  }, [token, client]);
 
+
 
+  if (state === 'loading') {
 
+    return (
 
+      <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+        <div className="text-center">
 
+          <LoadingSpinner size="lg" className="mx-auto mb-4" />
 
+          <p className="text-gray-600">Verifying your email...</p>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  if (state === 'error') {
 
+    return (
 
+      <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+        <div className="max-w-md w-full text-center">
 
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
 
+            <svg className="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
 
+            </svg>
 
+          </div>
 
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">Verification Failed</h1>
 
+          <p className="text-gray-600 mb-6">
 
+            {error || 'Unable to verify your email. The link may have expired.'}
 
+          </p>
 
+          <div className="space-x-4">
 
+            <Link to="/login" className="btn btn-primary">
 
+              Go to Login
 
+            </Link>
 
+            <Link to="/register" className="btn btn-secondary">
 
+              Register Again
 
+            </Link>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+
 
+  return (
 
+    <div className="min-h-[calc(100vh-12rem)] flex items-center justify-center py-12 px-4">
 
+      <div className="max-w-md w-full text-center">
 
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
 
+          <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
 
+          </svg>
 
+        </div>
 
+        <h1 className="text-2xl font-bold text-gray-900 mb-2">Email Verified!</h1>
 
+        <p className="text-gray-600 mb-6">
 
+          Your email has been successfully verified. You can now sign in to your account.
 
+        </p>
 
+        <Link to="/login" className="btn btn-primary">
 
+          Sign In
 
+        </Link>
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 32 - 0
src/types/index.ts
Vizualizați fișierul 

@@ -0,0 +1,32 @@
 
+export interface ImageFile {
 
+  id: string;
 
+  path: string;
 
+  name: string;
 
+  size: number;
 
+  mimeType: string;
 
+  url: string;
 
+  thumbnailUrl?: string;
 
+  createdAt: Date;
 
+  expiresAt?: Date;
 
+  isPublic: boolean;
 
+  ownerId?: string;
 
+  aliasId?: string;
 
+  aliasUrl?: string;
 
+}
 
+
 
+export interface UploadResult {
 
+  success: boolean;
 
+  file?: ImageFile;
 
+  shareUrl?: string;
 
+  error?: string;
 
+}
 
+
 
+export interface ShareOptions {
 
+  expiresIn: number; // seconds
 
+  forceDownload?: boolean;
 
+}
 
+
 
+export interface ExpiryOption {
 
+  label: string;
 
+  value: number; // seconds, 0 = never
 
+}

+ 26 - 0
src/utils/expiry.ts
Vizualizați fișierul 

@@ -0,0 +1,26 @@
 
+export function calculateExpiryDate(expirySeconds: number): Date | undefined {
 
+  if (expirySeconds === 0) return undefined; // Never expires
 
+
 
+  const now = new Date();
 
+  return new Date(now.getTime() + expirySeconds * 1000);
 
+}
 
+
 
+export function isExpired(expiresAt: Date | undefined): boolean {
 
+  if (!expiresAt) return false;
 
+  return new Date() > expiresAt;
 
+}
 
+
 
+export function getExpiryFromMetadata(
 
+  metadata: Record<string, unknown> | undefined
 
+): Date | undefined {
 
+  if (!metadata?.expires_at) return undefined;
 
+
 
+  const expiresAt = metadata.expires_at;
 
+  if (typeof expiresAt === 'string') {
 
+    return new Date(expiresAt);
 
+  }
 
+  if (typeof expiresAt === 'number') {
 
+    return new Date(expiresAt);
 
+  }
 
+  return undefined;
 
+}

+ 57 - 0
src/utils/formatters.ts
Vizualizați fișierul 

@@ -0,0 +1,57 @@
 
+export function formatFileSize(bytes: number): string {
 
+  if (bytes < 1024) return bytes + ' B';
 
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+}
 
+
 
+export function formatRelativeTime(date: Date): string {
 
+  const now = new Date();
 
+  const diffMs = now.getTime() - date.getTime();
 
+  const diffSecs = Math.floor(diffMs / 1000);
 
+  const diffMins = Math.floor(diffSecs / 60);
 
+  const diffHours = Math.floor(diffMins / 60);
 
+  const diffDays = Math.floor(diffHours / 24);
 
+
 
+  if (diffSecs < 60) return 'Just now';
 
+  if (diffMins < 60) return `${diffMins}m ago`;
 
+  if (diffHours < 24) return `${diffHours}h ago`;
 
+  if (diffDays < 7) return `${diffDays}d ago`;
 
+
 
+  return date.toLocaleDateString();
 
+}
 
+
 
+export function formatExpiryStatus(expiresAt: Date): {
 
+  label: string;
 
+  isExpired: boolean;
 
+  isExpiringSoon: boolean;
 
+} {
 
+  const now = new Date();
 
+  const diffMs = expiresAt.getTime() - now.getTime();
 
+
 
+  if (diffMs <= 0) {
 
+    return { label: 'Expired', isExpired: true, isExpiringSoon: false };
 
+  }
 
+
 
+  const diffSecs = Math.floor(diffMs / 1000);
 
+  const diffMins = Math.floor(diffSecs / 60);
 
+  const diffHours = Math.floor(diffMins / 60);
 
+  const diffDays = Math.floor(diffHours / 24);
 
+
 
+  const isExpiringSoon = diffHours < 24;
 
+
 
+  if (diffMins < 60) {
 
+    return { label: `${diffMins}m left`, isExpired: false, isExpiringSoon: true };
 
+  }
 
+  if (diffHours < 24) {
 
+    return { label: `${diffHours}h left`, isExpired: false, isExpiringSoon: true };
 
+  }
 
+  if (diffDays < 30) {
 
+    return { label: `${diffDays}d left`, isExpired: false, isExpiringSoon };
 
+  }
 
+
 
+  return { label: 'Permanent', isExpired: false, isExpiringSoon: false };
 
+}
 
+
 
+export function formatDateTime(date: Date): string {
 
+  return date.toLocaleString();
 
+}

+ 26 - 0
tailwind.config.js
Vizualizați fișierul 

@@ -0,0 +1,26 @@
 
+/** @type {import('tailwindcss').Config} */
 
+export default {
 
+  content: [
 
+    "./index.html",
 
+    "./src/**/*.{js,ts,jsx,tsx}",
 
+  ],
 
+  theme: {
 
+    extend: {
 
+      colors: {
 
+        primary: {
 
+          50: '#eff6ff',
 
+          100: '#dbeafe',
 
+          200: '#bfdbfe',
 
+          300: '#93c5fd',
 
+          400: '#60a5fa',
 
+          500: '#3b82f6',
 
+          600: '#2563eb',
 
+          700: '#1d4ed8',
 
+          800: '#1e40af',
 
+          900: '#1e3a8a',
 
+        },
 
+      },
 
+    },
 
+  },
 
+  plugins: [],
 
+}

+ 21 - 0
tsconfig.json
Vizualizați fișierul 

@@ -0,0 +1,21 @@
 
+{
 
+  "compilerOptions": {
 
+    "target": "ES2020",
 
+    "useDefineForClassFields": true,
 
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
 
+    "module": "ESNext",
 
+    "skipLibCheck": true,
 
+    "moduleResolution": "bundler",
 
+    "allowImportingTsExtensions": true,
 
+    "resolveJsonModule": true,
 
+    "isolatedModules": true,
 
+    "noEmit": true,
 
+    "jsx": "react-jsx",
 
+    "strict": true,
 
+    "noUnusedLocals": true,
 
+    "noUnusedParameters": true,
 
+    "noFallthroughCasesInSwitch": true
 
+  },
 
+  "include": ["src"],
 
+  "references": [{ "path": "./tsconfig.node.json" }]
 
+}

+ 10 - 0
tsconfig.node.json
Vizualizați fișierul 

@@ -0,0 +1,10 @@
 
+{
 
+  "compilerOptions": {
 
+    "composite": true,
 
+    "skipLibCheck": true,
 
+    "module": "ESNext",
 
+    "moduleResolution": "bundler",
 
+    "allowSyntheticDefaultImports": true
 
+  },
 
+  "include": ["vite.config.ts"]
 
+}

+ 36 - 0
vite.config.ts
Vizualizați fișierul 

@@ -0,0 +1,36 @@
 
+import { defineConfig } from 'vite';
 
+import react from '@vitejs/plugin-react';
 
+
 
+export default defineConfig({
 
+  plugins: [react()],
 
+  // Use relative paths so the app works when served from any subdirectory
 
+  base: './',
 
+  build: {
 
+    // Output to dist folder
 
+    outDir: 'dist',
 
+    // Generate assets with relative paths
 
+    assetsDir: 'assets',
 
+    // Emit a single index.html that can be served by the backend
 
+    rollupOptions: {
 
+      output: {
 
+        // Use hash in filenames for cache busting
 
+        entryFileNames: 'assets/[name]-[hash].js',
 
+        chunkFileNames: 'assets/[name]-[hash].js',
 
+        assetFileNames: 'assets/[name]-[hash].[ext]',
 
+      },
 
+    },
 
+  },
 
+  server: {
 
+    port: 3000,
 
+    proxy: {
 
+      '/api': {
 
+        target: 'http://localhost:8080',
 
+        changeOrigin: true,
 
+      },
 
+      '/storage': {
 
+        target: 'http://localhost:8080',
 
+        changeOrigin: true,
 
+      },
 
+    },
 
+  },
 
+});