[FEAT] Improved splitting

[FEAT] Change open text
[FEAT] Add sharing function, UI enhancement
2025-12-15 01:45:07 +01:00 · 2025-12-14 20:37:23 +01:00 · 2025-12-14 19:06:55 +01:00 · 2025-12-12 14:57:41 +01:00 · 2025-12-11 21:27:01 +01:00 · 2025-12-01 02:25:53 +01:00
34 changed files with 2397 additions and 1074 deletions
--- a/24
+++ b/24
@@ -1,16 +1,28 @@
 http://spritesheetgenerator.online:1337 {
    root * ./dist
-    encode gzip
+    encode zstd gzip
+
+    # Aggressive caching for static assets
+    @static path *.js *.css *.png *.jpg *.jpeg *.gif *.webp *.svg *.woff *.woff2 *.ico
+    header @static Cache-Control "public, max-age=31536000, immutable"
+
+    # Short cache for HTML (for SPA updates)
+    @html path *.html /
+    header @html Cache-Control "no-cache, must-revalidate"
+
+    # Default cache for everything else
+    header ?Cache-Control "max-age=1800"

    try_files {path} /index.html
-
-    file_server
+    file_server {
+        precompressed zstd gzip
+    }

    log {
        output file /var/log/caddy/spritesheetgenerator.online.log
    }
+}

-    header {
-        ?Cache-Control "max-age=1800"
-    }
+:1338 {
+    redir https://spritesheetgenerator.online{uri} permanent
 }
--- a/index.html
+++ b/index.html
@@ -2,24 +2,33 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Preconnect to external domains for performance -->
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
+    <link rel="preconnect" href="https://a.adhd.sh" crossorigin>
+    <link rel="dns-prefetch" href="https://a.adhd.sh">
+    <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
+    <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">

    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <meta name="apple-mobile-web-app-title" content="MyWebSite" />
+    <meta name="apple-mobile-web-app-title" content="Spritesheet Generator" />
    <link rel="manifest" href="/site.webmanifest" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Primary Meta Tags -->
    <title>Spritesheet generator - Create Game Spritesheets Online</title>
    <meta name="title" content="Spritesheet generator - Create Game Spritesheets Online">
    <meta name="description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
    <meta name="keywords" content="Spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools">
-    <meta name="author" content="nu11ed">
+    <meta name="author" content="streetshadow">
    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="https://spritesheetgenerator.online/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
@@ -39,8 +48,6 @@
    <meta name="theme-color" content="#0096ff" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

-    <title>Spritesheet generator</title>
-
    <script
      src="https://a.adhd.sh/api/script.js"
      data-site-id="7"
@@ -48,9 +55,6 @@
      data-session-replay="true"
      defer
    ></script>
-
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3715260871588949"
-            crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@tailwindcss/vite": "^4.1.1",
+        "@vueuse/head": "^2.0.0",
        "buffer": "^6.0.3",
        "gif.js": "^0.2.0",
        "gray-matter": "^4.0.3",
@@ -534,9 +535,9 @@
      }
    },
    "node_modules/@bufbuild/protobuf": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.1.tgz",
-      "integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.2.tgz",
+      "integrity": "sha512-uFsRXwIGyu+r6AMdz+XijIIZJYpoWeYzILt5yZ2d3mCjQrWUTVpVD9WL/jZAbvp+Ed04rOhrsk7FiTcEDseB5A==",
      "devOptional": true,
      "license": "(Apache-2.0 AND BSD-3-Clause)"
    },
@@ -1695,9 +1696,9 @@
      }
    },
    "node_modules/@tailwindcss/node": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
-      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
      "license": "MIT",
      "dependencies": {
        "@jridgewell/remapping": "^2.3.4",
@@ -1706,36 +1707,36 @@
        "lightningcss": "1.30.2",
        "magic-string": "^0.30.21",
        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.17"
+        "tailwindcss": "4.1.18"
      }
    },
    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
-      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
      "license": "MIT",
      "engines": {
        "node": ">= 10"
      },
      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-x64": "4.1.17",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
      }
    },
    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
-      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
      "cpu": [
        "arm64"
      ],
@@ -1749,9 +1750,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
-      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
      "cpu": [
        "arm64"
      ],
@@ -1765,9 +1766,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
-      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
      "cpu": [
        "x64"
      ],
@@ -1781,9 +1782,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
-      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
      "cpu": [
        "x64"
      ],
@@ -1797,9 +1798,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
-      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
      "cpu": [
        "arm"
      ],
@@ -1813,9 +1814,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
-      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
      "cpu": [
        "arm64"
      ],
@@ -1829,9 +1830,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
-      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
      "cpu": [
        "arm64"
      ],
@@ -1845,9 +1846,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
-      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
      "cpu": [
        "x64"
      ],
@@ -1861,9 +1862,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
-      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
      "cpu": [
        "x64"
      ],
@@ -1877,9 +1878,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
-      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
      "bundleDependencies": [
        "@napi-rs/wasm-runtime",
        "@emnapi/core",
@@ -1894,10 +1895,10 @@
      "license": "MIT",
      "optional": true,
      "dependencies": {
-        "@emnapi/core": "^1.6.0",
-        "@emnapi/runtime": "^1.6.0",
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@napi-rs/wasm-runtime": "^1.1.0",
        "@tybys/wasm-util": "^0.10.1",
        "tslib": "^2.4.0"
      },
@@ -1906,9 +1907,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
-      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
      "cpu": [
        "arm64"
      ],
@@ -1922,9 +1923,9 @@
      }
    },
    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
-      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
      "cpu": [
        "x64"
      ],
@@ -1951,14 +1952,14 @@
      }
    },
    "node_modules/@tailwindcss/vite": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",
-      "integrity": "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
+      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
      "license": "MIT",
      "dependencies": {
-        "@tailwindcss/node": "4.1.17",
-        "@tailwindcss/oxide": "4.1.17",
-        "tailwindcss": "4.1.17"
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "tailwindcss": "4.1.18"
      },
      "peerDependencies": {
        "vite": "^5.2.0 || ^6 || ^7"
@@ -1995,15 +1996,85 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "22.19.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
-      "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@unhead/dom": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
+      "integrity": "sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.11.20.tgz",
+      "integrity": "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA==",
+      "license": "MIT",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.11.20.tgz",
+      "integrity": "sha512-1MOrBkGgkUXS+sOKz/DBh4U20DNoITlJwpmvSInxEUNhghSNb56S0RnaHRq0iHkhrO/cDgz2zvfdlRpoPLGI3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "packrup": "^0.1.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/ssr": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.11.20.tgz",
+      "integrity": "sha512-j6ehzmdWGAvv0TEZyLE3WBnG1ULnsbKQcLqBDh3fvKS6b3xutcVZB7mjvrVE7ckSZt6WwOtG0ED3NJDS7IjzBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.11.20.tgz",
+      "integrity": "sha512-sqQaLbwqY9TvLEGeq8Fd7+F2TIuV3nZ5ihVISHjWpAM3y7DwNWRU7NmT9+yYT+2/jw1Vjwdkv5/HvDnvCLrgmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3",
+        "unhead": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.4",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -2325,6 +2396,21 @@
        }
      }
    },
+    "node_modules/@vueuse/head": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
+      "integrity": "sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/dom": "^1.7.0",
+        "@unhead/schema": "^1.7.0",
+        "@unhead/ssr": "^1.7.0",
+        "@unhead/vue": "^1.7.0"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
    "node_modules/alien-signals": {
      "version": "1.0.13",
      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
@@ -2355,9 +2441,9 @@
      }
    },
    "node_modules/autoprefixer": {
-      "version": "10.4.22",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
-      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
      "dev": true,
      "funding": [
        {
@@ -2375,10 +2461,9 @@
      ],
      "license": "MIT",
      "dependencies": {
-        "browserslist": "^4.27.0",
-        "caniuse-lite": "^1.0.30001754",
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
        "fraction.js": "^5.3.4",
-        "normalize-range": "^0.1.2",
        "picocolors": "^1.1.1",
        "postcss-value-parser": "^4.2.0"
      },
@@ -2420,9 +2505,9 @@
      "license": "MIT"
    },
    "node_modules/baseline-browser-mapping": {
-      "version": "2.8.31",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.31.tgz",
-      "integrity": "sha512-a28v2eWrrRWPpJSzxc+mKwm0ZtVx/G8SepdQZDArnXYU/XS+IF6mp8aB/4E+hH1tyGCoDo3KlUCdlSxGDsRkAw==",
+      "version": "2.9.7",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz",
+      "integrity": "sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==",
      "dev": true,
      "license": "Apache-2.0",
      "bin": {
@@ -2430,9 +2515,9 @@
      }
    },
    "node_modules/birpc": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.8.0.tgz",
-      "integrity": "sha512-Bz2a4qD/5GRhiHSwj30c/8kC8QGj12nNDwz3D4ErQ4Xhy35dsSDvF+RA/tWpjyU0pdGtSDiEk6B5fBGE1qNVhw==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -2462,9 +2547,9 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
-      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
      "dev": true,
      "funding": [
        {
@@ -2482,11 +2567,11 @@
      ],
      "license": "MIT",
      "dependencies": {
-        "baseline-browser-mapping": "^2.8.25",
-        "caniuse-lite": "^1.0.30001754",
-        "electron-to-chromium": "^1.5.249",
+        "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.1.4"
+        "update-browserslist-db": "^1.2.0"
      },
      "bin": {
        "browserslist": "cli.js"
@@ -2543,9 +2628,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001757",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
-      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
+      "version": "1.0.30001760",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz",
+      "integrity": "sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==",
      "dev": true,
      "funding": [
        {
@@ -2749,16 +2834,16 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.260",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.260.tgz",
-      "integrity": "sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==",
+      "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/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
      "license": "MIT",
      "dependencies": {
        "graceful-fs": "^4.2.4",
@@ -2861,9 +2946,9 @@
      "license": "MIT"
    },
    "node_modules/execa": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.0.tgz",
-      "integrity": "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.1.tgz",
+      "integrity": "sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -3756,16 +3841,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/npm-normalize-package-bin": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz",
@@ -3852,6 +3927,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/packrup": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/packrup/-/packrup-0.1.2.tgz",
+      "integrity": "sha512-ZcKU7zrr5GlonoS9cxxrb5HVswGnyj6jQvwFBa6p5VFw7G71VAHcUKL5wyZSU/ECtPM/9gacWxy2KFQKt1gMNA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
    "node_modules/pako": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -3955,9 +4039,9 @@
      }
    },
    "node_modules/pocketbase": {
-      "version": "0.26.3",
-      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.26.3.tgz",
-      "integrity": "sha512-5deUKRoEczpxxuHzwr6/DHVmgbggxylEVig8CKN+MjvtYxPUqX/C6puU0yaR2yhTi8zrh7J9s7Ty+qBGwVzWOQ==",
+      "version": "0.26.5",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.26.5.tgz",
+      "integrity": "sha512-SXcq+sRvVpNxfLxPB1C+8eRatL7ZY4o3EVl/0OdE3MeR9fhPyZt0nmmxLqYmkLvXCN9qp3lXWV/0EUYb3MmMXQ==",
      "license": "MIT"
    },
    "node_modules/postcss": {
@@ -4167,9 +4251,9 @@
      "license": "MIT"
    },
    "node_modules/sass": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
-      "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz",
+      "integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==",
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -4188,9 +4272,9 @@
      }
    },
    "node_modules/sass-embedded": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.93.3.tgz",
-      "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.96.0.tgz",
+      "integrity": "sha512-z9PQ7owvdhn7UuZGrpPccdkcH9xJd9iCv+UQhcPqppBslYEp0R9LRQVyyPTZg7jfA77bGxz/I8V48LXJR5LjXQ==",
      "devOptional": true,
      "license": "MIT",
      "dependencies": {
@@ -4210,30 +4294,30 @@
        "node": ">=16.0.0"
      },
      "optionalDependencies": {
-        "sass-embedded-all-unknown": "1.93.3",
-        "sass-embedded-android-arm": "1.93.3",
-        "sass-embedded-android-arm64": "1.93.3",
-        "sass-embedded-android-riscv64": "1.93.3",
-        "sass-embedded-android-x64": "1.93.3",
-        "sass-embedded-darwin-arm64": "1.93.3",
-        "sass-embedded-darwin-x64": "1.93.3",
-        "sass-embedded-linux-arm": "1.93.3",
-        "sass-embedded-linux-arm64": "1.93.3",
-        "sass-embedded-linux-musl-arm": "1.93.3",
-        "sass-embedded-linux-musl-arm64": "1.93.3",
-        "sass-embedded-linux-musl-riscv64": "1.93.3",
-        "sass-embedded-linux-musl-x64": "1.93.3",
-        "sass-embedded-linux-riscv64": "1.93.3",
-        "sass-embedded-linux-x64": "1.93.3",
-        "sass-embedded-unknown-all": "1.93.3",
-        "sass-embedded-win32-arm64": "1.93.3",
-        "sass-embedded-win32-x64": "1.93.3"
+        "sass-embedded-all-unknown": "1.96.0",
+        "sass-embedded-android-arm": "1.96.0",
+        "sass-embedded-android-arm64": "1.96.0",
+        "sass-embedded-android-riscv64": "1.96.0",
+        "sass-embedded-android-x64": "1.96.0",
+        "sass-embedded-darwin-arm64": "1.96.0",
+        "sass-embedded-darwin-x64": "1.96.0",
+        "sass-embedded-linux-arm": "1.96.0",
+        "sass-embedded-linux-arm64": "1.96.0",
+        "sass-embedded-linux-musl-arm": "1.96.0",
+        "sass-embedded-linux-musl-arm64": "1.96.0",
+        "sass-embedded-linux-musl-riscv64": "1.96.0",
+        "sass-embedded-linux-musl-x64": "1.96.0",
+        "sass-embedded-linux-riscv64": "1.96.0",
+        "sass-embedded-linux-x64": "1.96.0",
+        "sass-embedded-unknown-all": "1.96.0",
+        "sass-embedded-win32-arm64": "1.96.0",
+        "sass-embedded-win32-x64": "1.96.0"
      }
    },
    "node_modules/sass-embedded-all-unknown": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.3.tgz",
-      "integrity": "sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.96.0.tgz",
+      "integrity": "sha512-UfUHoWZtxmsDjDfK+fKCy0aJe6zThu7oaIQx0c/vnHgvprcddEPIay01qTXhiUa3cFcsMmvlBvPTVw0gjKVtVQ==",
      "cpu": [
        "!arm",
        "!arm64",
@@ -4243,13 +4327,13 @@
      "license": "MIT",
      "optional": true,
      "dependencies": {
-        "sass": "1.93.3"
+        "sass": "1.96.0"
      }
    },
    "node_modules/sass-embedded-android-arm": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.3.tgz",
-      "integrity": "sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.96.0.tgz",
+      "integrity": "sha512-0mwVRBFig9hH8vFcRExBuBoR+CfUOcWdwarZwbxIFGI1IyH4BLBGiX85vVn6ssSCVNydpE6lFGm45CN8O0tQig==",
      "cpu": [
        "arm"
      ],
@@ -4263,9 +4347,9 @@
      }
    },
    "node_modules/sass-embedded-android-arm64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.3.tgz",
-      "integrity": "sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.96.0.tgz",
+      "integrity": "sha512-TJiebTo4TBF5Wrn+lFkUfSN3wazvl8kkFm9a1nA9ZtRdaE0nsJLGnMM6KLQLP2Vl+IOf6ovetZseISkClRoGXw==",
      "cpu": [
        "arm64"
      ],
@@ -4279,9 +4363,9 @@
      }
    },
    "node_modules/sass-embedded-android-riscv64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.3.tgz",
-      "integrity": "sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.96.0.tgz",
+      "integrity": "sha512-7AVu/EeJqKN3BGNhm+tc1XzmoqbOtCwHG2VgN6j6Lyqh1JZlx0dglRtyQuKDZ7odTKiWmotEIuYZ6OxLmr2Ejg==",
      "cpu": [
        "riscv64"
      ],
@@ -4295,9 +4379,9 @@
      }
    },
    "node_modules/sass-embedded-android-x64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.3.tgz",
-      "integrity": "sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.96.0.tgz",
+      "integrity": "sha512-ei/UsT0q8rF5JzWhn1A7B0M1y/IiWVY3l4zibQrXk5MGaOXHlCM6ffZD+2j7C613Jm9/KAQ7yX1NIIu72LPgDQ==",
      "cpu": [
        "x64"
      ],
@@ -4311,9 +4395,9 @@
      }
    },
    "node_modules/sass-embedded-darwin-arm64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.3.tgz",
-      "integrity": "sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.96.0.tgz",
+      "integrity": "sha512-OMvN5NWcrrisC24ZR3GyaWJ1uFxw25qLnUkpEso9TSlaMWiomjU82/uQ/AkQvIMl+EMlJqeYLxZWvq/byLH5Xg==",
      "cpu": [
        "arm64"
      ],
@@ -4327,9 +4411,9 @@
      }
    },
    "node_modules/sass-embedded-darwin-x64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.3.tgz",
-      "integrity": "sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.96.0.tgz",
+      "integrity": "sha512-J/R5sv0eW+/DU98rccHPO1f3lsTFjVTpdkU9d3P1yB7BFmQjw5PYde9BVRlXeOawPwfgT3p/hvY4RELScICdww==",
      "cpu": [
        "x64"
      ],
@@ -4343,9 +4427,9 @@
      }
    },
    "node_modules/sass-embedded-linux-arm": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.3.tgz",
-      "integrity": "sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.96.0.tgz",
+      "integrity": "sha512-XuQvV6gNld5Bz3rX0SFLtKPGMu4UQdXNp//9A+bDmtVGZ6yu8REIqphQBxOMpgkAKsA4JZLKKk1N97woeVsIlA==",
      "cpu": [
        "arm"
      ],
@@ -4359,9 +4443,9 @@
      }
    },
    "node_modules/sass-embedded-linux-arm64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.3.tgz",
