feat: add element-inspector

- Implemented Rulers component for zoom/pan-aware rulers on canvas.
- Created Stage component to serve as a zoomable and pannable viewport for the device frame.
- Developed Toolbar component for responsive controls, including device presets and zoom functionalities.
- Introduced useFrame composable to manage iframe interactions and inspections.
- Established a reactive store to manage application state, including guides and viewport dimensions.
- Added utility functions for color parsing and box model calculations.
- Integrated Tailwind CSS for styling and improved scrollbar aesthetics.
- Implemented unit tests for color utilities and rectangle calculations.
- Configured TypeScript and Vite for the project setup.

element-inspector/manifest.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 3,
+  "name": "Element Inspector",
+  "version": "0.0.0",
+  "description": "Isolate any page element on a clean canvas and inspect its sizes, colors, spacing and responsive behavior.",
+  "action": {
+    "default_title": "Inspect element (Alt+Shift+E)"
+  },
+  "background": {
+    "service_worker": "src/background.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["src/content/main.ts"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "permissions": ["activeTab"],
+  "commands": {
+    "activate-picker": {
+      "suggested_key": {
+        "default": "Alt+Shift+E",
+        "mac": "Alt+Shift+E"
+      },
+      "description": "Pick an element to inspect"
+    }
+  }
+}