├── .github
    └── FUNDING.yml
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── src
    ├── app.d.ts
    ├── app.html
    ├── lib
    │   ├── constants.ts
    │   ├── index.ts
    │   ├── ripple.css
    │   └── ripple.ts
    └── routes
    │   ├── +page.svelte
    │   ├── +page.ts
    │   ├── CodeBlock.svelte
    │   ├── Examples.svelte
    │   ├── app.css
    │   └── example.ts
├── static
    ├── logo-large.png
    └── logo.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: [posandu]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /dist
 5 | /.svelte-kit
 6 | /package
 7 | .env
 8 | .env.*
 9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | resolution-mode=highest
3 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Ripple Action
 2 | 
 3 | <p>
 4 |   <img
 5 | 			src="https://deno.bundlejs.com/badge?q=svelte-ripple-action"
 6 | 			alt=""
 7 | 	/>
 8 |   <img src="https://img.shields.io/github/commit-activity/t/posandu/svelte-ripple-action" />
 9 |   <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/posandu/svelte-ripple-action">
10 | </p>
11 | 
12 | View the [demo](https://ripple.posandu.com/).
13 | 
14 | Svelte Ripple Action is a simple and customizable action for creating ripple effects on elements in a Svelte application.
15 | 
16 | ## Installation
17 | 
18 | Install the package from npm or your preferred package manager:
19 | 
20 | ```bash
21 | npm install svelte-ripple-action
22 | ```
23 | 
24 | ## Usage
25 | 
26 | 1. Import the CSS styles for the ripple effect:
27 | 
28 | ```javascript
29 | import "svelte-ripple-action/ripple.css";
30 | ```
31 | 
32 | 2. Import the `ripple` action and use it on any element you want to have a ripple effect on:
33 | 
34 | ```svelte
35 | <script>
36 |   import { ripple } from "svelte-ripple-action";
37 | </script>
38 | 
39 | <button use:ripple>Click me</button>
40 | ```
41 | 
42 | That's it! You now have a ripple effect on your element.
43 | 
44 | ## Options
45 | 
46 | You can pass options to customize the ripple effect.
47 | 
48 | ### `center?: boolean`
49 | 
50 | By default, the ripple effect starts from the point where the user clicks on the element. If you want the ripple effect to start from the center of the element, you can pass the `center` option.
51 | 
52 | ```svelte
53 | <button use:ripple={{ center: true }}>Click me</button>
54 | ```
55 | 
56 | ### `color?: string`
57 | 
58 | You can customize the color of the ripple effect by passing a valid CSS color value to the `color` option.
59 | 
60 | ```svelte
61 | <button
62 |   use:ripple={{
63 |     color: "rgba(255, 0, 0, 0.2)",
64 |   }}
65 | >Red ripple</button>
66 | ```
67 | 
68 | ### `duration?: number`
69 | 
70 | You can control the duration of the ripple effect in seconds by passing a number to the `duration` option.
71 | 
72 | ```svelte
73 | <button use:ripple={{ duration: 2 }}>2 seconds</button>
74 | <button use:ripple={{ duration: 0.2 }}>0.2 seconds</button>
75 | ```
76 | 
77 | ### `maxRadius?: number`
78 | 
79 | You can control the maximum radius of the ripple effect in pixels by passing a number to the `maxRadius` option.
80 | 
81 | ```svelte
82 | <button use:ripple={{ maxRadius: 100 }}>100px</button>
83 | ```
84 | 
85 | ## Credits
86 | 
87 | Created by [Posandu](https://posandu.com). You can find the source code on [GitHub](https://github.com/posandu/svelte-ripple-action).
88 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelte-ripple-action",
 3 | 	"version": "2.0.0",
 4 | 	"description": "A svelte action to add a ripple effect to any element",
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build && npm run package",
 8 | 		"preview": "vite preview",
 9 | 		"package": "svelte-kit sync && svelte-package && publint",
10 | 		"prepublishOnly": "npm run package",
11 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
13 | 	},
14 | 	"exports": {
15 | 		".": {
16 | 			"types": "./dist/index.d.ts",
17 | 			"svelte": "./dist/index.js"
18 | 		},
19 | 		"./ripple.css": "./dist/ripple.css"
20 | 	},
21 | 	"files": [
22 | 		"dist",
23 | 		"!dist/**/*.test.*",
24 | 		"!dist/**/*.spec.*"
25 | 	],
26 | 	"peerDependencies": {
27 | 		"svelte": "^5.0.0"
28 | 	},
29 | 	"devDependencies": {
30 | 		"@sveltejs/adapter-auto": "^3.0.0",
31 | 		"@sveltejs/kit": "^2.5.27",
32 | 		"@sveltejs/package": "^2.3.7",
33 | 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
34 | 		"publint": "^0.1.9",
35 | 		"shiki": "^1.1.7",
36 | 		"svelte": "^5.0.0",
37 | 		"svelte-check": "^4.0.0",
38 | 		"tslib": "^2.4.1",
39 | 		"typescript": "^5.5.0",
40 | 		"vite": "^5.4.4"
41 | 	},
42 | 	"svelte": "./dist/index.js",
43 | 	"types": "./dist/index.d.ts",
44 | 	"type": "module",
45 | 	"license": "MIT",
46 | 	"repository": {
47 | 		"type": "git",
48 | 		"url": "https://github.com/posandu/svelte-ripple-action"
49 | 	},
50 | 	"author": "posandu",
51 | 	"main": "./dist/index.js"
52 | }
53 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
   1 | lockfileVersion: '9.0'
   2 | 
   3 | settings:
   4 |   autoInstallPeers: true
   5 |   excludeLinksFromLockfile: false
   6 | 
   7 | importers:
   8 | 
   9 |   .:
  10 |     devDependencies:
  11 |       '@sveltejs/adapter-auto':
  12 |         specifier: ^3.0.0
  13 |         version: 3.3.1(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11))
  14 |       '@sveltejs/kit':
  15 |         specifier: ^2.5.27
  16 |         version: 2.8.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11)
  17 |       '@sveltejs/package':
  18 |         specifier: ^2.3.7
  19 |         version: 2.3.7(svelte@5.2.0)(typescript@5.6.3)
  20 |       '@sveltejs/vite-plugin-svelte':
  21 |         specifier: ^4.0.0
  22 |         version: 4.0.0(svelte@5.2.0)(vite@5.4.11)
  23 |       publint:
  24 |         specifier: ^0.1.9
  25 |         version: 0.1.16
  26 |       shiki:
  27 |         specifier: ^1.1.7
  28 |         version: 1.1.7
  29 |       svelte:
  30 |         specifier: ^5.0.0
  31 |         version: 5.2.0
  32 |       svelte-check:
  33 |         specifier: ^4.0.0
  34 |         version: 4.0.7(svelte@5.2.0)(typescript@5.6.3)
  35 |       tslib:
  36 |         specifier: ^2.4.1
  37 |         version: 2.6.1
  38 |       typescript:
  39 |         specifier: ^5.5.0
  40 |         version: 5.6.3
  41 |       vite:
  42 |         specifier: ^5.4.4
  43 |         version: 5.4.11
  44 | 
  45 | packages:
  46 | 
  47 |   '@ampproject/remapping@2.3.0':
  48 |     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
  49 |     engines: {node: '>=6.0.0'}
  50 | 
  51 |   '@esbuild/aix-ppc64@0.21.5':
  52 |     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
  53 |     engines: {node: '>=12'}
  54 |     cpu: [ppc64]
  55 |     os: [aix]
  56 | 
  57 |   '@esbuild/android-arm64@0.21.5':
  58 |     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
  59 |     engines: {node: '>=12'}
  60 |     cpu: [arm64]
  61 |     os: [android]
  62 | 
  63 |   '@esbuild/android-arm@0.21.5':
  64 |     resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
  65 |     engines: {node: '>=12'}
  66 |     cpu: [arm]
  67 |     os: [android]
  68 | 
  69 |   '@esbuild/android-x64@0.21.5':
  70 |     resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
  71 |     engines: {node: '>=12'}
  72 |     cpu: [x64]
  73 |     os: [android]
  74 | 
  75 |   '@esbuild/darwin-arm64@0.21.5':
  76 |     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
  77 |     engines: {node: '>=12'}
  78 |     cpu: [arm64]
  79 |     os: [darwin]
  80 | 
  81 |   '@esbuild/darwin-x64@0.21.5':
  82 |     resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
  83 |     engines: {node: '>=12'}
  84 |     cpu: [x64]
  85 |     os: [darwin]
  86 | 
  87 |   '@esbuild/freebsd-arm64@0.21.5':
  88 |     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
  89 |     engines: {node: '>=12'}
  90 |     cpu: [arm64]
  91 |     os: [freebsd]
  92 | 
  93 |   '@esbuild/freebsd-x64@0.21.5':
  94 |     resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
  95 |     engines: {node: '>=12'}
  96 |     cpu: [x64]
  97 |     os: [freebsd]
  98 | 
  99 |   '@esbuild/linux-arm64@0.21.5':
 100 |     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
 101 |     engines: {node: '>=12'}
 102 |     cpu: [arm64]
 103 |     os: [linux]
 104 | 
 105 |   '@esbuild/linux-arm@0.21.5':
 106 |     resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
 107 |     engines: {node: '>=12'}
 108 |     cpu: [arm]
 109 |     os: [linux]
 110 | 
 111 |   '@esbuild/linux-ia32@0.21.5':
 112 |     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
 113 |     engines: {node: '>=12'}
 114 |     cpu: [ia32]
 115 |     os: [linux]
 116 | 
 117 |   '@esbuild/linux-loong64@0.21.5':
 118 |     resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
 119 |     engines: {node: '>=12'}
 120 |     cpu: [loong64]
 121 |     os: [linux]
 122 | 
 123 |   '@esbuild/linux-mips64el@0.21.5':
 124 |     resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
 125 |     engines: {node: '>=12'}
 126 |     cpu: [mips64el]
 127 |     os: [linux]
 128 | 
 129 |   '@esbuild/linux-ppc64@0.21.5':
 130 |     resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
 131 |     engines: {node: '>=12'}
 132 |     cpu: [ppc64]
 133 |     os: [linux]
 134 | 
 135 |   '@esbuild/linux-riscv64@0.21.5':
 136 |     resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
 137 |     engines: {node: '>=12'}
 138 |     cpu: [riscv64]
 139 |     os: [linux]
 140 | 
 141 |   '@esbuild/linux-s390x@0.21.5':
 142 |     resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
 143 |     engines: {node: '>=12'}
 144 |     cpu: [s390x]
 145 |     os: [linux]
 146 | 
 147 |   '@esbuild/linux-x64@0.21.5':
 148 |     resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
 149 |     engines: {node: '>=12'}
 150 |     cpu: [x64]
 151 |     os: [linux]
 152 | 
 153 |   '@esbuild/netbsd-x64@0.21.5':
 154 |     resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
 155 |     engines: {node: '>=12'}
 156 |     cpu: [x64]
 157 |     os: [netbsd]
 158 | 
 159 |   '@esbuild/openbsd-x64@0.21.5':
 160 |     resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
 161 |     engines: {node: '>=12'}
 162 |     cpu: [x64]
 163 |     os: [openbsd]
 164 | 
 165 |   '@esbuild/sunos-x64@0.21.5':
 166 |     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
 167 |     engines: {node: '>=12'}
 168 |     cpu: [x64]
 169 |     os: [sunos]
 170 | 
 171 |   '@esbuild/win32-arm64@0.21.5':
 172 |     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
 173 |     engines: {node: '>=12'}
 174 |     cpu: [arm64]
 175 |     os: [win32]
 176 | 
 177 |   '@esbuild/win32-ia32@0.21.5':
 178 |     resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
 179 |     engines: {node: '>=12'}
 180 |     cpu: [ia32]
 181 |     os: [win32]
 182 | 
 183 |   '@esbuild/win32-x64@0.21.5':
 184 |     resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
 185 |     engines: {node: '>=12'}
 186 |     cpu: [x64]
 187 |     os: [win32]
 188 | 
 189 |   '@jridgewell/gen-mapping@0.3.5':
 190 |     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
 191 |     engines: {node: '>=6.0.0'}
 192 | 
 193 |   '@jridgewell/resolve-uri@3.1.1':
 194 |     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
 195 |     engines: {node: '>=6.0.0'}
 196 | 
 197 |   '@jridgewell/set-array@1.2.1':
 198 |     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
 199 |     engines: {node: '>=6.0.0'}
 200 | 
 201 |   '@jridgewell/sourcemap-codec@1.4.15':
 202 |     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 203 | 
 204 |   '@jridgewell/sourcemap-codec@1.5.0':
 205 |     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 206 | 
 207 |   '@jridgewell/trace-mapping@0.3.25':
 208 |     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 209 | 
 210 |   '@polka/url@1.0.0-next.28':
 211 |     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 212 | 
 213 |   '@rollup/rollup-android-arm-eabi@4.27.0':
 214 |     resolution: {integrity: sha512-e312hTjuM89YLqlcqEs7mSvwhxN5pgXqRobUob7Jsz1wDQlpAb2WTX4jzvrx5NrL1h2SE4fGdHSNyPxbLfzyeA==}
 215 |     cpu: [arm]
 216 |     os: [android]
 217 | 
 218 |   '@rollup/rollup-android-arm64@4.27.0':
 219 |     resolution: {integrity: sha512-cBUOny8GNXP++gN00Bo5L04I2oqUEFAU0OSDb+4hqp4/R/pZL/zlGzp7lJkhtPX52Rj+PIe0S8aOqhK4hztxHQ==}
 220 |     cpu: [arm64]
 221 |     os: [android]
 222 | 
 223 |   '@rollup/rollup-darwin-arm64@4.27.0':
 224 |     resolution: {integrity: sha512-aauK2M2ptFQQYdOqbKGYCg1LHlPbm6IxepSnHLLaMIGcd9YBiKRGl2+KtzQL/IkurP+b54EKBkvtZaWXijmzfQ==}
 225 |     cpu: [arm64]
 226 |     os: [darwin]
 227 | 
 228 |   '@rollup/rollup-darwin-x64@4.27.0':
 229 |     resolution: {integrity: sha512-VAjOnHUwpvxf3XT33sMpsLGKq24Rz1sTQhLuUicYrV9pxB4TNi0w11qAGPOyR+dQu/iZf88DmEmG0+2Gaqa1gg==}
 230 |     cpu: [x64]
 231 |     os: [darwin]
 232 | 
 233 |   '@rollup/rollup-freebsd-arm64@4.27.0':
 234 |     resolution: {integrity: sha512-I2eRlZG87gl6WxP6PvSB5bfFA1btE7tWnG6QAoEU/0Gr47f6KaxRwiRfBujHlzkuMPqtpTlSOW4aOEOyMtQqfg==}
 235 |     cpu: [arm64]
 236 |     os: [freebsd]
 237 | 
 238 |   '@rollup/rollup-freebsd-x64@4.27.0':
 239 |     resolution: {integrity: sha512-G05JNYFdjikD/2hJTf1gHdD5KjI2TotjiDn17amHtB5JgwrRF1EA9hJ3TRGIvT3zGXilNWWlR71R/2TT1pXRDg==}
 240 |     cpu: [x64]
 241 |     os: [freebsd]
 242 | 
 243 |   '@rollup/rollup-linux-arm-gnueabihf@4.27.0':
 244 |     resolution: {integrity: sha512-FMXxMZ7qnMULwgdmGSFVlOduAhFyqDPoK1A2Q8HBkzGYX9SMFU3ITKfLdIiCzTaaj/pt1OiEbpF2szUw6Kh++Q==}
 245 |     cpu: [arm]
 246 |     os: [linux]
 247 | 
 248 |   '@rollup/rollup-linux-arm-musleabihf@4.27.0':
 249 |     resolution: {integrity: sha512-0315TiPsJfOY+jAwEeqxcy9yVcAy/jg99GrMcd/L7CRESzi1vhyLPbnkDnz7giaEttSRf/d3llJYfoC+44Nl3A==}
 250 |     cpu: [arm]
 251 |     os: [linux]
 252 | 
 253 |   '@rollup/rollup-linux-arm64-gnu@4.27.0':
 254 |     resolution: {integrity: sha512-4zCKY5E9djPyHzvoCWIouFsuAvg+dk+rNia8lz1bjKpzKz02QvK4JPHyjcDT8CFR2J/aA98WccCirdDOy+VDWQ==}
 255 |     cpu: [arm64]
 256 |     os: [linux]
 257 | 
 258 |   '@rollup/rollup-linux-arm64-musl@4.27.0':
 259 |     resolution: {integrity: sha512-6St9rrPSLbYBbbJAClpU4gmnO7cdZCMMzx2MT0UCIIIevoLAmsCDOAG6t3J/RgN4CPUpdaGr/UnPqQTHZ4oDwA==}
 260 |     cpu: [arm64]
 261 |     os: [linux]
 262 | 
 263 |   '@rollup/rollup-linux-powerpc64le-gnu@4.27.0':
 264 |     resolution: {integrity: sha512-dIBfp8NDrgvwUJxyqFv7501coIba+7xxBJy1gQEF0RGkIKa3Tq0Mh3sF9hmstDLtaMt7gL2aXsCNG9SCKyVVZg==}
 265 |     cpu: [ppc64]
 266 |     os: [linux]
 267 | 
 268 |   '@rollup/rollup-linux-riscv64-gnu@4.27.0':
 269 |     resolution: {integrity: sha512-Pu7xLHRy+5UjFCKR/vWsbFmiBYUC9993v99YoKWhAgK4VsdNuWHPs17NuCJEtVsZpYCNVPbRyBpQw58Ma8BmeA==}
 270 |     cpu: [riscv64]
 271 |     os: [linux]
 272 | 
 273 |   '@rollup/rollup-linux-s390x-gnu@4.27.0':
 274 |     resolution: {integrity: sha512-2Q9qQnk/eWdvXzzHl22y7tpDHREppFUh7N6cCs70HZEbQSgB7wd/2S/B05SSiyAiIn5BL+fYiASLds5bz0IQFw==}
 275 |     cpu: [s390x]
 276 |     os: [linux]
 277 | 
 278 |   '@rollup/rollup-linux-x64-gnu@4.27.0':
 279 |     resolution: {integrity: sha512-CNnqMZ4Yz0Ga0A75qux7DNChq0P9oAWn2S7yjZPRC+AaEF8Ysw5K/1lzT25/a3reJ4V2abcShIVG+tfZHb1UrQ==}
 280 |     cpu: [x64]
 281 |     os: [linux]
 282 | 
 283 |   '@rollup/rollup-linux-x64-musl@4.27.0':
 284 |     resolution: {integrity: sha512-dS1+eCbbao54XB+wLW6uuwRkChq4L0UfKhd3wvt6s+EN1rTIi24ee5Lk3HfRGq9J2jsRm12/AGKLA0kd82Sp/g==}
 285 |     cpu: [x64]
 286 |     os: [linux]
 287 | 
 288 |   '@rollup/rollup-win32-arm64-msvc@4.27.0':
 289 |     resolution: {integrity: sha512-VrYQHY5+Y71OU/uOSRE9lLhph16bbuWGrMwGwZDPxCUXUW5NgLA+K+q0kv7rafHRlnrsZSVcMOkZskzTNnR3ZQ==}
 290 |     cpu: [arm64]
 291 |     os: [win32]
 292 | 
 293 |   '@rollup/rollup-win32-ia32-msvc@4.27.0':
 294 |     resolution: {integrity: sha512-LCqk4Xi3e4GzLqaq+QDM7gP5DtJ/RgWMzV3U2brwp/vEz9RTA5YBgIDP69xYfrTXexes6xPsOIquy79+kLifiA==}
 295 |     cpu: [ia32]
 296 |     os: [win32]
 297 | 
 298 |   '@rollup/rollup-win32-x64-msvc@4.27.0':
 299 |     resolution: {integrity: sha512-dj2ZolfViR3chLWwSHID2mBzLLwYvXFldIplR6BSkdACXqAsrcmItKTff4h7enYB3Ugoh0v41WbxijE9HJb1Hw==}
 300 |     cpu: [x64]
 301 |     os: [win32]
 302 | 
 303 |   '@shikijs/core@1.1.7':
 304 |     resolution: {integrity: sha512-gTYLUIuD1UbZp/11qozD3fWpUTuMqPSf3svDMMrL0UmlGU7D9dPw/V1FonwAorCUJBltaaESxq90jrSjQyGixg==}
 305 | 
 306 |   '@sveltejs/adapter-auto@3.3.1':
 307 |     resolution: {integrity: sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==}
 308 |     peerDependencies:
 309 |       '@sveltejs/kit': ^2.0.0
 310 | 
 311 |   '@sveltejs/kit@2.8.1':
 312 |     resolution: {integrity: sha512-uuOfFwZ4xvnfPsiTB6a4H1ljjTUksGhWnYq5X/Y9z4x5+3uM2Md8q/YVeHL+7w+mygAwoEFdgKZ8YkUuk+VKww==}
 313 |     engines: {node: '>=18.13'}
 314 |     hasBin: true
 315 |     peerDependencies:
 316 |       '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1
 317 |       svelte: ^4.0.0 || ^5.0.0-next.0
 318 |       vite: ^5.0.3
 319 | 
 320 |   '@sveltejs/package@2.3.7':
 321 |     resolution: {integrity: sha512-LYgUkde5GUYqOpXbcoCGUpEH4Ctl3Wj4u4CVZBl56dEeLW5fGHE037ZL1qlK0Ky+QD5uUfwONSeGwIOIighFMQ==}
 322 |     engines: {node: ^16.14 || >=18}
 323 |     hasBin: true
 324 |     peerDependencies:
 325 |       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 326 | 
 327 |   '@sveltejs/vite-plugin-svelte-inspector@3.0.1':
 328 |     resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==}
 329 |     engines: {node: ^18.0.0 || ^20.0.0 || >=22}
 330 |     peerDependencies:
 331 |       '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
 332 |       svelte: ^5.0.0-next.96 || ^5.0.0
 333 |       vite: ^5.0.0
 334 | 
 335 |   '@sveltejs/vite-plugin-svelte@4.0.0':
 336 |     resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==}
 337 |     engines: {node: ^18.0.0 || ^20.0.0 || >=22}
 338 |     peerDependencies:
 339 |       svelte: ^5.0.0-next.96 || ^5.0.0
 340 |       vite: ^5.0.0
 341 | 
 342 |   '@types/cookie@0.6.0':
 343 |     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 344 | 
 345 |   '@types/estree@1.0.6':
 346 |     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 347 | 
 348 |   acorn-typescript@1.4.13:
 349 |     resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
 350 |     peerDependencies:
 351 |       acorn: '>=8.9.0'
 352 | 
 353 |   acorn@8.14.0:
 354 |     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
 355 |     engines: {node: '>=0.4.0'}
 356 |     hasBin: true
 357 | 
 358 |   aria-query@5.3.2:
 359 |     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
 360 |     engines: {node: '>= 0.4'}
 361 | 
 362 |   axobject-query@4.1.0:
 363 |     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
 364 |     engines: {node: '>= 0.4'}
 365 | 
 366 |   balanced-match@1.0.2:
 367 |     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 368 | 
 369 |   brace-expansion@2.0.1:
 370 |     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 371 | 
 372 |   chokidar@4.0.1:
 373 |     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
 374 |     engines: {node: '>= 14.16.0'}
 375 | 
 376 |   cookie@0.6.0:
 377 |     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
 378 |     engines: {node: '>= 0.6'}
 379 | 
 380 |   debug@4.3.7:
 381 |     resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
 382 |     engines: {node: '>=6.0'}
 383 |     peerDependencies:
 384 |       supports-color: '*'
 385 |     peerDependenciesMeta:
 386 |       supports-color:
 387 |         optional: true
 388 | 
 389 |   dedent-js@1.0.1:
 390 |     resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
 391 | 
 392 |   deepmerge@4.3.1:
 393 |     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
 394 |     engines: {node: '>=0.10.0'}
 395 | 
 396 |   devalue@5.1.1:
 397 |     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 398 | 
 399 |   esbuild@0.21.5:
 400 |     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
 401 |     engines: {node: '>=12'}
 402 |     hasBin: true
 403 | 
 404 |   esm-env@1.0.0:
 405 |     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 406 | 
 407 |   esrap@1.2.2:
 408 |     resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
 409 | 
 410 |   fdir@6.4.2:
 411 |     resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
 412 |     peerDependencies:
 413 |       picomatch: ^3 || ^4
 414 |     peerDependenciesMeta:
 415 |       picomatch:
 416 |         optional: true
 417 | 
 418 |   fs.realpath@1.0.0:
 419 |     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 420 | 
 421 |   fsevents@2.3.3:
 422 |     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
 423 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
 424 |     os: [darwin]
 425 | 
 426 |   glob@8.1.0:
 427 |     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
 428 |     engines: {node: '>=12'}
 429 | 
 430 |   globalyzer@0.1.0:
 431 |     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
 432 | 
 433 |   globrex@0.1.2:
 434 |     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 435 | 
 436 |   ignore-walk@5.0.1:
 437 |     resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==}
 438 |     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 439 | 
 440 |   import-meta-resolve@4.1.0:
 441 |     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 442 | 
 443 |   inflight@1.0.6:
 444 |     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
 445 | 
 446 |   inherits@2.0.4:
 447 |     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 448 | 
 449 |   is-reference@3.0.3:
 450 |     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 451 | 
 452 |   kleur@4.1.5:
 453 |     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
 454 |     engines: {node: '>=6'}
 455 | 
 456 |   locate-character@3.0.0:
 457 |     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 458 | 
 459 |   lower-case@2.0.2:
 460 |     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 461 | 
 462 |   lru-cache@6.0.0:
 463 |     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
 464 |     engines: {node: '>=10'}
 465 | 
 466 |   magic-string@0.30.12:
 467 |     resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
 468 | 
 469 |   minimatch@5.1.6:
 470 |     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
 471 |     engines: {node: '>=10'}
 472 | 
 473 |   mri@1.2.0:
 474 |     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
 475 |     engines: {node: '>=4'}
 476 | 
 477 |   mrmime@2.0.0:
 478 |     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
 479 |     engines: {node: '>=10'}
 480 | 
 481 |   ms@2.1.3:
 482 |     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 483 | 
 484 |   nanoid@3.3.7:
 485 |     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
 486 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
 487 |     hasBin: true
 488 | 
 489 |   no-case@3.0.4:
 490 |     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 491 | 
 492 |   npm-bundled@2.0.1:
 493 |     resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==}
 494 |     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 495 | 
 496 |   npm-normalize-package-bin@2.0.0:
 497 |     resolution: {integrity: sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==}
 498 |     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 499 | 
 500 |   npm-packlist@5.1.3:
 501 |     resolution: {integrity: sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==}
 502 |     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 503 |     hasBin: true
 504 | 
 505 |   once@1.4.0:
 506 |     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 507 | 
 508 |   pascal-case@3.1.2:
 509 |     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 510 | 
 511 |   picocolors@1.0.0:
 512 |     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 513 | 
 514 |   picocolors@1.1.1:
 515 |     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 516 | 
 517 |   postcss@8.4.49:
 518 |     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
 519 |     engines: {node: ^10 || ^12 || >=14}
 520 | 
 521 |   publint@0.1.16:
 522 |     resolution: {integrity: sha512-wJgk7HnXDT5Ap0DjFYbGz78kPkN44iQvDiaq8P63IEEyNU9mYXvaMd2cAyIM6OgqXM/IA3CK6XWIsRq+wjNpgw==}
 523 |     engines: {node: '>=16'}
 524 |     hasBin: true
 525 | 
 526 |   readdirp@4.0.2:
 527 |     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
 528 |     engines: {node: '>= 14.16.0'}
 529 | 
 530 |   rollup@4.27.0:
 531 |     resolution: {integrity: sha512-nrOD/RrnAMssruS7bPa7MYpEuH6tUpOa43NLtxQiLKem0An8HZyXun5Ndig6JzbkJoIbaKkt85V67VCaQ59GyA==}
 532 |     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
 533 |     hasBin: true
 534 | 
 535 |   sade@1.8.1:
 536 |     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
 537 |     engines: {node: '>=6'}
 538 | 
 539 |   semver@7.5.4:
 540 |     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
 541 |     engines: {node: '>=10'}
 542 |     hasBin: true
 543 | 
 544 |   set-cookie-parser@2.6.0:
 545 |     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
 546 | 
 547 |   shiki@1.1.7:
 548 |     resolution: {integrity: sha512-9kUTMjZtcPH3i7vHunA6EraTPpPOITYTdA5uMrvsJRexktqP0s7P3s9HVK80b4pP42FRVe03D7fT3NmJv2yYhw==}
 549 | 
 550 |   sirv@3.0.0:
 551 |     resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
 552 |     engines: {node: '>=18'}
 553 | 
 554 |   source-map-js@1.2.1:
 555 |     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
 556 |     engines: {node: '>=0.10.0'}
 557 | 
 558 |   svelte-check@4.0.7:
 559 |     resolution: {integrity: sha512-24hwo+D5L35HOXsh3Z2sU4WhdDLavlHquYaJhrEqAt+mV1xOVzoMVYThW80n99osDJxyuH+vxjNFkNRL4EvwTg==}
 560 |     engines: {node: '>= 18.0.0'}
 561 |     hasBin: true
 562 |     peerDependencies:
 563 |       svelte: ^4.0.0 || ^5.0.0-next.0
 564 |       typescript: '>=5.0.0'
 565 | 
 566 |   svelte2tsx@0.7.25:
 567 |     resolution: {integrity: sha512-P47YhXv8TRNv9IFJOjKQmXsYErZkJavbixazpSTyaGqKBGm9kRZRGcr3HBHNrYkCikzISQlh55j24yS23MdTPA==}
 568 |     peerDependencies:
 569 |       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
 570 |       typescript: ^4.9.4 || ^5.0.0
 571 | 
 572 |   svelte@5.2.0:
 573 |     resolution: {integrity: sha512-LOowFhMB0CoTzDsa90snaICFMftrxKlYsOhH4YP1AamjCSDBZvtDq0yB5QY8LJA1tFftcmpAhmLCK/gAOFNrtw==}
 574 |     engines: {node: '>=18'}
 575 | 
 576 |   tiny-glob@0.2.9:
 577 |     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 578 | 
 579 |   totalist@3.0.1:
 580 |     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
 581 |     engines: {node: '>=6'}
 582 | 
 583 |   tslib@2.6.1:
 584 |     resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==}
 585 | 
 586 |   typescript@5.6.3:
 587 |     resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
 588 |     engines: {node: '>=14.17'}
 589 |     hasBin: true
 590 | 
 591 |   vite@5.4.11:
 592 |     resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
 593 |     engines: {node: ^18.0.0 || >=20.0.0}
 594 |     hasBin: true
 595 |     peerDependencies:
 596 |       '@types/node': ^18.0.0 || >=20.0.0
 597 |       less: '*'
 598 |       lightningcss: ^1.21.0
 599 |       sass: '*'
 600 |       sass-embedded: '*'
 601 |       stylus: '*'
 602 |       sugarss: '*'
 603 |       terser: ^5.4.0
 604 |     peerDependenciesMeta:
 605 |       '@types/node':
 606 |         optional: true
 607 |       less:
 608 |         optional: true
 609 |       lightningcss:
 610 |         optional: true
 611 |       sass:
 612 |         optional: true
 613 |       sass-embedded:
 614 |         optional: true
 615 |       stylus:
 616 |         optional: true
 617 |       sugarss:
 618 |         optional: true
 619 |       terser:
 620 |         optional: true
 621 | 
 622 |   vitefu@1.0.3:
 623 |     resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
 624 |     peerDependencies:
 625 |       vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
 626 |     peerDependenciesMeta:
 627 |       vite:
 628 |         optional: true
 629 | 
 630 |   wrappy@1.0.2:
 631 |     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 632 | 
 633 |   yallist@4.0.0:
 634 |     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 635 | 
 636 |   zimmerframe@1.1.2:
 637 |     resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
 638 | 
 639 | snapshots:
 640 | 
 641 |   '@ampproject/remapping@2.3.0':
 642 |     dependencies:
 643 |       '@jridgewell/gen-mapping': 0.3.5
 644 |       '@jridgewell/trace-mapping': 0.3.25
 645 | 
 646 |   '@esbuild/aix-ppc64@0.21.5':
 647 |     optional: true
 648 | 
 649 |   '@esbuild/android-arm64@0.21.5':
 650 |     optional: true
 651 | 
 652 |   '@esbuild/android-arm@0.21.5':
 653 |     optional: true
 654 | 
 655 |   '@esbuild/android-x64@0.21.5':
 656 |     optional: true
 657 | 
 658 |   '@esbuild/darwin-arm64@0.21.5':
 659 |     optional: true
 660 | 
 661 |   '@esbuild/darwin-x64@0.21.5':
 662 |     optional: true
 663 | 
 664 |   '@esbuild/freebsd-arm64@0.21.5':
 665 |     optional: true
 666 | 
 667 |   '@esbuild/freebsd-x64@0.21.5':
 668 |     optional: true
 669 | 
 670 |   '@esbuild/linux-arm64@0.21.5':
 671 |     optional: true
 672 | 
 673 |   '@esbuild/linux-arm@0.21.5':
 674 |     optional: true
 675 | 
 676 |   '@esbuild/linux-ia32@0.21.5':
 677 |     optional: true
 678 | 
 679 |   '@esbuild/linux-loong64@0.21.5':
 680 |     optional: true
 681 | 
 682 |   '@esbuild/linux-mips64el@0.21.5':
 683 |     optional: true
 684 | 
 685 |   '@esbuild/linux-ppc64@0.21.5':
 686 |     optional: true
 687 | 
 688 |   '@esbuild/linux-riscv64@0.21.5':
 689 |     optional: true
 690 | 
 691 |   '@esbuild/linux-s390x@0.21.5':
 692 |     optional: true
 693 | 
 694 |   '@esbuild/linux-x64@0.21.5':
 695 |     optional: true
 696 | 
 697 |   '@esbuild/netbsd-x64@0.21.5':
 698 |     optional: true
 699 | 
 700 |   '@esbuild/openbsd-x64@0.21.5':
 701 |     optional: true
 702 | 
 703 |   '@esbuild/sunos-x64@0.21.5':
 704 |     optional: true
 705 | 
 706 |   '@esbuild/win32-arm64@0.21.5':
 707 |     optional: true
 708 | 
 709 |   '@esbuild/win32-ia32@0.21.5':
 710 |     optional: true
 711 | 
 712 |   '@esbuild/win32-x64@0.21.5':
 713 |     optional: true
 714 | 
 715 |   '@jridgewell/gen-mapping@0.3.5':
 716 |     dependencies:
 717 |       '@jridgewell/set-array': 1.2.1
 718 |       '@jridgewell/sourcemap-codec': 1.5.0
 719 |       '@jridgewell/trace-mapping': 0.3.25
 720 | 
 721 |   '@jridgewell/resolve-uri@3.1.1': {}
 722 | 
 723 |   '@jridgewell/set-array@1.2.1': {}
 724 | 
 725 |   '@jridgewell/sourcemap-codec@1.4.15': {}
 726 | 
 727 |   '@jridgewell/sourcemap-codec@1.5.0': {}
 728 | 
 729 |   '@jridgewell/trace-mapping@0.3.25':
 730 |     dependencies:
 731 |       '@jridgewell/resolve-uri': 3.1.1
 732 |       '@jridgewell/sourcemap-codec': 1.4.15
 733 | 
 734 |   '@polka/url@1.0.0-next.28': {}
 735 | 
 736 |   '@rollup/rollup-android-arm-eabi@4.27.0':
 737 |     optional: true
 738 | 
 739 |   '@rollup/rollup-android-arm64@4.27.0':
 740 |     optional: true
 741 | 
 742 |   '@rollup/rollup-darwin-arm64@4.27.0':
 743 |     optional: true
 744 | 
 745 |   '@rollup/rollup-darwin-x64@4.27.0':
 746 |     optional: true
 747 | 
 748 |   '@rollup/rollup-freebsd-arm64@4.27.0':
 749 |     optional: true
 750 | 
 751 |   '@rollup/rollup-freebsd-x64@4.27.0':
 752 |     optional: true
 753 | 
 754 |   '@rollup/rollup-linux-arm-gnueabihf@4.27.0':
 755 |     optional: true
 756 | 
 757 |   '@rollup/rollup-linux-arm-musleabihf@4.27.0':
 758 |     optional: true
 759 | 
 760 |   '@rollup/rollup-linux-arm64-gnu@4.27.0':
 761 |     optional: true
 762 | 
 763 |   '@rollup/rollup-linux-arm64-musl@4.27.0':
 764 |     optional: true
 765 | 
 766 |   '@rollup/rollup-linux-powerpc64le-gnu@4.27.0':
 767 |     optional: true
 768 | 
 769 |   '@rollup/rollup-linux-riscv64-gnu@4.27.0':
 770 |     optional: true
 771 | 
 772 |   '@rollup/rollup-linux-s390x-gnu@4.27.0':
 773 |     optional: true
 774 | 
 775 |   '@rollup/rollup-linux-x64-gnu@4.27.0':
 776 |     optional: true
 777 | 
 778 |   '@rollup/rollup-linux-x64-musl@4.27.0':
 779 |     optional: true
 780 | 
 781 |   '@rollup/rollup-win32-arm64-msvc@4.27.0':
 782 |     optional: true
 783 | 
 784 |   '@rollup/rollup-win32-ia32-msvc@4.27.0':
 785 |     optional: true
 786 | 
 787 |   '@rollup/rollup-win32-x64-msvc@4.27.0':
 788 |     optional: true
 789 | 
 790 |   '@shikijs/core@1.1.7': {}
 791 | 
 792 |   '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11))':
 793 |     dependencies:
 794 |       '@sveltejs/kit': 2.8.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11)
 795 |       import-meta-resolve: 4.1.0
 796 | 
 797 |   '@sveltejs/kit@2.8.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11)':
 798 |     dependencies:
 799 |       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.2.0)(vite@5.4.11)
 800 |       '@types/cookie': 0.6.0
 801 |       cookie: 0.6.0
 802 |       devalue: 5.1.1
 803 |       esm-env: 1.0.0
 804 |       import-meta-resolve: 4.1.0
 805 |       kleur: 4.1.5
 806 |       magic-string: 0.30.12
 807 |       mrmime: 2.0.0
 808 |       sade: 1.8.1
 809 |       set-cookie-parser: 2.6.0
 810 |       sirv: 3.0.0
 811 |       svelte: 5.2.0
 812 |       tiny-glob: 0.2.9
 813 |       vite: 5.4.11
 814 | 
 815 |   '@sveltejs/package@2.3.7(svelte@5.2.0)(typescript@5.6.3)':
 816 |     dependencies:
 817 |       chokidar: 4.0.1
 818 |       kleur: 4.1.5
 819 |       sade: 1.8.1
 820 |       semver: 7.5.4
 821 |       svelte: 5.2.0
 822 |       svelte2tsx: 0.7.25(svelte@5.2.0)(typescript@5.6.3)
 823 |     transitivePeerDependencies:
 824 |       - typescript
 825 | 
 826 |   '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11)':
 827 |     dependencies:
 828 |       '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.2.0)(vite@5.4.11)
 829 |       debug: 4.3.7
 830 |       svelte: 5.2.0
 831 |       vite: 5.4.11
 832 |     transitivePeerDependencies:
 833 |       - supports-color
 834 | 
 835 |   '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11)':
 836 |     dependencies:
 837 |       '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.2.0)(vite@5.4.11))(svelte@5.2.0)(vite@5.4.11)
 838 |       debug: 4.3.7
 839 |       deepmerge: 4.3.1
 840 |       kleur: 4.1.5
 841 |       magic-string: 0.30.12
 842 |       svelte: 5.2.0
 843 |       vite: 5.4.11
 844 |       vitefu: 1.0.3(vite@5.4.11)
 845 |     transitivePeerDependencies:
 846 |       - supports-color
 847 | 
 848 |   '@types/cookie@0.6.0': {}
 849 | 
 850 |   '@types/estree@1.0.6': {}
 851 | 
 852 |   acorn-typescript@1.4.13(acorn@8.14.0):
 853 |     dependencies:
 854 |       acorn: 8.14.0
 855 | 
 856 |   acorn@8.14.0: {}
 857 | 
 858 |   aria-query@5.3.2: {}
 859 | 
 860 |   axobject-query@4.1.0: {}
 861 | 
 862 |   balanced-match@1.0.2: {}
 863 | 
 864 |   brace-expansion@2.0.1:
 865 |     dependencies:
 866 |       balanced-match: 1.0.2
 867 | 
 868 |   chokidar@4.0.1:
 869 |     dependencies:
 870 |       readdirp: 4.0.2
 871 | 
 872 |   cookie@0.6.0: {}
 873 | 
 874 |   debug@4.3.7:
 875 |     dependencies:
 876 |       ms: 2.1.3
 877 | 
 878 |   dedent-js@1.0.1: {}
 879 | 
 880 |   deepmerge@4.3.1: {}
 881 | 
 882 |   devalue@5.1.1: {}
 883 | 
 884 |   esbuild@0.21.5:
 885 |     optionalDependencies:
 886 |       '@esbuild/aix-ppc64': 0.21.5
 887 |       '@esbuild/android-arm': 0.21.5
 888 |       '@esbuild/android-arm64': 0.21.5
 889 |       '@esbuild/android-x64': 0.21.5
 890 |       '@esbuild/darwin-arm64': 0.21.5
 891 |       '@esbuild/darwin-x64': 0.21.5
 892 |       '@esbuild/freebsd-arm64': 0.21.5
 893 |       '@esbuild/freebsd-x64': 0.21.5
 894 |       '@esbuild/linux-arm': 0.21.5
 895 |       '@esbuild/linux-arm64': 0.21.5
 896 |       '@esbuild/linux-ia32': 0.21.5
 897 |       '@esbuild/linux-loong64': 0.21.5
 898 |       '@esbuild/linux-mips64el': 0.21.5
 899 |       '@esbuild/linux-ppc64': 0.21.5
 900 |       '@esbuild/linux-riscv64': 0.21.5
 901 |       '@esbuild/linux-s390x': 0.21.5
 902 |       '@esbuild/linux-x64': 0.21.5
 903 |       '@esbuild/netbsd-x64': 0.21.5
 904 |       '@esbuild/openbsd-x64': 0.21.5
 905 |       '@esbuild/sunos-x64': 0.21.5
 906 |       '@esbuild/win32-arm64': 0.21.5
 907 |       '@esbuild/win32-ia32': 0.21.5
 908 |       '@esbuild/win32-x64': 0.21.5
 909 | 
 910 |   esm-env@1.0.0: {}
 911 | 
 912 |   esrap@1.2.2:
 913 |     dependencies:
 914 |       '@jridgewell/sourcemap-codec': 1.5.0
 915 |       '@types/estree': 1.0.6
 916 | 
 917 |   fdir@6.4.2: {}
 918 | 
 919 |   fs.realpath@1.0.0: {}
 920 | 
 921 |   fsevents@2.3.3:
 922 |     optional: true
 923 | 
 924 |   glob@8.1.0:
 925 |     dependencies:
 926 |       fs.realpath: 1.0.0
 927 |       inflight: 1.0.6
 928 |       inherits: 2.0.4
 929 |       minimatch: 5.1.6
 930 |       once: 1.4.0
 931 | 
 932 |   globalyzer@0.1.0: {}
 933 | 
 934 |   globrex@0.1.2: {}
 935 | 
 936 |   ignore-walk@5.0.1:
 937 |     dependencies:
 938 |       minimatch: 5.1.6
 939 | 
 940 |   import-meta-resolve@4.1.0: {}
 941 | 
 942 |   inflight@1.0.6:
 943 |     dependencies:
 944 |       once: 1.4.0
 945 |       wrappy: 1.0.2
 946 | 
 947 |   inherits@2.0.4: {}
 948 | 
 949 |   is-reference@3.0.3:
 950 |     dependencies:
 951 |       '@types/estree': 1.0.6
 952 | 
 953 |   kleur@4.1.5: {}
 954 | 
 955 |   locate-character@3.0.0: {}
 956 | 
 957 |   lower-case@2.0.2:
 958 |     dependencies:
 959 |       tslib: 2.6.1
 960 | 
 961 |   lru-cache@6.0.0:
 962 |     dependencies:
 963 |       yallist: 4.0.0
 964 | 
 965 |   magic-string@0.30.12:
 966 |     dependencies:
 967 |       '@jridgewell/sourcemap-codec': 1.5.0
 968 | 
 969 |   minimatch@5.1.6:
 970 |     dependencies:
 971 |       brace-expansion: 2.0.1
 972 | 
 973 |   mri@1.2.0: {}
 974 | 
 975 |   mrmime@2.0.0: {}
 976 | 
 977 |   ms@2.1.3: {}
 978 | 
 979 |   nanoid@3.3.7: {}
 980 | 
 981 |   no-case@3.0.4:
 982 |     dependencies:
 983 |       lower-case: 2.0.2
 984 |       tslib: 2.6.1
 985 | 
 986 |   npm-bundled@2.0.1:
 987 |     dependencies:
 988 |       npm-normalize-package-bin: 2.0.0
 989 | 
 990 |   npm-normalize-package-bin@2.0.0: {}
 991 | 
 992 |   npm-packlist@5.1.3:
 993 |     dependencies:
 994 |       glob: 8.1.0
 995 |       ignore-walk: 5.0.1
 996 |       npm-bundled: 2.0.1
 997 |       npm-normalize-package-bin: 2.0.0
 998 | 
 999 |   once@1.4.0:
