@mayson-org/inject-script 1.0.12 → 1.0.14

package/dist/plugins/pwa/templates/install-prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"install-prompt.d.ts","sourceRoot":"","sources":["../../../../src/plugins/pwa/templates/install-prompt.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,wBAAgB,8BAA8B,IAAI,MAAM,CAqMvD"}
+{"version":3,"file":"install-prompt.d.ts","sourceRoot":"","sources":["../../../../src/plugins/pwa/templates/install-prompt.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,wBAAgB,8BAA8B,IAAI,MAAM,CA0MvD"}

package/dist/plugins/pwa/templates/install-prompt.js

@@ -110,8 +110,16 @@ export function MaysonInstallPrompt() {
     whiteSpace: 'nowrap',
   };
 
-  const installGradient =
-    'radial-gradient(100% 100% at 0% 0%, #DBD0F8 0%, #A39FF9 16.24%, #8030F8 29.79%, #AE63FF 45.09%, #A828E8 59.87%, #A39FF9 79.85%, #4500A3 99.46%)';
+  const installRingStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    flexShrink: 0,
+    padding: 1,
+    borderRadius: 4,
+    background:
+      'conic-gradient(from var(--mayson-pwa-install-angle, 0deg), #DBD0F8 0%, #A39FF9 16.24%, #8030F8 29.79%, #AE63FF 45.09%, #A828E8 59.87%, #A39FF9 79.85%, #4500A3 99.46%, #DBD0F8 100%)',
+    boxShadow: '0 0 3px 0 #ae63ff55',
+    animation: 'mayson-pwa-install-border-spin 2s linear infinite',
+  };
 
   const installBtnStyle: React.CSSProperties = {
     display: 'inline-flex',
@@ -119,20 +127,17 @@ export function MaysonInstallPrompt() {
     justifyContent: 'center',
     cursor: 'pointer',
     outline: 'none',
-    border: '2px solid transparent',
-    borderImageSource: installGradient,
-    borderImageSlice: 1,
-    background: 'transparent',
+    border: 'none',
+    borderRadius: 3,
+    background: '#171718',
     color: '#FFFFFF',
-    padding: '4px 8px',
+    padding: '2px 12px',
     margin: 0,
     fontFamily: 'inherit',
     fontSize: 12,
     fontWeight: 500,
     lineHeight: '14px',
     whiteSpace: 'nowrap',
-    flexShrink: 0,
-    animation: 'mayson-pwa-install-glow 2.4s ease-in-out infinite',
   };
 
   const dismissStyle: React.CSSProperties = {
@@ -155,16 +160,14 @@ export function MaysonInstallPrompt() {
   return (
     <div role="group" aria-label="Install app" style={shellStyle}>
       <style>{\`
-        @keyframes mayson-pwa-install-glow {
-          0%, 100% {
-            box-shadow:
-              0 0 4px 0 #ae63ff66,
-              0 0 8px 0 #8030f844;
-          }
-          50% {
-            box-shadow:
-              0 0 8px 2px #a828e8aa,
-              0 0 16px 2px #a39ff988;
+        @property --mayson-pwa-install-angle {
+          syntax: '<angle>';
+          initial-value: 0deg;
+          inherits: false;
+        }
+        @keyframes mayson-pwa-install-border-spin {
+          to {
+            --mayson-pwa-install-angle: 360deg;
           }
         }
       \`}</style>
@@ -179,9 +182,11 @@ export function MaysonInstallPrompt() {
       ) : (
         <>
           <span style={labelStyle}>Install this app on your device</span>
-          <button type="button" onClick={install} style={installBtnStyle}>
-            Install
-          </button>
+          <span style={installRingStyle}>
+            <button type="button" onClick={install} style={installBtnStyle}>
+              Install
+            </button>
+          </span>
         </>
       )}
       <button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mayson-org/inject-script",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "CLI and library to inject Mayson watermark, ascii, and PWA into Next.js App Router layouts.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",