@m1kapp/kit 0.0.51 → 0.0.53

package/README.md

@@ -557,6 +557,24 @@ npx m1kkit pwa --bg=#0f0f1a # 앱 첫 화면 색과 맞춘다(다르면 열릴
 Vite 는 `index.html` `<head>` 에 태그가 들어가고(다시 돌리면 교체), Next 는 출력된 태그를 layout 에 붙이세요.
 서비스워커는 localhost 에선 등록하지 않습니다 — 확인은 배포 뒤에.
 
+### 설치 버튼 (`PWAInstallButton` · `ShareButton install`)
+
+```tsx
+<PWAInstallButton variant="chip" label="설치" appName="환율계산기" iconSrc="/icon-192.png" />
+```
+
+설치할 수 있을 때만 보이고, 기기마다 알아서 다르게 안내합니다. 고칠 일은 kit 에서 고치고 앱은 버전만 올리면 됩니다.
+
+| 들어온 곳 | 누르면 |
+|---|---|
+| 안드로이드 크롬 · PC 크롬 | 크롬 설치 창 |
+| 아이폰 Safari | 좋은 점 + 공유 → 홈 화면에 추가 → 추가 |
+| 카카오톡 · 라인 · 안드로이드 인스타 등 | 좋은 점 + **[기본 브라우저로 열기] 한 번** → 열린 브라우저에서 다시 설치 |
+| 아이폰 인스타 · 스레드 | 좋은 점 + 그 앱 메뉴 이름대로 단계(··· → 외부 브라우저에서 열기) + 링크 복사 |
+| 이미 설치 · 지원 안 함 | 버튼이 사라짐 |
+
+앱 안 브라우저(인스타·카톡)에서는 어떤 웹앱도 바로 설치할 수 없습니다 — 플랫폼 제약이라 한 번은 바깥 브라우저로 넘어가야 합니다.
+
 갱신: 온라인으로 열면 매번 새 배포(페이지는 네트워크 먼저). 켜 둔 채 다시 켜는 앱은 돌아올 때 30분에 한 번 새 배포를 확인해 새로고침합니다.
 `sw.js` 는 배포마다 바꿀 필요가 없고, kit 을 올린 뒤 `npx m1kkit pwa` 를 다시 돌리면 그 판의 서비스워커로 바뀝니다.
 

package/dist/index.d.mts