1000 |     dependencies:
1001 |       wrappy: 1.0.2
1002 | 
1003 |   pascal-case@3.1.2:
1004 |     dependencies:
1005 |       no-case: 3.0.4
1006 |       tslib: 2.6.1
1007 | 
1008 |   picocolors@1.0.0: {}
1009 | 
1010 |   picocolors@1.1.1: {}
1011 | 
1012 |   postcss@8.4.49:
1013 |     dependencies:
1014 |       nanoid: 3.3.7
1015 |       picocolors: 1.1.1
1016 |       source-map-js: 1.2.1
1017 | 
1018 |   publint@0.1.16:
1019 |     dependencies:
1020 |       npm-packlist: 5.1.3
1021 |       picocolors: 1.0.0
1022 |       sade: 1.8.1
1023 | 
1024 |   readdirp@4.0.2: {}
1025 | 
1026 |   rollup@4.27.0:
1027 |     dependencies:
1028 |       '@types/estree': 1.0.6
1029 |     optionalDependencies:
1030 |       '@rollup/rollup-android-arm-eabi': 4.27.0
1031 |       '@rollup/rollup-android-arm64': 4.27.0
1032 |       '@rollup/rollup-darwin-arm64': 4.27.0
1033 |       '@rollup/rollup-darwin-x64': 4.27.0
1034 |       '@rollup/rollup-freebsd-arm64': 4.27.0
1035 |       '@rollup/rollup-freebsd-x64': 4.27.0
1036 |       '@rollup/rollup-linux-arm-gnueabihf': 4.27.0
1037 |       '@rollup/rollup-linux-arm-musleabihf': 4.27.0
1038 |       '@rollup/rollup-linux-arm64-gnu': 4.27.0
1039 |       '@rollup/rollup-linux-arm64-musl': 4.27.0
1040 |       '@rollup/rollup-linux-powerpc64le-gnu': 4.27.0
1041 |       '@rollup/rollup-linux-riscv64-gnu': 4.27.0
1042 |       '@rollup/rollup-linux-s390x-gnu': 4.27.0
1043 |       '@rollup/rollup-linux-x64-gnu': 4.27.0
1044 |       '@rollup/rollup-linux-x64-musl': 4.27.0
1045 |       '@rollup/rollup-win32-arm64-msvc': 4.27.0
1046 |       '@rollup/rollup-win32-ia32-msvc': 4.27.0
1047 |       '@rollup/rollup-win32-x64-msvc': 4.27.0
1048 |       fsevents: 2.3.3
1049 | 
1050 |   sade@1.8.1:
1051 |     dependencies:
1052 |       mri: 1.2.0
1053 | 
1054 |   semver@7.5.4:
1055 |     dependencies:
1056 |       lru-cache: 6.0.0
1057 | 
1058 |   set-cookie-parser@2.6.0: {}
1059 | 
1060 |   shiki@1.1.7:
1061 |     dependencies:
1062 |       '@shikijs/core': 1.1.7
1063 | 
1064 |   sirv@3.0.0:
1065 |     dependencies:
1066 |       '@polka/url': 1.0.0-next.28
1067 |       mrmime: 2.0.0
1068 |       totalist: 3.0.1
1069 | 
1070 |   source-map-js@1.2.1: {}
1071 | 
1072 |   svelte-check@4.0.7(svelte@5.2.0)(typescript@5.6.3):
1073 |     dependencies:
1074 |       '@jridgewell/trace-mapping': 0.3.25
1075 |       chokidar: 4.0.1
1076 |       fdir: 6.4.2
1077 |       picocolors: 1.0.0
1078 |       sade: 1.8.1
1079 |       svelte: 5.2.0
1080 |       typescript: 5.6.3
1081 |     transitivePeerDependencies:
1082 |       - picomatch
1083 | 
1084 |   svelte2tsx@0.7.25(svelte@5.2.0)(typescript@5.6.3):
1085 |     dependencies:
1086 |       dedent-js: 1.0.1
1087 |       pascal-case: 3.1.2
1088 |       svelte: 5.2.0
1089 |       typescript: 5.6.3
1090 | 
1091 |   svelte@5.2.0:
1092 |     dependencies:
1093 |       '@ampproject/remapping': 2.3.0
1094 |       '@jridgewell/sourcemap-codec': 1.5.0
1095 |       '@types/estree': 1.0.6
1096 |       acorn: 8.14.0
1097 |       acorn-typescript: 1.4.13(acorn@8.14.0)
1098 |       aria-query: 5.3.2
1099 |       axobject-query: 4.1.0
1100 |       esm-env: 1.0.0
1101 |       esrap: 1.2.2
1102 |       is-reference: 3.0.3
1103 |       locate-character: 3.0.0
1104 |       magic-string: 0.30.12
1105 |       zimmerframe: 1.1.2
1106 | 
1107 |   tiny-glob@0.2.9:
1108 |     dependencies:
1109 |       globalyzer: 0.1.0
1110 |       globrex: 0.1.2
1111 | 
1112 |   totalist@3.0.1: {}
1113 | 
1114 |   tslib@2.6.1: {}
1115 | 
1116 |   typescript@5.6.3: {}
1117 | 
1118 |   vite@5.4.11:
1119 |     dependencies:
1120 |       esbuild: 0.21.5
1121 |       postcss: 8.4.49
1122 |       rollup: 4.27.0
1123 |     optionalDependencies:
1124 |       fsevents: 2.3.3
1125 | 
1126 |   vitefu@1.0.3(vite@5.4.11):
1127 |     optionalDependencies:
1128 |       vite: 5.4.11
1129 | 
1130 |   wrappy@1.0.2: {}
1131 | 
1132 |   yallist@4.0.0: {}
1133 | 
1134 |   zimmerframe@1.1.2: {}
1135 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface Platform {}
 9 | 	}
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 		%sveltekit.head%
 7 | 		<title>Svelte ripple action - posandu.com</title>
 8 | 
 9 | 		<link rel="icon" type="image/png" href="/logo.png" />
