├── .nvmrc
├── .npmrc
├── src
    ├── routes
    │   ├── +layout.ts
    │   ├── +layout.svelte
    │   └── +page.svelte
    ├── app.css
    ├── lib
    │   ├── index.ts
    │   └── components
    │   │   ├── RenderScanObserver.css
    │   │   ├── Logo.svelte
    │   │   ├── RenderScan.svelte
    │   │   └── RenderScanObserver.svelte
    ├── app.d.ts
    └── app.html
├── .aidigestignore
├── .prettierignore
├── static
    ├── favicon.png
    └── og-image.jpg
├── .github
    ├── render-scan-demo.gif
    └── workflows
    │   └── build.yml
├── postcss.config.js
├── .prettierrc
├── .gitignore
├── tailwind.config.ts
├── vite.config.ts
├── tsconfig.json
├── svelte.config.js
├── eslint.config.js
├── LICENSE
├── README.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 22


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


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


--------------------------------------------------------------------------------
/.aidigestignore:
--------------------------------------------------------------------------------
1 | .gitignore
2 | .prettier*
3 | eslint*
4 | postcss*
5 | docs


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/khromov/svelte-render-scan/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/og-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/khromov/svelte-render-scan/HEAD/static/og-image.jpg


--------------------------------------------------------------------------------
/.github/render-scan-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/khromov/svelte-render-scan/HEAD/.github/render-scan-demo.gif


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss/base';
2 | @import 'tailwindcss/components';
3 | @import 'tailwindcss/utilities';
4 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // Reexport your entry components here
2 | export { default as RenderScan } from './components/RenderScan.svelte';
3 | export { default as RenderScanObserver } from './components/RenderScanObserver.svelte';
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": "*.svelte",
10 | 			"options": {
11 | 				"parser": "svelte"
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .wrangler
 8 | /.svelte-kit
 9 | /build
10 | /dist
11 | 
12 | # OS
13 | .DS_Store
14 | Thumbs.db
15 | 
16 | # Env
17 | .env
18 | .env.*
19 | !.env.example
20 | !.env.test
21 | 
22 | # Vite
23 | vite.config.js.timestamp-*
24 | vite.config.ts.timestamp-*
25 | codebase.md


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import forms from '@tailwindcss/forms';
 2 | import typography from '@tailwindcss/typography';
 3 | import type { Config } from 'tailwindcss';
 4 | 
 5 | export default {
 6 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
 7 | 
 8 | 	theme: {
 9 | 		extend: {}
10 | 	},
11 | 
12 | 	plugins: [typography, forms]
13 | } satisfies Config;
14 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div>%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import { defineConfig } from 'vite';
 3 | import { visualizer } from 'rollup-plugin-visualizer';
 4 | 
 5 | export default defineConfig({
 6 | 	plugins: [
 7 | 		sveltekit(),
 8 | 		visualizer({
 9 | 			emitFile: true,
10 | 			filename: 'stats.html'
11 | 		})
12 | 	],
13 | 	server: {
14 | 		fs: {
15 | 			allow: ['./package.json']
16 | 		}
17 | 	}
18 | });
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 | 		"strict": true,
12 | 		"module": "NodeNext",
13 | 		"moduleResolution": "NodeNext",
14 | 		"declaration": true,
15 | 		"declarationMap": true
16 | 	}
17 | }
18 | 


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


--------------------------------------------------------------------------------
/src/lib/components/RenderScanObserver.css:
--------------------------------------------------------------------------------
 1 | .render-perf__container {
 2 | 	position: fixed;
 3 | 	pointer-events: none;
 4 | 	top: 0;
 5 | 	left: 0;
 6 | 	right: 0;
 7 | 	bottom: 0;
 8 | 	box-sizing: border-box;
 9 | 	z-index: 1000000000;
10 | }
11 | 
12 | .render-perf__box {
13 | 	box-sizing: border-box;
14 | 	font-family: sans-serif;
15 | 	display: block;
16 | 	position: fixed;
17 | 	pointer-events: none;
18 | 	border: 1px solid #2189b5;
19 | 	background-color: rgba(33, 137, 181, 0.05);
20 | 	transition: opacity 0.25s;
21 | }
22 | 
23 | .render-perf__title {
24 | 	display: inline-block;
25 | 	min-width: max-content;
26 | 	box-sizing: content-box;
27 | 	font-size: 0.75rem;
28 | 	border: 1px solid #2189b5;
29 | 	border-bottom: none;
30 | 	padding: 0.125rem 0.5rem;
31 | 	color: white;
32 | 	background-color: #2189b5;
33 | 	position: relative;
34 | 	top: -1.5rem;
35 | }
36 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import prettier from 'eslint-config-prettier';
 2 | import js from '@eslint/js';
 3 | import { includeIgnoreFile } from '@eslint/compat';
 4 | import svelte from 'eslint-plugin-svelte';
 5 | import globals from 'globals';
 6 | import { fileURLToPath } from 'node:url';
 7 | import ts from 'typescript-eslint';
 8 | const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
 9 | 
