fix: bump package versions to 0.1.2 and enhance effectStyles with better gradient border support

Author: snwolak

package.json

@@ -1,7 +1,7 @@
 {
   "name": "protohiro-effects-monorepo",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Zero-wrapper React CSS effects engine.",
   "packageManager": "pnpm@9.15.0",
   "scripts": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protohiro/effects-core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Core runtime utilities for ProtoEffects CSS-first effects.",
   "license": "MIT",
   "type": "module",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protohiro/effects",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Zero-wrapper React hooks for composable CSS effects.",
   "license": "MIT",
   "type": "module",

packages/react/src/shared/effectStyles.ts

@@ -1,11 +1,42 @@
 export const EFFECT_STYLES = `
 .pe-gradient-border {
   position: relative;
+  isolation: isolate;
   border-radius: var(--pe-gb-radius, inherit);
-  border: var(--pe-gb-thickness, 2px) solid transparent;
-  background:
-    linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,
-    linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;
+  border-color: transparent;
+}
+
+.pe-gradient-border::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: calc(var(--pe-gb-thickness, 2px) * -1);
+  border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
+  box-sizing: border-box;
+  padding: var(--pe-gb-thickness, 2px);
+  background: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9));
+  pointer-events: none;
+
+  /* Hollow out the center so only the ring remains. */
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
+  .pe-gradient-border::before {
+    z-index: -1;
+    inset: calc(var(--pe-gb-thickness, 2px) * -1);
+    border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
+    padding: 0;
+    border: var(--pe-gb-thickness, 2px) solid;
+    border-image: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) 1;
+  }
 }
 
 .pe-glow {