@widgetic/design-system 0.5.8 → 0.5.10

package/dist/components/GenerateLoader.svelte

@@ -12,7 +12,7 @@
 	/** Optional secondary line; pass empty string to hide */
 	export let subtitle = 'Preview will appear when done.';
 	export let size: 'sm' | 'md' | 'lg' = 'md';
-	/** Absolute overlay with light backdrop (e.g. over preview iframe) */
+	/** Absolute overlay with opaque backdrop so idle placeholders cannot show through */
 	export let overlay = false;
 
 	const hourglassSizeClass: Record<typeof size, string> = {
@@ -30,7 +30,7 @@
 
 <div
 	class="wc-generate-loader {overlay
-		? 'wc-generate-loader-overlay absolute inset-0 z-30 flex flex-col items-center justify-center bg-white/75 pointer-events-none'
+		? 'wc-generate-loader-overlay absolute inset-0 z-30 flex flex-col items-center justify-center bg-white pointer-events-none'
 		: 'wc-generate-loader-inline flex flex-col items-center justify-center text-center'} {className}"
 	style={style}
 	role="status"

package/dist/components/GenerateLoader.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         /** Primary status line */ title?: string;
         /** Optional secondary line; pass empty string to hide */ subtitle?: string;
         size?: "sm" | "md" | "lg";
-        /** Absolute overlay with light backdrop (e.g. over preview iframe) */ overlay?: boolean;
+        /** Absolute overlay with opaque backdrop so idle placeholders cannot show through */ overlay?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/debug-grid/DebugGrid.svelte

@@ -68,10 +68,23 @@
     };
   });
 
+  function isTypingShortcutTarget(event: KeyboardEvent): boolean {
+    const target = event.target as HTMLElement | null;
+    if (!target) return false;
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
+  }
+
   function handleKeydown(event: KeyboardEvent) {
-    // Only in development mode
+    // Ctrl/Cmd+Shift+G — Shift+G alone types capital G in text fields
     if (process.env.NODE_ENV !== 'production') {
-      if (event.shiftKey && event.key.toLowerCase() === 'g') {
+      if (
+        event.shiftKey
+        && (event.metaKey || event.ctrlKey)
+        && event.key.toLowerCase() === 'g'
+        && !isTypingShortcutTarget(event)
+      ) {
+        event.preventDefault();
         shouldShow = !shouldShow;
       }
     }

package/dist/components/toast/ToasterModal.svelte

@@ -125,10 +125,21 @@ export function showToast(type: string = 'success', title: string, options: any
       // Close Button Styling
       closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !left-[-4px] z-10 ' + 
                                     '!flex !items-center !justify-center ' +
-                                    '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white'
+                                    '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white ' +
+                                    '[&_svg]:!text-white [&_svg]:!fill-white [&_svg]:!stroke-white'
     }
   }}
   expand={false}
   visibleToasts={1}
   offset="1rem"
-/>
+/>
+
+<style>
+  /* svelte-sonner close SVG ignores button `color` / Tailwind text-white. */
+  :global(.toast-modal-close-button svg),
+  :global(.toast-modal-close-button path) {
+    color: #ffffff !important;
+    fill: #ffffff !important;
+    stroke: #ffffff !important;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.8",
+	"version": "0.5.10",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",