10 | export default ts.config(
11 | 	includeIgnoreFile(gitignorePath),
12 | 	js.configs.recommended,
13 | 	...ts.configs.recommended,
14 | 	...svelte.configs['flat/recommended'],
15 | 	prettier,
16 | 	...svelte.configs['flat/prettier'],
17 | 	{
18 | 		languageOptions: {
19 | 			globals: {
20 | 				...globals.browser,
21 | 				...globals.node
22 | 			}
23 | 		}
24 | 	},
25 | 	{
26 | 		files: ['**/*.svelte'],
27 | 
28 | 		languageOptions: {
29 | 			parserOptions: {
30 | 				parser: ts.parser
31 | 			}
32 | 		}
33 | 	}
34 | );
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 NullVoxPopuli, Stanislav Khromov
 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 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import '../app.css';
 3 | 	let { children } = $props();
 4 | 
 5 | 	const SITE_URL = 'https://khromov.github.io/svelte-render-scan/';
 6 | </script>
 7 | 
 8 | <svelte:head>
 9 | 	<title>Svelte Render Scan</title>
10 | 	<meta name="title" content="Svelte Render Scan" />
11 | 	<meta name="description" content="Visual debugging for Svelte apps." />
12 | 
13 | 	<!-- Open Graph / Facebook -->
14 | 	<meta property="og:type" content="website" />
15 | 	<meta property="og:url" content={SITE_URL} />
16 | 	<meta property="og:title" content="Svelte Render Scan" />
17 | 	<meta property="og:description" content="Visual debugging for Svelte apps." />
18 | 	<meta property="og:image" content={`${SITE_URL}og-image.jpg`} />
19 | 	<meta property="og:image:width" content="1200" />
20 | 	<meta property="og:image:height" content="630" />
21 | 
22 | 	<!-- Twitter -->
23 | 	<meta property="twitter:card" content="summary_large_image" />
24 | 	<meta property="twitter:url" content={SITE_URL} />
25 | 	<meta property="twitter:title" content="Svelte Render Scan" />
26 | 	<meta property="twitter:description" content="Visual debugging for Svelte apps." />
27 | 	<meta property="twitter:image" content={`${SITE_URL}/og-image.png`} />
28 | </svelte:head>
29 | 
30 | {@render children()}
31 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy build to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: ['main']
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   contents: read
10 |   pages: write
11 |   id-token: write
12 | 
13 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
14 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
15 | concurrency:
16 |   group: 'pages'
17 |   cancel-in-progress: false
18 | 
19 | jobs:
20 |   deploy:
21 |     environment:
22 |       name: github-pages
23 |       url: ${{ steps.deployment.outputs.page_url }}
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - name: Checkout
27 |         uses: actions/checkout@v4
28 |       - name: Setup Pages
29 |         uses: actions/configure-pages@v5
30 |       - name: Use Node.js
31 |         uses: actions/setup-node@v2
32 |         with:
33 |           node-version: 22
34 |       - name: Install dependencies
35 |         run: npm ci
36 |       - name: Build the code
37 |         run: npm run build
38 |       - name: Upload artifact
39 |         uses: actions/upload-pages-artifact@v3
40 |         with:
41 |           # Upload entire repository
42 |           path: 'build'
43 |       - name: Deploy to GitHub Pages
44 |         id: deployment
45 |         uses: actions/deploy-pages@v4
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Render Scan
 2 | 
 3 | Visual debugging tool for Svelte applications.
 4 | 
 5 | Svelte port of [render-scan](https://github.com/NullVoxPopuli/render-scan/).
 6 | 
 7 | ![Screenshot of svelte-render-scan in action](.github/render-scan-demo.gif)
 8 | 
 9 | ## Installation
10 | 
11 | ```bash
12 | npm install -D svelte-render-scan
13 | ```
14 | 
15 | ## Usage
16 | 
17 | ```svelte
18 | <script>
19 | 	import { RenderScan } from 'svelte-render-scan';
20 | </script>
21 | 
22 | <RenderScan />
23 | ```
24 | 
25 | The overlay button appears in the bottom right corner and is enabled by default. You can disable it by clicking on it or setting the `initialEnabled` prop to `false`.
26 | 
27 | ## Props
28 | 
29 | - `initialEnabled` (default: `true`) - Start with render scanning enabled
30 | - `offsetLeft` (default: `0`) - Offset the button left from its default position
31 | - `hideIcon` (default: `false`) - Hide the render scan button while keeping functionality active
32 | - `callback` (default: `undefined`) - Optional user defined function that gets called once per valid mutation. Signature is `(mutation:MutationRecord)=>void;`
33 | - `duration` (defult: `1000`) - Adjust how long the render scan highlights remain on screen in ms
34 | 
35 | ## Development
36 | 
37 | Clone this repository and install dependencies:
38 | 
39 | ```bash
40 | nvm use
41 | npm install
42 | npm run dev
43 | ```
44 | 
45 | ## License
46 | 
47 | MIT
48 | 


--------------------------------------------------------------------------------
/src/lib/components/Logo.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	// Supported props type definition
 3 | 	interface IconProps {
 4 | 		color?: string;
 5 | 		size?: number | string;
 6 | 		strokeWidth?: number;
 7 | 		absoluteStrokeWidth?: boolean;
 8 | 		class?: string;
 9 | 	}
10 | 
11 | 	let {
12 | 		color = 'currentColor',
13 | 		size = 24,
14 | 		strokeWidth = 2,
15 | 		absoluteStrokeWidth = false,
16 | 		class: className = '',
17 | 		...rest
18 | 	} = $props();
19 | 
20 | 	// Helper to merge classes just like the original Icon component
21 | 	function mergeClasses(...classes: (string | undefined)[]) {
22 | 		return classes.filter(Boolean).join(' ');
23 | 	}
24 | 
25 | 	// Default SVG attributes
26 | 	const defaultAttributes = {
27 | 		xmlns: 'http://www.w3.org/2000/svg',
28 | 		width: 24,
29 | 		height: 24,
30 | 		viewBox: '0 0 24 24',
31 | 		fill: 'none',
32 | 		stroke: 'currentColor',
33 | 		'stroke-width': 2,
34 | 		'stroke-linecap': 'round',
35 | 		'stroke-linejoin': 'round'
36 | 	} as const;
37 | </script>
38 | 
39 | <svg
40 | 	{...defaultAttributes}
41 | 	width={size}
42 | 	height={size}
43 | 	stroke={color}
44 | 	stroke-width={absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth}
45 | 	class={mergeClasses('lucide-icon', 'lucide', 'lucide-eye', className)}
46 | 	{...rest}
47 | >
48 | 	<path
49 | 		d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
50 | 	/>
51 | 	<circle cx="12" cy="12" r="3" />
52 | </svg>
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelte-render-scan",
 3 | 	"version": "1.1.0",
 4 | 	"license": "MIT",
 5 | 	"homepage": "https://khromov.github.io/svelte-render-scan/",
 6 | 	"repository": {
 7 | 		"type": "git",
 8 | 		"url": "git+https://github.com/khromov/svelte-render-scan.git"
 9 | 	},
10 | 	"scripts": {
11 | 		"dev": "vite dev",
12 | 		"build": "vite build && npm run prepack",
13 | 		"preview": "vite preview",
14 | 		"prepare": "svelte-kit sync || echo ''",
15 | 		"prepack": "svelte-kit sync && svelte-package && publint",
16 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
17 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
18 | 		"format": "prettier --write .",
19 | 		"lint": "prettier --check . && eslint ."
20 | 	},
21 | 	"files": [
22 | 		"dist",
23 | 		"!dist/**/*.test.*",
24 | 		"!dist/**/*.spec.*",
25 | 		"src/lib",
26 | 		"!src/lib/**/*.test.*",
27 | 		"!src/lib/**/*.spec.*"
28 | 	],
29 | 	"sideEffects": [
30 | 		"**/*.css"
31 | 	],
32 | 	"svelte": "./dist/index.js",
33 | 	"types": "./dist/index.d.ts",
34 | 	"type": "module",
35 | 	"exports": {
36 | 		".": {
37 | 			"types": "./dist/index.d.ts",
38 | 			"svelte": "./dist/index.js"
39 | 		}
40 | 	},
41 | 	"peerDependencies": {
42 | 		"svelte": "^5.0.0"
43 | 	},
44 | 	"devDependencies": {
45 | 		"@eslint/compat": "^1.2.5",
46 | 		"@eslint/js": "^9.18.0",
47 | 		"@sveltejs/adapter-static": "^3.0.8",
48 | 		"@sveltejs/kit": "^2.16.0",
49 | 		"@sveltejs/package": "^2.0.0",
50 | 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
51 | 		"@tailwindcss/forms": "^0.5.10",
52 | 		"@tailwindcss/typography": "^0.5.16",
53 | 		"autoprefixer": "^10.4.20",
54 | 		"eslint": "^9.18.0",
55 | 		"eslint-config-prettier": "^10.0.1",
56 | 		"eslint-plugin-svelte": "^2.46.1",
57 | 		"globals": "^15.14.0",
58 | 		"prettier": "^3.4.2",
59 | 		"prettier-plugin-svelte": "^3.3.3",
60 | 		"prettier-plugin-tailwindcss": "^0.6.10",
61 | 		"publint": "^0.3.2",
62 | 		"rollup-plugin-visualizer": "^5.14.0",
63 | 		"svelte": "^5.0.0",
64 | 		"svelte-check": "^4.0.0",
65 | 		"tailwindcss": "^3.4.17",
66 | 		"typescript": "^5.0.0",
67 | 		"typescript-eslint": "^8.20.0",
68 | 		"vite": "^6.2.3"
69 | 	},
70 | 	"keywords": [
71 | 		"svelte",
72 | 		"library"
73 | 	]
74 | }
75 | 


