@alliance-droid/status-feedback-system 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -383,9 +383,12 @@
|
|
|
383
383
|
<Spinner /> Capturing screenshot...
|
|
384
384
|
</div>
|
|
385
385
|
{:else if screenshotFailed}
|
|
386
|
-
<div class="
|
|
387
|
-
<
|
|
388
|
-
|
|
386
|
+
<div class="rounded-md border border-border bg-surface p-3">
|
|
387
|
+
<div class="flex items-center gap-2 text-sm text-foreground-secondary mb-1">
|
|
388
|
+
<i class="fa-solid fa-image-slash" aria-hidden="true"></i>
|
|
389
|
+
<span>Screenshot capture failed</span>
|
|
390
|
+
</div>
|
|
391
|
+
<p class="text-xs text-foreground-tertiary mb-2">Check console for error. May need: <code class="bg-background px-1 rounded">npm install html2canvas</code></p>
|
|
389
392
|
<button
|
|
390
393
|
class="text-xs text-primary hover:underline bg-transparent border-none cursor-pointer p-0"
|
|
391
394
|
onclick={doScreenshot}
|
|
@@ -14,11 +14,25 @@ export async function captureScreenshot() {
|
|
|
14
14
|
height: window.innerHeight,
|
|
15
15
|
windowWidth: window.innerWidth,
|
|
16
16
|
windowHeight: window.innerHeight,
|
|
17
|
+
ignoreElements: (element) => {
|
|
18
|
+
// Skip elements that might have unsupported CSS (oklab, oklch, color-mix)
|
|
19
|
+
const style = window.getComputedStyle(element);
|
|
20
|
+
const hasUnsupportedColor = [
|
|
21
|
+
style.color,
|
|
22
|
+
style.backgroundColor,
|
|
23
|
+
style.borderColor,
|
|
24
|
+
].some(color => color && (color.includes('oklab') || color.includes('oklch') || color.includes('color-mix')));
|
|
25
|
+
return hasUnsupportedColor;
|
|
26
|
+
},
|
|
17
27
|
});
|
|
18
28
|
return canvas.toDataURL('image/png');
|
|
19
29
|
}
|
|
20
|
-
catch {
|
|
21
|
-
|
|
30
|
+
catch (err) {
|
|
31
|
+
console.error('[DevFeedback] Screenshot capture failed:', err);
|
|
32
|
+
if (err instanceof Error && err.message.includes('oklab')) {
|
|
33
|
+
console.warn('[DevFeedback] Your CSS uses oklab/oklch colors which html2canvas doesn\'t support. Screenshot skipped.');
|
|
34
|
+
}
|
|
35
|
+
// html2canvas failed (unsupported CSS, cross-origin iframe, etc.)
|
|
22
36
|
return null;
|
|
23
37
|
}
|
|
24
38
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alliance-droid/status-feedback-system",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
|
|
6
6
|
"svelte": "./dist/index.js",
|
|
@@ -24,19 +24,15 @@
|
|
|
24
24
|
"test:watch": "vitest",
|
|
25
25
|
"prepublishOnly": "npm run build"
|
|
26
26
|
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"html2canvas": "^1.4.1"
|
|
29
|
+
},
|
|
27
30
|
"peerDependencies": {
|
|
28
31
|
"@alliance-droid/svelte-component-library": ">=1.0.0",
|
|
29
|
-
"html2canvas": "^1.4.1",
|
|
30
32
|
"svelte": "^5.0.0"
|
|
31
33
|
},
|
|
32
|
-
"peerDependenciesMeta": {
|
|
33
|
-
"html2canvas": {
|
|
34
|
-
"optional": true
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
34
|
"devDependencies": {
|
|
38
35
|
"@alliance-droid/svelte-component-library": "^1.0.5",
|
|
39
|
-
"html2canvas": "^1.4.1",
|
|
40
36
|
"@sveltejs/package": "^2.3.0",
|
|
41
37
|
"@sveltejs/vite-plugin-svelte": "^6.0.0",
|
|
42
38
|
"@testing-library/jest-dom": "^6.9.1",
|