-      "integrity": "sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.96.0.tgz",
+      "integrity": "sha512-VcbVjK0/O/mru0h0FC1WSUWIzMqRrzuJ8eZNMXTs4vApfkh28pxNaUodwU81f1L1nngJ3vpFDBniUKpW6NwJhw==",
      "cpu": [
        "arm64"
      ],
@@ -4375,9 +4459,9 @@
      }
    },
    "node_modules/sass-embedded-linux-musl-arm": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.3.tgz",
-      "integrity": "sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.96.0.tgz",
+      "integrity": "sha512-qK7FrnczCVECZXtyYOoI3azFlMDZn70GI1yJPPuZLpWvwIPYoZOLv3u6JSec5o3wT6KeKyWG3ZpGIpigLUjPig==",
      "cpu": [
        "arm"
      ],
@@ -4391,9 +4475,9 @@
      }
    },
    "node_modules/sass-embedded-linux-musl-arm64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.3.tgz",
-      "integrity": "sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.96.0.tgz",
+      "integrity": "sha512-lVyLObEeu8Wgw8riC6dSMlkF7jVNAjdZ1jIBhvX1yDsrQwwaI60pM21YXmnZSFyCE6KVFkKAgwRQNO/IkoCwMA==",
      "cpu": [
        "arm64"
      ],
@@ -4407,9 +4491,9 @@
      }
    },
    "node_modules/sass-embedded-linux-musl-riscv64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.3.tgz",
-      "integrity": "sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.96.0.tgz",
+      "integrity": "sha512-Y+DuGVRsM2zGl268QN5aF/Y6OFYTILb3f+6huEXKlGL6FK2MXadsmeoVbmKVrTamQHzyA2bWWMU1C0jhVFtlzg==",
      "cpu": [
        "riscv64"
      ],
@@ -4423,9 +4507,9 @@
      }
    },
    "node_modules/sass-embedded-linux-musl-x64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.3.tgz",
-      "integrity": "sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.96.0.tgz",
+      "integrity": "sha512-sAQtUQ8fFNxnxSf3fncOh892Hfxa4PW4e5qrnSE0Y1IGV/wsTzk7m5Z6IeT7sa3BsvXh5TFN6+JGbUoOJ5RigA==",
      "cpu": [
        "x64"
      ],
@@ -4439,9 +4523,9 @@
      }
    },
    "node_modules/sass-embedded-linux-riscv64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.3.tgz",
-      "integrity": "sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.96.0.tgz",
+      "integrity": "sha512-Bf6bAjuUm6sfGHo0XoZEstjVkEWwmmtOSomGoPuAwXFS9GQnFcqDz9EXKNkZEOsQi2D+aDeDxs8HcU9/OLMT9g==",
      "cpu": [
        "riscv64"
      ],
@@ -4455,9 +4539,9 @@
      }
    },
    "node_modules/sass-embedded-linux-x64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.3.tgz",
-      "integrity": "sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.96.0.tgz",
+      "integrity": "sha512-U4GROkS0XM6ekqs/ubroWwFAGY9N35wqrt5q6Y+MJCpTK5bHPHlgFo7J75ZUSaEObL+UrDqvMDQkCdYEFiiQbg==",
      "cpu": [
        "x64"
      ],
@@ -4471,9 +4555,9 @@
      }
    },
    "node_modules/sass-embedded-unknown-all": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.3.tgz",
-      "integrity": "sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.96.0.tgz",
+      "integrity": "sha512-OHzGEr2VElK2SaQdkkTX0O0KwTbiv1N/EhnHgzXYaZWOTvv0gxEfR7q7x/oScCBIZc2x8dSfvThfBnohIClo/w==",
      "license": "MIT",
      "optional": true,
      "os": [
@@ -4483,13 +4567,13 @@
        "!win32"
      ],
      "dependencies": {
-        "sass": "1.93.3"
+        "sass": "1.96.0"
      }
    },
    "node_modules/sass-embedded-win32-arm64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.3.tgz",
-      "integrity": "sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.96.0.tgz",
+      "integrity": "sha512-KKz1h5pr45fwrKcxrxHsujo3f/HgVkX64YNJ9PRPuOuX7lU8g18IEgDxoTGQ64PPBQ5RXOt6jxpT+x2OLPVnCw==",
      "cpu": [
        "arm64"
      ],
@@ -4503,9 +4587,9 @@
      }
    },
    "node_modules/sass-embedded-win32-x64": {
-      "version": "1.93.3",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.3.tgz",
-      "integrity": "sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==",
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.96.0.tgz",
+      "integrity": "sha512-MDreKaWcgiyKD5YPShaRvUBoe5dC2y8IPJK49G7iQjoMfw9INDCBkDdLcz00Mn0eJq4nJJp5UEE98M6ljIrBRg==",
      "cpu": [
        "x64"
      ],
@@ -4670,9 +4754,9 @@
      }
    },
    "node_modules/superjson": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.5.tgz",
-      "integrity": "sha512-zWPTX96LVsA/eVYnqOM2+ofcdPqdS1dAF1LN4TS2/MWuUpfitd9ctTa87wt4xrYnZnkLtS69xpBdSxVBP5Rm6w==",
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
      "license": "MIT",
      "dependencies": {
        "copy-anything": "^4"
@@ -4721,9 +4805,9 @@
      }
    },
    "node_modules/tailwindcss": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
-      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
      "license": "MIT"
    },
    "node_modules/tapable": {
@@ -4835,6 +4919,21 @@
      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/unhead": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.11.20.tgz",
+      "integrity": "sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/dom": "1.11.20",
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
    "node_modules/unicorn-magic": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -4859,9 +4958,9 @@
      }
    },
    "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
-      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
      "dev": true,
      "funding": [
        {
@@ -5122,9 +5221,9 @@
      }
    },
    "node_modules/vue-router": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
-      "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
      "license": "MIT",
      "dependencies": {
        "@vue/devtools-api": "^6.6.4"
@@ -5210,6 +5309,15 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.1",
+    "@vueuse/head": "^2.0.0",
    "buffer": "^6.0.3",
    "gif.js": "^0.2.0",
    "gray-matter": "^4.0.3",
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,8 @@
 All notable changes to this project will be documented in this file.

+## [1.9.0] - 2025-12-14
+- You can now share spritesheets to edit them later or share them with others
+
 ## [1.8.0] - 2025-11-23
 - Fix context menu location
 - You can now reposition all sprites in current frame
--- a/public/blog/2.jpg
+++ b/public/blog/2.jpg
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -25,10 +25,18 @@
  <loc>https://spritesheetgenerator.online/blog</loc>
  <lastmod>2025-11-26T15:50:00+00:00</lastmod>
 </url>
+<url>
+  <loc>https://spritesheetgenerator.online/blog/why-pixel-art</loc>
+  <lastmod>2025-11-26T15:50:00+00:00</lastmod>
+</url>
 <url>
  <loc>https://spritesheetgenerator.online/blog/welcome</loc>
  <lastmod>2025-11-26T15:50:00+00:00</lastmod>
 </url>
+<url>
+  <loc>https://spritesheetgenerator.online/faq</loc>
+  <lastmod>2025-11-26T19:37:00+00:00</lastmod>
+</url>


 </urlset>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,46 +1,51 @@
 <template>
  <div class="min-h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300" :class="{ 'lg:h-screen': layers.some(l => l.sprites.length) && $route.name === 'home' }">
+    <!-- Decorative gradient blur in top-right corner -->
+    <div class="fixed top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-blue-400/40 via-purple-400/30 to-transparent dark:from-blue-400/30 dark:via-purple-400/20 blur-3xl pointer-events-none -translate-y-32 translate-x-32"></div>
    <div class="flex flex-col flex-1" :class="{ 'lg:overflow-hidden': layers.some(l => l.sprites.length) && $route.name === 'home' }">
-      <header class="mb-6 sm:mb-5">
-        <div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8">
-          <div class="text-center sm:text-left">
-            <router-link to="/" class="block group">
-              <h1 class="text-3xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 tracking-tight mb-3 group-hover:opacity-80 transition-opacity">Spritesheet generator</h1>
+      <header class="mb-6 sm:mb-8">
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 mb-6">
+          <div class="text-center sm:text-left w-full sm:w-auto">
+            <router-link to="/" class="block group" title="Spritesheet Generator - Create professional spritesheets" aria-label="Go to homepage">
+              <span class="inline-block text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 tracking-tight mb-2 sm:mb-3 group-hover:opacity-80 transition-opacity">Spritesheet generator</span>
            </router-link>
            <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">Create professional spritesheets for your game development projects</p>
          </div>
-          <div class="flex flex-col items-center sm:items-end gap-3">
-            <nav class="flex flex-wrap items-center justify-center gap-3">
-              <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="btn btn-secondary hover:shadow-md" data-rybbit-event="source-link">
+          <div class="flex flex-col items-center sm:items-end gap-3 w-full sm:w-auto">
+            <nav class="flex flex-wrap items-center justify-center sm:justify-end gap-2 sm:gap-3">
+              <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="btn btn-secondary hover:shadow-md" data-rybbit-event="source-link" title="View source code on Gitea" aria-label="View source code repository">
                <i class="fab fa-github"></i>
                <span class="font-medium">Source</span>
              </a>
-              <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="btn btn-secondary hover:shadow-md" data-rybbit-event="discord-link">
+              <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="btn btn-secondary hover:shadow-md" data-rybbit-event="discord-link" title="Join our Discord community" aria-label="Join Discord server">
                <i class="fab fa-discord"></i>
                <span class="font-medium">Discord</span>
              </a>
-              <a href="#" @click.prevent="openHelpModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="help-link">
+              <a href="#" @click.prevent="openHelpModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="help-link" title="Get help and documentation" aria-label="Open help modal">
                <i class="fas fa-question-circle"></i>
                <span class="font-medium">Help</span>
              </a>
-              <a href="#" @click.prevent="openFeedbackModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="feedback-link">
+              <a href="#" @click.prevent="openFeedbackModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="feedback-link" title="Share your feedback with us" aria-label="Open feedback modal">
                <i class="fas fa-comment-dots"></i>
                <span class="font-medium">Feedback</span>
              </a>
              <dark-mode-toggle />
            </nav>
-            <div class="flex gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
-              <router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors">Home</router-link>
-              <router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors">Blog</router-link>
-              <router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors">About Us</router-link>
-              <router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors">Contact</router-link>
-              <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors">Privacy Policy</router-link>
-              <a href="/sitemap.xml" target="_blank" class="hover:text-gray-900 dark:hover:text-white transition-colors">Sitemap</a>
+            <div class="flex flex-wrap items-center justify-center sm:justify-end gap-3 sm:gap-4 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">
+              <router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Spritesheet Generator Home" aria-label="Navigate to home page">Home</router-link>
+              <router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Read our blog posts" aria-label="Navigate to blog">Blog</router-link>
+              <router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Learn more about us" aria-label="Navigate to about page">About Us</router-link>
+              <router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Get in touch with us" aria-label="Navigate to contact page">Contact</router-link>
+              <router-link to="/faq" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Frequently Asked Questions" aria-label="Navigate to FAQ page">FAQ</router-link>
+              <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Read our privacy policy" aria-label="Navigate to privacy policy">Privacy Policy</router-link>
+              <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="View XML sitemap" aria-label="View sitemap">Sitemap</a>
            </div>
          </div>
        </div>
      </header>

+      <Breadcrumbs />
+
      <router-view />
    </div>

@@ -70,9 +75,10 @@
  import HelpModal from './components/HelpModal.vue';
  import FeedbackModal from './components/FeedbackModal.vue';
  import DarkModeToggle from './components/utilities/DarkModeToggle.vue';
+  import Breadcrumbs from './components/Breadcrumbs.vue';
  import { useLayers } from './composables/useLayers';

-  const { layers } = useLayers();
+  const { layers, hasSprites } = useLayers();

  const isHelpModalOpen = ref(false);
  const isFeedbackModalOpen = ref(false);
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,9 +4,6 @@
 /* Dark mode transition */
 html,
 body {
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
 }

--- a/src/blog/why-pixel-art.md
+++ b/src/blog/why-pixel-art.md
@@ -0,0 +1,97 @@
+---
+title: 'Why pixel art without proper spritesheet tools is holding you back'
+date: '2025-11-26'
+description: 'Pixel art is already challenging. Why make it harder?'
+image: '/blog/2.jpg'
+---
+
+If you've worked on game projects with pixel art, you know the pain: managing dozens of individual sprite files, keeping track of animation frames, and organizing everything into a format your game engine can use. It's tedious, error-prone, and kills your creative flow.
+
+## The pixel art workflow nightmare
+
+### The zoom dance problem
+
+Pixel artists constantly switch between magnified and unmagnified views. At 500% zoom, you place individual pixels. At 100%, you check if they create the intended effect. You need to see both the micro details and the macro picture—but you can't do both at once.
+
+This back-and-forth is exhausting, especially when you discover a single shade-too-dark pixel throws off your entire composition.
+
+### File management chaos
+
+Creating a character with idle, walking, running, jumping, and attacking animations? Each with 8-12 frames? That's 40-60+ individual image files for one character.
+
+Managing these manually means:
+
+- Tracking which file belongs to which animation
+- Ensuring consistent sizing across all frames
+- Organizing files in the right sequence
+- Exporting each frame separately
+- Hoping you didn't skip or misname anything
+
+### The multi-tool trap
+
+Many developers juggle multiple applications:
+
+1. Sketch in a drawing program
+2. Refine in a pixel art editor
+3. Export individual frames
+4. Resize in an image editor
+5. Manually arrange in another tool
+6. Export as a spritesheet
+7. Create data files for your game engine
+8. Find an error in frame 23
+9. Start over
+
+One developer described the frustration: the feedback loop was too long. They couldn't see what the finished art would look like until after going through multiple tools. Details that looked great in high-res turned sloppy after conversion.
+
+## Why spritesheets matter
+
+Sprite sheets aren't optional—they're essential for game development:
+
+- **Better performance**: One file instead of 50+ individual image requests
+- **Simpler management**: One file instead of dozens
+- **Proper animation**: Frame data embedded or easily referenced
+- **Optimized memory**: Better texture packing, less wasted space
+
+But creating them manually is painful. You need to calculate optimal layouts, ensure consistent spacing, maintain pixel-perfect alignment, and generate metadata. One mistake breaks your animations.
+
+## The solution: dedicated spritesheet generators
+
+This is where [spritesheetgenerator.online](https://spritesheetgenerator.online) changes everything.
+
+Instead of the multi-tool nightmare, you get:
+
+1. **Upload sprites**: Drag and drop your images
+2. **Automatic arrangement**: Intelligent optimal layout
+3. **Preview animations**: See your work in real-time
+4. **Export everything**: Spritesheet image and data files ready to use
+
+### Why this matters
+
+**Faster iteration**: Change frame 7? Re-upload and regenerate in seconds instead of minutes.
+
+**Consistent results**: No more alignment worries. The tool handles technical details.
+
+**Immediate preview**: See frames flow together, check light-blending in motion, verify timing—all before exporting.
+
+**Professional output**: Properly formatted spritesheets that drop right into your game engine.
+
+### Free and accessible
+
+Being browser-based means:
+
+- No installation required
+- Works on any device
+- No subscriptions or licenses
+- Access from anywhere
+
+For indie developers, hobbyists, or students with limited budgets, this is game-changing.
+
+## The bottom line
+
+Pixel art requires precision and patience. That's part of what makes it rewarding. But there's no reason to add unnecessary complexity with manual file management and multi-tool workflows.
+
+Your creative energy should go into placing pixels with intention and crafting smooth animations—not file wrangling.
+
+Using a proper spritesheet generator doesn't make you less of an artist. It makes you a smarter one.
+
+The pixel art is hard enough. The workflow doesn't have to be.
--- a/src/components/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { RouterLink } from 'vue-router';
+
+  const route = useRoute();
+
+  interface BreadcrumbItem {
+    name: string;
+    path: string;
+  }
+
+  const breadcrumbs = computed<BreadcrumbItem[]>(() => {
+    const items: BreadcrumbItem[] = [{ name: 'Home', path: '/' }];
+
+    // Map route names to breadcrumb labels
+    const routeLabels: Record<string, string> = {
+      'blog-overview': 'Blog',
+      'blog-detail': 'Blog',
+      about: 'About Us',
+      contact: 'Contact',
+      'privacy-policy': 'Privacy Policy',
+      faq: 'FAQ',
+    };
+
+    if (route.name && route.name !== 'home') {
+      const routeName = route.name.toString();
+
+      if (routeName === 'blog-detail') {
+        // For blog detail pages, add Blog first, then the post title
+        items.push({ name: 'Blog', path: '/blog' });
+
+        // Get the post title from route meta or params if available
+        const postTitle = (route.meta.title as string) || 'Article';
+        items.push({ name: postTitle, path: route.path });
+      } else if (routeLabels[routeName]) {
+        items.push({ name: routeLabels[routeName], path: route.path });
+      }
+    }
+
+    return items;
+  });
+
+  const shouldShowBreadcrumbs = computed(() => {
+    return breadcrumbs.value.length > 1 && route.name !== 'home';
+  });
+</script>
+
+<template>
+  <nav v-if="shouldShowBreadcrumbs" aria-label="Breadcrumb" class="mb-4">
+    <ol class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+      <li v-for="(item, index) in breadcrumbs" :key="item.path" class="flex items-center gap-2">
+        <RouterLink v-if="index < breadcrumbs.length - 1" :to="item.path" class="hover:text-gray-900 dark:hover:text-white transition-colors" :aria-label="`Navigate to ${item.name}`">
+          {{ item.name }}
+        </RouterLink>
+        <span v-else class="font-medium text-gray-900 dark:text-white" aria-current="page">
+          {{ item.name }}
+        </span>
+        <i v-if="index < breadcrumbs.length - 1" class="fas fa-chevron-right text-xs text-gray-400"></i>
+      </li>
+    </ol>
+  </nav>
+</template>
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -23,7 +23,7 @@

          <div class="max-w-none text-gray-700 dark:text-gray-300">
            <p class="mb-4 text-base leading-relaxed">Spritesheet generator is a free, open-source tool for creating spritesheets for game development and animation projects. This tool allows you to upload individual sprite images and arrange them into a spritesheet with customizable layout.</p>
-            <p class="mb-4 text-base leading-relaxed">Matrix: root@adhd.sh, Discord: nu11ed</p>
+            <p class="mb-4 text-base leading-relaxed">Matrix: root@adhd.sh, Discord: streetshadow</p>
            <h4 class="mt-6 mb-3 text-lg font-medium text-gray-900 dark:text-gray-100">How to use:</h4>
            <ol class="list-decimal pl-6 space-y-2 mb-4">
              <li>Upload your sprite images by dragging and dropping them or clicking the upload area</li>
@@ -56,6 +56,16 @@
          </p>

          <div class="space-y-6">
+            <!-- Ko-fi -->
+            <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+              <div class="flex items-center mb-3">
+                <h4 class="text-md font-medium">Ko-fi</h4>
+              </div>
+              <a href="https://ko-fi.com/X8X416D44P" target="_blank" rel="noopener noreferrer" data-rybbit-event="open-kofi">
+                <img height="36" style="border: 0px; height: 36px" src="https://storage.ko-fi.com/cdn/kofi6.png?v=6" alt="Buy Me a Coffee at ko-fi.com" />
+              </a>
+            </div>
+
            <!-- PayPal -->
            <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
              <div class="flex items-center mb-3">
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -0,0 +1,119 @@
+<template>
+  <Modal :is-open="isOpen" @close="close" title="Share spritesheet" :initialWidth="500" :initialHeight="280">
+    <div class="h-full flex flex-col">
+      <div class="flex-1 overflow-auto p-4 space-y-4 dark:bg-gray-800">
+        <!-- Loading state -->
+        <div v-if="loading" class="flex flex-col items-center justify-center py-8">
+          <i class="fas fa-circle-notch fa-spin text-3xl text-gray-400 dark:text-gray-500 mb-3"></i>
+          <p class="text-sm text-gray-600 dark:text-gray-300">Uploading spritesheet...</p>
+        </div>
+
+        <!-- Success state -->
+        <div v-else-if="shareUrl" class="space-y-4">
+          <p class="text-sm text-gray-600 dark:text-gray-300">Your spritesheet is ready to share! Copy the link below:</p>
+
+          <div class="flex items-center gap-2">
+            <input type="text" :value="shareUrl" readonly class="flex-1 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 text-sm font-mono" @focus="($event.target as HTMLInputElement).select()" />
+            <button @click="copyToClipboard" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium transition-colors" :title="copied ? 'Copied!' : 'Copy to clipboard'">
+              <i :class="copied ? 'fas fa-check' : 'fas fa-copy'"></i>
+            </button>
+          </div>
+
+          <p v-if="copied" class="text-sm text-green-600 dark:text-green-400">Link copied to clipboard!</p>
+        </div>
+
+        <!-- Error state -->
+        <div v-else-if="error" class="space-y-4">
+          <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+          <button @click="retry" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 text-sm font-medium transition-colors"><i class="fas fa-redo mr-2"></i>Try again</button>
+        </div>
+
+        <!-- Initial state (shouldn't normally be visible) -->
+        <div v-else class="flex flex-col items-center justify-center py-8">
+          <p class="text-sm text-gray-600 dark:text-gray-300">Preparing to share...</p>
+        </div>
+      </div>
+
+      <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex justify-end">
+        <button type="button" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100" @click="close">Close</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import Modal from './utilities/Modal.vue';
+
+  const props = defineProps<{
+    isOpen: boolean;
+    shareFunction: () => Promise<{ id: string; url: string }>;
+  }>();
+  const emit = defineEmits<{ (e: 'close'): void }>();
+
+  const loading = ref(false);
+  const shareUrl = ref('');
+  const error = ref('');
+  const copied = ref(false);
+
+  const close = () => emit('close');
+
+  const performShare = async () => {
+    loading.value = true;
+    error.value = '';
+    shareUrl.value = '';
+    copied.value = false;
+
+    try {
+      const result = await props.shareFunction();
+      shareUrl.value = result.url;
+    } catch (e: any) {
+      console.error('Failed to share spritesheet:', e);
+      error.value = 'Failed to share spritesheet. Please try again later.';
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const retry = () => {
+    performShare();
+  };
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl.value);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    } catch {
+      // Fallback for older browsers
+      const input = document.createElement('input');
+      input.value = shareUrl.value;
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand('copy');
+      document.body.removeChild(input);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    }
+  };
+
+  // Start sharing when modal opens
+  watch(
+    () => props.isOpen,
+    isOpen => {
+      if (isOpen) {
+        performShare();
+      } else {
+        // Reset state when closing
+        loading.value = false;
+        shareUrl.value = '';
+        error.value = '';
+        copied.value = false;
+      }
+    }
+  );
+</script>
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -1,6 +1,6 @@
 <template>
  <Teleport to="body">
-    <div v-if="showContextMenu" class="fixed bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
+    <div v-if="showContextMenu" @click.stop class="fixed bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
      <button @click="addSprite" class="w-full px-5 py-3 text-left hover:bg-blue-50 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
        <i class="fas fa-plus text-blue-600 dark:text-blue-400"></i>
        <span>Add Sprite</span>
@@ -448,6 +448,11 @@
  });

  const startDrag = (event: MouseEvent) => {
+    // If the click originated from an interactive element (button, link, input), ignore drag handling
+    const target = event.target as HTMLElement;
+    if (target && target.closest('button, a, input, select, textarea')) {
+      return;
+    }
    if (!gridContainerRef.value) return;

    // Hide context menu if open
@@ -476,8 +481,22 @@
    dragStart(event);
  };

