@mayson-org/inject-script 1.0.10 → 1.0.12

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

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

@@ -84,15 +84,15 @@ export function MaysonInstallPrompt() {
 
   const shellStyle: React.CSSProperties = {
     position: 'fixed',
+    top: 16,
     left: '50%',
-    bottom: 16,
     zIndex: 2147483646,
     transform: 'translateX(-50%)',
     display: 'inline-flex',
-    alignItems: 'flex-end',
+    alignItems: 'center',
     gap: 8,
     maxWidth: 'calc(100% - 2rem)',
-    padding: '4px 8px',
+    padding: '6px 12px',
     borderRadius: 6,
     background: '#171718',
     border: '0.6px solid #46454866',
@@ -107,25 +107,32 @@ export function MaysonInstallPrompt() {
     fontWeight: 500,
     lineHeight: '14px',
     margin: 0,
+    whiteSpace: 'nowrap',
   };
 
-  const actionStyle: React.CSSProperties = {
+  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 installBtnStyle: React.CSSProperties = {
     display: 'inline-flex',
     alignItems: 'center',
-    gap: 4,
-    color: '#9D9DA2',
-    textDecoration: 'none',
+    justifyContent: 'center',
     cursor: 'pointer',
     outline: 'none',
-    border: 'none',
+    border: '2px solid transparent',
+    borderImageSource: installGradient,
+    borderImageSlice: 1,
     background: 'transparent',
-    padding: 0,
+    color: '#FFFFFF',
+    padding: '4px 8px',
     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 = {
@@ -147,18 +154,35 @@ 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;
+          }
+        }
+      \`}</style>
       {showIOSHint ? (
-        <p style={{ ...labelStyle, lineHeight: '16px', whiteSpace: 'normal' }}>
+        <p style={{ ...labelStyle, whiteSpace: 'normal', lineHeight: '16px' }}>
           To install: tap Share in Safari, then &quot;Add to Home Screen&quot;.
         </p>
       ) : showBrowserHint ? (
-        <p style={{ ...labelStyle, lineHeight: '16px', whiteSpace: 'normal' }}>
+        <p style={{ ...labelStyle, whiteSpace: 'normal', lineHeight: '16px' }}>
           To install: open your browser menu (⋮) and choose &quot;Install app&quot;.
         </p>
       ) : (
-        <button type="button" onClick={install} style={actionStyle}>
-          Install app
-        </button>
+        <>
+          <span style={labelStyle}>Install this app on your device</span>
+          <button type="button" onClick={install} style={installBtnStyle}>
+            Install
+          </button>
+        </>
       )}
       <button
         type="button"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mayson-org/inject-script",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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",