@@ -1700,7 +1700,7 @@ interface CumulativeCurveProps {
 /** 누적 성장 곡선 + 마일스톤 배지 + 다음 목표선. 방문자·판매·적립 총량류에. */
 declare function CumulativeCurve({ daily, total, todayCount, accent, milestones, empty, className, }: CumulativeCurveProps): react_jsx_runtime.JSX.Element | null;
 
-type PWAInstallState = "android-ready" | "ios-safari" | "installed" | "unsupported";
+type PWAInstallState = "android-ready" | "ios-safari" | "in-app" | "installed" | "unsupported";
 interface UsePWAInstallReturn {
     state: PWAInstallState;
     /** Android only — triggers the native install dialog */
@@ -1713,12 +1713,17 @@ interface IOSInstallSheetProps {
     onClose(): void;
     appName: string;
     iconSrc?: string;
+    /** "in-app": 인스타·카톡 안 브라우저 — 바깥 브라우저로 여는 법을 안내한다 */
+    mode?: "safari" | "in-app";
+    /** 설치하면 뭐가 좋은지 — 이걸 먼저 보여 줘야 단계를 따라 한다 */
+    benefits?: string[];
 }
 /**
- * Bottom-sheet guide for iOS "Add to Home Screen".
- * Can also be used standalone if you need custom trigger UI.
+ * 홈 화면 추가 안내 시트 — iOS Safari 와 앱 안 브라우저(인스타·카톡 …) 둘 다.
+ * 앱 안이면 카카오톡·라인·안드로이드는 [브라우저로 열기] 한 번으로 넘기고, 안 되는 곳(iOS 인스타·스레드)은
+ * 그 앱 메뉴 이름 그대로 단계를 보여 주고 링크 복사를 붙인다.
  */
-declare function IOSInstallSheet({ open, onClose, appName, iconSrc }: IOSInstallSheetProps): React$1.ReactPortal | null;
+declare function IOSInstallSheet({ open, onClose, appName, iconSrc, mode, benefits }: IOSInstallSheetProps): React$1.ReactPortal | null;
 
 interface PWAInstallButtonProps {
     /** App name shown in iOS guide sheet */
@@ -1730,6 +1735,8 @@ interface PWAInstallButtonProps {
     /** Label shown when already installed. Default: undefined — button hidden */
     installedLabel?: string;
     className?: string;
+    /** "chip": 헤더용 — ShareButton 과 같은 연회색 알약. 기본 "solid"(검은 버튼) */
+    variant?: "solid" | "chip";
 }
 /**
  * PWA install button that handles both Android and iOS.
@@ -1742,7 +1749,7 @@ interface PWAInstallButtonProps {
  * Usage:
  *   <PWAInstallButton appName="My App" iconSrc="/icon.png" />
  */
-declare function PWAInstallButton({ appName, iconSrc, label, installedLabel, className, }: PWAInstallButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function PWAInstallButton({ appName, iconSrc, label, installedLabel, className, variant, }: PWAInstallButtonProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Drop into <head> in your root layout to pre-load kit styles and

package/dist/index.d.ts

@@ -1700,7 +1700,7 @@ interface CumulativeCurveProps {
 /** 누적 성장 곡선 + 마일스톤 배지 + 다음 목표선. 방문자·판매·적립 총량류에. */
 declare function CumulativeCurve({ daily, total, todayCount, accent, milestones, empty, className, }: CumulativeCurveProps): react_jsx_runtime.JSX.Element | null;
 
-type PWAInstallState = "android-ready" | "ios-safari" | "installed" | "unsupported";
+type PWAInstallState = "android-ready" | "ios-safari" | "in-app" | "installed" | "unsupported";
 interface UsePWAInstallReturn {
     state: PWAInstallState;
     /** Android only — triggers the native install dialog */
@@ -1713,12 +1713,17 @@ interface IOSInstallSheetProps {
     onClose(): void;
     appName: string;
     iconSrc?: string;
+    /** "in-app": 인스타·카톡 안 브라우저 — 바깥 브라우저로 여는 법을 안내한다 */
+    mode?: "safari" | "in-app";
+    /** 설치하면 뭐가 좋은지 — 이걸 먼저 보여 줘야 단계를 따라 한다 */
+    benefits?: string[];
 }
 /**
- * Bottom-sheet guide for iOS "Add to Home Screen".
- * Can also be used standalone if you need custom trigger UI.
+ * 홈 화면 추가 안내 시트 — iOS Safari 와 앱 안 브라우저(인스타·카톡 …) 둘 다.
+ * 앱 안이면 카카오톡·라인·안드로이드는 [브라우저로 열기] 한 번으로 넘기고, 안 되는 곳(iOS 인스타·스레드)은
+ * 그 앱 메뉴 이름 그대로 단계를 보여 주고 링크 복사를 붙인다.
  */
-declare function IOSInstallSheet({ open, onClose, appName, iconSrc }: IOSInstallSheetProps): React$1.ReactPortal | null;
+declare function IOSInstallSheet({ open, onClose, appName, iconSrc, mode, benefits }: IOSInstallSheetProps): React$1.ReactPortal | null;
 
 interface PWAInstallButtonProps {
     /** App name shown in iOS guide sheet */
@@ -1730,6 +1735,8 @@ interface PWAInstallButtonProps {
     /** Label shown when already installed. Default: undefined — button hidden */
     installedLabel?: string;
     className?: string;
+    /** "chip": 헤더용 — ShareButton 과 같은 연회색 알약. 기본 "solid"(검은 버튼) */
+    variant?: "solid" | "chip";
 }
 /**
  * PWA install button that handles both Android and iOS.
@@ -1742,7 +1749,7 @@ interface PWAInstallButtonProps {
  * Usage:
  *   <PWAInstallButton appName="My App" iconSrc="/icon.png" />
  */
-declare function PWAInstallButton({ appName, iconSrc, label, installedLabel, className, }: PWAInstallButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function PWAInstallButton({ appName, iconSrc, label, installedLabel, className, variant, }: PWAInstallButtonProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Drop into <head> in your root layout to pre-load kit styles and