+  const pendingDrag = ref(false);
+  const latestEvent = ref<MouseEvent | null>(null);
+
  const drag = (event: MouseEvent) => {
-    dragMove(event);
+    // Store the latest event and schedule a single animation frame update
+    latestEvent.value = event;
+    if (!pendingDrag.value) {
+      pendingDrag.value = true;
+      requestAnimationFrame(() => {
+        if (latestEvent.value) {
+          dragMove(latestEvent.value);
+        }
+        pendingDrag.value = false;
+        latestEvent.value = null;
+      });
+    }
  };

  const removeSprite = () => {
@@ -534,12 +553,11 @@
  };

  onMounted(() => {
-    // Hide context menu when clicking elsewhere
-    document.addEventListener('click', hideContextMenu);
+    document.addEventListener('mouseup', stopDrag);
  });

  onUnmounted(() => {
-    document.removeEventListener('click', hideContextMenu);
+    document.removeEventListener('mouseup', stopDrag);
  });

  // Watch for background color changes
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="spritesheet-preview w-full h-full">
-    <div class="flex flex-col lg:flex-row gap-4 h-full">
-      <div class="flex-1 min-w-0 flex flex-col">
+    <div class="flex flex-col lg:flex-row gap-4 h-full min-h-0">
+      <div class="flex-1 min-w-0 flex flex-col min-h-0">
        <div
-          class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[300px] max-h-[calc(100vh-12rem)] shadow-sm hover:shadow-md transition-shadow duration-200"
+          class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[200px] sm:min-h-[300px] max-h-[50vh] lg:max-h-none shadow-sm hover:shadow-md transition-shadow duration-200"
          @mousemove="drag"
          @mouseup="stopDrag"
          @mouseleave="stopDrag"
@@ -82,10 +82,10 @@
        </div>
      </div>

-      <div class="lg:w-80 xl:w-96 flex-shrink-0">
-        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+      <div class="lg:w-80 xl:w-96 flex-shrink-0 lg:h-full lg:min-h-0 flex flex-col">
+        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden flex-1 flex flex-col lg:overflow-y-auto">
          <!-- Playback Controls -->
-          <div class="p-4 border-b border-gray-100 dark:border-gray-700">
+          <div class="p-4 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Playback</h3>
            <div class="flex items-center gap-2">
              <button @click="togglePlayback" class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg transition-all cursor-pointer flex-1 shadow-sm active:scale-95">
@@ -108,7 +108,7 @@
          </div>

          <!-- Animation Settings -->
-          <div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5">
+          <div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5 flex-shrink-0">
            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Animation</h3>

            <!-- Frame Navigation -->
@@ -131,7 +131,7 @@
          </div>

          <!-- View Options -->
-          <div class="p-4 space-y-5">
+          <div class="p-4 space-y-5 flex-1">
            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">View Options</h3>

            <!-- Zoom Control -->
@@ -185,7 +185,7 @@
          </div>

          <!-- Current frame offset display -->
-          <div v-if="currentFrameSprite" class="px-4 pb-4">
+          <div v-if="currentFrameSprite" class="px-4 pb-4 flex-shrink-0">
            <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-100 dark:border-gray-700 flex items-center justify-between">
              <span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Offset</span>
              <span class="text-xs font-mono font-bold text-gray-700 dark:text-gray-200">X: {{ currentFrameSprite.x }} <span class="text-gray-300 dark:text-gray-600 mx-1">|</span> Y: {{ currentFrameSprite.y }}</span>
@@ -193,7 +193,7 @@
          </div>

          <!-- Frame Selection (when Compare sprites is enabled) -->
-          <div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4">
+          <div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4 flex-shrink-0">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Visible Frames</h3>
              <div class="flex gap-1">
@@ -513,4 +513,36 @@
    cursor: pointer;
    border: none;
  }
+
+  /* Custom scrollbar for controls panel */
+  .custom-scrollbar::-webkit-scrollbar,
+  .lg\:overflow-y-auto::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track,
+  .lg\:overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb,
+  .lg\:overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover,
+  .lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(156, 163, 175, 0.8);
+  }
+
+  :global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb,
+  :global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: rgba(75, 85, 99, 0.5);
+  }
+
+  :global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover,
+  :global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(75, 85, 99, 0.8);
+  }
 </style>
--- a/src/components/SpritesheetSplitter.vue
+++ b/src/components/SpritesheetSplitter.vue
@@ -1,91 +1,92 @@
 <template>
  <Modal :is-open="isOpen" @close="cancel" title="Split spritesheet">
    <div class="space-y-6">
-      <div class="flex flex-col space-y-4">
-        <div class="flex items-center justify-center mb-4">
-          <img :src="imageUrl" alt="Spritesheet" class="max-w-full max-h-48 sm:max-h-64 border border-gray-300 dark:border-gray-600 rounded-lg" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
-        </div>
-
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div class="space-y-2">
-            <label for="detection-method" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Detection Method</label>
-            <select
-              id="detection-method"
-              v-model="detectionMethod"
-              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
-              data-rybbit-event="spritesheet-detection-method"
-            >
-              <option value="irregular">Auto-detect</option>
-              <option value="manual">Manual (specify rows and columns)</option>
-            </select>
-          </div>
-
-          <div v-if="detectionMethod === 'auto' || detectionMethod === 'irregular'" class="space-y-2">
-            <label for="sensitivity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Detection Sensitivity</label>
-            <input type="range" id="sensitivity" v-model="sensitivity" min="1" max="100" class="w-full dark:accent-blue-400" data-rybbit-event="spritesheet-sensitivity" />
-            <div class="text-xs text-gray-500 dark:text-gray-400 flex justify-between">
-              <span>Low</span>
-              <span>High</span>
-            </div>
-          </div>
-
-          <div v-if="detectionMethod === 'manual'" class="space-y-2">
-            <label for="rows" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rows</label>
-            <input
-              type="number"
-              id="rows"
-              v-model.number="rows"
-              min="1"
-              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
-              data-rybbit-event="spritesheet-rows"
-            />
-          </div>
-
-          <div v-if="detectionMethod === 'manual'" class="space-y-2">
-            <label for="columns" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Columns</label>
-            <input
-              type="number"
-              id="columns"
-              v-model.number="columns"
-              min="1"
-              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
-              data-rybbit-event="spritesheet-columns"
-            />
-          </div>
-        </div>
+      <!-- Preview Image -->
+      <div class="flex items-center justify-center">
+        <img :src="imageUrl" alt="Spritesheet" class="max-w-full max-h-48 sm:max-h-64 border border-gray-300 dark:border-gray-600 rounded-lg" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+      </div>

+      <!-- Detection Mode -->
+      <div class="space-y-4">
        <div class="space-y-2">
-          <div class="flex items-center">
-            <input type="checkbox" id="remove-empty" v-model="removeEmpty" class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 rounded" data-rybbit-event="spritesheet-remove-empty" />
-            <label for="remove-empty" class="ml-2 block text-sm text-gray-700 dark:text-gray-300"> Remove empty sprites (transparent/background color) </label>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Detection Mode </label>
+          <div class="grid grid-cols-2 gap-3">
+            <button @click="detectionMode = 'grid'" :class="['px-4 py-3 rounded-lg border-2 text-left transition-all', detectionMode === 'grid' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500']">
+              <div class="font-medium text-gray-900 dark:text-gray-100">Grid</div>
+              <div class="text-xs text-gray-500 dark:text-gray-400">Split by cell size</div>
+            </button>
+            <button @click="detectionMode = 'auto'" :class="['px-4 py-3 rounded-lg border-2 text-left transition-all', detectionMode === 'auto' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500']">
+              <div class="font-medium text-gray-900 dark:text-gray-100">Auto-detect</div>
+              <div class="text-xs text-gray-500 dark:text-gray-400">Find individual sprites</div>
+            </button>
          </div>
        </div>

-        <div v-if="previewSprites.length > 0" class="space-y-2">
-          <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Preview ({{ previewSprites.length }} sprites)</h3>
-          <div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-96 overflow-y-auto p-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
-            <div v-for="(sprite, index) in previewSprites" :key="index" class="relative border border-gray-300 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center" :style="{ width: '80px', height: '80px' }">
-              <img :src="sprite.url" alt="Sprite preview" class="max-w-full max-h-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+        <!-- Grid Mode Options -->
+        <div v-if="detectionMode === 'grid'" class="space-y-4">
+          <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-1">
+              <label for="cell-width" class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Cell Width (px) </label>
+              <input type="number" id="cell-width" v-model.number="cellWidth" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" />
            </div>
+            <div class="space-y-1">
+              <label for="cell-height" class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Cell Height (px) </label>
+              <input type="number" id="cell-height" v-model.number="cellHeight" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" />
+            </div>
+          </div>
+
+          <div class="flex items-center">
+            <input type="checkbox" id="preserve-cell-size" v-model="preserveCellSize" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
+            <label for="preserve-cell-size" class="ml-2 block text-sm text-gray-700 dark:text-gray-300"> Preserve cell size (keep transparent padding) </label>
+          </div>
+
+          <div v-if="imageElement" class="text-xs text-gray-500 dark:text-gray-400">Image: {{ imageElement.width }}×{{ imageElement.height }}px → {{ gridCols }}×{{ gridRows }} cells</div>
+        </div>
+
+        <!-- Auto-detect Options -->
+        <div v-if="detectionMode === 'auto'" class="space-y-2">
+          <label for="sensitivity" class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Detection Sensitivity </label>
+          <input type="range" id="sensitivity" v-model.number="sensitivity" min="1" max="100" class="w-full dark:accent-blue-400" />
+          <div class="text-xs text-gray-500 dark:text-gray-400 flex justify-between">
+            <span>Low (more sprites)</span>
+            <span>High (fewer sprites)</span>
+          </div>
+        </div>
+
+        <!-- Common Options -->
+        <div class="flex items-center">
+          <input type="checkbox" id="remove-empty" v-model="removeEmpty" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
+          <label for="remove-empty" class="ml-2 block text-sm text-gray-700 dark:text-gray-300"> Remove empty sprites </label>
+        </div>
+      </div>
+
+      <!-- Preview -->
+      <div v-if="previewSprites.length > 0 || isProcessing" class="space-y-2">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
+          <span v-if="isProcessing">Detecting sprites...</span>
+          <span v-else>Preview ({{ previewSprites.length }} sprites)</span>
+        </h3>
+        <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-80 overflow-y-auto p-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800">
+          <div v-for="(sprite, index) in previewSprites" :key="index" class="relative border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 flex items-center justify-center aspect-square">
+            <img :src="sprite.url" alt="Sprite" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
          </div>
        </div>
      </div>

-      <div class="flex flex-col-reverse sm:flex-row sm:justify-end space-y-3 space-y-reverse sm:space-y-0 sm:space-x-3">
+      <!-- Actions -->
+      <div class="flex justify-end space-x-3">
        <button
          @click="cancel"
-          class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
-          data-rybbit-event="spritesheet-cancel"
+          class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          Cancel
        </button>
        <button
          @click="confirm"
-          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
          :disabled="previewSprites.length === 0 || isProcessing"
-          data-rybbit-event="spritesheet-split"
+          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
-          Split spritesheet
+          {{ isProcessing ? 'Processing...' : 'Split spritesheet' }}
        </button>
      </div>
    </div>
@@ -93,19 +94,12 @@
 </template>

 <script setup lang="ts">
-  import { ref, watch, onUnmounted } from 'vue';
+  import { ref, watch, computed, onUnmounted } from 'vue';
  import Modal from './utilities/Modal.vue';
  import { useSettingsStore } from '@/stores/useSettingsStore';
+  import { useSpritesheetSplitter } from '@/composables/useSpritesheetSplitter';
  import type { SpriteFile } from '@/types/sprites';
