Share

51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T51f1,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useInstallPrompt } from "@/hooks/use-install-prompt"; import { Button } from "@/components/ui/button"; import { CopyButton } from "@/components/ui/copy-button"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; type AddToHomescreenPlatform = "android" | "desktop" | "ios"; type AddToHomescreenBrowser = | "chrome" | "edge" | "facebook" | "firefox" | "instagram" | "linkedin" | "safari" | "samsung" | "twitter" | "unknown"; /** One numbered instruction. `glyph` is drawn inline, mid-sentence. */ interface AddToHomescreenStep { /** Small picture of the control the sentence names, shown inline. */ glyph?: React.ReactNode; /** Sentence for this step. */ text: React.ReactNode; } interface AddToHomescreenMessages { /** Body of the fallback panel, when no recipe matches this browser. */ fallbackBody: string; /** Heading of the fallback panel. */ fallbackTitle: string; /** Accessible name of the copy-link button in the fallback panel. */ copyLink: string; /** Label of the one-tap install button, where the browser offers one. */ install: string; /** Sub-heading shown alongside the one-tap install button. */ installSubtitle: string; /** Sub-heading under the title. */ subtitle: string; /** Heading of the instruction panel. */ title: (appName: string) => string; } const DEFAULT_MESSAGES: AddToHomescreenMessages = { copyLink: "Copy link", fallbackBody: "Open this page in Safari on iOS, or Chrome on Android, to add it to your home screen.", fallbackTitle: "Add this app to your home screen", install: "Install", installSubtitle: "It opens in its own window, like an app.", subtitle: "Two steps, and it opens like an app.", title: (appName) => `Add ${appName} to your home screen`, }; /* * Glyphs are drawn rather than imported so the item installs as one file. The * registry has no mechanism for copying assets, so a consumer of an -based * version would get broken links. */ const ShareGlyph = () => ( ); const MenuGlyph = () => ( ); const AddSquareGlyph = () => ( ); /** The bouncing pointer. Rotated by its wrapper, so it always draws upward. */ const ArrowGlyph = () => ( ); const testUserAgent = (pattern: RegExp): boolean => { if (typeof window === "undefined" || !window.navigator) { return false; } const brands = ( window.navigator as Navigator & { userAgentData?: { brands: { brand: string }[] }; } ).userAgentData?.brands; return ( Boolean(brands?.some((entry) => pattern.test(entry.brand))) || pattern.test(window.navigator.userAgent) ); }; const detectIsIos = (): boolean => { if (typeof window === "undefined") { return false; } // iPadOS 13+ reports itself as a Mac, and only the touch count gives it away. const isIpad = window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1; return testUserAgent(/iPad|iPhone|iPod/u) || isIpad; }; const referrerMatches = (fragment: string): boolean => typeof document !== "undefined" && document.referrer.includes(fragment); /** * Instagram and Threads render their in-app browser shorter than the screen and * do not brand the user agent, so the height gap is the only tell. It is a * heuristic: a browser with a persistent toolbar can produce the same gap. */ const looksLikeMetaInAppBrowser = (): boolean => { if (typeof window === "undefined") { return false; } if (referrerMatches("//l.instagram.com/")) { return true; } return ( testUserAgent(/iPhone/u) && Boolean(window.screen.height) && Boolean(window.outerHeight) && window.outerHeight < window.screen.height ); }; const detectBrowser = (platform: AddToHomescreenPlatform): AddToHomescreenBrowser => { // In-app webviews impersonate the system browser, so they are tested first. if (testUserAgent(/FBAN|FBAV/u)) { return "facebook"; } if (testUserAgent(/LinkedInApp/u)) { return "linkedin"; } if (platform === "ios") { if (referrerMatches("//t.co/")) { return "twitter"; } if (testUserAgent(/CriOS/u)) { return "chrome"; } if (testUserAgent(/FxiOS/u)) { return "firefox"; } if (testUserAgent(/EdgiOS/u)) { return "edge"; } if (looksLikeMetaInAppBrowser()) { return "instagram"; } return testUserAgent(/Safari/u) ? "safari" : "unknown"; } if (platform === "android") { if (testUserAgent(/SamsungBrowser/u)) { return "samsung"; } if (testUserAgent(/EdgA/u)) { return "edge"; } if (testUserAgent(/Firefox/u)) { return "firefox"; } return testUserAgent(/Chrome/u) ? "chrome" : "unknown"; } // Desktop. Chrome, Edge and Safari can all install a page as an app. if (testUserAgent(/EdgA?\b|Edg\//u)) { return "edge"; } if (testUserAgent(/Firefox/u)) { return "firefox"; } if (testUserAgent(/Chrome|Chromium/u)) { return "chrome"; } if (testUserAgent(/Safari/u)) { return "safari"; } return "unknown"; }; const detectPlatform = (): AddToHomescreenPlatform => { if (detectIsIos()) { return "ios"; } return testUserAgent(/Android/u) ? "android" : "desktop"; }; const detectInstalled = (): boolean => { if (typeof window === "undefined") { return false; } return ( (window.navigator as Navigator & { standalone?: boolean }).standalone === true || window.matchMedia("(display-mode: standalone)").matches ); }; interface Recipe { /** * Where the arrow points, or null when the control's position is a user * setting we cannot read. A wrong arrow is worse than none: the reader * trusts it, looks at the wrong edge, and stops trusting the steps too. */ arrow: "down" | "up" | null; /** Which edge of the screen the sheet hugs. */ edge: "bottom" | "top"; steps: AddToHomescreenStep[]; } const MENU_HINT = "You may need to scroll the menu to find it."; /** * Recipes are keyed on where the browser actually keeps its install control, * researched per browser rather than assumed: * * - iOS Safari keeps Share in the bottom toolbar in all three layouts * (Bottom, Top and Compact); Compact only hides it behind a `...` button. * - iOS Chrome/Edge/Firefox put Share beside the address bar, which the user * can move to the top or the bottom. Undetectable, so no arrow. * - Android and desktop Chromium menus are pinned to the top right. * - Desktop Chrome and Edge show an install pill at the end of the address bar. * - macOS Safari installs through File > Add to Dock (Sonoma 14 and later). */ const getRecipe = ( platform: AddToHomescreenPlatform, browser: AddToHomescreenBrowser, ): Recipe | null => { const openInBrowser: Recipe = { // The in-app "..." moves between apps and versions, so it is described // rather than pointed at. arrow: null, edge: "top", steps: [ { glyph: , text: "Tap the menu in this app's browser bar." }, { text: "Choose Open in browser, then install it from there." }, ], }; if (browser === "facebook" || browser === "linkedin" || browser === "instagram") { return openInBrowser; } if (platform === "ios") { if (browser === "twitter") { return openInBrowser; } if (browser === "safari") { return { arrow: "down", edge: "bottom", steps: [ { glyph: , text: "Tap Share in the toolbar below. In the compact layout, tap the ... button first.", }, { glyph: , text: `Choose Add to Home Screen. ${MENU_HINT}` }, ], }; } if (browser === "chrome" || browser === "edge" || browser === "firefox") { return { arrow: null, edge: "bottom", steps: [ // "Beside the address bar" survives the user moving the address bar; // "below" would not. { glyph: , text: "Tap Share, beside the address bar." }, { glyph: , text: `Choose Add to Home Screen. ${MENU_HINT}` }, ], }; } return null; } if (platform === "android") { if (browser === "chrome" || browser === "edge" || browser === "samsung") { return { arrow: "up", edge: "top", steps: [ { glyph: , text: "Tap the menu at the top right." }, // Chromium reserves "Add to Home screen" for plain shortcuts and // says "Install app" for a page that meets the install criteria. { glyph: , text: `Choose Install app. ${MENU_HINT}` }, ], }; } if (browser === "firefox") { return { arrow: "up", edge: "top", steps: [ { glyph: , text: "Tap the menu at the top right." }, { glyph: , text: "Choose Install, then Add to home screen." }, ], }; } return null; } if (browser === "chrome" || browser === "edge") { return { arrow: "up", edge: "top", steps: [ { glyph: , text: "Click the install icon at the right of the address bar.", }, { glyph: , text: "If it is not there, open the menu and look for Install page as an app.", }, ], }; } if (browser === "safari") { return { arrow: "up", edge: "top", steps: [ { glyph: , text: "Open the File menu at the top of the screen." }, { glyph: , text: "Choose Add to Dock, then click Add." }, ], }; } // Desktop Firefox has no install path, and neither does anything unplaced. return null; }; interface Detection { browser: AddToHomescreenBrowser; href: string; installed: boolean; platform: AddToHomescreenPlatform; } /** The bouncing pointer, placed just inside the edge the sheet hugs. */ const InstallArrow = ({ direction }: { direction: "down" | "up" }) => ( ); /** * Sniffing runs in an effect, never during render, so the server and the first * client render agree on "nothing" instead of flashing the wrong platform. */ const useDetection = ( platformOverride: AddToHomescreenPlatform | undefined, browserOverride: AddToHomescreenBrowser | undefined, ): Detection | null => { const [detection, setDetection] = React.useState(null); React.useEffect(() => { const platform = platformOverride ?? detectPlatform(); // oxlint-disable-next-line react/react-compiler -- one-shot UA detection must run after mount so SSR and the first client render agree setDetection({ browser: browserOverride ?? detectBrowser(platform), href: window.location.href, // An override means a demo is driving this, so the real install state // must not hide it. installed: platformOverride === undefined && detectInstalled(), platform, }); }, [browserOverride, platformOverride]); return detection; }; /** The numbered recipe. Three columns, so a wrapped line keeps its indent. */ const InstallSteps = ({ steps }: { steps: AddToHomescreenStep[] }) => (

{step.glyph && ( )} {step.text}

); interface TierInput { browser: AddToHomescreenBrowser; canInstall: boolean; platform: AddToHomescreenPlatform; platformOverride?: AddToHomescreenPlatform; showArrow: boolean; stepsOverride?: AddToHomescreenStep[]; } /** * Picks the tier and the geometry that goes with it. Tier 0 is the browser's * own prompt: where Chromium has offered one we can replay, a single tap beats * any written instruction, so no steps and no arrow are drawn. */ const resolveTier = ({ browser, canInstall, platform, platformOverride, showArrow, stepsOverride, }: TierInput) => { // An override means a demo is driving this, so the real prompt must not // pre-empt the recipe being demonstrated. const nativeInstall = canInstall && platformOverride === undefined; const recipe = getRecipe(platform, browser); const steps = stepsOverride ?? recipe?.steps; const direction = recipe?.arrow ?? null; // Caller-supplied steps describe an unknown control, so nothing is pointed at. const pointable = direction !== null && stepsOverride === undefined; return { direction, nativeInstall, side: recipe?.edge ?? "top", steps, withArrow: showArrow && pointable && !nativeInstall, }; }; interface InstallPanelProps { appIconUrl?: string; detection: Detection; heading: string; messages: AddToHomescreenMessages; nativeInstall: boolean; onInstall: () => void; steps?: AddToHomescreenStep[]; subtitle: string; } /** Header plus exactly one of the three tiers: install, steps, or copy-link. */ const InstallPanel = ({ appIconUrl, detection, heading, messages, nativeInstall, onInstall, steps, subtitle, }: InstallPanelProps) => ( <> {appIconUrl && ( // biome-ignore lint/performance/noImgElement: registry items must run outside Next // eslint-disable-next-line next/no-img-element -- caller-supplied URL, and this file ships without a framework

)}