10 | 
11 | 		<meta property="og:title" content="Svelte ripple action - posandu.com" />
12 | 		<meta
13 | 			property="og:description"
14 | 			content="Add stunning ripple effects effortlessly to your Svelte app. Customize center, color, duration, and watch your UI shine!"
15 | 		/>
16 | 		<meta
17 | 			name="twitter:title"
18 | 			content="Elevate Your Svelte UI with Svelte Ripple Action"
19 | 		/>
20 | 		<meta
21 | 			name="twitter:description"
22 | 			content="Add stunning ripple effects effortlessly to your Svelte app. Customize center, color, duration, and watch your UI shine!"
23 | 		/>
24 | 	</head>
25 | 	<body data-sveltekit-preload-data="hover">
26 | 		<div>%sveltekit.body%</div>
27 | 	</body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | const INEVENTS = ["pointerdown", "touchstart"];
 2 | const OUTEVENTS = [
 3 | 	"pointerup",
 4 | 	"mouseleave",
 5 | 	"dragleave",
 6 | 	"touchmove",
 7 | 	"touchend",
 8 | 	"touchcancel",
 9 | ];
10 | 
11 | const ATTR_NAME = "svelte-ripple-effect-ready";
12 | const ATTR_CENTER_NAME = "ripple-center";
13 | 
14 | export interface RippleOptions {
15 | 	center?: boolean;
16 | 	color?: string;
17 | 	/**
18 | 	 * Duration in seconds
19 | 	 */
20 | 	duration?: number;
21 | 	/**
22 | 	 * Max width of the ripple
23 | 	 */
24 | 	maxRadius?: number;
25 | 	/**
26 | 	 * If true, ripple will not be shown
27 | 	 */
28 | 	disabled?: boolean;
29 | }
30 | 
31 | const addEvent = (
32 | 	el: HTMLElement,
33 | 	event: string,
34 | 	callback: (...args: any[]) => void
35 | ) => {
36 | 	el.addEventListener(event, callback);
37 | };
38 | 
39 | const removeEvent = (
40 | 	el: HTMLElement,
41 | 	event: string,
42 | 	callback: (...args: any[]) => void
43 | ) => {
44 | 	el.removeEventListener(event, callback);
45 | };
46 | 
47 | const findFurthestPoint = (
48 | 	clickPointX: number,
49 | 	elementWidth: number,
50 | 	offsetX: number,
51 | 	clickPointY: number,
52 | 	elementHeight: number,
53 | 	offsetY: number
54 | ) => {
55 | 	const x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
56 | 	const y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
57 | 	const d = Math.hypot(
58 | 		x - (clickPointX - offsetX),
59 | 		y - (clickPointY - offsetY)
60 | 	);
61 | 
62 | 	return d;
63 | };
64 | 
65 | export {
66 | 	INEVENTS,
67 | 	OUTEVENTS,
68 | 	ATTR_NAME,
69 | 	ATTR_CENTER_NAME,
70 | 	addEvent,
71 | 	removeEvent,
72 | 	findFurthestPoint,
73 | };
74 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { ripple } from "./ripple.js";
2 | 


