@mayson-org/inject-script 1.0.11 → 1.0.13

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,CAkLvD"}
+{"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

@@ -92,7 +92,7 @@ export function MaysonInstallPrompt() {
     alignItems: 'center',
     gap: 8,
     maxWidth: 'calc(100% - 2rem)',
-    padding: '4px 8px',
+    padding: '6px 12px',
     borderRadius: 6,
     background: '#171718',
     border: '0.6px solid #46454866',
@@ -110,6 +110,17 @@ export function MaysonInstallPrompt() {
     whiteSpace: 'nowrap',
   };
 
+  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',
     alignItems: 'center',
@@ -117,17 +128,16 @@ export function MaysonInstallPrompt() {
     cursor: 'pointer',
     outline: 'none',
     border: 'none',
-    borderRadius: 4,
-    background: '#fafafa',
-    color: '#171718',
-    padding: '2px 8px',
+    borderRadius: 3,
+    background: '#171718',
+    color: '#FFFFFF',
+    padding: '2px 6px',
     margin: 0,
     fontFamily: 'inherit',
     fontSize: 12,
     fontWeight: 500,
     lineHeight: '14px',
     whiteSpace: 'nowrap',
-    flexShrink: 0,
   };
 
   const dismissStyle: React.CSSProperties = {
@@ -149,6 +159,18 @@ export function MaysonInstallPrompt() {
 
   return (
     <div role="group" aria-label="Install app" style={shellStyle}>
+      <style>{\`
+        @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>
       {showIOSHint ? (
         <p style={{ ...labelStyle, whiteSpace: 'normal', lineHeight: '16px' }}>
           To install: tap Share in Safari, then &quot;Add to Home Screen&quot;.
@@ -160,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.11",
+  "version": "1.0.13",
   "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",