ezfw-core 1.0.77 → 1.0.78

package/components/tabs/EzTabPanel.module.scss

@@ -17,6 +17,11 @@
   background: var(--ez-surface-tertiary, #f8fafc);
   border-bottom: 1px solid var(--ez-border-primary, #e2e8f0);
 
+  @media (prefers-color-scheme: dark) {
+    background: var(--ez-surface-tertiary, #1e293b);
+    border-bottom-color: var(--ez-border-primary, #334155);
+  }
+
   // Mobile: subtle fade gradients on edges
   @media (max-width: 768px) {
     &::before,
@@ -33,11 +38,19 @@
     &::before {
       left: 0;
       background: linear-gradient(to right, var(--ez-surface-tertiary, #f8fafc), transparent);
+
+      @media (prefers-color-scheme: dark) {
+        background: linear-gradient(to right, var(--ez-surface-tertiary, #1e293b), transparent);
+      }
     }
 
     &::after {
       right: 0;
       background: linear-gradient(to left, var(--ez-surface-tertiary, #f8fafc), transparent);
+
+      @media (prefers-color-scheme: dark) {
+        background: linear-gradient(to left, var(--ez-surface-tertiary, #1e293b), transparent);
+      }
     }
   }
 }
@@ -77,6 +90,10 @@
   transition: all 0.15s ease;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--ez-text-secondary, #cbd5e1);
+  }
+
   i {
     font-size: 14px;
   }
@@ -84,6 +101,11 @@
   &:hover {
     color: var(--ez-text-primary, #1e293b);
     background: var(--ez-surface-primary, #f1f5f9);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--ez-text-primary, #f8fafc);
+      background: var(--ez-surface-primary, #334155);
+    }
   }
 }
 
@@ -98,6 +120,10 @@
   color: var(--ez-text-tertiary, #94a3b8);
   transition: all 0.15s ease;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--ez-text-tertiary, #94a3b8);
+  }
+
   i {
     font-size: 10px;
   }
@@ -105,6 +131,11 @@
   &:hover {
     background: var(--ez-danger-light, rgba(239, 68, 68, 0.1));
     color: var(--ez-danger, #dc2626);
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-danger-light, rgba(239, 68, 68, 0.15));
+      color: var(--ez-danger, #f87171);
+    }
   }
 }
 
@@ -113,6 +144,11 @@
   border-bottom-color: var(--ez-primary, #2563eb);
   background: transparent;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--ez-primary, #818cf8);
+    border-bottom-color: var(--ez-primary, #818cf8);
+  }
+
   &:hover {
     background: transparent;
   }
@@ -131,6 +167,11 @@
   border-top: none;
   border-radius: 0 0 var(--ez-radius-md, 6px) var(--ez-radius-md, 6px);
   background: var(--ez-surface-secondary, #ffffff);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--ez-border-primary, #334155);
+    background: var(--ez-surface-secondary, #0f172a);
+  }
 }
 
 .tabPane {
@@ -152,6 +193,10 @@
 .boxed {
   .tabHeaderWrapper {
     background: var(--ez-surface-secondary, #ffffff);
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-surface-secondary, #0f172a);
+    }
   }
 
   .tabHeader {
@@ -168,6 +213,10 @@
     border-radius: var(--ez-radius-md, 6px) var(--ez-radius-md, 6px) 0 0;
     border-bottom: none;
     margin-bottom: 0;
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-surface-primary, #1e293b);
+    }
   }
 
   .tabActive {
@@ -175,6 +224,12 @@
     border: 1px solid var(--ez-border-primary, #e2e8f0);
     border-bottom-color: var(--ez-surface-secondary, #ffffff);
     margin-bottom: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-surface-secondary, #0f172a);
+      border-color: var(--ez-border-primary, #334155);
+      border-bottom-color: var(--ez-surface-secondary, #0f172a);
+    }
   }
 
   .tabContent {
@@ -204,16 +259,28 @@
     border-bottom: none;
     margin-bottom: 0;
     padding: 8px 16px;
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-surface-primary, #1e293b);
+    }
   }
 
   .tabActive {
     background: var(--ez-primary, #2563eb);
     color: var(--ez-text-inverse, #ffffff);
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--ez-primary, #4f46e5);
+    }
   }
 
   .tabContent {
     border-top: 1px solid var(--ez-border-primary, #e2e8f0);
     border-radius: var(--ez-radius-md, 6px);
+
+    @media (prefers-color-scheme: dark) {
+      border-top-color: var(--ez-border-primary, #334155);
+    }
   }
 }
 
@@ -221,6 +288,10 @@
 .minimal {
   .tabHeaderWrapper {
     background: transparent;
+
+    @media (prefers-color-scheme: dark) {
+      border-bottom-color: var(--ez-border-primary, #334155);
+    }
   }
 
   .tabHeader {

package/islands/ViteIslandsPlugin.js

@@ -773,7 +773,9 @@ async function renderPageBuild(page, opts, renderer, analyzer, root, islands) {
  * Generate hydration script
  */
 function generateHydrationScript(islands, isDev, cssModules = []) {
-    const islandsJson = JSON.stringify(islands);
+    // Escape </script> to prevent breaking out of the script tag
+    // This is necessary when code examples contain </script> tags
+    const islandsJson = JSON.stringify(islands).replace(/<\/script/gi, '<\\/script');
     const cssModulesJson = JSON.stringify(cssModules);
     // In dev mode, use node_modules path (works for projects using ezfw-core from npm)
     const runtimePath = isDev ? '/node_modules/ezfw-core/islands/runtime.ts' : '/assets/islands-runtime.js';

package/islands/ViteIslandsPlugin.ts

@@ -992,7 +992,9 @@ function generateHydrationScript(
     isDev: boolean,
     cssModules: string[] = []
 ): string {
-    const islandsJson = JSON.stringify(islands);
+    // Escape </script> to prevent breaking out of the script tag
+    // This is necessary when code examples contain </script> tags
+    const islandsJson = JSON.stringify(islands).replace(/<\/script/gi, '<\\/script');
     const cssModulesJson = JSON.stringify(cssModules);
 
     // In dev mode, use node_modules path (works for projects using ezfw-core from npm)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",