--------------------------------------------------------------------------------
/src/lib/ripple.css:
--------------------------------------------------------------------------------
 1 | [svelte-ripple-effect-ready] {
 2 |     position: relative;
 3 |     overflow: hidden;
 4 | }
 5 | 
 6 | [svelte-ripple-effect-ready] .ripple {
 7 |     background-color: var(--ripple-color, color-mix(in srgb, currentColor 28%, transparent));
 8 |     position: absolute;
 9 |     border-radius: 50%;
10 |     pointer-events: none;
11 |     -webkit-transform: translate3d(0, 0, 0);
12 |     transform: translate3d(0, 0, 0);
13 |     -webkit-transition: opacity .6s;
14 |     transition: opacity .6s;
15 |     -webkit-animation: ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
16 |     animation: ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
17 | }
18 | 
19 | [svelte-ripple-effect-ready][ripple-center] .ripple {
20 |     top: 50% !important;
21 |     left: 50% !important;
22 |     translate: -50% -50% !important;
23 |     -webkit-animation: ripple var(--ripple-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1);
24 |     animation: ripple var(--ripple-duration, 0.6s) cubic-bezier(0.4, 0, 0.2, 1);
25 | }
26 | 
27 | @keyframes ripple {
28 |     from {
29 |         -webkit-transform: scale(0);
30 |         transform: scale(0);
31 |     }
32 | 
33 |     to {
34 |         -webkit-transform: scale(1);
35 |         transform: scale(1);
36 |     }
37 | }