-
-  interface SpritePreview {
-    url: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    isEmpty: boolean;
-  }
+  import type { DetectionMode, SpritePreview } from '@/types/spritesheet';

  const props = defineProps<{
    isOpen: boolean;
@@ -115,93 +109,80 @@

  const emit = defineEmits<{
    (e: 'close'): void;
-    (e: 'split', sprites: SpriteFile[]): void; // Change from File[] to SpriteFile[]
+    (e: 'split', sprites: SpriteFile[]): void;
  }>();

-  // Get settings from store
  const settingsStore = useSettingsStore();
+  const splitter = useSpritesheetSplitter();

  // State
-  const detectionMethod = ref<'manual' | 'auto' | 'irregular'>('irregular');
-  const rows = ref(1);
-  const columns = ref(1);
+  const detectionMode = ref<DetectionMode>('grid');
+  const cellWidth = ref(64);
+  const cellHeight = ref(64);
  const sensitivity = ref(50);
  const removeEmpty = ref(true);
+  const preserveCellSize = ref(false);
  const previewSprites = ref<SpritePreview[]>([]);
  const isProcessing = ref(false);
  const imageElement = ref<HTMLImageElement | null>(null);
-  const irregularWorker = ref<Worker | null>(null);

-  // Cache for sprite detection results
-  const detectionCache = new Map<string, SpritePreview[]>();
+  // Computed
+  const gridCols = computed(() => (imageElement.value && cellWidth.value > 0 ? Math.floor(imageElement.value.width / cellWidth.value) : 0));

-  // Generate cache key for current detection settings
-  function getCacheKey(url: string, method: string, sensitivity: number, removeEmpty: boolean): string {
-    return `${url}-${method}-${sensitivity}-${removeEmpty}`;
-  }
+  const gridRows = computed(() => (imageElement.value && cellHeight.value > 0 ? Math.floor(imageElement.value.height / cellHeight.value) : 0));

-  // Load the image when the component is mounted or the URL changes
-  watch(() => props.imageUrl, loadImage, { immediate: true });
+  // Load image and set initial cell size
+  watch(
+    () => props.imageUrl,
+    url => {
+      if (!url) return;

-  function loadImage() {
-    if (!props.imageUrl) return;
+      const img = new Image();
+      img.onload = () => {
+        imageElement.value = img;

-    const img = new Image();
-    img.onload = () => {
-      imageElement.value = img;
+        // Set suggested cell size
+        const suggested = splitter.getSuggestedCellSize(img.width, img.height);
+        cellWidth.value = suggested.width;
+        cellHeight.value = suggested.height;

-      // Set default rows and columns based on image dimensions
-      // This is a simple heuristic - for pixel art, we might want to detect sprite size
-      const aspectRatio = img.width / img.height;
+        generatePreview();
+      };
+      img.src = url;
+    },
+    { immediate: true }
+  );

-      if (aspectRatio > 1) {
-        // Landscape orientation - likely more columns than rows
-        columns.value = Math.min(Math.ceil(Math.sqrt(aspectRatio * 4)), 8);
-        rows.value = Math.ceil(4 / columns.value);
-      } else {
-        // Portrait orientation - likely more rows than columns
-        rows.value = Math.min(Math.ceil(Math.sqrt(4 / aspectRatio)), 8);
-        columns.value = Math.ceil(4 / rows.value);
-      }
-
-      // Generate initial preview
+  // Regenerate preview when options change
+  watch([detectionMode, cellWidth, cellHeight, sensitivity, removeEmpty, preserveCellSize], () => {
+    if (imageElement.value) {
      generatePreview();
-    };
-    img.src = props.imageUrl;
-  }
+    }
+  });

-  // Generate preview of split sprites with caching
+  // Generate preview
  async function generatePreview() {
    if (!imageElement.value) return;

-    // Check cache first
-    const cacheKey = getCacheKey(props.imageUrl, detectionMethod.value, sensitivity.value, removeEmpty.value);
-
-    if (detectionCache.has(cacheKey)) {
-      previewSprites.value = detectionCache.get(cacheKey)!;
-      return;
-    }
-
    isProcessing.value = true;
    previewSprites.value = [];

    try {
      const img = imageElement.value;

-      if (detectionMethod.value === 'auto') {
-        await autoDetectSprites(img);
-      } else if (detectionMethod.value === 'irregular') {
-        await detectIrregularSprites(img);
+      if (detectionMode.value === 'grid') {
+        previewSprites.value = await splitter.splitByGrid(img, {
+          cellWidth: cellWidth.value,
+          cellHeight: cellHeight.value,
+          preserveCellSize: preserveCellSize.value,
+          removeEmpty: removeEmpty.value,
+        });
      } else {
-        await splitSpritesheet(img, rows.value, columns.value);
+        previewSprites.value = await splitter.detectSprites(img, {
+          sensitivity: sensitivity.value,
+          removeEmpty: removeEmpty.value,
+        });
      }
-
-      // Cache results (limit cache size to prevent memory issues)
-      if (detectionCache.size > 10) {
-        const firstKey = detectionCache.keys().next().value;
-        detectionCache.delete(firstKey || '');
-      }
-      detectionCache.set(cacheKey, previewSprites.value);
    } catch (error) {
      console.error('Error generating preview:', error);
    } finally {
@@ -209,636 +190,6 @@
    }
  }

-  function getSpriteBoundingBox(ctx: CanvasRenderingContext2D, width: number, height: number) {
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const data = imageData.data;
-
-    let minX = width;
-    let minY = height;
-    let maxX = 0;
-    let maxY = 0;
-    let hasContent = false;
-
-    // Scan through all pixels to find the bounding box
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const idx = (y * width + x) * 4;
-        // Check if pixel is not transparent (alpha > 0)
-        if (data[idx + 3] > 10) {
-          // Allow some tolerance for compression artifacts
-          minX = Math.min(minX, x);
-          minY = Math.min(minY, y);
-          maxX = Math.max(maxX, x);
-          maxY = Math.max(maxY, y);
-          hasContent = true;
-        }
-      }
-    }
-
-    // If no non-transparent pixels found, return null
-    if (!hasContent) {
-      return null;
-    }
-
-    // Return bounding box with a small padding, ensuring it stays within bounds
-    const bx = Math.max(0, minX - 1);
-    const by = Math.max(0, minY - 1);
-    const bw = Math.min(width - bx, maxX - minX + 3); // +1 for inclusive bounds, +2 for padding
-    const bh = Math.min(height - by, maxY - minY + 3);
-
-    return {
-      x: bx,
-      y: by,
-      width: Math.max(1, bw),
-      height: Math.max(1, bh),
-    };
-  }
-
-  // Split spritesheet manually based on rows and columns
-  async function splitSpritesheet(img: HTMLImageElement, rows: number, columns: number) {
-    const safeColumns = Number.isFinite(columns) && columns > 0 ? Math.floor(columns) : 1;
-    const safeRows = Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
-    const spriteWidth = Math.max(1, Math.floor(img.width / safeColumns));
-    const spriteHeight = Math.max(1, Math.floor(img.height / safeRows));
-
-    const sprites: SpritePreview[] = [];
-
-    // Create a canvas for processing the full sprite
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-
-    // Create a second canvas for the cropped sprite
-    const croppedCanvas = document.createElement('canvas');
-    const croppedCtx = croppedCanvas.getContext('2d');
-
-    if (!ctx || !croppedCtx) return;
-
-    canvas.width = spriteWidth;
-    canvas.height = spriteHeight;
-
-    // Split the image into individual sprites
-    for (let row = 0; row < safeRows; row++) {
-      for (let col = 0; col < safeColumns; col++) {
-        // Clear the canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the portion of the spritesheet
-        ctx.drawImage(img, col * spriteWidth, row * spriteHeight, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight);
-
-        // Check if the sprite is empty (all transparent or same color)
-        const isEmpty = removeEmpty.value ? isCanvasEmpty(ctx, spriteWidth, spriteHeight) : false;
-
-        // If we're not removing empty sprites or the sprite is not empty
-        if (!removeEmpty.value || !isEmpty) {
-          // Get bounding box of non-transparent pixels
-          const boundingBox = getSpriteBoundingBox(ctx, spriteWidth, spriteHeight);
-
-          let url;
-          let x = 0; // Default position (will be updated if we have a bounding box)
-          let y = 0;
-          let width = spriteWidth;
-          let height = spriteHeight;
-
-          if (boundingBox) {
-            // The key change: preserve the original position where the sprite was found
-            x = boundingBox.x;
-            y = boundingBox.y;
-            width = boundingBox.width;
-            height = boundingBox.height;
-
-            // Set dimensions for the cropped sprite
-            croppedCanvas.width = boundingBox.width;
-            croppedCanvas.height = boundingBox.height;
-
-            // Draw only the non-transparent part
-            croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
-            croppedCtx.drawImage(canvas, boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height, 0, 0, boundingBox.width, boundingBox.height);
-
-            // Convert to data URL
-            url = croppedCanvas.toDataURL('image/png');
-          } else {
-            // No non-transparent pixels found, use the original sprite
-            url = canvas.toDataURL('image/png');
-          }
-
-          sprites.push({
-            url,
-            x,
-            y,
-            width,
-            height,
-            isEmpty,
-          });
-        }
-      }
-    }
-
-    previewSprites.value = sprites;
-  }
-
-  // Auto-detect sprites based on transparency/color differences
-  async function autoDetectSprites(img: HTMLImageElement) {
-    // This is a simplified implementation
-    // A more sophisticated algorithm would analyze the image to find sprite boundaries
-
-    // For now, we'll use a simple approach:
-    // 1. Try to detect the sprite size by looking for repeating patterns
-    // 2. Then use that size to split the spritesheet
-
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    canvas.width = img.width;
-    canvas.height = img.height;
-    ctx.drawImage(img, 0, 0);
-
-    // Get image data for analysis
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const data = imageData.data;
-
-    // Simple detection of sprite size based on transparency patterns
-    // This is a very basic implementation and might not work for all spritesheets
-    const { detectedWidth, detectedHeight } = detectSpriteSize(data, canvas.width, canvas.height);
-
-    if (detectedWidth > 0 && detectedHeight > 0) {
-      // Sanity thresholds to avoid absurdly tiny tiles/huge counts
-      const MIN_TILE = 8;
-      const MAX_SPRITES = 1024;
-      if (detectedWidth < MIN_TILE || detectedHeight < MIN_TILE) {
-        // Fallback if tile is too small
-        const s = Math.max(1, Math.min(100, sensitivity.value));
-        const divisor = 3 + Math.round(s / 20); // 3..8
-        const estimatedSize = Math.max(MIN_TILE, Math.floor(Math.min(img.width, img.height) / divisor));
-        const estimatedRows = Math.max(1, Math.floor(img.height / estimatedSize));
-        const estimatedColumns = Math.max(1, Math.floor(img.width / estimatedSize));
-        await splitSpritesheet(img, estimatedRows, estimatedColumns);
-        return;
-      }
-
-      const detectedRows = Math.max(1, Math.floor(img.height / detectedHeight));
-      const detectedColumns = Math.max(1, Math.floor(img.width / detectedWidth));
-
-      // If the detected combination is unreasonably high, fallback to estimate
-      if (detectedRows * detectedColumns > MAX_SPRITES) {
-        const s = Math.max(1, Math.min(100, sensitivity.value));
-        const divisor = 3 + Math.round(s / 20); // 3..8
-        const estimatedSize = Math.max(MIN_TILE, Math.floor(Math.min(img.width, img.height) / divisor));
-        const estimatedRows = Math.max(1, Math.floor(img.height / estimatedSize));
-        const estimatedColumns = Math.max(1, Math.floor(img.width / estimatedSize));
-        await splitSpritesheet(img, estimatedRows, estimatedColumns);
-        return;
-      }
-
-      // Use the detected size to split the spritesheet
-      await splitSpritesheet(img, detectedRows, detectedColumns);
-    } else {
-      // Fallback to manual splitting with a reasonable guess based on sensitivity
-      const s = Math.max(1, Math.min(100, sensitivity.value));
-      const divisor = 3 + Math.round(s / 20); // 3..8
-      const estimatedSize = Math.max(8, Math.floor(Math.min(img.width, img.height) / divisor));
-      const estimatedRows = Math.max(1, Math.floor(img.height / estimatedSize));
-      const estimatedColumns = Math.max(1, Math.floor(img.width / estimatedSize));
-
-      await splitSpritesheet(img, estimatedRows, estimatedColumns);
-    }
-  }
-
-  // Helper function to detect sprite size based on transparency/color gutters and edge periodicity
-  function detectSpriteSize(data: Uint8ClampedArray, width: number, height: number) {
-    // Map sensitivity (1-100) to thresholds:
-    // Higher sensitivity -> allows stricter background matching and lower gutter proportion thresholds
-    const s = Math.max(1, Math.min(100, sensitivity.value));
-
-    // Background/color thresholds
-    const alphaBgThresh = Math.round(255 * (0.15 + (100 - s) * 0.001)); // 15%-25% depending on sensitivity
-    const colorTol = Math.round(10 + (100 - s) * 0.8); // 10..90 Euclidean approx
-    const gutterPropThresh = 0.92 - s * 0.004; // 0.92 down to ~0.52
-
-    function getPixel(x: number, y: number) {
-      const idx = (y * width + x) * 4;
-      return [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]] as [number, number, number, number];
-    }
-
-    // Estimate background color from corners (median of corners)
-    const corners: [number, number, number, number][] = [getPixel(0, 0), getPixel(width - 1, 0), getPixel(0, height - 1), getPixel(width - 1, height - 1)];
-    function median(arr: number[]) {
-      const a = arr.slice().sort((a, b) => a - b);
-      const mid = (a.length - 1) / 2;
-      return (a[Math.floor(mid)] + a[Math.ceil(mid)]) / 2;
-    }
-    const bg = [median(corners.map(c => c[0])), median(corners.map(c => c[1])), median(corners.map(c => c[2])), median(corners.map(c => c[3]))] as [number, number, number, number];
-
-    function isBg(r: number, g: number, b: number, a: number) {
-      if (a <= alphaBgThresh) return true;
-      const dr = r - bg[0];
-      const dg = g - bg[1];
-      const db = b - bg[2];
-      // Use Manhattan distance approximation for speed
-      const manhattan = Math.abs(dr) + Math.abs(dg) + Math.abs(db);
-      // Normalize approx to 0..~765 and compare to scaled tolerance
-      return manhattan <= colorTol * 3;
-    }
-
-    // Sample stride to speed up scanning large sheets
-    const rowSample = Math.max(1, Math.floor(height / 64));
-    const colSample = Math.max(1, Math.floor(width / 64));
-
-    // Compute background proportion per column and row
-    const colBgProp: number[] = new Array(width).fill(0);
-    for (let x = 0; x < width; x++) {
-      let bgCount = 0;
-      let total = 0;
-      for (let y = 0; y < height; y += rowSample) {
-        const [r, g, b, a] = getPixel(x, y);
-        if (isBg(r, g, b, a)) bgCount++;
-        total++;
-      }
-      colBgProp[x] = total > 0 ? bgCount / total : 1;
-    }
-
-    const rowBgProp: number[] = new Array(height).fill(0);
-    for (let y = 0; y < height; y++) {
-      let bgCount = 0;
-      let total = 0;
-      for (let x = 0; x < width; x += colSample) {
-        const [r, g, b, a] = getPixel(x, y);
-        if (isBg(r, g, b, a)) bgCount++;
-        total++;
-      }
-      rowBgProp[y] = total > 0 ? bgCount / total : 1;
-    }
-
-    function extractRuns(bgProp: number[]): { emptyRuns: [number, number][]; segSizes: number[] } {
-      const emptyRuns: [number, number][] = [];
-      const segSizes: number[] = [];
-      let inEmpty = false;
-      let runStart = 0;
-      let lastSeparatorEnd = -1;
-      for (let i = 0; i < bgProp.length; i++) {
-        const isEmpty = bgProp[i] >= gutterPropThresh;
-        if (isEmpty && !inEmpty) {
-          inEmpty = true;
-          runStart = i;
-          if (lastSeparatorEnd >= 0) {
-            const seg = runStart - lastSeparatorEnd - 1;
-            if (seg > 0) segSizes.push(seg);
-          }
-        } else if (!isEmpty && inEmpty) {
-          inEmpty = false;
-          emptyRuns.push([runStart, i - 1]);
-          lastSeparatorEnd = i - 1;
-        }
-      }
-      if (inEmpty) {
-        emptyRuns.push([runStart, bgProp.length - 1]);
-        lastSeparatorEnd = bgProp.length - 1;
-      }
-      // Trailing segment after last empty run
-      if (lastSeparatorEnd >= 0 && lastSeparatorEnd < bgProp.length - 1) {
-        const seg = bgProp.length - 1 - lastSeparatorEnd;
-        if (seg > 0) segSizes.push(seg);
-      }
-      return { emptyRuns, segSizes };
-    }
-
-    function modeWithTolerance(values: number[], tol = 2): number {
-      if (values.length === 0) return 0;
-      values.sort((a, b) => a - b);
-      let bestCount = 0;
-      let bestVal = values[0];
-      for (let i = 0; i < values.length; i++) {
-        const base = values[i];
-        let count = 1;
-        for (let j = i + 1; j < values.length; j++) {
-          if (Math.abs(values[j] - base) <= tol) count++;
-          else break;
-        }
-        if (count > bestCount) {
-          bestCount = count;
-          bestVal = base;
-        }
-      }
-      return bestVal;
-    }
-
-    const colRuns = extractRuns(colBgProp);
-    const rowRuns = extractRuns(rowBgProp);
-
-    let detectedWidth = modeWithTolerance(colRuns.segSizes, 2);
-    let detectedHeight = modeWithTolerance(rowRuns.segSizes, 2);
-
-    // Fallback: use edge periodicity via autocorrelation if gutters not found
-    function edgeAutocorrLength(axis: 'x' | 'y'): number {
-      const maxLen = axis === 'x' ? width : height;
-      const otherLen = axis === 'x' ? height : width;
-      const sampleStepMajor = Math.max(1, Math.floor(maxLen / 512));
-      const sampleStepMinor = Math.max(1, Math.floor(otherLen / 64));
-      const energy: number[] = new Array(maxLen).fill(0);
-      if (axis === 'x') {
-        for (let x = 0; x < maxLen - 1; x += sampleStepMajor) {
-          let e = 0;
-          for (let y = 0; y < otherLen; y += sampleStepMinor) {
-            const [r1, g1, b1, a1] = getPixel(x, y);
-            const [r2, g2, b2, a2] = getPixel(x + 1, y);
-            e += Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2) + Math.abs(a1 - a2);
-          }
-          energy[x] = e;
-        }
-      } else {
-        for (let y = 0; y < maxLen - 1; y += sampleStepMajor) {
-          let e = 0;
-          for (let x = 0; x < otherLen; x += sampleStepMinor) {
-            const [r1, g1, b1, a1] = getPixel(x, y);
-            const [r2, g2, b2, a2] = getPixel(x, y + 1);
-            e += Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2) + Math.abs(a1 - a2);
-          }
-          energy[y] = e;
-        }
-      }
-      const minTile = Math.max(3, Math.floor(Math.min(maxLen / 32, 128)));
-      const maxTile = Math.max(minTile + 1, Math.floor(Math.min(maxLen / 2, 512)));
-      let bestLag = 0;
-      let bestVal = -Infinity;
-      for (let lag = minTile; lag <= maxTile; lag++) {
-        let sum = 0;
-        for (let i = 0; i + lag < energy.length; i++) {
-          const e1 = energy[i] || 0;
-          const e2 = energy[i + lag] || 0;
-          sum += e1 * e2;
-        }
-        if (sum > bestVal) {
-          bestVal = sum;
-          bestLag = lag;
-        }
-      }
-      return bestLag;
-    }
-
-    if (detectedWidth <= 0 || detectedWidth > width) {
-      const lagX = edgeAutocorrLength('x');
-      if (lagX > 0 && lagX <= width) detectedWidth = lagX;
-    }
-    if (detectedHeight <= 0 || detectedHeight > height) {
-      const lagY = edgeAutocorrLength('y');
-      if (lagY > 0 && lagY <= height) detectedHeight = lagY;
-    }
-
-    // Sanity checks
-    if (!Number.isFinite(detectedWidth) || detectedWidth <= 0 || detectedWidth > width) detectedWidth = 0;
-    if (!Number.isFinite(detectedHeight) || detectedHeight <= 0 || detectedHeight > height) detectedHeight = 0;
-
-    return { detectedWidth, detectedHeight };
-  }
-
-  // Detect irregular sprites using Web Worker
-  async function detectIrregularSprites(img: HTMLImageElement): Promise<void> {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('Could not get canvas context');
-
-    canvas.width = img.width;
-    canvas.height = img.height;
-    ctx.drawImage(img, 0, 0);
-
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-    // Initialize worker lazily using Vite worker syntax
-    if (!irregularWorker.value) {
-      try {
-        irregularWorker.value = new Worker(new URL('../workers/irregularSpriteDetection.worker.ts', import.meta.url), { type: 'module' });
-      } catch (error) {
-        console.error('Failed to create worker:', error);
-        // Fallback to auto detection if worker fails
-        await autoDetectSprites(img);
-        return;
-      }
-    }
-
-    return new Promise<void>((resolve, reject) => {
-      const worker = irregularWorker.value!;
-
-      const handleMessage = async (e: MessageEvent) => {
-        clearTimeout(timeout);
-        worker.removeEventListener('message', handleMessage);
-        worker.removeEventListener('error', handleError);
-
-        if (e.data.type === 'spritesDetected') {
-          try {
-            await processDetectedSprites(img, e.data.sprites, e.data.backgroundColor);
-            resolve();
-          } catch (error) {
-            reject(error);
-          }
-        }
-      };
-
-      // Set timeout for worker processing
-      const timeout = setTimeout(() => {
-        worker.removeEventListener('message', handleMessage);
-        worker.removeEventListener('error', handleError);
-        console.warn('Worker timeout, falling back to auto detection');
-        // Fallback to auto detection
-        autoDetectSprites(img).then(resolve).catch(reject);
-      }, 30000); // 30 second timeout
-
-      const handleError = (error: ErrorEvent) => {
-        clearTimeout(timeout);
-        worker.removeEventListener('message', handleMessage);
-        worker.removeEventListener('error', handleError);
-        console.error('Worker error, falling back to auto detection:', error);
-        // Fallback to auto detection
-        autoDetectSprites(img).then(resolve).catch(reject);
-      };
-
-      worker.addEventListener('message', handleMessage);
-      worker.addEventListener('error', handleError);
-
-      try {
-        worker.postMessage({
-          type: 'detectIrregularSprites',
-          imageData,
-          sensitivity: sensitivity.value,
-          maxSize: 2048, // Limit processing size for performance
-        });
-      } catch (error) {
-        clearTimeout(timeout);
-        console.error('Failed to post message to worker:', error);
-        // Fallback to auto detection
-        autoDetectSprites(img).then(resolve).catch(reject);
-      }
-    });
-  }
-
-  // Process sprites detected by the worker (optimized)
-  async function processDetectedSprites(img: HTMLImageElement, detectedSprites: any[], backgroundColor?: [number, number, number, number]): Promise<void> {
-    if (!detectedSprites?.length) {
-      previewSprites.value = [];
-      return;
-    }
-
-    const sprites: SpritePreview[] = [];
-    const sourceCanvas = document.createElement('canvas');
-    const sourceCtx = sourceCanvas.getContext('2d');
-    const spriteCanvas = document.createElement('canvas');
-    const spriteCtx = spriteCanvas.getContext('2d');
-
-    if (!sourceCtx || !spriteCtx) return;
-
-    // Setup source canvas once
-    sourceCanvas.width = img.width;
-    sourceCanvas.height = img.height;
-    sourceCtx.drawImage(img, 0, 0);
-
-    // Process sprites in batches to avoid blocking
-    const batchSize = 50;
-    for (let i = 0; i < detectedSprites.length; i += batchSize) {
-      const batch = detectedSprites.slice(i, i + batchSize);
-
-      for (const sprite of batch) {
-        const { x, y, width, height } = sprite;
-
-        // Skip invalid sprites
-        if (width <= 0 || height <= 0) continue;
-
-        spriteCanvas.width = width;
-        spriteCanvas.height = height;
-        spriteCtx.clearRect(0, 0, width, height);
-        spriteCtx.drawImage(sourceCanvas, x, y, width, height, 0, 0, width, height);
-
-        // Remove background and make transparent for irregular sprites
-        if (detectionMethod.value === 'irregular' && backgroundColor) {
-          removeBackgroundFromSprite(spriteCtx, width, height, backgroundColor, sensitivity.value);
-        }
-
-        const isEmpty = removeEmpty.value ? isCanvasEmpty(spriteCtx, width, height) : false;
-
-        if (!removeEmpty.value || !isEmpty) {
-          sprites.push({
-            url: spriteCanvas.toDataURL('image/png'),
-            x,
-            y,
-            width,
-            height,
-            isEmpty,
-          });
-        }
-      }
-
-      // Yield control periodically for large batches
-      if (i > 0 && i % 100 === 0) {
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-    }
-
-    previewSprites.value = sprites;
-  }
-
-  // Remove background color and make it transparent
-  function removeBackgroundFromSprite(ctx: CanvasRenderingContext2D, width: number, height: number, backgroundColor: [number, number, number, number], sensitivity: number): void {
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const data = imageData.data;
-
-    const [bgR, bgG, bgB, bgA] = backgroundColor;
-    const colorTolerance = Math.round(50 - sensitivity * 0.45); // Same as worker
-    const alphaTolerance = Math.round(40 - sensitivity * 0.35);
-
-    for (let i = 0; i < data.length; i += 4) {
-      const r = data[i];
-      const g = data[i + 1];
-      const b = data[i + 2];
-      const a = data[i + 3];
-
-      // Handle fully transparent pixels
-      if (a < 10) {
-        data[i + 3] = 0; // Make fully transparent
-        continue;
-      }
-
-      // Calculate color difference using Euclidean distance
-      const rDiff = r - bgR;
-      const gDiff = g - bgG;
-      const bDiff = b - bgB;
-      const aDiff = a - bgA;
-
-      const colorDistance = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
-      const alphaDistance = Math.abs(aDiff);
-
-      // If pixel matches background color, make it transparent
-      if (colorDistance <= colorTolerance && alphaDistance <= alphaTolerance) {
-        data[i + 3] = 0; // Set alpha to 0 (transparent)
-      }
-    }
-
-    ctx.putImageData(imageData, 0, 0);
-  }
-
-  // Check if a canvas is empty (all transparent or same color)
-  function isCanvasEmpty(ctx: CanvasRenderingContext2D, width: number, height: number): boolean {
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const data = imageData.data;
-
-    // Check if all pixels are transparent
-    let allTransparent = true;
-    let allSameColor = true;
-
-    // Reference values from first pixel
-    const firstR = data[0];
-    const firstG = data[1];
-    const firstB = data[2];
-    const firstA = data[3];
-
-    for (let i = 0; i < data.length; i += 4) {
-      const alpha = data[i + 3];
-
-      // Check transparency
-      if (alpha > 10) {
-        // Allow some tolerance for compression artifacts
-        allTransparent = false;
-      }
-
-      // Check if all pixels are the same color
-      if (data[i] !== firstR || data[i + 1] !== firstG || data[i + 2] !== firstB || Math.abs(data[i + 3] - firstA) > 10) {
-        allSameColor = false;
-      }
-
-      // Early exit if we've determined it's not empty
-      if (!allTransparent && !allSameColor) {
-        break;
-      }
-    }
-
-    return allTransparent || allSameColor;
-  }
-
-  // Convert preview sprites to actual files
-  async function createSpriteFiles(): Promise<SpriteFile[]> {
-    const spriteFiles: SpriteFile[] = [];
-
-    for (let i = 0; i < previewSprites.value.length; i++) {
-      const sprite = previewSprites.value[i];
-
-      // Convert data URL to blob
-      const response = await fetch(sprite.url);
-      const blob = await response.blob();
-
-      // Create file from blob
-      const fileName = `sprite_${i + 1}.png`;
-      const file = new File([blob], fileName, { type: 'image/png' });
-
-      // Create sprite file with position information
-      spriteFiles.push({
-        file,
-        x: sprite.x,
-        y: sprite.y,
-        width: sprite.width,
-        height: sprite.height,
-      });
-    }
-
-    return spriteFiles;
-  }
-
  // Actions
  function cancel() {
    emit('close');
@@ -850,8 +201,24 @@
    isProcessing.value = true;

    try {
-      const files = await createSpriteFiles();
-      emit('split', files);
+      const spriteFiles: SpriteFile[] = [];
+
+      for (let i = 0; i < previewSprites.value.length; i++) {
+        const sprite = previewSprites.value[i];
+        const response = await fetch(sprite.url);
+        const blob = await response.blob();
+        const file = new File([blob], `sprite_${i + 1}.png`, { type: 'image/png' });
+
+        spriteFiles.push({
+          file,
+          x: sprite.x,
+          y: sprite.y,
+          width: sprite.width,
+          height: sprite.height,
+        });
+      }
+
+      emit('split', spriteFiles);
      emit('close');
    } catch (error) {
      console.error('Error creating sprite files:', error);
@@ -860,19 +227,7 @@
    }
  }

-  // Add these watchers to automatically update preview
-  watch([rows, columns, removeEmpty, detectionMethod, sensitivity], () => {
-    if (imageElement.value) {
-      generatePreview();
-    }
-  });
-
-  // Clean up worker and cache on component unmount
  onUnmounted(() => {
-    if (irregularWorker.value) {
-      irregularWorker.value.terminate();
-      irregularWorker.value = null;
-    }
-    detectionCache.clear();
+    splitter.cleanup();
  });
 </script>
--- a/src/composables/useBlog.ts
+++ b/src/composables/useBlog.ts
@@ -7,6 +7,8 @@ export interface BlogPost {
  description: string;
  image: string;
  content: string;
+  keywords?: string;
+  author?: string;
 }

 export function useBlog() {
@@ -26,6 +28,8 @@ export function useBlog() {
        description: data.description,
        image: data.image,
        content: markdownContent,
+        keywords: data.keywords,
+        author: data.author,
      });
    }