--------------------------------------------------------------------------------
/src/lib/components/RenderScan.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import Eye from '$lib/components/Logo.svelte';
  3 | 	import RenderScanObserver from './RenderScanObserver.svelte';
  4 | 	import { onMount } from 'svelte';
  5 | 
  6 | 	// Props with defaults
  7 | 	let {
  8 | 		initialEnabled = true,
  9 | 		offsetLeft = 0,
 10 | 		hideIcon = false,
 11 | 		callback = undefined,
 12 | 		duration = 1000
 13 | 	} = $props<{
 14 | 		initialEnabled?: boolean;
 15 | 		offsetLeft?: number;
 16 | 		hideIcon?: boolean;
 17 | 		callback?: (mutationRecord: MutationRecord) => void;
 18 | 		duration?: number;
 19 | 	}>();
 20 | 
 21 | 	// State management
 22 | 	let enabled = $state(initialEnabled);
 23 | 
 24 | 	// Fixed colors for enabled/disabled states
 25 | 	const enabledColor = '#2189b5';
 26 | 	const disabledColor = '#9ca3af';
 27 | 
 28 | 	// Load saved state from localStorage on mount
 29 | 	onMount(() => {
 30 | 		const savedState = localStorage.getItem('svelte-render-scan-enabled');
 31 | 		if (savedState !== null) {
 32 | 			enabled = savedState === 'true';
 33 | 		}
 34 | 	});
 35 | 
 36 | 	// Toggle handler that also saves to localStorage
 37 | 	function toggleEnabled() {
 38 | 		enabled = !enabled;
 39 | 		localStorage.setItem('svelte-render-scan-enabled', enabled.toString());
 40 | 	}
 41 | </script>
 42 | 
 43 | {#if enabled}
 44 | 	<RenderScanObserver {callback} {duration} />
 45 | {/if}
 46 | 
 47 | <!-- Floating button -->
 48 | {#if !hideIcon}
 49 | 	<button
 50 | 		style:background-color={enabled ? enabledColor : disabledColor}
 51 | 		style:right={`calc(1rem + ${offsetLeft}px)`}
 52 | 		onclick={toggleEnabled}
 53 | 		title={enabled ? 'Disable render scanning' : 'Enable render scanning'}
 54 | 	>
 55 | 		<div class:enabled>
 56 | 			<Eye color="white" size={24} />
 57 | 		</div>
 58 | 	</button>
 59 | {/if}
 60 | 
 61 | <style>
 62 | 	button {
 63 | 		position: fixed;
 64 | 		bottom: 1rem;
 65 | 		right: 1rem;
 66 | 		height: 3rem;
 67 | 		width: 3rem;
 68 | 		display: flex;
 69 | 		align-items: center;
 70 | 		justify-content: center;
 71 | 		border-radius: 9999px;
 72 | 		box-shadow:
 73 | 			0 10px 15px -3px rgba(0, 0, 0, 0.1),
 74 | 			0 4px 6px -2px rgba(0, 0, 0, 0.05);
 75 | 		transition:
 76 | 			transform 0.2s ease,
 77 | 			background-color 0.3s ease;
 78 | 		border: none;
 79 | 		cursor: pointer;
 80 | 		z-index: 100000;
 81 | 	}
 82 | 
 83 | 	button:hover {
 84 | 		transform: scale(1.1);
 85 | 	}
 86 | 
 87 | 	button:active {
 88 | 		transform: scale(0.95);
 89 | 	}
 90 | 
 91 | 	div {
 92 | 		transition: transform 0.5s ease;
 93 | 	}
 94 | 
 95 | 	div.enabled {
 96 | 		transform: rotate(360deg);
 97 | 	}
 98 | 
 99 | 	div:not(.enabled) {
100 | 		transform: rotate(0deg);
101 | 	}
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/lib/components/RenderScanObserver.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { onMount } from 'svelte';
  3 | 	import './RenderScanObserver.css';
  4 | 
  5 | 	class Highlight {
  6 | 		#element: HTMLDivElement;
  7 | 		#title: HTMLDivElement;
  8 | 		target: Node;
  9 | 		constructor(target: Node) {
 10 | 			this.target = target;
 11 | 
 12 | 			this.#element = document.createElement('div');
 13 | 			this.#title = document.createElement('div');
 14 | 			this.#element.classList.add('render-perf__box');
 15 | 			this.#title.classList.add('render-perf__title');
 16 | 			this.#element.appendChild(this.#title);
 17 | 		}
 18 | 
 19 | 		#reasons = new Map<string, number>();
 20 | 		#totalRerenders = 0;
 21 | 
 22 | 		notify(why: string) {
 23 | 			this.#reasons.set(why, (this.#reasons.get(why) || 0) + 1);
 24 | 			this.#totalRerenders++;
 25 | 
 26 | 			this.#render();
 27 | 		}
 28 | 
 29 | 		get title() {
 30 | 			// Get entries once and use them for both the reasons string and total
 31 | 			const entries = [...this.#reasons.entries()];
 32 | 			const reasons = entries.map(([key, count]) => `${key} (${count})`).join(' , ');
 33 | 
 34 | 			// Calculate total using the same entries array
 35 | 			const total = entries.reduce((sum, [_, count]) => sum + count, 0);
 36 | 
 37 | 			return `x${total} | ${reasons}`;
 38 | 		}
 39 | 
 40 | 		#fadeOut: ReturnType<typeof setTimeout> = setTimeout(() => {}, 0);
 41 | 		#frame: number = 0;
 42 | 		#isVisible = false;
 43 | 
 44 | 		updatePosition() {
 45 | 			let rect = this.#getRect();
 46 | 			if (!rect) return;
 47 | 
 48 | 			if (rect.y > window.innerHeight) return;
 49 | 			if (rect.x > window.innerWidth) return;
 50 | 
 51 | 			Object.assign(this.#element.style, {
 52 | 				top: rect.y + 'px',
 53 | 				left: rect.x + 'px',
 54 | 				width: rect.width + 'px',
 55 | 				height: rect.height + 'px'
 56 | 			});
 57 | 		}
 58 | 
 59 | 		#render() {
 60 | 			cancelAnimationFrame(this.#frame);
 61 | 			clearTimeout(this.#fadeOut);
 62 | 
 63 | 			this.#frame = requestAnimationFrame(() => {
 64 | 				let rect = this.#getRect();
 65 | 
 66 | 				if (!rect) return;
 67 | 				if (rect.y > window.innerHeight) return;
 68 | 				if (rect.x > window.innerWidth) return;
 69 | 
 70 | 				if (!overlayEl?.contains(this.#element)) {
 71 | 					overlayEl?.appendChild(this.#element);
 72 | 					activeHighlights.add(this);
 73 | 				}
 74 | 
 75 | 				this.#title.textContent = this.title;
 76 | 				this.#isVisible = true;
 77 | 
 78 | 				Object.assign(this.#element.style, {
 79 | 					top: rect.y + 'px',
 80 | 					left: rect.x + 'px',
 81 | 					width: rect.width + 'px',
 82 | 					height: rect.height + 'px'
 83 | 				});
 84 | 
 85 | 				this.#element.style.opacity = '1';
 86 | 				this.#fadeOut = setTimeout(() => {
 87 | 					this.#element.style.opacity = '0';
 88 | 					this.#reasons.clear();
 89 | 					this.#isVisible = false;
 90 | 					// Remove element from DOM after fade animation completes
 91 | 					setTimeout(() => {
 92 | 						this.#element.remove();
 93 | 						activeHighlights.delete(this);
 94 | 					}, 250); // Match the CSS transition duration
 95 | 				}, duration);
 96 | 			});
 97 | 		}
 98 | 
 99 | 		#getRect() {
100 | 			if (this.target instanceof Element) {
101 | 				let rect = this.target.getBoundingClientRect();
102 | 
103 | 				return {
104 | 					x: rect.x,
105 | 					y: rect.y,
106 | 					width: rect.width,
107 | 					height: rect.height
108 | 				};
109 | 			}
110 | 
111 | 			let range = document.createRange();
112 | 			range.selectNodeContents(this.target);
113 | 			let rects = range.getClientRects();
114 | 			let rect = rects[0];
115 | 
116 | 			if (!rect) {
117 | 				console.log(`Could not determine coordinates of `, this.target);
118 | 				return;
119 | 			}
120 | 
121 | 			return {
122 | 				x: rect.x,
123 | 				y: rect.y,
124 | 				width: rect.width,
125 | 				height: rect.height
126 | 			};
127 | 		}
128 | 	}
129 | 
130 | 	// Props with defaults
131 | 	let { duration = 1000, callback = undefined } = $props<{
132 | 		duration: number;
133 | 		callback: (mutation: MutationRecord) => void;
134 | 	}>();
135 | 
136 | 	let overlayEl: HTMLDivElement | null = null;
137 | 	let mutationObserver: MutationObserver | null = null;
138 | 	let cache = new WeakMap<Node, Highlight>();
139 | 	let activeHighlights = new Set<Highlight>();
140 | 	let scrollFrame: number = 0;
141 | 
142 | 	function highlightNode(element: Node, why: string) {
143 | 		let existing = cache.get(element);
144 | 
145 | 		if (!existing) {
146 | 			existing = new Highlight(element);
147 | 			cache.set(element, existing);
148 | 		}
149 | 
150 | 		existing.notify(why);
151 | 	}
152 | 
153 | 	function handleScroll() {
154 | 		cancelAnimationFrame(scrollFrame);
155 | 		scrollFrame = requestAnimationFrame(() => {
156 | 			activeHighlights.forEach((highlight) => {
157 | 				highlight.updatePosition();
158 | 			});
159 | 		});
160 | 	}
161 | 
162 | 	onMount(() => {
163 | 		// Create overlay container
164 | 		overlayEl = document.createElement('div');
165 | 		overlayEl.classList.add('render-perf__container');
166 | 		document.body.appendChild(overlayEl);
167 | 
168 | 		// Setup mutation observer
169 | 		mutationObserver = new MutationObserver((mutationList) => {
170 | 			for (let mutation of mutationList) {
171 | 				if (mutation.target instanceof Element) {
172 | 					let shouldIgnore = mutation.target.getAttribute('class')?.includes('render-perf__');
173 | 
174 | 					if (shouldIgnore) {
175 | 						continue;
176 | 					}
177 | 				}
178 | 
179 | 				switch (mutation.type) {
180 | 					case 'attributes':
181 | 						highlightNode(mutation.target, 'attribute changed');
182 | 						break;
183 | 					case 'childList':
184 | 						highlightNode(mutation.target, 'children changed');
185 | 						break;
186 | 					case 'characterData':
187 | 						highlightNode(mutation.target, 'text changed');
188 | 						break;
189 | 					default:
190 | 						console.log(`Unhandled mutation type: ${mutation.type}`);
191 | 				}
192 | 				if (callback) callback(mutation);
193 | 			}
194 | 		});
195 | 
196 | 		mutationObserver.observe(document.body, {
197 | 			subtree: true,
198 | 			childList: true,
199 | 			attributes: true,
200 | 			characterData: true
201 | 		});
202 | 
203 | 		// Add scroll listener
204 | 		window.addEventListener('scroll', handleScroll, { passive: true });
205 | 
206 | 		return () => {
207 | 			mutationObserver?.disconnect();
208 | 			overlayEl?.remove();
209 | 
210 | 			if (window) {
211 | 				window.removeEventListener('scroll', handleScroll);
212 | 			}
213 | 
214 | 			cancelAnimationFrame(scrollFrame);
215 | 			mutationObserver = null;
216 | 			overlayEl = null;
217 | 			cache = new WeakMap();
218 | 			activeHighlights.clear();
219 | 		};
220 | 	});
221 | </script>
222 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { onMount } from 'svelte';
  3 | 	import Eye from '$lib/components/Logo.svelte';
  4 | 	import pkg from '../../package.json' assert { type: 'json' };
  5 | 	import RenderScan from '$lib/components/RenderScan.svelte';
  6 | 
  7 | 	// Interactive demo state
  8 | 	let highlightColor = $state('#2189b5'); // Changed to Sea Green
  9 | 	let mounted = $state(false);
 10 | 	let boxes = $state<number[]>([]);
 11 | 	let maxBoxes = 3;
 12 | 	let isAnimating = $state(false);
 13 | 	let logoVisible = $state(false);
 14 | 
 15 | 	// Animate logo after a small delay when component mounts
 16 | 	onMount(() => {
 17 | 		// Delay the mounting of the render-scan component to avoid a flash on load
 18 | 		setTimeout(() => {
 19 | 			mounted = true;
 20 | 		}, 100);
 21 | 		logoVisible = true;
 22 | 	});
 23 | 
 24 | 	// Calculate text color based on background brightness
 25 | 	function calculateBrightness(hexColor: string): number {
 26 | 		// Remove # if present
 27 | 		const color = hexColor.replace('#', '');
 28 | 		const r = parseInt(color.substring(0, 2), 16);
 29 | 		const g = parseInt(color.substring(2, 4), 16);
 30 | 		const b = parseInt(color.substring(4, 6), 16);
 31 | 		// Calculate perceived brightness using relative luminance
 32 | 		return (r * 299 + g * 587 + b * 114) / 1000;
 33 | 	}
 34 | 
 35 | 	let textColor = $derived.by(() => {
 36 | 		const brightness = calculateBrightness(highlightColor);
 37 | 		return brightness > 128 ? '#000000' : '#FFFFFF';
 38 | 	});
 39 | 
 40 | 	async function demonstrateRendering() {
 41 | 		if (isAnimating) return;
 42 | 		isAnimating = true;
 43 | 		boxes = [0]; // Start with first box immediately
 44 | 		// Add remaining boxes one by one with a delay
 45 | 		for (let i = 1; i < maxBoxes; i++) {
 46 | 			await new Promise((resolve) => setTimeout(resolve, 800));
 47 | 			boxes = [...boxes, i];
 48 | 		}
 49 | 		isAnimating = false;
 50 | 	}
 51 | 
 52 | 	// Installation options
 53 | 	const installers = [
 54 | 		{ name: 'NPM', cmd: 'npm install -D svelte-render-scan' },
 55 | 		{ name: 'PNPM', cmd: 'pnpm install -D svelte-render-scan' },
 56 | 		{ name: 'Yarn', cmd: 'yarn add -D svelte-render-scan' },
 57 | 		{ name: 'Bun', cmd: 'bun add svelte-render-scan -d' }
 58 | 	];
 59 | 	let installer = $state(installers[0].name);
 60 | 
 61 | 	// Demo code snippet
 62 | 	const demoCode = `<script>
 63 |   import { RenderScan } from 'svelte-render-scan';
 64 | <\/script>
 65 | 
 66 | <RenderScan />
 67 | `;
 68 | 
 69 | 	const demoSvelteKitCode = `<script>
 70 | 	import { dev } from '$app/environment';
 71 | 	import { RenderScan } from 'svelte-render-scan';
 72 | <\/script>
 73 | 
 74 | {#if dev}
 75 | 	<RenderScan />
 76 | {/if}`;
 77 | 	// Advanced usage code snippets
 78 | 	const advancedCode = {
 79 | 		disable: `<RenderScan initialEnabled={false} />`,
 80 | 		offset: `<RenderScan offsetLeft={60} />`,
 81 | 		combined: `<RenderScan 
 82 |   initialEnabled={false}
 83 |   offsetLeft={60}
 84 | />`
 85 | 	};
 86 | 	// Callback usage code snippet
 87 | 	const callbackCode = `function customCallback(mutation: MutationRecord) {
 88 | 	// Custom code...
 89 | }
 90 | 
 91 | <RenderScan callback={customCallback} />`;
 92 | </script>
 93 | 
 94 | <div class="border-b-4 bg-[#faf6f4] py-12">
 95 | 	<div class="container mx-auto flex max-w-xl flex-col items-center text-center">
 96 | 		<!-- Logo Eye Icon -->
 97 | 		<div
 98 | 			class="mb-4 transition-all duration-700"
 99 | 			class:opacity-0={!logoVisible}
