@alliance-droid/status-feedback-system 1.3.2 → 1.3.4

package/dist/components/DevFeedback.svelte

@@ -284,10 +284,10 @@
 	<!-- Form modal -->
 	{#if formOpen}
 		<div
-			class="sf-modal fixed z-[99998] w-full max-w-lg flex flex-col"
+			class="sf-modal fixed w-full max-w-lg flex flex-col"
 			style={modalPositioned
-				? `left: ${modalX}px; top: ${modalY}px;`
-				: 'left: 50%; top: 50%; transform: translate(-50%, -50%);'
+				? `left: ${modalX}px; top: ${modalY}px; z-index: 99998;`
+				: 'left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99998;'
 			}
 		>
 			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">

package/dist/components/dev/DevContextMenu.svelte

@@ -32,8 +32,8 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions — context menu positioned at cursor -->
 <div
-	class="fixed z-[99999]"
-	style="left: {adjustedX}px; top: {adjustedY}px;"
+	class="fixed"
+	style="left: {adjustedX}px; top: {adjustedY}px; z-index: 99999;"
 	onmousedown={(e) => e.stopPropagation()}
 >
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->

package/dist/components/dev/DevOnboardingToast.svelte

@@ -6,7 +6,7 @@
 	let { onDismiss }: Props = $props();
 </script>
 
-<div class="fixed bottom-4 right-4 z-[99997] animate-fade-in">
+<div class="fixed bottom-4 right-4 animate-fade-in" style="z-index: 99997;">
 	<div class="sf-toast">
 		<i class="fa-solid fa-computer-mouse sf-toast-icon"></i>
 		<div>

package/dist/components/dev/screenshot.js

@@ -14,12 +14,25 @@ export async function captureScreenshot() {
             height: window.innerHeight,
             windowWidth: window.innerWidth,
             windowHeight: window.innerHeight,
+            ignoreElements: (element) => {
+                // Skip elements that might have unsupported CSS (oklab, oklch, color-mix)
+                const style = window.getComputedStyle(element);
+                const hasUnsupportedColor = [
+                    style.color,
+                    style.backgroundColor,
+                    style.borderColor,
+                ].some(color => color && (color.includes('oklab') || color.includes('oklch') || color.includes('color-mix')));
+                return hasUnsupportedColor;
+            },
         });
         return canvas.toDataURL('image/png');
     }
     catch (err) {
         console.error('[DevFeedback] Screenshot capture failed:', err);
-        // html2canvas not installed or capture failed (cross-origin iframe, etc.)
+        if (err instanceof Error && err.message.includes('oklab')) {
+            console.warn('[DevFeedback] Your CSS uses oklab/oklch colors which html2canvas doesn\'t support. Screenshot skipped.');
+        }
+        // html2canvas failed (unsupported CSS, cross-origin iframe, etc.)
         return null;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",
@@ -24,19 +24,15 @@
     "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  },
   "peerDependencies": {
     "@alliance-droid/svelte-component-library": ">=1.0.0",
-    "html2canvas": "^1.4.1",
     "svelte": "^5.0.0"
   },
-  "peerDependenciesMeta": {
-    "html2canvas": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@alliance-droid/svelte-component-library": "^1.0.5",
-    "html2canvas": "^1.4.1",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@testing-library/jest-dom": "^6.9.1",