Merge pull request #1 from akcyp/ide-look

IDE look

Author: akcyp

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-bun run precommit
+bun x biome check --write --staged

README.md

@@ -3,9 +3,10 @@
 > [!WARNING]
 > This package is still in the experimental phase. You can expect new functionalities, but with this comes the possibility of more frequent errors
 
-Directory summary (light theme) |  File coverage (dark theme)
-:------------------------------:|:----------------------------:
-![Summary](images/summary.png)  | ![Coverage](images/file.png)
+Home | Stats | Code
+:----:|:---:|:---:
+![Summary](images/home-dark.png) | ![Stats](images/stats-dark.png)  | ![Coverage](images/code-dark.png)
+![Summary](images/home-light.png) | ![Stats](images/stats-light.png)  | ![Coverage](images/code-light.png)
 
 ## Installation
 
@@ -45,17 +46,50 @@ export default defineConfig({
 });
 ```
 
-## Reading coverage report
+## Iframe - theme support
 
-`coverage-pretty-html-reporter` does not support viewing web-page locally (via file:// protocol) (i.e. double clicking the .html file). You need to publish coverage directory on local network ex.:
+When the reporter UI is embedded in an iframe, the built-in theme toggle button is hidden. In this mode you are expected to control the theme from the parent window.
+
+The iframe listens for postMessage events with the following payload:
+
+```ts
+type CoverageThemeMessage = {
+  type: "coverage-theme";
+  theme: "light" | "dark";
+};
+```
+
+Example integration in the parent page:
+
+```html
+<iframe
+  id="coverage-report"
+  src="/path/to/coverage/index.html"
+  style="width: 100%; height: 100%; border: 0;"
+></iframe>
+
+<script>
+  const iframe = document.getElementById("coverage-report");
+
+  function setCoverageTheme(theme) {
+    iframe?.contentWindow?.postMessage({ type: "coverage-theme", theme }, "*");
+  }
+
+  // Send initial theme once the iframe is loaded
+  iframe.addEventListener("load", () => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    setCoverageTheme(prefersDark ? "dark" : "light");
+  });
+
+  // Example: hook into your own app theme system
+  window.addEventListener("app-theme-changed", (event) => {
+    setCoverageTheme(event.detail.theme); // "light" | "dark"
+  });
+<\/script>
+```
+
+Inside the iframe, the selected theme is persisted in localStorage under the coverage-theme key and a coverage-theme-changed CustomEvent is dispatched on window so internal components can react to theme changes.
 
-```sh
-# When using npm
-npx http-server ./coverage
-# When using pnpm
-pnpm dlx http-server ./coverage
-# When using bun
-bunx http-server ./coverage
 ```
 
 ## Contributing

biome.json

@@ -1,19 +1,50 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.2.2/schema.json",
-  "organizeImports": {
-    "enabled": true
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
   },
   "formatter": {
-    "indentSize": 2,
+    "enabled": true,
     "indentStyle": "space",
-    "ignore": ["**/dist", "**/node_modules", "**/coverage", "**/nyc-output"],
+    "indentWidth": 2,
     "lineWidth": 160
   },
   "linter": {
     "enabled": true,
     "rules": {
       "recommended": true
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.vue"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
     },
-    "ignore": ["**/dist", "**/node_modules", "**/coverage", "**/nyc-output"]
-  }
+    {
+      "includes": ["packages/example/**"],
+      "linter": {
+        "enabled": false
+      }
+    }
+  ]
 }