--- a/src/composables/useLayers.ts
+++ b/src/composables/useLayers.ts
@@ -30,6 +30,8 @@ export const useLayers = () => {

  const visibleLayers = computed(() => layers.value.filter(l => l.visible));

+  const hasSprites = computed(() => layers.value.some(l => l.sprites.length > 0));
+
  const updateSpritePosition = (id: string, x: number, y: number) => {
    const l = activeLayer.value;
    if (!l) return;
@@ -238,6 +240,7 @@ export const useLayers = () => {
    addLayer,
    removeLayer,
    moveLayer,
+    hasSprites,
  };
 };

--- a/src/composables/useSEO.ts
+++ b/src/composables/useSEO.ts
@@ -0,0 +1,71 @@
+import { useHead } from '@vueuse/head';
+
+export interface SEOMetaData {
+  title: string;
+  description: string;
+  image?: string;
+  url?: string;
+  type?: 'website' | 'article';
+  author?: string;
+  publishedTime?: string;
+  modifiedTime?: string;
+  keywords?: string;
+}
+
+const SITE_NAME = 'Spritesheet Generator';
+const SITE_URL = 'https://spritesheetgenerator.online';
+const DEFAULT_IMAGE = '/og-image.png';
+
+export function useSEO(metadata: SEOMetaData) {
+  const fullTitle = metadata.title.includes(SITE_NAME) ? metadata.title : `${metadata.title} - ${SITE_NAME}`;
+
+  const fullUrl = metadata.url ? `${SITE_URL}${metadata.url}` : SITE_URL;
+
+  const imageUrl = metadata.image ? `${SITE_URL}${metadata.image}` : `${SITE_URL}${DEFAULT_IMAGE}`;
+
+  const metaTags: any[] = [
+    // Primary Meta Tags
+    { name: 'title', content: fullTitle },
+    { name: 'description', content: metadata.description },
+    { name: 'robots', content: 'index, follow' },
+
+    // Open Graph / Facebook
+    { property: 'og:type', content: metadata.type || 'website' },
+    { property: 'og:url', content: fullUrl },
+    { property: 'og:title', content: fullTitle },
+    { property: 'og:description', content: metadata.description },
+    { property: 'og:image', content: imageUrl },
+    { property: 'og:site_name', content: SITE_NAME },
+
+    // Twitter
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:url', content: fullUrl },
+    { name: 'twitter:title', content: fullTitle },
+    { name: 'twitter:description', content: metadata.description },
+    { name: 'twitter:image', content: imageUrl },
+  ];
+
+  // Add article-specific meta tags
+  if (metadata.type === 'article') {
+    if (metadata.author) {
+      metaTags.push({ property: 'article:author', content: metadata.author });
+    }
+    if (metadata.publishedTime) {
+      metaTags.push({ property: 'article:published_time', content: metadata.publishedTime });
+    }
+    if (metadata.modifiedTime) {
+      metaTags.push({ property: 'article:modified_time', content: metadata.modifiedTime });
+    }
+  }
+
+  // Add keywords if provided
+  if (metadata.keywords) {
+    metaTags.push({ name: 'keywords', content: metadata.keywords });
+  }
+
+  useHead({
+    title: fullTitle,
+    meta: metaTags,
+    link: [{ rel: 'canonical', href: fullUrl }],
+  });
+}
--- a/src/composables/useShare.ts
+++ b/src/composables/useShare.ts
@@ -0,0 +1,135 @@
+import type { Ref } from 'vue';
+import type { Layer } from '@/types/sprites';
+
+const POCKETBASE_URL = 'https://pb1.adhd.sh';
+const COLLECTION = 'spritesheets';
+
+export interface SpritesheetConfig {
+  version: number;
+  columns: number;
+  negativeSpacingEnabled: boolean;
+  backgroundColor: string;
+  manualCellSizeEnabled: boolean;
+  manualCellWidth: number;
+  manualCellHeight: number;
+}
+
+export interface SpritesheetRecord {
+  id: string;
+  config: SpritesheetConfig;
+  sprites: any[];
+  created: string;
+  updated: string;
+}
+
+export interface ShareResult {
+  id: string;
+  url: string;
+}
+
+/**
+ * Build the shareable URL for a spritesheet
+ */
+export const buildShareUrl = (id: string): string => {
+  return `${window.location.origin}/share/${id}`;
+};
+
+/**
+ * Share a spritesheet by uploading to PocketBase
+ */
+export const shareSpritesheet = async (layersRef: Ref<Layer[]>, columns: Ref<number>, negativeSpacingEnabled: Ref<boolean>, backgroundColor?: Ref<string>, manualCellSizeEnabled?: Ref<boolean>, manualCellWidth?: Ref<number>, manualCellHeight?: Ref<number>): Promise<ShareResult> => {
+  // Build layers data with base64 sprites (same format as exportSpritesheetJSON)
+  const layersData = await Promise.all(
+    layersRef.value.map(async layer => {
+      const sprites = await Promise.all(
+        layer.sprites.map(async sprite => {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          if (!ctx) return null;
+          canvas.width = sprite.width;
+          canvas.height = sprite.height;
+          ctx.drawImage(sprite.img, 0, 0);
+          const base64 = canvas.toDataURL('image/png');
+          return {
+            id: sprite.id,
+            width: sprite.width,
+            height: sprite.height,
+            x: sprite.x,
+            y: sprite.y,
+            base64,
+            name: sprite.file.name,
+          };
+        })
+      );
+      return {
+        id: layer.id,
+        name: layer.name,
+        visible: layer.visible,
+        locked: layer.locked,
+        sprites: sprites.filter(Boolean),
+      };
+    })
+  );
+
+  const config: SpritesheetConfig = {
+    version: 2,
+    columns: columns.value,
+    negativeSpacingEnabled: negativeSpacingEnabled.value,
+    backgroundColor: backgroundColor?.value || 'transparent',
+    manualCellSizeEnabled: manualCellSizeEnabled?.value || false,
+    manualCellWidth: manualCellWidth?.value || 64,
+    manualCellHeight: manualCellHeight?.value || 64,
+  };
+
+  const response = await fetch(`${POCKETBASE_URL}/api/collections/${COLLECTION}/records`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      config,
+      sprites: layersData,
+    }),
+  });
+
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(text || `Request failed with status ${response.status}`);
+  }
+
+  const record = await response.json();
+  return {
+    id: record.id,
+    url: buildShareUrl(record.id),
+  };
+};
+
+/**
+ * Fetch a shared spritesheet from PocketBase
+ */
+export const fetchSpritesheet = async (id: string): Promise<SpritesheetRecord> => {
+  const response = await fetch(`${POCKETBASE_URL}/api/collections/${COLLECTION}/records/${id}`);
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      throw new Error('Spritesheet not found');
+    }
+    const text = await response.text().catch(() => '');
+    throw new Error(text || `Request failed with status ${response.status}`);
+  }
+
+  return response.json();
+};
+
+/**
+ * Composable hook for share functionality
+ */
+export const useShare = (layersRef: Ref<Layer[]>, columns: Ref<number>, negativeSpacingEnabled: Ref<boolean>, backgroundColor?: Ref<string>, manualCellSizeEnabled?: Ref<boolean>, manualCellWidth?: Ref<number>, manualCellHeight?: Ref<number>) => {
+  const share = () => shareSpritesheet(layersRef, columns, negativeSpacingEnabled, backgroundColor, manualCellSizeEnabled, manualCellWidth, manualCellHeight);
+
+  return {
+    share,
+    fetchSpritesheet,
+    buildShareUrl,
+  };
+};
--- a/src/composables/useSpritesheetSplitter.ts
+++ b/src/composables/useSpritesheetSplitter.ts
@@ -0,0 +1,316 @@
+import { ref, computed, type Ref } from 'vue';
+import type { SpritePreview, SpriteRegion, GridSplitOptions, AutoDetectOptions, SpriteWorkerResponse } from '@/types/spritesheet';
+
+/**
+ * Composable for spritesheet splitting logic
+ * Handles grid-based and auto-detection sprite extraction
+ */
+export function useSpritesheetSplitter() {
+  const isProcessing = ref(false);
+  const previewSprites: Ref<SpritePreview[]> = ref([]);
+  const worker: Ref<Worker | null> = ref(null);
+
+  /**
+   * Split image into grid cells
+   */
+  async function splitByGrid(img: HTMLImageElement, options: GridSplitOptions): Promise<SpritePreview[]> {
+    const { cellWidth, cellHeight, preserveCellSize, removeEmpty } = options;
+
+    if (cellWidth <= 0 || cellHeight <= 0) {
+      return [];
+    }
+
+    const cols = Math.floor(img.width / cellWidth);
+    const rows = Math.floor(img.height / cellHeight);
+    const sprites: SpritePreview[] = [];
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const cropCanvas = document.createElement('canvas');
+    const cropCtx = cropCanvas.getContext('2d');
+
+    if (!ctx || !cropCtx) return [];
+
+    canvas.width = cellWidth;
+    canvas.height = cellHeight;
+
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        ctx.clearRect(0, 0, cellWidth, cellHeight);
+        ctx.drawImage(img, col * cellWidth, row * cellHeight, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);
+
+        const isEmpty = removeEmpty ? isCanvasEmpty(ctx, cellWidth, cellHeight) : false;
+
+        if (!removeEmpty || !isEmpty) {
+          let url: string;
+          let x = 0;
+          let y = 0;
+          let width = cellWidth;
+          let height = cellHeight;
+
+          if (preserveCellSize) {
+            // Keep full cell with transparent padding
+            url = canvas.toDataURL('image/png');
+          } else {
+            // Crop to sprite bounds
+            const bounds = getSpriteBounds(ctx, cellWidth, cellHeight);
+            if (bounds) {
+              x = bounds.x;
+              y = bounds.y;
+              width = bounds.width;
+              height = bounds.height;
+
+              cropCanvas.width = width;
+              cropCanvas.height = height;
+              cropCtx.clearRect(0, 0, width, height);
+              cropCtx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
+              url = cropCanvas.toDataURL('image/png');
+            } else {
+              url = canvas.toDataURL('image/png');
+            }
+          }
+
+          sprites.push({ url, x, y, width, height, isEmpty });
+        }
+      }
+    }
+
+    return sprites;
+  }
+
+  /**
+   * Detect sprites using web worker for irregular layouts
+   */
+  async function detectSprites(img: HTMLImageElement, options: AutoDetectOptions): Promise<SpritePreview[]> {
+    const { sensitivity, removeEmpty } = options;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return [];
+
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+
+    const imageData = ctx.getImageData(0, 0, img.width, img.height);
+
+    // Initialize worker lazily
+    if (!worker.value) {
+      try {
+        worker.value = new Worker(new URL('../workers/irregularSpriteDetection.worker.ts', import.meta.url), { type: 'module' });
+      } catch (error) {
+        console.error('Failed to create worker:', error);
+        return [];
+      }
+    }
+
+    return new Promise<SpritePreview[]>(resolve => {
+      const w = worker.value!;
+
+      const timeout = setTimeout(() => {
+        w.removeEventListener('message', handleMessage);
+        console.warn('Worker timeout');
+        resolve([]);
+      }, 30000);
+
+      const handleMessage = async (e: MessageEvent<SpriteWorkerResponse>) => {
+        clearTimeout(timeout);
+        w.removeEventListener('message', handleMessage);
+
+        if (e.data.type === 'spritesDetected') {
+          const sprites = await processDetectedSprites(img, e.data.sprites, e.data.backgroundColor, removeEmpty);
+          resolve(sprites);
+        }
+      };
+
+      w.addEventListener('message', handleMessage);
+
+      w.postMessage({
+        type: 'detectIrregularSprites',
+        imageData,
+        sensitivity,
+        maxSize: 2048,
+      });
+    });
+  }
+
+  /**
+   * Process sprites detected by worker into preview format
+   */
+  async function processDetectedSprites(img: HTMLImageElement, regions: SpriteRegion[], backgroundColor: [number, number, number, number], removeEmpty: boolean): Promise<SpritePreview[]> {
+    if (!regions?.length) return [];
+
+    const sprites: SpritePreview[] = [];
+    const sourceCanvas = document.createElement('canvas');
+    const sourceCtx = sourceCanvas.getContext('2d');
+    const spriteCanvas = document.createElement('canvas');
+    const spriteCtx = spriteCanvas.getContext('2d');
+
+    if (!sourceCtx || !spriteCtx) return [];
+
+    sourceCanvas.width = img.width;
+    sourceCanvas.height = img.height;
+    sourceCtx.drawImage(img, 0, 0);
+
+    for (const region of regions) {
+      const { x, y, width, height } = region;
+      if (width <= 0 || height <= 0) continue;
+
+      spriteCanvas.width = width;
+      spriteCanvas.height = height;
+      spriteCtx.clearRect(0, 0, width, height);
+      spriteCtx.drawImage(sourceCanvas, x, y, width, height, 0, 0, width, height);
+
+      // Remove background color
+      removeBackground(spriteCtx, width, height, backgroundColor);
+
+      const isEmpty = removeEmpty ? isCanvasEmpty(spriteCtx, width, height) : false;
+
+      if (!removeEmpty || !isEmpty) {
+        sprites.push({
+          url: spriteCanvas.toDataURL('image/png'),
+          x,
+          y,
+          width,
+          height,
+          isEmpty,
+        });
+      }
+    }
+
+    return sprites;
+  }
+
+  /**
+   * Get bounding box of non-transparent pixels
+   */
+  function getSpriteBounds(ctx: CanvasRenderingContext2D, width: number, height: number): { x: number; y: number; width: number; height: number } | null {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+
+    let minX = width,
+      minY = height,
+      maxX = 0,
+      maxY = 0;
+    let hasContent = false;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const alpha = data[(y * width + x) * 4 + 3];
+        if (alpha > 10) {
+          minX = Math.min(minX, x);
+          minY = Math.min(minY, y);
+          maxX = Math.max(maxX, x);
+          maxY = Math.max(maxY, y);
+          hasContent = true;
+        }
+      }
+    }
+
+    if (!hasContent) return null;
+
+    // Add small padding
+    const pad = 1;
+    return {
+      x: Math.max(0, minX - pad),
+      y: Math.max(0, minY - pad),
+      width: Math.min(width - Math.max(0, minX - pad), maxX - minX + 1 + pad * 2),
+      height: Math.min(height - Math.max(0, minY - pad), maxY - minY + 1 + pad * 2),
+    };
+  }
+
+  /**
+   * Check if canvas is empty (all transparent or same color)
+   */
+  function isCanvasEmpty(ctx: CanvasRenderingContext2D, width: number, height: number): boolean {
+    const data = ctx.getImageData(0, 0, width, height).data;
+    let allTransparent = true;
+    let allSameColor = true;
+
+    const [firstR, firstG, firstB, firstA] = [data[0], data[1], data[2], data[3]];
+
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] > 10) allTransparent = false;
+      if (data[i] !== firstR || data[i + 1] !== firstG || data[i + 2] !== firstB || Math.abs(data[i + 3] - firstA) > 10) {
+        allSameColor = false;
+      }
+      if (!allTransparent && !allSameColor) break;
+    }
+
+    return allTransparent || allSameColor;
+  }
+
+  /**
+   * Remove background color from sprite, making it transparent
+   */
+  function removeBackground(ctx: CanvasRenderingContext2D, width: number, height: number, bgColor: [number, number, number, number]): void {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    const [bgR, bgG, bgB, bgA] = bgColor;
+    const tolerance = 30;
+
+    for (let i = 0; i < data.length; i += 4) {
+      const a = data[i + 3];
+      if (a < 10) {
+        data[i + 3] = 0;
+        continue;
+      }
+
+      const rDiff = data[i] - bgR;
+      const gDiff = data[i + 1] - bgG;
+      const bDiff = data[i + 2] - bgB;
+      const dist = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
+
+      if (dist <= tolerance && Math.abs(a - bgA) <= 40) {
+        data[i + 3] = 0;
+      }
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  }
+
+  /**
+   * Cleanup worker on unmount
+   */
+  function cleanup() {
+    if (worker.value) {
+      worker.value.terminate();
+      worker.value = null;
+    }
+  }
+
+  /**
+   * Calculate suggested cell size based on image dimensions
+   */
+  function getSuggestedCellSize(width: number, height: number): { width: number; height: number } {
+    const commonSizes = [256, 192, 128, 96, 64, 48, 32, 16];
+
+    let cellWidth = 64;
+    let cellHeight = 64;
+
+    for (const size of commonSizes) {
+      if (width % size === 0 && width / size <= 16 && width / size >= 1) {
+        cellWidth = size;
+        break;
+      }
+    }
+
+    for (const size of commonSizes) {
+      if (height % size === 0 && height / size <= 16 && height / size >= 1) {
+        cellHeight = size;
+        break;
+      }
+    }
+
+    return { width: cellWidth, height: cellHeight };
+  }
+
+  return {
+    isProcessing,
+    previewSprites,
+    splitByGrid,
+    detectSprites,
+    getSuggestedCellSize,
+    cleanup,
+  };
+}
--- a/src/composables/useStructuredData.ts
+++ b/src/composables/useStructuredData.ts
@@ -0,0 +1,200 @@
+import { useHead } from '@vueuse/head';
+
+const SITE_URL = 'https://spritesheetgenerator.online';
+const SITE_NAME = 'Spritesheet Generator';
+
+export interface BlogPostSchema {
+  title: string;
+  description: string;
+  author: string;
+  datePublished: string;
+  dateModified?: string;
+  image: string;
+  url: string;
+}
+
+export interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export function useStructuredData() {
+  // Organization Schema
+  const addOrganizationSchema = () => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'Organization',
+      name: SITE_NAME,
+      url: SITE_URL,
+      logo: `${SITE_URL}/og-image.png`,
+      description: 'Free online tool to create spritesheets for game development',
+      sameAs: ['https://gitea.adhd.sh/root/spritesheet-generator', 'https://discord.gg/JTev3nzeDa'],
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  // WebSite Schema
+  const addWebSiteSchema = () => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      name: SITE_NAME,
+      url: SITE_URL,
+      description: 'Create professional spritesheets for your game development projects',
+      potentialAction: {
+        '@type': 'SearchAction',
+        target: `${SITE_URL}/blog?search={search_term_string}`,
+        'query-input': 'required name=search_term_string',
+      },
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  // BlogPosting Schema
+  const addBlogPostSchema = (post: BlogPostSchema) => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'BlogPosting',
+      headline: post.title,
+      description: post.description,
+      image: `${SITE_URL}${post.image}`,
+      author: {
+        '@type': 'Person',
+        name: post.author,
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: SITE_NAME,
+        logo: {
+          '@type': 'ImageObject',
+          url: `${SITE_URL}/og-image.png`,
+        },
+      },
+      datePublished: post.datePublished,
+      dateModified: post.dateModified || post.datePublished,
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': `${SITE_URL}${post.url}`,
+      },
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  // Breadcrumb Schema
+  const addBreadcrumbSchema = (items: BreadcrumbItem[]) => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: items.map((item, index) => ({
+        '@type': 'ListItem',
+        position: index + 1,
+        name: item.name,
+        item: `${SITE_URL}${item.url}`,
+      })),
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  // Blog List Schema
+  const addBlogListSchema = (posts: BlogPostSchema[]) => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'Blog',
+      name: `${SITE_NAME} Blog`,
+      description: 'Latest articles about sprite sheet generation and game development',
+      url: `${SITE_URL}/blog`,
+      blogPost: posts.map(post => ({
+        '@type': 'BlogPosting',
+        headline: post.title,
+        description: post.description,
+        image: `${SITE_URL}${post.image}`,
+        author: {
+          '@type': 'Person',
+          name: post.author,
+        },
+        datePublished: post.datePublished,
+        url: `${SITE_URL}${post.url}`,
+      })),
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  // FAQ Schema
+  const addFAQSchema = (faqs: FAQItem[]) => {
+    const schema = {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faqs.map(faq => ({
+        '@type': 'Question',
+        name: faq.question,
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: faq.answer,
+        },
+      })),
+    };
+
+    useHead({
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(schema),
+        },
+      ],
+    });
+  };
+
+  return {
+    addOrganizationSchema,
+    addWebSiteSchema,
+    addBlogPostSchema,
+    addBreadcrumbSchema,
+    addBlogListSchema,
+    addFAQSchema,
+  };
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,13 +6,16 @@ import './assets/main.css';

 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import { createHead } from '@vueuse/head';
 import App from './App.vue';

 import router from './router';

 const app = createApp(App);
