@mayson-org/inject-script 1.0.9 → 1.0.11

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

@@ -1,3 +1,3 @@
-/** Source for MaysonInstallPrompt — inline styles, host-shell ?pwa_install=1 contract. */
+/** Source for MaysonInstallPrompt — same visual language as MaysonWatermark. */
 export declare function buildMaysonInstallPromptSource(): string;
 //# sourceMappingURL=install-prompt.d.ts.map

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,0FAA0F;AAC1F,wBAAgB,8BAA8B,IAAI,MAAM,CAwLvD"}
+{"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"}

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

@@ -1,8 +1,8 @@
-/** Source for MaysonInstallPrompt — inline styles, host-shell ?pwa_install=1 contract. */
+/** Source for MaysonInstallPrompt — same visual language as MaysonWatermark. */
 export function buildMaysonInstallPromptSource() {
     return `'use client';
 
-import { useEffect, useState, type CSSProperties } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const DISMISS_KEY = 'mayson-pwa-install-dismissed';
 
@@ -60,12 +60,16 @@ export function MaysonInstallPrompt() {
 
   if (!visible) return null;
 
-  const dismiss = () => {
+  const dismiss = (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     localStorage.setItem(DISMISS_KEY, '1');
     setVisible(false);
   };
 
-  const install = async () => {
+  const install = async (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     if (deferred) {
       await deferred.prompt();
       const { outcome } = await deferred.userChoice;
@@ -78,107 +82,97 @@ export function MaysonInstallPrompt() {
     }
   };
 
-  const showDismiss = !showIOSHint && !showBrowserHint;
-  const cornerMask = showDismiss
-    ? 'radial-gradient(circle 20px at 100% 0, transparent 16px, #000 17px)'
-    : undefined;
-
-  const shellStyle: CSSProperties = {
+  const shellStyle: React.CSSProperties = {
     position: 'fixed',
-    bottom: 16,
+    top: 16,
     left: '50%',
-    zIndex: 50,
-    width: 'calc(100% - 2rem)',
-    maxWidth: 384,
+    zIndex: 2147483646,
     transform: 'translateX(-50%)',
-  };
-
-  const cardStyle: CSSProperties = {
-    borderRadius: 24,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    maxWidth: 'calc(100% - 2rem)',
+    padding: '4px 8px',
+    borderRadius: 6,
     background: '#171718',
     border: '0.6px solid #46454866',
     boxShadow: '0px 8px 12px 6px #00000026',
-    padding: '12px 20px',
-    color: '#9D9DA2',
     fontFamily: '"Google Sans", system-ui, -apple-system, sans-serif',
-    fontSize: 14,
-    lineHeight: 1.4,
-    ...(cornerMask
-      ? { maskImage: cornerMask, WebkitMaskImage: cornerMask }
-      : {}),
+    textTransform: 'none',
   };
 
-  const installBtnStyle: CSSProperties = {
+  const labelStyle: React.CSSProperties = {
+    color: '#9D9DA2',
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: '14px',
+    margin: 0,
+    whiteSpace: 'nowrap',
+  };
+
+  const installBtnStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     cursor: 'pointer',
-    borderRadius: 8,
+    outline: 'none',
+    border: 'none',
+    borderRadius: 4,
     background: '#fafafa',
     color: '#171718',
-    border: 'none',
-    padding: '6px 12px',
-    fontSize: 14,
-    fontWeight: 500,
+    padding: '2px 8px',
+    margin: 0,
     fontFamily: 'inherit',
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: '14px',
+    whiteSpace: 'nowrap',
     flexShrink: 0,
   };
 
-  const dismissBtnStyle: CSSProperties = {
-    position: 'absolute',
-    top: -6,
-    right: -6,
-    zIndex: 10,
-    display: 'flex',
+  const dismissStyle: React.CSSProperties = {
+    display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    fontSize: 12,
-    color: '#737373',
-    background: '#171718',
-    border: '0.6px solid #46454866',
-    borderRadius: '9999px',
+    width: 18,
+    height: 18,
     padding: 0,
+    border: 'none',
+    background: 'transparent',
+    color: '#9D9DA2',
+    fontSize: 16,
+    lineHeight: 1,
+    cursor: 'pointer',
+    flexShrink: 0,
+    fontFamily: 'inherit',
   };
 
   return (
-    <div style={shellStyle}>
-      <div style={cardStyle}>
-        {showIOSHint ? (
-          <p style={{ margin: 0 }}>
-            To install: tap the &quot;Share&quot; button in Safari, then choose &quot;Add to
-            Home Screen&quot;.
-          </p>
-        ) : showBrowserHint ? (
-          <p style={{ margin: 0 }}>
-            To install: open your browser menu (⋮) and choose &quot;Install app&quot; or
-            &quot;Add to Home Screen&quot;
-          </p>
-        ) : (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              gap: 12,
-            }}
-          >
-            <p style={{ margin: 0 }}>Install this app on your device</p>
-            <button type="button" onClick={install} style={installBtnStyle}>
-              Install
-            </button>
-          </div>
-        )}
-      </div>
-      {showDismiss && (
-        <button
-          type="button"
-          onClick={dismiss}
-          aria-label="Dismiss install prompt"
-          style={dismissBtnStyle}
-        >
-          ✕
-        </button>
+    <div role="group" aria-label="Install app" style={shellStyle}>
+      {showIOSHint ? (
+        <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, whiteSpace: 'normal', lineHeight: '16px' }}>
+          To install: open your browser menu (⋮) and choose &quot;Install app&quot;.
+        </p>
+      ) : (
+        <>
+          <span style={labelStyle}>Install this app on your device</span>
+          <button type="button" onClick={install} style={installBtnStyle}>
+            Install
+          </button>
+        </>
       )}
+      <button
+        type="button"
+        aria-label="Dismiss install prompt"
+        onClick={dismiss}
+        style={dismissStyle}
+      >
+        &times;
+      </button>
     </div>
   );
 }

package/package.json

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