100 | 			class:translate-y-4={!logoVisible}
101 | 			style:color={highlightColor}
102 | 		>
103 | 			<Eye
104 | 				size={128}
105 | 				class="animate-[spin_1s_ease-in-out] hover:animate-[spin_1s_ease-in-out]"
106 | 				strokeWidth={1.5}
107 | 			/>
108 | 		</div>
109 | 
110 | 		<div
111 | 			class="mb-10 flex flex-col items-center space-y-3 text-white md:flex-row md:space-x-3 md:space-y-0"
112 | 		>
113 | 			<div
114 | 				class="-rotate-2 rounded-xl bg-[#322f35] p-4 text-xl font-extrabold uppercase tracking-widest shadow-lg md:text-2xl"
115 | 			>
116 | 				Svelte
117 | 			</div>
118 | 			<div
119 | 				class="rotate-3 rounded-xl p-4 text-xl font-extrabold uppercase tracking-widest shadow-lg md:text-2xl"
120 | 				style="background-color: {highlightColor}; color: {textColor}"
121 | 			>
122 | 				Render
123 | 			</div>
124 | 			<div
125 | 				class="-rotate-2 rounded-xl bg-[#322f35] p-4 text-xl font-extrabold uppercase tracking-widest shadow-lg md:text-2xl"
126 | 			>
127 | 				Scan
128 | 			</div>
129 | 		</div>
130 | 		<h1 class="text-3xl font-bold md:text-5xl">Visual debugging for Svelte apps</h1>
131 | 		<p class="mxy-4 mt-10 max-w-prose px-4 py-2 text-lg md:text-xl">
132 | 			Watch your components update in real-time. Perfect for debugging reactivity and performance
133 | 			issues.
134 | 		</p>
135 | 
136 | 		<!-- Interactive Demo Section -->
137 | 		<div class="px-4 sm:px-0">
138 | 			<div class="mt-10 w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
139 | 				<h2 class="mb-4 text-lg font-bold">See DOM Updates Live</h2>
140 | 				<p class="mb-6 italic text-gray-600">
141 | 					Try switching the highlight colors on this page below!
142 | 				</p>
143 | 
144 | 				<div class="space-y-6">
145 | 					<!-- Color Picker -->
146 | 					<div class="flex items-center justify-between">
147 | 						<label for="highlight-color" class="font-medium">Page Highlight Color</label>
148 | 						<input type="color" id="highlight-color" bind:value={highlightColor} class="h-8 w-12" />
149 | 					</div>
150 | 
151 | 					<!-- Demo Section -->
152 | 					<div class="space-y-4">
153 | 						<div class="flex justify-center">
154 | 							<button
155 | 								onclick={demonstrateRendering}
156 | 								disabled={isAnimating}
157 | 								class="flex items-center space-x-2 rounded-xl border-2 border-amber-400 bg-amber-300 px-5 py-2 text-lg font-bold shadow transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
158 | 							>
159 | 								<svg
160 | 									xmlns="http://www.w3.org/2000/svg"
161 | 									class="h-5 w-5"
162 | 									viewBox="0 0 20 20"
163 | 									fill="currentColor"
164 | 								>
165 | 									<path
166 | 										fill-rule="evenodd"
167 | 										d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
168 | 										clip-rule="evenodd"
169 | 									/>
170 | 								</svg>
171 | 								<span>See it in action</span>
172 | 							</button>
173 | 						</div>
174 | 						<!-- Demo Boxes -->
175 | 						<div class="flex justify-center space-x-4">
176 | 							{#each boxes as box (box)}
177 | 								<div
178 | 									class="h-16 w-16 rounded-lg transition-all duration-300"
179 | 									style="background-color: {highlightColor}"
180 | 								></div>
181 | 							{/each}
182 | 						</div>
183 | 					</div>
184 | 				</div>
185 | 			</div>
186 | 		</div>
187 | 
188 | 		<div class="mt-10 grid grid-cols-1 gap-4 self-stretch font-medium sm:grid-cols-3">
189 | 			{#each ['Track DOM Updates', 'Debug Re-renders', 'Visual Feedback'] as feature}
190 | 				<div
191 | 					class="flex items-center justify-center space-x-2 text-center sm:justify-start sm:text-left"
192 | 				>
193 | 					<svg
194 | 						xmlns="http://www.w3.org/2000/svg"
195 | 						width="24"
196 | 						height="24"
197 | 						viewBox="0 0 24 24"
198 | 						fill="none"
199 | 						stroke={highlightColor}
200 | 						stroke-width="2"
201 | 						stroke-linecap="round"
202 | 						stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg
203 | 					>
204 | 					<p>{feature}</p>
205 | 				</div>
206 | 			{/each}
207 | 		</div>
208 | 	</div>
209 | </div>
210 | 
211 | <div class="container mx-auto max-w-2xl px-4 py-10">
212 | 	<section>
213 | 		<div class="mb-4 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
214 | 			<p class="text-xl font-bold">Install</p>
215 | 			<div class="space-x-1">
216 | 				{#each installers as i}
217 | 					<label for={i.name} class:checked={i.name === installer}>
218 | 						<input
219 | 							type="radio"
220 | 							id={i.name}
221 | 							name="installers"
222 | 							value={i.name}
223 | 							bind:group={installer}
224 | 						/>
225 | 						<span
226 | 							style="background-color: {i.name === installer
227 | 								? highlightColor
228 | 								: ''}; color: {i.name === installer ? textColor : ''}">{i.name}</span
229 | 						>
230 | 					</label>
231 | 				{/each}
232 | 			</div>
233 | 		</div>
234 | 		{#each installers as i}
235 | 			<div class:hidden={installer !== i.name}>
236 | 				<div class="code-block">{i.cmd}</div>
237 | 			</div>
238 | 		{/each}
239 | 	</section>
240 | 
241 | 	<section class="mt-10">
242 | 		<p class="mb-4 text-xl font-bold">SvelteKit</p>
243 | 		<p class="mb-4">Add to your root +layout.svelte file to enable the component in all pages:</p>
244 | 		<div class="code-block">{demoSvelteKitCode}</div>
245 | 	</section>
246 | 
247 | 	<section class="mt-10">
248 | 		<p class="mb-4 text-xl font-bold">Vanilla Svelte</p>
249 | 		<div class="code-block">{demoCode}</div>
250 | 	</section>
251 | 
252 | 	<section class="mt-16">
253 | 		<h2 class="mb-6 text-xl font-bold">Advanced Usage</h2>
254 | 
255 | 		<div class="space-y-8">
256 | 			<div>
257 | 				<h3 class="mb-2 font-bold">Start Disabled</h3>
258 | 				<p class="mb-3 text-gray-600">Start with render scanning disabled by default:</p>
259 | 				<div class="code-block">{advancedCode.disable}</div>
260 | 			</div>
261 | 
262 | 			<div>
263 | 				<h3 class="mb-2 font-bold">Adjust Position</h3>
264 | 				<p class="mb-3 text-gray-600">
265 | 					Move the button left to avoid overlapping with other UI elements:
266 | 				</p>
267 | 				<div class="code-block">{advancedCode.offset}</div>
268 | 			</div>
269 | 
270 | 			<div>
271 | 				<h3 class="mb-2 font-bold">Hide Icon</h3>
272 | 				<p class="mb-3 text-gray-600">
273 | 					Hide the render scan button while keeping functionality active:
274 | 				</p>
275 | 				<div class="code-block">{`<RenderScan hideIcon={true} />`}</div>
276 | 			</div>
277 | 
278 | 			<div>
279 | 				<h3 class="mb-2 font-bold">Highlight Duration</h3>
280 | 				<p class="mb-3 text-gray-600">
281 | 					Adjust how long the render scan highlights remain on screen (default=1000):
282 | 				</p>
283 | 				<div class="code-block">{`<RenderScan duration={2000} />`}</div>
284 | 			</div>
285 | 
286 | 			<div>
287 | 				<h3 class="mb-2 font-bold">Callback Function</h3>
288 | 				<p class="mb-3 text-gray-600">
289 | 					Optional user defined function that gets called once per valid mutation:
290 | 				</p>
291 | 				<div class="code-block">{callbackCode}</div>
292 | 			</div>
293 | 
294 | 			<div>
295 | 				<h3 class="mb-2 font-bold">Combined Props</h3>
296 | 				<p class="mb-3 text-gray-600">Use multiple props together:</p>
297 | 				<div class="code-block">{advancedCode.combined}</div>
298 | 			</div>
299 | 		</div>
300 | 	</section>
301 | 
302 | 	<p class="mb-2 mt-24 text-center">
303 | 		<a href="https://github.com/khromov/svelte-render-scan" class="underline">GitHub</a>
304 | 	</p>
305 | 	<p class="text-center text-gray-500">
306 | 		© {new Date().getFullYear()} svelte-render-scan · Version {pkg.version}
307 | 	</p>
308 | 
309 | 	{#if mounted}
310 | 		<RenderScan callback={(m) => console.debug('Mutation observed!', m.type)} duration={1000} />
311 | 	{/if}
312 | </div>
313 | 
314 | <style lang="postcss">
315 | 	.code-block {
316 | 		@apply block w-full overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-gray-100 p-5 font-mono text-sm;
317 | 	}
318 | 
319 | 	input[type='radio'] {
320 | 		@apply hidden appearance-none;
321 | 	}
322 | 
323 | 	label {
324 | 		cursor: pointer;
325 | 		@apply rounded-full px-3 py-1;
326 | 	}
327 | 
328 | 	label.checked {
329 | 		@apply font-bold;
330 | 	}
331 | 
332 | 	label.checked span {
333 | 		@apply rounded-full px-3 py-1;
334 | 	}
335 | 
336 | 	input[type='color'] {
337 | 		@apply cursor-pointer rounded border border-gray-200;
338 | 	}
339 | 
340 | 	:global(.animate-\[spin_1s_ease-in-out\]) {
341 | 		animation: spin 1s ease-in-out;
342 | 	}
343 | 
344 | 	@keyframes spin {
345 | 		0% {
346 | 			transform: rotate(0deg);
347 | 		}
348 | 		100% {
349 | 			transform: rotate(360deg);
350 | 		}
351 | 	}
352 | </style>
353 | 


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