{heading} {subtitle}

{nativeInstall && (

)} {!nativeInstall && steps ? : null} {!(nativeInstall || steps) && (

{detection.href}

)} ); interface AddToHomescreenProps { /** Square icon for the app, shown beside the title. Any URL the page can load. */ appIconUrl?: string; /** Name of the app, used in the heading. */ appName: string; /** Forces a browser instead of sniffing it. Meant for docs and tests. */ browser?: AddToHomescreenBrowser; /** Class names merged onto the sheet panel. */ className?: string; /** Open state when uncontrolled. */ defaultOpen?: boolean; /** Overrides for the built-in English strings. */ messages?: Partial; /** Called when the sheet opens or closes. */ onOpenChange?: (open: boolean) => void; /** Controlled open state. */ open?: boolean; /** * Forces a platform instead of sniffing it. Setting either override also * skips the already-installed check, so a demo can render deterministically. */ platform?: AddToHomescreenPlatform; /** * Suppresses the arrow. It can only ever remove one: a recipe whose control * position is unknown never draws an arrow, whatever this is set to. */ showArrow?: boolean; /** Replaces the detected instructions entirely. */ steps?: AddToHomescreenStep[]; } const AddToHomescreen = ({ appIconUrl, appName, browser: browserOverride, className, defaultOpen, messages: messageOverrides, onOpenChange, open, platform: platformOverride, showArrow = true, steps: stepsOverride, }: AddToHomescreenProps) => { const { canInstall, promptInstall } = useInstallPrompt(); const detection = useDetection(platformOverride, browserOverride); const messages = React.useMemo( () => ({ ...DEFAULT_MESSAGES, ...messageOverrides }), [messageOverrides], ); if (!detection || detection.installed) { return null; } const { direction, nativeInstall, side, steps, withArrow } = resolveTier({ browser: detection.browser, canInstall, platform: detection.platform, platformOverride, showArrow, stepsOverride, }); const known = Boolean(steps) || nativeInstall; const heading = known ? messages.title(appName) : messages.fallbackTitle; const stepSubtitle = steps ? messages.subtitle : messages.fallbackBody; const subtitle = nativeInstall ? messages.installSubtitle : stepSubtitle; const arrow = withArrow && direction ? : null; return ( {side === "top" && arrow} {side === "bottom" && arrow} ); }; export { AddToHomescreen }; export type { AddToHomescreenBrowser, AddToHomescreenMessages, AddToHomescreenPlatform, AddToHomescreenProps, AddToHomescreenStep, }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@blode","registryDependencies":["button","sheet","@blode/copy-button","@blode/use-install-prompt"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/add-to-homescreen.tsx","content":"$53","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]