+const head = createHead();

 app.use(createPinia());
 app.use(router);
+app.use(head);

 app.mount('#app');
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,6 +24,11 @@ const router = createRouter({
      name: 'privacy-policy',
      component: () => import('../views/PrivacyPolicy.vue'),
    },
+    {
+      path: '/faq',
+      name: 'faq',
+      component: () => import('../views/FAQ.vue'),
+    },
    {
      path: '/blog',
      name: 'blog-overview',
@@ -34,6 +39,11 @@ const router = createRouter({
      name: 'blog-detail',
      component: () => import('../views/BlogDetail.vue'),
    },
+    {
+      path: '/share/:id',
+      name: 'share',
+      component: () => import('../views/ShareView.vue'),
+    },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
--- a/src/types/spritesheet.ts
+++ b/src/types/spritesheet.ts
@@ -0,0 +1,54 @@
+/**
+ * Spritesheet splitting types
+ */
+
+/** A detected sprite region with bounds and position */
+export interface SpriteRegion {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pixelCount?: number;
+}
+
+/** A sprite preview with data URL for display */
+export interface SpritePreview {
+  url: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isEmpty: boolean;
+}
+
+/** Detection mode for sprite splitting */
+export type DetectionMode = 'grid' | 'auto';
+
+/** Options for grid-based splitting */
+export interface GridSplitOptions {
+  cellWidth: number;
+  cellHeight: number;
+  preserveCellSize: boolean;
+  removeEmpty: boolean;
+}
+
+/** Options for auto-detection splitting */
+export interface AutoDetectOptions {
+  sensitivity: number;
+  removeEmpty: boolean;
+}
+
+/** Worker message for irregular sprite detection */
+export interface SpriteWorkerMessage {
+  type: 'detectIrregularSprites';
+  imageData: ImageData;
+  sensitivity: number;
+  maxSize?: number;
+}
+
+/** Worker response with detected sprites */
+export interface SpriteWorkerResponse {
+  type: 'spritesDetected';
+  sprites: SpriteRegion[];
+  backgroundColor: [number, number, number, number];
+}
--- a/src/views/AboutUs.vue
+++ b/src/views/AboutUs.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
+
+  const { addBreadcrumbSchema } = useStructuredData();
+
+  // Set SEO synchronously
+  useSEO({
+    title: 'About Us - Our Mission & Story',
+    description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
+    url: '/about',
+    type: 'website',
+    keywords: 'about spritesheet generator, game development tools, open source sprite editor',
+  });
+
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'About Us', url: '/about' },
+  ]);
+</script>
+
 <template>
  <div class="w-full">
    <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
@@ -8,7 +29,7 @@
          Our mission is to provide a simple, powerful, and free tool for creating optimized spritesheets directly in your browser. Whether you are an indie developer, a hobbyist, or part of a large studio, we hope this tool makes your life easier.
        </p>
        <div class="space-y-3">
-          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Our Story</h3>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Our story</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">This project started as a small utility for personal game jams and has grown into a full-featured spritesheet packer. We believe in open source and community-driven development.</p>
        </div>
      </div>
--- a/src/views/BlogDetail.vue
+++ b/src/views/BlogDetail.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { useHead } from '@vueuse/head';
  import { marked } from 'marked';

  const route = useRoute();
@@ -10,9 +11,116 @@
  const post = ref<BlogPost | undefined>(undefined);
  const renderedContent = ref('');