--------------------------------------------------------------------------------
/src/lib/ripple.ts:
--------------------------------------------------------------------------------
  1 | import type { RippleOptions } from "./constants.js";
  2 | import {
  3 | 	INEVENTS,
  4 | 	OUTEVENTS,
  5 | 	ATTR_NAME,
  6 | 	ATTR_CENTER_NAME,
  7 | 	addEvent,
  8 | 	removeEvent,
  9 | 	findFurthestPoint,
 10 | } from "./constants";
 11 | import { onMount } from "svelte";
 12 | 
 13 | function ripple(el: HTMLElement, options?: RippleOptions) {
 14 | 	const addClassIfMissing = () => {
 15 | 		if (!el.getAttribute(ATTR_NAME)) {
 16 | 			el.setAttribute(ATTR_NAME, "");
 17 | 		}
 18 | 
 19 | 		if (options?.center) {
 20 | 			el.setAttribute(ATTR_CENTER_NAME, "");
 21 | 		} else {
 22 | 			el.removeAttribute(ATTR_CENTER_NAME);
 23 | 		}
 24 | 	};
 25 | 
 26 | 	onMount(() => {
 27 | 		addClassIfMissing();
 28 | 	});
 29 | 
 30 | 	let maximumRadius = 0;
 31 | 
 32 | 	const setOptions = (options: RippleOptions) => {
 33 | 		/**
 34 | 		 * Add custom --ripple-color if set
 35 | 		 */
 36 | 		if (options?.color) {
 37 | 			el.style.setProperty("--ripple-color", options.color);
 38 | 		}
 39 | 
 40 | 		/**
 41 | 		 * Add custom --ripple-duration if set
 42 | 		 */
 43 | 		if (options?.duration) {
 44 | 			el.style.setProperty("--ripple-duration", options.duration + "s");
 45 | 		}
 46 | 
 47 | 		/**
 48 | 		 * If maxWidth is set
 49 | 		 */
 50 | 		if (options?.maxRadius) {
 51 | 			maximumRadius = options.maxRadius;
 52 | 		}
 53 | 	};
 54 | 
 55 | 	setOptions(options);
 56 | 
 57 | 	const createRipple = (e: PointerEvent) => {
 58 | 		if (options?.disabled) return;
 59 | 
 60 | 		e.stopPropagation();
 61 | 
 62 | 		addClassIfMissing();
 63 | 
 64 | 		const rect = el.getBoundingClientRect();
 65 | 		const radius = findFurthestPoint(
 66 | 			e.clientX,
 67 | 			el.offsetWidth,
 68 | 			rect.left,
 69 | 			e.clientY,
 70 | 			el.offsetHeight,
 71 | 			rect.top
 72 | 		);
 73 | 
 74 | 		const ripple = document.createElement("div");
 75 | 		ripple.classList.add("ripple");
 76 | 
 77 | 		let size = radius * 2;
 78 | 		let top = e.clientY - rect.top - radius;
 79 | 		let left = e.clientX - rect.left - radius;
 80 | 
 81 | 		if (maximumRadius && size > maximumRadius) {
 82 | 			size = maximumRadius * 2;
 83 | 			top = e.clientY - rect.top - maximumRadius;
 84 | 			left = e.clientX - rect.left - maximumRadius;
 85 | 		}
 86 | 
 87 | 		ripple.style.left = left + "px";
 88 | 		ripple.style.top = top + "px";
 89 | 
 90 | 		ripple.style.width = ripple.style.height = size + "px";
 91 | 
 92 | 		el.appendChild(ripple);
 93 | 
 94 | 		const removeRipple = () => {
 95 | 			const timeOutDuration = options?.duration
 96 | 				? options.duration * 1000
 97 | 				: 1000;
 98 | 
 99 | 			if (ripple !== null) {
100 | 				setTimeout(() => {
101 | 					ripple.style.opacity = "0";
102 | 				}, timeOutDuration / 4);
103 | 
104 | 				setTimeout(() => {
105 | 					ripple.remove();
106 | 				}, timeOutDuration);
107 | 			}
108 | 		};
109 | 
110 | 		OUTEVENTS.forEach((event) => {
111 | 			addEvent(el, event, removeRipple);
112 | 		});
113 | 	};
114 | 
115 | 	INEVENTS.forEach((event) => {
116 | 		addEvent(el, event, createRipple);
117 | 	});
118 | 
119 | 	return {
120 | 		destroy: () => {
121 | 			INEVENTS.forEach((event) => {
122 | 				removeEvent(el, event, createRipple);
123 | 			});
124 | 		},
125 | 		update: (newOptions: RippleOptions) => {
126 | 			options = newOptions;
127 | 
128 | 			setOptions(newOptions);
129 | 		},
130 | 	};
131 | }
132 | 
133 | export { ripple };
134 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import "$lib/ripple.css";
  3 | 	import { ripple } from "$lib";
  4 | 	import { onMount } from "svelte";
  5 | 	import "./app.css";
  6 | 	import Examples from "./Examples.svelte";
  7 | 	import CodeBlock from "./CodeBlock.svelte";
  8 | 	import type { RippleOptions } from "$lib/constants";
  9 | 
 10 | 	let header: HTMLDivElement | null = $state(null);
 11 | 
 12 | 	onMount(() => {
 13 | 		if (header) {
 14 | 			header?.dispatchEvent(
 15 | 				new PointerEvent("pointerdown", {
 16 | 					clientX: Math.random() * header.clientWidth,
 17 | 					clientY: Math.random() * header.clientHeight,
 18 | 				})
 19 | 			);
 20 | 
 21 | 			setTimeout(() => {
 22 | 				header?.dispatchEvent(
 23 | 					new PointerEvent("pointerup", {
 24 | 						clientX: Math.random() * header.clientWidth,
 25 | 						clientY: Math.random() * header.clientHeight,
 26 | 					})
 27 | 				);
 28 | 			}, 600);
 29 | 		}
 30 | 	});
 31 | 
 32 | 	const SCRIPT = "<scri" + "pt>"; // some weird hack to avoid parsing
 33 | 
 34 | 	let customizeOptions: RippleOptions = $state({
 35 | 		color: "rgba(255,255,255,0.2)",
 36 | 		center: false,
 37 | 		disabled: false,
 38 | 		duration: 0.6,
 39 | 		maxRadius: 0,
 40 | 	});
 41 | </script>
 42 | 
 43 | <div
 44 | 	class="header"
 45 | 	use:ripple={{
 46 | 		color: "rgba(0, 0, 0, 0.2)",
 47 | 		duration: 0.6,
 48 | 	}}
 49 | 	bind:this={header}
 50 | >
 51 | 	<img src="/logo-large.png" alt="" srcset="" class="header--logo" />
 52 | 
 53 | 	<h1 class="header--heading">Svelte ripple action</h1>
 54 | 
 55 | 	<p class="header--desc">Svelte directive for a ripple effect</p>
 56 | 
 57 | 	<CodeBlock code={`npm i svelte-ripple-action`} />
 58 | 
 59 | 	<p class="header--info">
 60 | 		<a
 61 | 			href="https://npmjs.com/package/svelte-ripple-action"
 62 | 			class="header--stat"
 63 | 			target="_blank"
 64 | 		>
 65 | 			<img
 66 | 				src="https://deno.bundlejs.com/badge?q=svelte-ripple-action"
 67 | 				alt=""
 68 | 			/>
 69 | 		</a>
 70 | 
 71 | 		<a
 72 | 			href="https://github.com/posandu/svelte-ripple-action/commits"
 73 | 			class="header--stat"
 74 | 			target="_blank"
 75 | 		>
 76 | 			<img
 77 | 				src="https://img.shields.io/github/commit-activity/t/posandu/svelte-ripple-action"
 78 | 				alt=""
 79 | 			/>
 80 | 		</a>
 81 | 
 82 | 		<a
 83 | 			href="https://github.com/posandu/svelte-ripple-action/stargazers"
 84 | 			class="header--stat"
 85 | 			target="_blank"
 86 | 		>
 87 | 			<img
 88 | 				alt="GitHub Repo stars"
 89 | 				src="https://img.shields.io/github/stars/posandu/svelte-ripple-action"
 90 | 			/>
 91 | 		</a>
 92 | 	</p>
 93 | </div>
 94 | 
 95 | <section class="section">
 96 | 	<div class="section--left">
 97 | 		<h1 class="section--heading">Installation</h1>
 98 | 
 99 | 		<p class="section--desc">Install the package from npm</p>