+  const slug = computed(() => route.params.slug as string);
+
+  // Reactive SEO data that updates when post loads
+  const pageTitle = computed(() => (post.value ? `${post.value.title} - Spritesheet Generator` : 'Blog Post - Spritesheet Generator'));
+
+  const pageDescription = computed(() => post.value?.description || 'Read our latest article about spritesheet generation and game development.');
+
+  const pageImage = computed(() => (post.value?.image ? `https://spritesheetgenerator.online${post.value.image}` : 'https://spritesheetgenerator.online/og-image.png'));
+
+  const pageUrl = computed(() => `https://spritesheetgenerator.online/blog/${slug.value}`);
+
+  const keywords = computed(() => post.value?.keywords || 'sprite sheet, game development, blog');
+
+  // Dynamic meta tags using reactive computed values
+  useHead({
+    title: pageTitle,
+    meta: [
+      { name: 'title', content: pageTitle },
+      { name: 'description', content: pageDescription },
+      { name: 'keywords', content: keywords },
+      { name: 'robots', content: 'index, follow' },
+
+      // Open Graph
+      { property: 'og:type', content: 'article' },
+      { property: 'og:url', content: pageUrl },
+      { property: 'og:title', content: pageTitle },
+      { property: 'og:description', content: pageDescription },
+      { property: 'og:image', content: pageImage },
+      { property: 'og:site_name', content: 'Spritesheet Generator' },
+      { property: 'article:author', content: computed(() => post.value?.author || 'streetshadow') },
+      { property: 'article:published_time', content: computed(() => post.value?.date || '') },
+
+      // Twitter
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:url', content: pageUrl },
+      { name: 'twitter:title', content: pageTitle },
+      { name: 'twitter:description', content: pageDescription },
+      { name: 'twitter:image', content: pageImage },
+    ],
+    link: [{ rel: 'canonical', href: pageUrl }],
+    script: computed(() => {
+      const scripts = [];
+
+      // Breadcrumb schema
+      scripts.push({
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              name: 'Home',
+              item: 'https://spritesheetgenerator.online/',
+            },
+            {
+              '@type': 'ListItem',
+              position: 2,
+              name: 'Blog',
+              item: 'https://spritesheetgenerator.online/blog',
+            },
+            {
+              '@type': 'ListItem',
+              position: 3,
+              name: post.value?.title || 'Article',
+              item: pageUrl.value,
+            },
+          ],
+        }),
+      });
+
+      // Blog post schema
+      if (post.value) {
+        scripts.push({
+          type: 'application/ld+json',
+          children: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'BlogPosting',
+            headline: post.value.title,
+            description: post.value.description,
+            image: `https://spritesheetgenerator.online${post.value.image}`,
+            author: {
+              '@type': 'Person',
+              name: post.value.author || 'streetshadow',
+            },
+            publisher: {
+              '@type': 'Organization',
+              name: 'Spritesheet Generator',
+              logo: {
+                '@type': 'ImageObject',
+                url: 'https://spritesheetgenerator.online/og-image.png',
+              },
+            },
+            datePublished: post.value.date,
+            dateModified: post.value.date,
+            mainEntityOfPage: {
+              '@type': 'WebPage',
+              '@id': pageUrl.value,
+            },
+          }),
+        });
+      }
+
+      return scripts;
+    }),
+  });
+
  onMounted(async () => {
-    const slug = route.params.slug as string;
-    post.value = await getPost(slug);
+    post.value = await getPost(slug.value);

    if (post.value) {
      renderedContent.value = await marked(post.value.content);
@@ -25,7 +133,7 @@
 <template>
  <div class="w-full">
    <div v-if="post">
-      <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors">
+      <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors" title="Return to blog overview" aria-label="Navigate back to blog overview page">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
--- a/src/views/BlogOverview.vue
+++ b/src/views/BlogOverview.vue
@@ -1,11 +1,29 @@
 <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
  import { RouterLink } from 'vue-router';

  const { getPosts } = useBlog();
+  const { addBreadcrumbSchema } = useStructuredData();
  const posts = ref<BlogPost[]>([]);

+  // Set SEO meta tags synchronously
+  useSEO({
+    title: 'Blog - Latest Articles on Spritesheet Generation',
+    description: 'Explore our latest articles about sprite sheet generation, game development, pixel art, and sprite animation techniques.',
+    url: '/blog',
+    type: 'website',
+    keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation',
+  });
+
+  // Add breadcrumb synchronously
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'Blog', url: '/blog' },
+  ]);
+
  onMounted(async () => {
    posts.value = await getPosts();
  });
@@ -16,8 +34,8 @@
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Blog</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <article v-for="post in posts" :key="post.slug" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full">
-        <RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full">
-          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" />
+        <RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full" :title="`Read more: ${post.title}`" :aria-label="`Read full blog post: ${post.title}`">
+          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" loading="lazy" decoding="async" />
          <div class="p-6 flex-1 flex flex-col">
            <h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>
            <p class="text-gray-600 dark:text-gray-400 text-xs mb-3">{{ post.date }}</p>
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
+
+  const { addBreadcrumbSchema } = useStructuredData();
+
+  // Set SEO synchronously
+  useSEO({
+    title: 'Contact Us - Get in Touch',
+    description: "Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We'd love to hear from you!",
+    url: '/contact',
+    type: 'website',
+    keywords: 'contact spritesheet generator, support, discord, gitea',
+  });
+
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'Contact', url: '/contact' },
+  ]);
+</script>
+
 <template>
  <div class="w-full">
    <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
@@ -5,7 +26,14 @@
      <div class="space-y-6">
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We'd love to hear from you! Whether you have a question, feedback, or just want to say hi, feel free to reach out.</p>
        <div class="flex flex-col gap-4 mt-8">
-          <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline">
+          <a
+            href="https://discord.gg/JTev3nzeDa"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
+            title="Join our Discord community"
+            aria-label="Join Discord server"
+          >
            <i class="fab fa-discord text-2xl text-[#5865F2]"></i>
            <div>
              <div class="font-bold text-gray-900 dark:text-white">Join our Discord</div>
@@ -13,7 +41,14 @@
            </div>
          </a>

-          <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline">
+          <a
+            href="https://gitea.adhd.sh/root/spritesheet-generator"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
+            title="View source code and report bugs"
+            aria-label="View source code repository"
+          >
            <i class="fab fa-github text-2xl text-gray-900 dark:text-white"></i>
            <div>
              <div class="font-bold text-gray-900 dark:text-white">Source Code</div>
--- a/src/views/FAQ.vue
+++ b/src/views/FAQ.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
+
+  const { addFAQSchema, addBreadcrumbSchema } = useStructuredData();
+
+  // Set SEO synchronously
+  useSEO({
+    title: 'FAQ - Frequently Asked Questions',
+    description: 'Find answers to common questions about the Spritesheet Generator. Learn about supported formats, export options, and how to use the tool effectively.',
+    url: '/faq',
+    type: 'website',
+    keywords: 'faq, spritesheet generator help, questions, support, documentation',
+  });
+
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'FAQ', url: '/faq' },
+  ]);
+
+  const faqs = [
+    {
+      question: 'What is a sprite sheet generator?',
+      answer: 'A sprite sheet generator is a tool that combines multiple images into a single file. Our sprite maker online simplifies the process of making a sprite sheet, allowing you to create a sprite sheet for games and websites instantly.',
+    },
+    {
+      question: 'How do I create a sprite sheet from images?',
+      answer: 'To create a sprite sheet, simply drag and drop your files into our images to sprite sheet converter. We support various formats, making it easy to turn PNG to sprite sheet or use our gif to sprite sheet converter.',
+    },
+    {
+      question: 'Can I use this as a 2D sprite generator for games?',
+      answer: 'Yes! This tool acts as a powerful 2D sprite generator. Whether you need a character sprite sheet generator, an FNF sprite generator, or just a general sprite image generator, our tool handles the packing efficiently.',
+    },
+    {
+      question: 'Do you support GIF to sprite sheet conversion?',
+      answer: 'Absolutely. You can turn gif into sprite sheet layouts easily. Our tool creates a clean sprite strip or sprite grid from your animations, functioning as a comprehensive image to sprite animation tool.',
+    },
+    {
+      question: 'Is there a specific sprite sheet template?',
+      answer: 'No fixed sprite sheet template is needed. Our image sprite generator automatically arranges your uploads. It works as a flexible sprite converter for all your needs.',
+    },
+    {
+      question: 'How does the PNG to sprite conversion work?',
+      answer: 'Our PNG to sprite feature is simple. Upload your images, and the sprite sheet converter stitches them together. It is the easiest way to image to sprite converter workflows.',
+    },
+    {
+      question: 'Can I create a sprite sheet for Unity or Godot?',
+      answer: 'Yes, you can create a sprite sheet compatible with major game engines like Unity, Godot, and Unreal Engine. Our sprite sheet converter exports standard formats that work seamlessly with these tools.',
+    },
+    {
+      question: 'What is the difference between a sprite strip and a sprite grid?',
+      answer: 'A sprite strip arranges images in a single horizontal or vertical row, ideal for simple animations. A sprite grid arranges images in rows and columns, which is better for larger collections or character sprite sheets.',
+    },
+    {
+      question: 'Can I preview the image to sprite animation?',
+      answer: 'Yes, our tool includes a preview feature. After using the image to sprite animation function, you can play back the sequence to ensure your animation looks perfect before exporting.',
+    },
+    {
+      question: 'Does this sprite maker online work on mobile devices?',
+      answer: 'Our sprite maker online is fully responsive and works on most modern mobile devices and tablets, allowing you to create sprite sheets on the go.',
+    },
+    {
+      question: 'How many images can I add to the images to sprite sheet converter?',
+      answer: 'There is no hard limit on the number of images you can add to the images to sprite sheet converter, but performance may vary depending on your device and the size of the images.',
+    },
+  ];
+
+  addFAQSchema(faqs);
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
+      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6">Frequently Asked Questions</h1>
+      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-10">Got questions? We've got answers. If you can't find what you're looking for, feel free to <router-link to="/contact" class="text-blue-600 dark:text-blue-400 hover:underline">contact us</router-link>.</p>
+
+      <div class="space-y-6">
+        <details
+          v-for="(faq, index) in faqs"
+          :key="index"
+          class="group bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-300 hover:shadow-md open:bg-white dark:open:bg-gray-800 open:shadow-lg open:border-blue-200 dark:open:border-blue-900"
+        >
+          <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white pr-4">{{ faq.question }}</h3>
+            <span class="transform transition-transform duration-300 group-open:rotate-180 text-gray-500 dark:text-gray-400">
+              <i class="fas fa-chevron-down"></i>
+            </span>
+          </summary>
+          <div class="px-6 pb-6 text-gray-700 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-gray-700/50 pt-4">
+            {{ faq.answer }}
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /* Remove default triangle for details/summary */
+  details > summary {
+    list-style: none;
+  }
+  details > summary::-webkit-details-marker {
+    display: none;
+  }
+</style>
--- a/src/views/HomeView.seo.ts
+++ b/src/views/HomeView.seo.ts
@@ -0,0 +1,53 @@
+import { useSEO } from '../composables/useSEO';
+import { useStructuredData } from '../composables/useStructuredData';
+import { useHead } from '@vueuse/head';
+
+export function useHomeViewSEO() {
+  const { addOrganizationSchema, addWebSiteSchema } = useStructuredData();
+
+  // Set page SEO synchronously
+  useSEO({
+    title: 'Spritesheet Generator - Create Game Spritesheets Online',
+    description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
+    url: '/',
+    type: 'website',
+    keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools',
+  });
+
+  // Add organization schema
+  addOrganizationSchema();
+
+  // Add website schema
+  addWebSiteSchema();
+
+  // Add SoftwareApplication schema
+  useHead({
+    script: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'SoftwareApplication',
+          name: 'Spritesheet Generator',
+          applicationCategory: 'DesignApplication',
+          offers: {
+            '@type': 'Offer',
+            price: '0',
+            priceCurrency: 'USD',
+          },
+          operatingSystem: 'Web Browser',
+          description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
+          url: 'https://spritesheetgenerator.online',
+          screenshot: 'https://spritesheetgenerator.online/og-image.png',
+          featureList: ['Free sprite editor', 'Automatic spritesheet generation', 'Customizable grid layouts', 'Animation preview', 'Cross-platform compatibility', 'Zero installation required', 'Batch processing', 'Multiple export formats (PNG, JPG, GIF, ZIP, JSON)'],
+          browserRequirements: 'Requires JavaScript. Requires HTML5.',
+          aggregateRating: {
+            '@type': 'AggregateRating',
+            ratingValue: '4.8',
+            ratingCount: '127',
+          },
+        }),
+      },
+    ],
+  });
+}
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,7 +3,12 @@
    <!-- Welcome state -->
    <div v-if="!layers.some(l => l.sprites.length)" class="p-6 sm:p-10">
      <div class="mb-8">
-        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites or single image</h2>
+        <div class="flex items-center justify-between gap-4 mb-1">
+          <p class="text-2xl font-bold text-gray-800 dark:text-gray-100">Upload sprites or single image</p>
+          <a href="https://ko-fi.com/X8X416D44P" target="_blank" rel="noopener noreferrer">
+            <img height="36" style="border: 0px; height: 36px" src="https://storage.ko-fi.com/cdn/kofi6.png?v=6" alt="Buy Me a Coffee at ko-fi.com" />
+          </a>
+        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
      </div>
      <file-uploader @upload-sprites="handleSpritesUpload" />
@@ -11,7 +16,7 @@
      <div class="mt-10">
        <div class="prose prose-lg dark:prose-invert max-w-none">
          <div>
-            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Welcome to Spritesheet generator</h3>
+            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Welcome to Spritesheet generator</h1>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Create spritesheets for your game development and animation projects with our completely free, open-source Spritesheet generator.</p>
            <p class="text-gray-700 dark:text-gray-300 mb-6">This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Key features of this sprite editor</h3>
@@ -40,9 +45,9 @@
    </div>

    <!-- Two-column layout: Left controls, Right preview -->
-    <div v-if="layers.some(l => l.sprites.length)" class="flex flex-col flex-1 lg:grid lg:grid-cols-[380px_1fr] xl:grid-cols-[420px_1fr] lg:overflow-hidden">
+    <div v-if="layers.some(l => l.sprites.length)" class="flex flex-col flex-1 lg:grid lg:grid-cols-[380px_1fr] xl:grid-cols-[420px_1fr] lg:overflow-hidden min-h-0">
      <!-- Left sidebar - Controls -->
-      <div class="p-6 bg-gray-50/50 dark:bg-gray-900/30 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 lg:overflow-y-auto lg:overflow-x-auto">
+      <div class="p-6 bg-gray-50/50 dark:bg-gray-900/30 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 lg:overflow-y-auto lg:overflow-x-auto lg:min-h-0">
        <div class="space-y-8">
          <!-- Upload Section -->
          <section>
@@ -198,42 +203,58 @@
                <i class="fas fa-file-archive"></i>
                <span>ZIP</span>
              </button>
+              <button @click="openShareModal" class="btn btn-dark btn-sm col-span-2" data-rybbit-event="share-spritesheet">
+                <i class="fas fa-share-alt"></i>
+                <span>Share</span>
+              </button>
            </div>
          </section>
        </div>
      </div>

      <!-- Right panel - Tabs -->
-      <div class="flex flex-col overflow-hidden">
+      <div class="flex flex-col overflow-hidden min-h-0">
        <!-- Tab Navigation -->
        <div class="bg-gray-50/50 dark:bg-gray-900/30 border-b border-gray-200 dark:border-gray-700">
-          <div class="flex gap-1 p-2">
-            <button
-              @click="activeTab = 'canvas'"
-              class="border-gray-600 border"
-              :class="['flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer', activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
-            >
-              <i class="fas fa-th"></i>
-              <span>Canvas</span>
-            </button>
-            <button
-              @click="activeTab = 'preview'"
-              class="border-gray-600 border"
-              :class="['flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer', activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50']"
-              data-rybbit-event="preview-animation"
-            >
-              <i class="fas fa-play"></i>
-              <span>Preview</span>
+          <div class="flex items-center justify-between gap-1 p-2">
+            <div class="flex gap-1">
+              <button
+                @click="activeTab = 'canvas'"
+                class="border-gray-600 border"
+                :class="[
+                  'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
+                  activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
+                ]"
+              >
+                <i class="fas fa-th"></i>
+                <span>Canvas</span>
+              </button>
+              <button
+                @click="activeTab = 'preview'"
+                class="border-gray-600 border"
+                :class="[
+                  'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
+                  activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
+                ]"
+                data-rybbit-event="preview-animation"
+              >
+                <i class="fas fa-play"></i>
+                <span>Preview</span>
+              </button>
+            </div>
+            <button @click="openShareModal" class="flex items-center gap-2 px-4 py-2 mr-2.5 text-sm font-medium rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-sm hover:shadow-md transition-all cursor-pointer" data-rybbit-event="share-spritesheet-header">
+              <i class="fas fa-share-alt"></i>
+              <span>Share spritesheet</span>
            </button>
          </div>
        </div>

        <!-- Tab Content -->
-        <div class="p-6 lg:flex-1 lg:overflow-auto">
-          <div v-if="activeTab === 'canvas'">
+        <div class="p-6 lg:flex-1 lg:overflow-auto lg:min-h-0">
+          <div v-if="activeTab === 'canvas'" class="h-full">
            <sprite-canvas :layers="layers" :active-layer-id="activeLayerId" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-cell="updateSpriteCell" @remove-sprite="removeSprite" @replace-sprite="replaceSprite" @add-sprite="addSprite" />
          </div>
-          <div v-if="activeTab === 'preview'">
+          <div v-if="activeTab === 'preview'" class="h-full">
            <sprite-preview :layers="layers" :active-layer-id="activeLayerId" :columns="columns" @update-sprite="updateSpritePosition" @update-sprite-in-layer="updateSpriteInLayer" />
          </div>
        </div>
@@ -242,6 +263,7 @@

    <SpritesheetSplitter :is-open="isSpritesheetSplitterOpen" :image-url="spritesheetImageUrl" :image-file="spritesheetImageFile" @close="closeSpritesheetSplitter" @split="handleSplitSpritesheet" />
    <GifFpsModal :is-open="isGifFpsModalOpen" @close="closeGifFpsModal" @confirm="downloadAsGif" :default-fps="10" />
+    <ShareModal :is-open="isShareModalOpen" :share-function="shareFunction" @close="closeShareModal" />
  </main>
 </template>

@@ -252,13 +274,19 @@
  import SpritePreview from '@/components/SpritePreview.vue';
  import SpritesheetSplitter from '@/components/SpritesheetSplitter.vue';
  import GifFpsModal from '@/components/GifFpsModal.vue';
+  import ShareModal from '@/components/ShareModal.vue';
  import { useExportLayers } from '@/composables/useExportLayers';
+  import { useShare } from '@/composables/useShare';
  import { useLayers } from '@/composables/useLayers';
  import { getMaxDimensionsAcrossLayers } from '@/composables/useLayers';
  import { useSettingsStore } from '@/stores/useSettingsStore';
  import { calculateNegativeSpacing } from '@/composables/useNegativeSpacing';
+  import { useHomeViewSEO } from './HomeView.seo';
  import type { SpriteFile } from '@/types/sprites';

+  // Initialize SEO
+  useHomeViewSEO();
+
  const settingsStore = useSettingsStore();
  const { layers, visibleLayers, activeLayer, activeLayerId, columns, updateSpritePosition, updateSpriteInLayer, updateSpriteCell, removeSprite, replaceSprite, addSprite, processImageFiles, alignSprites, addLayer, removeLayer, moveLayer } = useLayers();

@@ -290,6 +318,7 @@
  const activeTab = ref<'canvas' | 'preview'>('canvas');
  const isSpritesheetSplitterOpen = ref(false);
  const isGifFpsModalOpen = ref(false);
+  const isShareModalOpen = ref(false);
  const uploadInput = ref<HTMLInputElement | null>(null);
  const jsonFileInput = ref<HTMLInputElement | null>(null);
  const spritesheetImageUrl = ref('');
@@ -369,6 +398,23 @@
    isGifFpsModalOpen.value = false;
  };

+  // Share functionality
+  const { share } = useShare(layers, columns, toRef(settingsStore, 'negativeSpacingEnabled'), toRef(settingsStore, 'backgroundColor'), toRef(settingsStore, 'manualCellSizeEnabled'), toRef(settingsStore, 'manualCellWidth'), toRef(settingsStore, 'manualCellHeight'));
+
+  const shareFunction = () => share();
+
+  const openShareModal = () => {
+    if (!visibleLayers.value.some(l => l.sprites.length > 0)) {
+      alert('Please upload or import sprites before sharing.');
+      return;
+    }
+    isShareModalOpen.value = true;
+  };
+
+  const closeShareModal = () => {
+    isShareModalOpen.value = false;
+  };
+
  const handleSplitSpritesheet = (spriteFiles: SpriteFile[]) => {
    processImageFiles(spriteFiles.map(s => s.file));
  };
--- a/src/views/PrivacyPolicy.vue
+++ b/src/views/PrivacyPolicy.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
+
+  const { addBreadcrumbSchema } = useStructuredData();
+
+  // Set SEO synchronously
+  useSEO({
+    title: 'Privacy Policy - Your Data Protection',
+    description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
+    url: '/privacy-policy',
+    type: 'website',
+    keywords: 'privacy policy, data protection, client-side processing',
+  });
+
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'Privacy Policy', url: '/privacy-policy' },
+  ]);
+</script>
+
 <template>
  <div class="w-full">
    <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
@@ -11,18 +32,18 @@
        </div>

        <div class="space-y-3">
-          <h3 class="text-xl font-bold text-gray-900 dark:text-white">2. Data Collection</h3>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white">2. Data collection</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We do not collect any personal data or uploaded images. All processing happens locally on your device.</p>
        </div>

        <div class="space-y-3">
-          <h3 class="text-xl font-bold text-gray-900 dark:text-white">3. Local Storage</h3>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white">3. Local storage</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We use your browser's Local Storage to save your preferences (such as dark mode and grid settings) to improve your experience.</p>
        </div>

        <div class="space-y-3">
-          <h3 class="text-xl font-bold text-gray-900 dark:text-white">4. Third-Party Services</h3>
-          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We may use third-party services for analytics or hosting (e.g., Cloudflare, Vercel) which may collect standard server logs.</p>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white">4. Third-Party services</h3>
+          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We do not use third-party services for analytics.</p>
        </div>

        <div class="space-y-3">
--- a/src/views/ShareView.vue
+++ b/src/views/ShareView.vue
@@ -0,0 +1,286 @@
+<template>
+  <main class="flex-1 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 transition-all duration-300">
+    <div class="p-6 sm:p-10 max-w-4xl mx-auto">
+      <!-- Loading state -->
+      <div v-if="loading" class="flex flex-col items-center justify-center py-24">
+        <div class="relative">
+          <div class="w-16 h-16 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+          <div class="absolute top-0 left-0 w-16 h-16 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"></div>
+        </div>
+        <p class="mt-6 text-lg font-medium text-gray-600 dark:text-gray-300">Loading shared spritesheet...</p>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Please wait while we fetch your spritesheet</p>
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="error" class="flex flex-col items-center justify-center py-24">
+        <div class="w-20 h-20 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-6">
+          <i class="fas fa-exclamation-triangle text-3xl text-red-500 dark:text-red-400"></i>
+        </div>
+        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Oops! Something went wrong</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6 text-center max-w-md">{{ error }}</p>
+        <router-link to="/" class="btn btn-dark px-6 py-3">
+          <i class="fas fa-home mr-2"></i>
+          Back to Home
+        </router-link>
+      </div>
+
+      <!-- Success state - show spritesheet info -->
+      <div v-else-if="spritesheetData">
+        <!-- Header -->
+        <div class="text-center mb-10">
+          <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-lg mb-4">
+            <i class="fas fa-share-alt text-2xl text-white"></i>
+          </div>
+          <h1 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 mb-2">Shared spritesheet</h1>
+          <p class="text-gray-500 dark:text-gray-400">Shared {{ formatDate(spritesheetData.created) }}</p>
+        </div>
+
+        <!-- Stats Grid -->
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
+          <div class="group p-5 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-2xl border border-blue-200/50 dark:border-blue-700/30">
+            <div class="flex items-center justify-center w-10 h-10 bg-blue-500/20 dark:bg-blue-500/30 rounded-xl mb-3">
+              <i class="fas fa-columns text-blue-600 dark:text-blue-400"></i>
+            </div>
+            <p class="text-xs font-medium text-blue-600/80 dark:text-blue-400/80 uppercase tracking-wider">Columns</p>
+            <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">{{ spritesheetData.config.columns }}</p>
+          </div>
+          <div class="group p-5 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-2xl border border-purple-200/50 dark:border-purple-700/30">
+            <div class="flex items-center justify-center w-10 h-10 bg-purple-500/20 dark:bg-purple-500/30 rounded-xl mb-3">
+              <i class="fas fa-layer-group text-purple-600 dark:text-purple-400"></i>
+            </div>
+            <p class="text-xs font-medium text-purple-600/80 dark:text-purple-400/80 uppercase tracking-wider">Layers</p>
+            <p class="text-2xl font-bold text-purple-700 dark:text-purple-300">{{ spritesheetData.sprites.length }}</p>
+          </div>
+          <div class="group p-5 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/20 dark:to-emerald-800/20 rounded-2xl border border-emerald-200/50 dark:border-emerald-700/30">
+            <div class="flex items-center justify-center w-10 h-10 bg-emerald-500/20 dark:bg-emerald-500/30 rounded-xl mb-3">
+              <i class="fas fa-images text-emerald-600 dark:text-emerald-400"></i>
+            </div>
+            <p class="text-xs font-medium text-emerald-600/80 dark:text-emerald-400/80 uppercase tracking-wider">Sprites</p>
+            <p class="text-2xl font-bold text-emerald-700 dark:text-emerald-300">{{ totalSprites }}</p>
+          </div>
+          <div class="group p-5 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 rounded-2xl border border-amber-200/50 dark:border-amber-700/30">
+            <div class="flex items-center justify-center w-10 h-10 bg-amber-500/20 dark:bg-amber-500/30 rounded-xl mb-3">
+              <i class="fas fa-fill-drip text-amber-600 dark:text-amber-400"></i>
+            </div>
+            <p class="text-xs font-medium text-amber-600/80 dark:text-amber-400/80 uppercase tracking-wider">Background</p>
+            <p class="text-lg font-bold text-amber-700 dark:text-amber-300 truncate">{{ spritesheetData.config.backgroundColor }}</p>
+          </div>
+        </div>
+
+        <!-- Preview Section -->
+        <div class="mb-8">
+          <h3 class="flex items-center gap-2 text-lg font-bold text-gray-800 dark:text-gray-100 mb-4">
+            <i class="fas fa-eye text-gray-500 dark:text-gray-400"></i>
+            Sprite preview
+          </h3>
+          <div class="p-6 bg-gray-50 dark:bg-gray-800/50 rounded-2xl border border-gray-200 dark:border-gray-700">
+            <div v-for="(layer, layerIndex) in spritesheetData.sprites" :key="layerIndex" class="mb-6 last:mb-0">
+              <div class="flex items-center gap-2 mb-3">
+                <span class="inline-flex items-center justify-center w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded-full text-xs font-bold text-gray-600 dark:text-gray-300">
+                  {{ layerIndex + 1 }}
+                </span>
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ layer.name || `Layer ${layerIndex + 1}` }}</p>
+                <span class="text-xs text-gray-400 dark:text-gray-500">({{ layer.sprites.length }} sprites)</span>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <div v-for="(sprite, spriteIndex) in layer.sprites.slice(0, 12)" :key="spriteIndex" class="relative group">
+                  <div class="w-16 h-16 bg-checkerboard rounded-lg border-2 border-gray-200 dark:border-gray-600 overflow-hidden transition-transform group-hover:scale-110 group-hover:border-blue-400 group-hover:shadow-lg">
+                    <img :src="sprite.base64" :alt="`Sprite ${spriteIndex + 1}`" class="w-full h-full object-contain" style="image-rendering: pixelated" />
+                  </div>
+                  <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-gray-800 dark:bg-gray-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                    <span class="text-[10px] font-bold text-white">{{ spriteIndex + 1 }}</span>
+                  </div>
+                </div>
+                <div v-if="layer.sprites.length > 12" class="w-16 h-16 flex flex-col items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
+                  <span class="text-lg font-bold text-gray-500 dark:text-gray-400">+{{ layer.sprites.length - 12 }}</span>
+                  <span class="text-[10px] text-gray-400 dark:text-gray-500">more</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex flex-col sm:flex-row gap-3 justify-center">
+          <button @click="loadIntoEditor" class="btn btn-dark px-8 py-3 text-base font-semibold shadow-lg hover:shadow-xl transition-shadow">
+            <i class="fas fa-edit mr-2"></i>
+            Open in editor
+          </button>
+          <button @click="downloadJSON" class="btn btn-secondary px-8 py-3 text-base font-semibold">
+            <i class="fas fa-download mr-2"></i>
+            Download JSON
+          </button>
+          <router-link to="/" class="btn btn-ghost px-8 py-3 text-base font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
+            <i class="fas fa-plus-circle mr-2"></i>
+            Create new
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { fetchSpritesheet, type SpritesheetRecord } from '@/composables/useShare';
+  import { useLayers } from '@/composables/useLayers';
+  import { useSettingsStore } from '@/stores/useSettingsStore';
+  import type { Layer, Sprite } from '@/types/sprites';
+
+  const route = useRoute();
+  const router = useRouter();
+  const settingsStore = useSettingsStore();
+  const { layers, activeLayerId, columns } = useLayers();
+
+  const loading = ref(true);
+  const error = ref('');
+  const spritesheetData = ref<SpritesheetRecord | null>(null);
+
+  const totalSprites = computed(() => {
+    if (!spritesheetData.value) return 0;
+    return spritesheetData.value.sprites.reduce((sum, layer) => sum + (layer.sprites?.length || 0), 0);
+  });
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+
+    return date.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const loadIntoEditor = async () => {
+    if (!spritesheetData.value) return;
+
+    const data = spritesheetData.value;
+
+    // Apply config settings
+    columns.value = data.config.columns;
+    settingsStore.negativeSpacingEnabled = data.config.negativeSpacingEnabled;
+    settingsStore.backgroundColor = data.config.backgroundColor;
+    settingsStore.manualCellSizeEnabled = data.config.manualCellSizeEnabled;
+    settingsStore.manualCellWidth = data.config.manualCellWidth;
+    settingsStore.manualCellHeight = data.config.manualCellHeight;
+
+    // Load sprites into layers
+    const loadSprite = (spriteData: any): Promise<Sprite> =>
+      new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => {
+          const byteString = atob(spriteData.base64.split(',')[1]);
+          const mimeType = spriteData.base64.split(',')[0].split(':')[1].split(';')[0];
+          const ab = new ArrayBuffer(byteString.length);
+          const ia = new Uint8Array(ab);
+          for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i);
+          const blob = new Blob([ab], { type: mimeType });
+          const fileName = spriteData.name || `sprite-${spriteData.id}.png`;
+          const file = new File([blob], fileName, { type: mimeType });
+          resolve({
+            id: spriteData.id || crypto.randomUUID(),
+            file,
+            img,
+            url: spriteData.base64,
+            width: spriteData.width,
+            height: spriteData.height,
+            x: spriteData.x || 0,
+            y: spriteData.y || 0,
+          });
+        };
+        img.src = spriteData.base64;
+      });
+
+    const newLayers: Layer[] = [];
+    for (const layerData of data.sprites) {
+      const sprites: Sprite[] = await Promise.all(layerData.sprites.map((s: any) => loadSprite(s)));
+      newLayers.push({
+        id: layerData.id || crypto.randomUUID(),
+        name: layerData.name || 'Layer',
+        visible: layerData.visible !== false,
+        locked: !!layerData.locked,
+        sprites,
+      });
+    }
+
+    layers.value = newLayers;
+    if (newLayers.length > 0) {
+      const firstWithSprites = newLayers.find(l => l.sprites.length > 0);
+      activeLayerId.value = firstWithSprites ? firstWithSprites.id : newLayers[0].id;
+    }
+
+    // Navigate to home
+    router.push('/');
+  };
+
+  const downloadJSON = () => {
+    if (!spritesheetData.value) return;
+
+    const json = {
+      version: spritesheetData.value.config.version,
+      columns: spritesheetData.value.config.columns,
+      negativeSpacingEnabled: spritesheetData.value.config.negativeSpacingEnabled,
+      backgroundColor: spritesheetData.value.config.backgroundColor,
+      manualCellSizeEnabled: spritesheetData.value.config.manualCellSizeEnabled,
+      manualCellWidth: spritesheetData.value.config.manualCellWidth,
+      manualCellHeight: spritesheetData.value.config.manualCellHeight,
+      layers: spritesheetData.value.sprites,
+    };
+
+    const jsonString = JSON.stringify(json, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'spritesheet.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  onMounted(async () => {
+    const id = route.params.id as string;
+    if (!id) {
+      error.value = 'No spritesheet ID provided';
+      loading.value = false;
+      return;
+    }
+
+    try {
+      spritesheetData.value = await fetchSpritesheet(id);
+    } catch (e: any) {
+      console.error('Failed to load spritesheet:', e);
+      error.value = e.message || 'Failed to load spritesheet';
+    } finally {
+      loading.value = false;
+    }
+  });
+</script>
+
+<style scoped>
+  .bg-checkerboard {
+    background-color: #fff;
+    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
+    background-size: 12px 12px;
+    background-position:
+      0 0,
+      0 6px,
+      6px -6px,
+      -6px 0px;
+  }
+
+  .dark .bg-checkerboard {
+    background-color: #374151;
+    background-image: linear-gradient(45deg, #4b5563 25%, transparent 25%), linear-gradient(-45deg, #4b5563 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #4b5563 75%), linear-gradient(-45deg, transparent 75%, #4b5563 75%);
+  }
+</style>
Author	SHA1	Message	Date
root	3aa01dd044	[FEAT] Improved splitting	2025-12-15 01:45:07 +01:00
root	c738f28867	[FEAT] Change open text	2025-12-14 20:37:23 +01:00
root	a381900356	[FEAT] Add sharing function, UI enhancement	2025-12-14 19:06:55 +01:00
root	883c93b7ff	[FEAT] Add Kofi btn	2025-12-12 14:57:41 +01:00
root	b255acce40	[FEAT] Package updates	2025-12-11 21:27:01 +01:00
root	f52530d058	[FEAT] New Discord	2025-12-01 02:25:53 +01:00
root	bf95f4fbee	UX enhancements	2025-11-26 20:29:30 +01:00
root	c4a0024ec0	[FEAT] Performance enhancements	2025-11-26 19:53:55 +01:00
root	8a86ae3e98	[FEAT] Fix link alignment	2025-11-26 19:51:35 +01:00
root	233aab5350	[FEAT] SEO fix	2025-11-26 19:42:20 +01:00
root	cfef7d30aa	[FEAT] Add FAQ to sitemap	2025-11-26 19:38:03 +01:00
root	04ab97b15c	[FEAT] FAQ update	2025-11-26 19:33:50 +01:00
root	14dbb17ba2	[FEAT] H1 > span	2025-11-26 19:30:26 +01:00
root	75e24eac42	[FEAT] Add FAQ	2025-11-26 19:27:33 +01:00
root	0942ce5d51	[FEAT] Typo	2025-11-26 18:01:08 +01:00
root	fd43c7b515	[FEAT] Update PP	2025-11-26 18:00:16 +01:00
root	2d4a7e3765	[FEAT] Add ads.txt	2025-11-26 17:41:13 +01:00
root	84428b3196	[FEAT] Added missing types	2025-11-26 17:29:38 +01:00
root	c448a4c267	[FEAT] Add gradient	2025-11-26 17:26:42 +01:00
root	80787719e6	[FEAT] New article	2025-11-26 17:24:32 +01:00
root	b801cd4c99	[FEAT] SEO best practices	2025-11-26 17:20:09 +01:00
root	accea99408	[FEAT] Fix vue warn	2025-11-26 17:16:52 +01:00
root	09c77f5414	BReadcrumbs	2025-11-26 17:13:42 +01:00
root	d38ba85f4f	[FEAT] SEO labels	2025-11-26 17:05:01 +01:00