100 | 
101 | 		<CodeBlock code={`npm i svelte-ripple-action`} />
102 | 
103 | 		<br />
104 | 
105 | 		<h1 class="section--heading">Is this compatible with Svelte 5?</h1>
106 | 
107 | 		<p class="section--desc">Yep, versions 2.0.0 onwards support Svelte 5</p>
108 | 	</div>
109 | 
110 | 	<div class="section--right">
111 | 		<h1 class="section--heading">Usage</h1>
112 | 
113 | 		<p class="section--desc">
114 | 			Import the base styles inside the root of your app
115 | 		</p>
116 | 
117 | 		<CodeBlock
118 | 			code={`${SCRIPT}\n	import "svelte-ripple-action/ripple.css"\n</script>`}
119 | 		/>
120 | 
121 | 		<p class="section--desc">Use the directive in your components</p>
122 | 
123 | 		<CodeBlock
124 | 			code={`${SCRIPT}\n	import { ripple } from "svelte-ripple-action";\n</script>\n\n<button use:ripple>Click me</button>`}
125 | 		/>
126 | 
127 | 		<button
128 | 			use:ripple={{ color: "rgba(255,255,255,0.2)" }}
129 | 			class="btn btn-demo"
130 | 		>
131 | 			Click me
132 | 		</button>
133 | 	</div>
134 | </section>
135 | 
136 | <section class="section">
137 | 	<div class="section--left">
138 | 		<h1 class="section--heading">Options</h1>
139 | 
140 | 		<p class="section--desc">
141 | 			You can pass an object to the directive to customize the ripple effect
142 | 		</p>
143 | 
144 | 		<div class="option">
145 | 			<div>
146 | 				<span class="option--name"
147 | 					>color?: <span class="option--type">string</span></span
148 | 				>
149 | 				<label class="option--desc" for="color">color of the ripple</label>
150 | 			</div>
151 | 
152 | 			<input
153 | 				type="text"
154 | 				placeholder="rgba(255,255,255,0.2)"
155 | 				bind:value={customizeOptions.color}
156 | 				class="option--input"
157 | 				id="color"
158 | 			/>
159 | 		</div>
160 | 
161 | 		<div class="option">
162 | 			<div>
163 | 				<span class="option--name"
164 | 					>duration?: <span class="option--type">number</span></span
165 | 				>
166 | 				<label class="option--desc" for="duration">
167 | 					duration of the ripple in seconds
168 | 				</label>
169 | 			</div>
170 | 
171 | 			<input
172 | 				type="number"
173 | 				placeholder="0.6"
174 | 				bind:value={customizeOptions.duration}
175 | 				class="option--input"
176 | 				id="duration"
177 | 			/>
178 | 		</div>
179 | 
180 | 		<div class="option">
181 | 			<div>
182 | 				<span class="option--name"
183 | 					>maxRadius?: <span class="option--type">number</span></span
184 | 				>
185 | 				<label class="option--desc" for="maxRadius">
186 | 					maximum radius of the ripple
187 | 				</label>
188 | 			</div>
189 | 
190 | 			<input
191 | 				type="number"
192 | 				placeholder="leave -1 for auto"
193 | 				bind:value={customizeOptions.maxRadius}
194 | 				class="option--input"
195 | 				id="maxRadius"
196 | 			/>
197 | 		</div>
198 | 
199 | 		<div
200 | 			class="option"
201 | 			style="display: flex;align-items: center;justify-content: space-between;"
202 | 		>
203 | 			<div>
204 | 				<span class="option--name"
205 | 					>center?: <span class="option--type">boolean</span></span
206 | 				>
207 | 				<label class="option--desc" for="center">
208 | 					whether to start the ripple from the center
209 | 				</label>
210 | 			</div>
211 | 
212 | 			<input
213 | 				type="checkbox"
214 | 				bind:checked={customizeOptions.center}
215 | 				class="option--input"
216 | 				style="max-width: 48px;margin:0"
217 | 				id="center"
218 | 			/>
219 | 		</div>
220 | 
221 | 		<div
222 | 			class="option"
223 | 			style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 0; {customizeOptions.disabled
224 | 				? `background: #f70b0b0f;
225 | 				border-color: #ff00003b;`
226 | 				: ''}"
227 | 		>
228 | 			<div>
229 | 				<span class="option--name"
230 | 					>disabled?: <span class="option--type">boolean</span></span
231 | 				>
232 | 				<label class="option--desc" for="disabled">
233 | 					disable the ripple effect
234 | 				</label>
235 | 			</div>
236 | 
237 | 			<input
238 | 				type="checkbox"
239 | 				bind:checked={customizeOptions.disabled}
240 | 				class="option--input"
241 | 				style="max-width: 48px;margin:0"
242 | 				id="disabled"
243 | 			/>
244 | 		</div>
245 | 	</div>
246 | 
247 | 	<div class="section--right preview">
248 | 		<h1 class="section--heading">Preview</h1>
249 | 
250 | 		<div class="preview--inside">
251 | 			<button
252 | 				use:ripple={{
253 | 					...customizeOptions,
254 | 					maxRadius:
255 | 						customizeOptions.maxRadius === -1
256 | 							? undefined
257 | 							: customizeOptions.maxRadius,
258 | 				}}
259 | 				class="btn btn-demo"
260 | 				style="margin-bottom: 10px"
261 | 			>
262 | 				:) Click me
263 | 			</button>
264 | 		</div>
265 | 
266 | 		{#key customizeOptions}
267 | 			<CodeBlock
268 | 				code={`<button 
269 | 	use:ripple={{
270 | 		color: "${customizeOptions.color}",
271 | 		duration: ${customizeOptions.duration},
272 | 		${
273 | 			customizeOptions.maxRadius === -1
274 | 				? ""
275 | 				: `maxRadius: ${customizeOptions.maxRadius},`
276 | 		}
277 | 		center: ${customizeOptions.center},
278 | 		disabled: ${customizeOptions.disabled},
279 | 	}}
280 | >
281 | 	Click me
282 | </button>`}
283 | 			/>
284 | 		{/key}
285 | 	</div>
286 | </section>
287 | 
288 | <section class="examples section">
289 | 	<h2 class="section--heading">Other examples</h2>
290 | 
291 | 	<Examples />
292 | </section>
293 | 
294 | <p class="footer">
295 | 	Created by <a href="https://posandu.com" target="_blank">@Posandu</a>.
296 | 	Licensed under MIT.
297 | </p>
298 | 
299 | <style>
300 | 	.header {
301 | 		background: #d23604;
302 | 		color: white;
303 | 		display: flex;
304 | 		flex-direction: column;
305 | 		align-items: center;
306 | 		justify-content: center;
307 | 		padding: 20px;
308 | 		min-height: 310px;
309 | 		line-height: 66px;
310 | 		user-select: none;
311 | 	}
312 | 	.header--logo {
313 | 		width: 100px;
314 | 		border-radius: 100px;
315 | 	}
316 | 	.header--heading {
317 | 		font-size: 33px;
318 | 		font-weight: 600;
319 | 		margin-top: 15px;
320 | 	}
321 | 	.header--desc {
322 | 		font-size: 17px;
323 | 		font-weight: 500;
324 | 		color: #fffffff7;
325 | 	}
326 | 
327 | 	:global(.header .shiki) {
328 | 		border-radius: 20px;
329 | 		padding: 10px 20px;
330 | 		line-height: 25px;
331 | 		user-select: text;
332 | 	}
333 | 
334 | 	.section {
335 | 		display: flex;
336 | 		padding: 10px;
337 | 		max-width: 1024px;
338 | 		margin: 20px auto;
339 | 		gap: 50px;
340 | 	}
341 | 	.section--left,
342 | 	.section--right {
343 | 		flex: 1;
344 | 	}
345 | 	.section--heading {
346 | 		font-size: 20px;
347 | 		font-weight: 600;
348 | 		margin-bottom: 7px;
349 | 	}
350 | 	.section--desc {
351 | 		color: #2f2f2f;
352 | 		line-height: 40px;
353 | 		font-size: 15px;
354 | 	}
355 | 	:global(.section .shiki) {
356 | 		padding: 10px;
357 | 		border-radius: 10px;
358 | 	}
359 | 
360 | 	.btn {
361 | 		padding: 10px 20px;
362 | 		border-radius: 4px;
363 | 		background: #fe3e00;
364 | 		color: white;
365 | 		font-size: 16px;
366 | 		font-weight: 600;
367 | 		box-shadow:
368 | 			rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
369 | 			rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
370 | 			rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
371 | 		transition: all 0.2s ease;
372 | 		user-select: none;
373 | 	}
374 | 	.btn-demo {
375 | 		margin-top: 20px;
376 | 	}
377 | 	.btn:hover {
378 | 		background: #ff5017;
379 | 		box-shadow:
380 | 			rgba(0, 0, 0, 0.2) 0px 2px 4px -1px,
381 | 			rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
382 | 			rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
383 | 	}
384 | 
385 | 	.btn:active {
386 | 		box-shadow:
387 | 			rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
388 | 			rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
389 | 			rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
390 | 	}
391 | 
392 | 	.option--name {
393 | 		font-weight: 600;
394 | 	}
395 | 	.option--desc {
396 | 		color: #737373;
397 | 		font-weight: 500;
398 | 	}
399 | 	.option--input {
400 | 		margin-top: 10px;
401 | 		width: 100%;
402 | 		background: #e8e8e8;
403 | 		border-radius: 10px;
404 | 		padding: 8px 10px;
405 | 		font-size: 14px;
406 | 		outline: none;
407 | 	}
408 | 	.option--input:hover {
409 | 		background: #d9d9d9;
410 | 	}
411 | 	.option--input:focus {
412 | 		background: #dbdbdb;
413 | 		box-shadow: 0 0 0 2px #fe3e0059;
414 | 	}
415 | 	.option {
416 | 		border: 1px solid #0000001a;
417 | 		border-radius: 11px;
418 | 		padding: 10px;
419 | 		margin: 4px -10px;
420 | 		margin-bottom: 8px;
421 | 	}
422 | 
423 | 	.option--type {
424 | 		font-weight: 500;
425 | 		font-style: italic;
426 | 	}
427 | 
428 | 	.section--right.preview {
429 | 		display: flex;
430 | 		flex-direction: column;
431 | 	}
432 | 	.preview--inside {
433 | 		flex: 1;
434 | 		align-items: center;
435 | 		justify-content: center;
436 | 		display: flex;
437 | 		background: #f9f9f9;
438 | 		border-radius: 10px;
439 | 	}
440 | 
441 | 	.examples {
442 | 		display: block !important;
443 | 	}
444 | 
445 | 	.footer {
446 | 		margin: 18px 0;
447 | 		text-align: center;
448 | 	}
449 | 
450 | 	a {
451 | 		color: #fe3e00;
452 | 		text-decoration: none;
453 | 	}
454 | 
455 | 	a:hover {
456 | 		text-decoration: underline;
457 | 	}
458 | 
459 | 	a:active {
460 | 		color: #ff5017;
461 | 	}
462 | 
463 | 	a:focus {
464 | 		box-shadow: 0 0 0 2px #fe3e0059;
465 | 	}
466 | 
467 | 	@media (max-width: 768px) {
468 | 		.section {
469 | 			flex-direction: column;
470 | 		}
471 | 		.section--left,
472 | 		.section--right {
473 | 			flex: 1;
474 | 		}
475 | 		.section--right {
476 | 			margin-top: 20px;
477 | 		}
478 | 	}
479 | </style>
480 | 


--------------------------------------------------------------------------------
/src/routes/+page.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/src/routes/CodeBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { codeToHtml } from "shiki";
 3 | 
 4 | 	interface Props {
 5 | 		code: string;
 6 | 	}
 7 | 
 8 | 	let { code }: Props = $props();
 9 | 
10 | 	const html = codeToHtml(code, {
11 | 		lang: "svelte",
12 | 		theme: "vitesse-dark",
13 | 	});
14 | </script>
15 | 
16 | {#await html}
17 | 	<pre class="shiki" style="background-color: #121212;"><code>{code}</code
18 | 		></pre>
19 | {:then html}
20 | 	{@html html}
21 | {/await}
22 | 


--------------------------------------------------------------------------------
/src/routes/Examples.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { ripple } from "$lib";
 3 | 	import CodeBlock from "./CodeBlock.svelte";
 4 | 	import { CODE } from "./example";
 5 | </script>
 6 | 
 7 | <div use:ripple class="box imgripple">Image ripple</div>
 8 | <div use:ripple class="box gradient">Gradient ripple</div>
 9 | 
10 | <br />
11 | <br />
12 | 
13 | <p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
14 | 
15 | <div use:ripple class="imgbox">
16 | 	<img
17 | 		src="https://images.unsplash.com/photo-1518546305927-5a555bb7020d?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Yml0Y29pbnxlbnwwfHwwfHx8MA%3D%3D"
18 | 		alt="Man dancing"
19 | 	/>
20 | </div>
21 | 
22 | <div
23 | 	use:ripple={{
24 | 		color: "rgba(0,0,0,0.5)",
25 | 	}}
26 | >
27 | 	<input type="text" placeholder="Type something" style="width: 100%;" />
28 | </div>
29 | 
30 | <br /><br />
31 | 
32 | <CodeBlock code={CODE} />
33 | 
34 | <style>
35 | 	.box {
36 | 		height: 200px;
37 | 		width: 200px;
38 | 		align-items: center;
39 | 		justify-content: center;
40 | 		border: 1px solid black;
41 | 		border-radius: 5px;
42 | 		margin-top: 20px;
43 | 		margin-right: 20px;
44 | 		display: inline-flex;
45 | 		user-select: none;
46 | 	}
47 | 
48 | 	.imgbox {
49 | 		height: 200px;
50 | 		width: 200px;
51 | 		border-radius: 5px;
52 | 		margin-top: 20px;
53 | 		margin-right: 20px;
54 | 		display: inline-flex;
55 | 	}
56 | 
57 | 	.imgbox img {
58 | 		width: 100%;
59 | 		height: 100%;
60 | 		object-fit: cover;
61 | 	}
62 | 
63 | 	:global(.imgripple .ripple) {
64 | 		background: url(https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif);
65 | 		background-size: 80%;
66 | 		background-position: center;
67 | 		background-repeat: no-repeat;
68 | 		z-index: -1;
69 | 	}
70 | 
71 | 	:global(.gradient .ripple) {
72 | 		background: linear-gradient(45deg, #f3ed783d, #af4261);
73 | 	}
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/routes/app.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * ress.css • v4.0.0
  3 |  * MIT License
  4 |  * github.com/filipelinhares/ress
  5 |  */
  6 | html {
  7 | 	box-sizing: border-box;
  8 | 	-webkit-text-size-adjust: 100%;
  9 | 	word-break: normal;
 10 | 	-moz-tab-size: 4;
 11 | 	tab-size: 4;
 12 | 	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 13 | }
 14 | *,
 15 | :after,
 16 | :before {
 17 | 	background-repeat: no-repeat;
 18 | 	box-sizing: inherit;
 19 | 	font-family: inherit;
 20 | }
 21 | :after,
 22 | :before {
 23 | 	text-decoration: inherit;
 24 | 	vertical-align: inherit;
 25 | }
 26 | * {
 27 | 	padding: 0;
 28 | 	margin: 0;
 29 | }
 30 | hr {
 31 | 	overflow: visible;
 32 | 	height: 0;
 33 | 	color: inherit;
 34 | }
 35 | details,
 36 | main {
 37 | 	display: block;
 38 | }
 39 | summary {
 40 | 	display: list-item;
 41 | }
 42 | small {
 43 | 	font-size: 80%;
 44 | }
 45 | [hidden] {
 46 | 	display: none;
 47 | }
 48 | abbr[title] {
 49 | 	border-bottom: none;
 50 | 	text-decoration: underline;
 51 | 	text-decoration: underline dotted;
 52 | }
 53 | a {
 54 | 	background-color: transparent;
 55 | }
 56 | a:active,
 57 | a:hover {
 58 | 	outline-width: 0;
 59 | }
 60 | code,
 61 | kbd,
 62 | pre,
 63 | samp {
 64 | 	font-family: monospace, monospace;
 65 | }
 66 | pre {
 67 | 	font-size: 1em;
 68 | }
 69 | b,
 70 | strong {
 71 | 	font-weight: bolder;
 72 | }
 73 | sub,
 74 | sup {
 75 | 	font-size: 75%;
 76 | 	line-height: 0;
 77 | 	position: relative;
 78 | 	vertical-align: baseline;
 79 | }
 80 | sub {
 81 | 	bottom: -0.25em;
 82 | }
 83 | sup {
 84 | 	top: -0.5em;
 85 | }
 86 | table {
 87 | 	border-color: inherit;
 88 | 	text-indent: 0;
 89 | }
 90 | input {
 91 | 	border-radius: 0;
 92 | }
 93 | [disabled] {
 94 | 	cursor: default;
 95 | }
 96 | [type="number"]::-webkit-inner-spin-button,
 97 | [type="number"]::-webkit-outer-spin-button {
 98 | 	height: auto;
 99 | }
100 | [type="search"] {
101 | 	-webkit-appearance: textfield;
102 | 	outline-offset: -2px;
103 | }
104 | [type="search"]::-webkit-search-decoration {
105 | 	-webkit-appearance: none;
106 | }
107 | textarea {
108 | 	overflow: auto;
109 | 	resize: vertical;
110 | }
111 | button,
112 | input,
113 | optgroup,
114 | select,
115 | textarea {
116 | 	font: inherit;
117 | }
118 | optgroup {
119 | 	font-weight: 700;
120 | }
121 | button {
122 | 	overflow: visible;
123 | }
124 | button,
125 | select {
126 | 	text-transform: none;
127 | }
128 | [role="button"],
129 | [type="button"],
130 | [type="reset"],
131 | [type="submit"],
132 | button {
133 | 	cursor: pointer;
134 | 	color: inherit;
135 | }
136 | [type="button"]::-moz-focus-inner,
137 | [type="reset"]::-moz-focus-inner,
138 | [type="submit"]::-moz-focus-inner,
139 | button::-moz-focus-inner {
140 | 	border-style: none;
141 | 	padding: 0;
142 | }
143 | [type="button"]::-moz-focus-inner,
144 | [type="reset"]::-moz-focus-inner,
145 | [type="submit"]::-moz-focus-inner,
146 | button:-moz-focusring {
147 | 	outline: 1px dotted ButtonText;
148 | }
149 | [type="reset"],
150 | [type="submit"],
151 | button,
152 | html [type="button"] {
153 | 	-webkit-appearance: button;
154 | }
155 | button,
156 | input,
157 | select,
158 | textarea {
159 | 	background-color: transparent;
160 | 	border-style: none;
161 | }
162 | a:focus,
163 | button:focus,
164 | input:focus,
165 | select:focus,
166 | textarea:focus {
167 | 	outline-width: 0;
168 | }
169 | select {
170 | 	-moz-appearance: none;
171 | 	-webkit-appearance: none;
172 | }
173 | select::-ms-expand {
174 | 	display: none;
175 | }
176 | select::-ms-value {
177 | 	color: currentColor;
178 | }
179 | legend {
180 | 	border: 0;
181 | 	color: inherit;
182 | 	display: table;
183 | 	white-space: normal;
184 | 	max-width: 100%;
185 | }
186 | ::-webkit-file-upload-button {
187 | 	-webkit-appearance: button;
188 | 	color: inherit;
189 | 	font: inherit;
190 | }
191 | img {
192 | 	border-style: none;
193 | }
194 | progress {
195 | 	vertical-align: baseline;
196 | }
197 | [aria-busy="true"] {
198 | 	cursor: progress;
199 | }
200 | [aria-controls] {
201 | 	cursor: pointer;
202 | }
203 | [aria-disabled="true"] {
204 | 	cursor: default;
205 | }
206 | 
207 | pre {
208 | 	white-space: pre-wrap; /* css-3 */
209 | 	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
210 | 	white-space: -pre-wrap; /* Opera 4-6 */
211 | 	white-space: -o-pre-wrap; /* Opera 7 */
212 | 	word-wrap: break-word; /* Internet Explorer 5.5+ */
213 | }
214 | 


--------------------------------------------------------------------------------
/src/routes/example.ts:
--------------------------------------------------------------------------------
 1 | const SCRIPT = `script>`;
 2 | const CODE = `<${SCRIPT}
 3 | 	import { ripple } from "svelte-ripple-action";
 4 | </${SCRIPT}
 5 | 
 6 | <div use:ripple class="box imgripple">Image ripple</div>
 7 | <div use:ripple class="box gradient">Gradient ripple</div>
 8 | 
 9 | <br />
10 | <br />
11 | 
12 | <p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
13 | 
14 | <div use:ripple class="imgbox">
15 | 	<img
16 | 		src="...."
17 | 		alt="Man dancing"
18 | 	/>
19 | </div>
20 | 
21 | <div
22 | 	use:ripple={{
23 | 		color: "rgba(0,0,0,0.5)",
24 | 	}}
25 | >
26 | 	<input type="text" placeholder="Type something" style="width: 100%;" />
27 | </div>
28 | 
29 | <style>
30 | 	.box {
31 | 		height: 200px;
32 | 		width: 200px;
33 | 		align-items: center;
34 | 		justify-content: center;
35 | 		border: 1px solid black;
36 | 		border-radius: 5px;
37 | 		margin-top: 20px;
38 | 		margin-right: 20px;
39 | 		display: inline-flex;
40 | 		user-select: none;
41 | 	}
42 | 
43 | 	.imgbox {
44 | 		height: 200px;
45 | 		width: 200px;
46 | 		border-radius: 5px;
47 | 		margin-top: 20px;
48 | 		margin-right: 20px;
49 | 		display: inline-flex;
50 | 	}
51 | 
52 | 	.imgbox img {
53 | 		width: 100%;
54 | 		height: 100%;
55 | 		object-fit: cover;
56 | 	}
57 | 
58 | 	:global(.imgripple .ripple) {
59 | 		background: url(.....);
60 | 		background-size: 80%;
61 | 		background-position: center;
62 | 		background-repeat: no-repeat;
63 | 		z-index: -1;
64 | 	}
65 | 
66 | 	:global(.gradient .ripple) {
67 | 		background: linear-gradient(
68 | 			45deg, 
69 | 			#f3ed783d, 
70 | 			#af4261
71 | 		);
72 | 	}
73 | </style>
74 | `;
75 | 
76 | export { CODE };
77 | 


--------------------------------------------------------------------------------
/static/logo-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Posandu/svelte-ripple-action/9282f3f85b97b7ea5be0f72a72f20a35132f5628/static/logo-large.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Posandu/svelte-ripple-action/9282f3f85b97b7ea5be0f72a72f20a35132f5628/static/logo.png


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true
11 | 	},
12 | 	"moduleResolution": "NodeNext"
13 | }
14 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------