@12-apps/ui 5.0.0 → 5.1.0

package/dist/utility/AspectRatio.js

@@ -0,0 +1,81 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/utility/AspectRatio/AspectRatio.tsx
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var AspectRatio = ({
+  children,
+  variant = "16:9",
+  ratio,
+  maxWidth,
+  maxHeight,
+  dataTestId,
+  sx,
+  ...props
+}) => {
+  const getAspectRatio = () => {
+    if (variant === "custom" && ratio) {
+      return ratio;
+    }
+    switch (variant) {
+      case "16:9":
+        return 16 / 9;
+      case "4:3":
+        return 4 / 3;
+      case "1:1":
+        return 1;
+      case "3:2":
+        return 3 / 2;
+      case "21:9":
+        return 21 / 9;
+      default:
+        return 16 / 9;
+    }
+  };
+  const aspectRatio = getAspectRatio();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth,
+        maxHeight,
+        ...sx
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: "100%",
+            paddingTop: `${1 / aspectRatio * 100}%`,
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden"
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  AspectRatio
+};
+//# sourceMappingURL=AspectRatio.js.map

package/dist/utility/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/utility/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport React from 'react';\n\nimport type { AspectRatioProps } from './AspectRatio.types';\n\nexport const AspectRatio: React.FC<AspectRatioProps> = ({\n  children,\n  variant = '16:9',\n  ratio,\n  maxWidth,\n  maxHeight,\n  dataTestId,\n  sx,\n  ...props\n}) => {\n  const getAspectRatio = () => {\n    if (variant === 'custom' && ratio) {\n      return ratio;\n    }\n\n    switch (variant) {\n      case '16:9':\n        return 16 / 9;\n      case '4:3':\n        return 4 / 3;\n      case '1:1':\n        return 1;\n      case '3:2':\n        return 3 / 2;\n      case '21:9':\n        return 21 / 9;\n      default:\n        return 16 / 9;\n    }\n  };\n\n  const aspectRatio = getAspectRatio();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth,\n        maxHeight,\n        ...sx,\n      }}\n      {...props}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          paddingTop: `${(1 / aspectRatio) * 100}%`,\n          position: 'relative',\n        }}\n      >\n        <Box\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;AAAA,SAAS,WAAW;AAyDZ;AApDD,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,MAAM;AAC3B,QAAI,YAAY,YAAY,OAAO;AACjC,aAAO;AAAA,IACT;AAEA,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO,KAAK;AAAA,MACd;AACE,eAAO,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,cAAc,eAAe;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY,GAAI,IAAI,cAAe,GAAG;AAAA,YACtC,UAAU;AAAA,UACZ;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/utility/InfiniteScroll.js

@@ -0,0 +1,175 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/utility/InfiniteScroll/InfiniteScroll.tsx
+import { Box as Box2 } from "@mui/material";
+
+// src/components/utility/InfiniteScroll/InfiniteScroll.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var resolveScrollable = (scrollableTarget) => {
+  if (!scrollableTarget) return null;
+  if (typeof scrollableTarget === "string") {
+    return document.getElementById(scrollableTarget) || document.querySelector(scrollableTarget);
+  }
+  return scrollableTarget;
+};
+var useSentinel = ({ testMode, threshold, scrollableTarget }) => {
+  const sentinelRef = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  useEffect(() => {
+    if (testMode || !sentinelRef.current) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry) {
+          setIsIntersecting(entry.isIntersecting);
+        }
+      },
+      {
+        root: resolveScrollable(scrollableTarget) || void 0,
+        rootMargin: `${threshold}px`,
+        threshold: 0
+      }
+    );
+    observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [testMode, threshold, scrollableTarget]);
+  return { sentinelRef, isIntersecting };
+};
+var useLoadMore = ({
+  hasMore,
+  loading,
+  error,
+  loadMore,
+  onError,
+  isIntersecting,
+  testMode,
+  testTriggerRef
+}) => {
+  const loadingRef = useRef(false);
+  const handleLoadMore = useCallback(async () => {
+    if (loadingRef.current || !hasMore || error) {
+      return;
+    }
+    loadingRef.current = true;
+    try {
+      await loadMore();
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Unknown error");
+      onError?.(errorObj);
+    } finally {
+      loadingRef.current = false;
+    }
+  }, [hasMore, error, loadMore, onError]);
+  useEffect(() => {
+    if (testMode && testTriggerRef) {
+      testTriggerRef.current = handleLoadMore;
+    }
+    return () => {
+      if (testMode && testTriggerRef) {
+        testTriggerRef.current = void 0;
+      }
+    };
+  }, [testMode, testTriggerRef, handleLoadMore]);
+  useEffect(() => {
+    if (isIntersecting && hasMore && !loading && !error) {
+      handleLoadMore();
+    }
+  }, [isIntersecting, hasMore, loading, error, handleLoadMore]);
+};
+
+// src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx
+import { Alert, Box, CircularProgress, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CENTERED = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  p: 2
+};
+var DefaultLoader = () => /* @__PURE__ */ jsxs(Box, { sx: CENTERED, children: [
+  /* @__PURE__ */ jsx(CircularProgress, { size: 24 }),
+  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { ml: 1 }, children: "Loading..." })
+] });
+var DefaultEndMessage = () => /* @__PURE__ */ jsx(Box, { sx: CENTERED, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No more items to load" }) });
+var DefaultError = ({ error }) => /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { m: 2 }, children: error.message || "An error occurred while loading more items" });
+var containerStyles = (variant, width) => {
+  const horizontal = variant === "horizontal";
+  const base = {
+    width: horizontal ? width || "100%" : "100%",
+    height: horizontal ? "100%" : "auto",
+    overflowX: horizontal ? "auto" : "hidden",
+    overflowY: horizontal ? "hidden" : "visible",
+    display: "flex",
+    flexDirection: horizontal ? "row" : "column"
+  };
+  return variant === "reverse" ? { ...base, flexDirection: "column-reverse" } : base;
+};
+
+// src/components/utility/InfiniteScroll/InfiniteScroll.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfiniteScroll = ({
+  children,
+  variant = "default",
+  hasMore,
+  loading,
+  threshold = 150,
+  loadMore,
+  loader,
+  endMessage,
+  error,
+  errorComponent,
+  onError,
+  className,
+  style,
+  width,
+  scrollableTarget,
+  testMode = false,
+  testTriggerRef
+}) => {
+  const { sentinelRef, isIntersecting } = useSentinel({ testMode, threshold, scrollableTarget });
+  useLoadMore({
+    hasMore,
+    loading,
+    error,
+    loadMore,
+    onError,
+    isIntersecting,
+    testMode,
+    testTriggerRef
+  });
+  const renderSentinel = () => {
+    if (!hasMore) return endMessage || /* @__PURE__ */ jsx2(DefaultEndMessage, {});
+    if (error) return errorComponent || /* @__PURE__ */ jsx2(DefaultError, { error });
+    if (loading) return loader || /* @__PURE__ */ jsx2(DefaultLoader, {});
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: sentinelRef,
+        "data-testid": "infinite-scroll-sentinel",
+        style: {
+          height: variant === "horizontal" ? "100%" : "1px",
+          width: variant === "horizontal" ? "1px" : "100%"
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      className,
+      sx: {
+        ...containerStyles(variant, width),
+        ...style
+      },
+      children: [
+        variant === "reverse" && renderSentinel(),
+        variant === "horizontal" ? /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexDirection: "row" }, children }) : children,
+        variant !== "reverse" && renderSentinel(),
+        variant === "horizontal" && renderSentinel()
+      ]
+    }
+  );
+};
+export {
+  InfiniteScroll
+};
+//# sourceMappingURL=InfiniteScroll.js.map

package/dist/utility/InfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/utility/InfiniteScroll/InfiniteScroll.tsx","../../src/components/utility/InfiniteScroll/InfiniteScroll.hooks.ts","../../src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport React from 'react';\n\nimport { useLoadMore, useSentinel } from './InfiniteScroll.hooks';\nimport {\n  containerStyles,\n  DefaultEndMessage,\n  DefaultError,\n  DefaultLoader,\n} from './InfiniteScroll.parts';\nimport type { InfiniteScrollProps } from './InfiniteScroll.types';\n\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({\n  children,\n  variant = 'default',\n  hasMore,\n  loading,\n  threshold = 150,\n  loadMore,\n  loader,\n  endMessage,\n  error,\n  errorComponent,\n  onError,\n  className,\n  style,\n  width,\n  scrollableTarget,\n  testMode = false,\n  testTriggerRef,\n}) => {\n  const { sentinelRef, isIntersecting } = useSentinel({ testMode, threshold, scrollableTarget });\n\n  useLoadMore({\n    hasMore,\n    loading,\n    error,\n    loadMore,\n    onError,\n    isIntersecting,\n    testMode,\n    testTriggerRef,\n  });\n\n  // The tail of the list is one of four things: the end message, an error, a\n  // spinner, or the sentinel that asks for the next page.\n  const renderSentinel = () => {\n    if (!hasMore) return endMessage || <DefaultEndMessage />;\n    if (error) return errorComponent || <DefaultError error={error} />;\n    if (loading) return loader || <DefaultLoader />;\n\n    return (\n      <div\n        ref={sentinelRef}\n        data-testid=\"infinite-scroll-sentinel\"\n        style={{\n          height: variant === 'horizontal' ? '100%' : '1px',\n          width: variant === 'horizontal' ? '1px' : '100%',\n        }}\n      />\n    );\n  };\n\n  return (\n    <Box\n      className={className}\n      sx={{\n        ...containerStyles(variant, width),\n        ...style,\n      }}\n    >\n      {variant === 'reverse' && renderSentinel()}\n\n      {variant === 'horizontal' ? (\n        <Box sx={{ display: 'flex', flexDirection: 'row' }}>{children}</Box>\n      ) : (\n        children\n      )}\n\n      {variant !== 'reverse' && renderSentinel()}\n\n      {variant === 'horizontal' && renderSentinel()}\n    </Box>\n  );\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { InfiniteScrollProps } from './InfiniteScroll.types';\n\ntype ScrollableTarget = InfiniteScrollProps['scrollableTarget'];\n\n/** A string target is looked up by id first, then as a selector. */\nconst resolveScrollable = (scrollableTarget: ScrollableTarget): Element | null => {\n  if (!scrollableTarget) return null;\n\n  if (typeof scrollableTarget === 'string') {\n    return (\n      document.getElementById(scrollableTarget) || document.querySelector(scrollableTarget)\n    );\n  }\n\n  return scrollableTarget;\n};\n\ninterface ObserverArgs {\n  testMode: boolean;\n  threshold: number;\n  scrollableTarget: ScrollableTarget;\n}\n\n/**\n * Watches a zero-size sentinel at the end of the list. `rootMargin` is what makes\n * it fire before the sentinel is actually on screen, so the next page is already\n * loading by the time the user reaches the bottom.\n */\nexport const useSentinel = ({ testMode, threshold, scrollableTarget }: ObserverArgs) => {\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const [isIntersecting, setIsIntersecting] = useState(false);\n\n  useEffect(() => {\n    if (testMode || !sentinelRef.current) return;\n\n    const observer = new window.IntersectionObserver(\n      ([entry]) => {\n        if (entry) {\n          setIsIntersecting(entry.isIntersecting);\n        }\n      },\n      {\n        root: resolveScrollable(scrollableTarget) || undefined,\n        rootMargin: `${threshold}px`,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(sentinelRef.current);\n\n    return () => observer.disconnect();\n  }, [testMode, threshold, scrollableTarget]);\n\n  return { sentinelRef, isIntersecting };\n};\n\ntype LoadArgs = Pick<\n  InfiniteScrollProps,\n  'hasMore' | 'loading' | 'error' | 'loadMore' | 'onError' | 'testTriggerRef'\n> & {\n  isIntersecting: boolean;\n  testMode: boolean;\n};\n\n/**\n * A ref rather than state guards re-entry, so a second intersection landing while\n * the first `loadMore` is still in flight is dropped rather than queued.\n */\nexport const useLoadMore = ({\n  hasMore,\n  loading,\n  error,\n  loadMore,\n  onError,\n  isIntersecting,\n  testMode,\n  testTriggerRef,\n}: LoadArgs) => {\n  const loadingRef = useRef(false);\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingRef.current || !hasMore || error) {\n      return;\n    }\n\n    loadingRef.current = true;\n\n    try {\n      await loadMore();\n    } catch (err) {\n      const errorObj = err instanceof Error ? err : new Error('Unknown error');\n      onError?.(errorObj);\n    } finally {\n      loadingRef.current = false;\n    }\n  }, [hasMore, error, loadMore, onError]);\n\n  // Expose test trigger for test mode\n  useEffect(() => {\n    if (testMode && testTriggerRef) {\n      testTriggerRef.current = handleLoadMore;\n    }\n\n    return () => {\n      if (testMode && testTriggerRef) {\n        testTriggerRef.current = undefined;\n      }\n    };\n  }, [testMode, testTriggerRef, handleLoadMore]);\n\n  useEffect(() => {\n    if (isIntersecting && hasMore && !loading && !error) {\n      handleLoadMore();\n    }\n  }, [isIntersecting, hasMore, loading, error, handleLoadMore]);\n};\n","import { Alert, Box, CircularProgress, Typography } from '@mui/material';\nimport React from 'react';\n\nimport type { InfiniteScrollProps } from './InfiniteScroll.types';\n\ntype Variant = NonNullable<InfiniteScrollProps['variant']>;\n\nconst CENTERED = {\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  p: 2,\n} as const;\n\nexport const DefaultLoader: React.FC = () => (\n  <Box sx={CENTERED}>\n    <CircularProgress size={24} />\n    <Typography variant=\"body2\" sx={{ ml: 1 }}>\n      Loading...\n    </Typography>\n  </Box>\n);\n\nexport const DefaultEndMessage: React.FC = () => (\n  <Box sx={CENTERED}>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      No more items to load\n    </Typography>\n  </Box>\n);\n\nexport const DefaultError: React.FC<{ error: Error }> = ({ error }) => (\n  <Alert severity=\"error\" sx={{ m: 2 }}>\n    {error.message || 'An error occurred while loading more items'}\n  </Alert>\n);\n\n/**\n * `horizontal` scrolls along a row; `reverse` stacks bottom-up, for a chat log\n * that loads older messages as you scroll away from the newest.\n */\nexport const containerStyles = (variant: Variant, width?: number | string) => {\n  const horizontal = variant === 'horizontal';\n  const base = {\n    width: horizontal ? width || '100%' : '100%',\n    height: horizontal ? '100%' : 'auto',\n    overflowX: horizontal ? 'auto' : 'hidden',\n    overflowY: horizontal ? 'hidden' : 'visible',\n    display: 'flex',\n    flexDirection: horizontal ? 'row' : 'column',\n  };\n\n  return variant === 'reverse' ? { ...base, flexDirection: 'column-reverse' } : base;\n};\n"],"mappings":"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","names":["Box","jsx","jsxs","Box"]}

package/dist/utility/InstallPrompt.js

@@ -0,0 +1,393 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/utility/InstallPrompt/InstallPrompt.tsx
+import Close from "@mui/icons-material/Close";
+import InstallMobile from "@mui/icons-material/InstallMobile";
+import IosShare from "@mui/icons-material/IosShare";
+import { Box, Button, IconButton, Typography } from "@mui/material";
+import { styled } from "@mui/material";
+import React from "react";
+
+// src/components/utility/InstallPrompt/InstallPrompt.styles.ts
+import { alpha } from "@mui/material";
+var installPromptStyles = (theme) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: theme.spacing(1.5),
+  padding: theme.spacing(1.5, 2),
+  borderRadius: theme.spacing(1),
+  backgroundColor: alpha(theme.palette.primary.main, 0.08),
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  ".install-prompt-icon": {
+    flexShrink: 0,
+    marginTop: theme.spacing(0.25),
+    display: "flex",
+    color: theme.palette.primary.main
+  },
+  ".install-prompt-content": {
+    flex: 1,
+    minWidth: 0
+  },
+  ".install-prompt-title": {
+    fontWeight: 600
+  },
+  ".install-prompt-description": {
+    opacity: 0.9
+  },
+  ".install-prompt-actions": {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    gap: theme.spacing(1)
+  },
+  // The actions drop to their own full-width row on a phone, where this
+  // component does most of its work.
+  [theme.breakpoints.down("sm")]: {
+    flexWrap: "wrap",
+    ".install-prompt-actions": {
+      width: "100%",
+      marginTop: theme.spacing(1)
+    }
+  }
+});
+
+// src/components/utility/InstallPrompt/usePwaInstall.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/components/utility/InstallPrompt/InstallPrompt.earlyCapture.ts
+var PWA_INSTALL_STASH_KEY = "__pwaInstall";
+var PWA_INSTALL_AVAILABLE_EVENT = "pwa-install-available";
+var readPwaInstallStash = () => {
+  if (typeof window === "undefined") return null;
+  return window[PWA_INSTALL_STASH_KEY] ?? null;
+};
+var ensureStash = () => {
+  const host = window;
+  host[PWA_INSTALL_STASH_KEY] ?? (host[PWA_INSTALL_STASH_KEY] = { event: null, firedAt: null, installedAt: null });
+  return host[PWA_INSTALL_STASH_KEY];
+};
+var activeTeardown = null;
+var capturePwaInstallEvent = () => {
+  if (typeof window === "undefined") return () => void 0;
+  const stash = ensureStash();
+  if (stash.capturing === true) return () => void 0;
+  stash.capturing = true;
+  const onBeforeInstall = (event) => {
+    event.preventDefault();
+    stash.event = event;
+    stash.firedAt = Date.now();
+    window.dispatchEvent(new Event(PWA_INSTALL_AVAILABLE_EVENT));
+  };
+  const onInstalled = () => {
+    stash.installedAt = Date.now();
+    stash.event = null;
+  };
+  window.addEventListener("beforeinstallprompt", onBeforeInstall);
+  window.addEventListener("appinstalled", onInstalled);
+  const teardown = () => {
+    window.removeEventListener("beforeinstallprompt", onBeforeInstall);
+    window.removeEventListener("appinstalled", onInstalled);
+    stash.capturing = false;
+    if (activeTeardown === teardown) activeTeardown = null;
+  };
+  activeTeardown = teardown;
+  return teardown;
+};
+var resetPwaInstallStash = () => {
+  if (typeof window === "undefined") return;
+  activeTeardown?.();
+  activeTeardown = null;
+  delete window[PWA_INSTALL_STASH_KEY];
+};
+
+// src/components/utility/InstallPrompt/InstallPrompt.helpers.ts
+var DEFAULT_STORAGE_KEY = "pwa-install-dismissed";
+var DEFAULT_DISMISS_DAYS = 30;
+var MS_PER_DAY = 864e5;
+var STANDALONE_QUERY = "(display-mode: standalone)";
+var hasWindow = () => typeof window !== "undefined";
+var isStandaloneDisplay = () => {
+  if (!hasWindow()) return false;
+  if (window.navigator.standalone === true) return true;
+  return window.matchMedia?.(STANDALONE_QUERY).matches === true;
+};
+var isIosSafariAgent = (userAgent, maxTouchPoints) => {
+  const isIosDevice = /iPad|iPhone|iPod/.test(userAgent) || userAgent.includes("Macintosh") && maxTouchPoints > 1;
+  if (!isIosDevice) return false;
+  return !/CriOS|FxiOS|EdgiOS|OPiOS/.test(userAgent);
+};
+var isIosSafari = () => {
+  if (!hasWindow()) return false;
+  const { userAgent, maxTouchPoints } = window.navigator;
+  return isIosSafariAgent(userAgent, maxTouchPoints);
+};
+var readDismissedAt = (storageKey) => {
+  if (!hasWindow()) return null;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+};
+var writeDismissedAt = (storageKey, at) => {
+  if (!hasWindow()) return;
+  try {
+    window.localStorage.setItem(storageKey, String(at));
+  } catch {
+  }
+};
+var isDismissalActive = (dismissedAt, dismissForDays, now) => {
+  if (dismissedAt === null) return false;
+  if (dismissForDays <= 0) return true;
+  return now - dismissedAt < dismissForDays * MS_PER_DAY;
+};
+var resolveInstallPlatform = (hasDeferredPrompt) => {
+  if (hasDeferredPrompt) return "prompt";
+  return isIosSafari() ? "ios" : "unsupported";
+};
+
+// src/components/utility/InstallPrompt/usePwaInstall.ts
+var useInstalledState = (onInstalled) => {
+  const [isInstalled, setIsInstalled] = useState(false);
+  const onInstalledRef = useRef(onInstalled);
+  useEffect(() => {
+    onInstalledRef.current = onInstalled;
+  }, [onInstalled]);
+  useEffect(() => {
+    setIsInstalled(isStandaloneDisplay() || readPwaInstallStash()?.installedAt != null);
+    const markInstalled = () => {
+      setIsInstalled(true);
+      onInstalledRef.current?.();
+    };
+    window.addEventListener("appinstalled", markInstalled);
+    return () => window.removeEventListener("appinstalled", markInstalled);
+  }, []);
+  return isInstalled;
+};
+var useDeferredPrompt = () => {
+  const deferredRef = useRef(null);
+  const [promptReady, setPromptReady] = useState(false);
+  useEffect(() => {
+    const hold = (event) => {
+      deferredRef.current = event;
+      setPromptReady(true);
+    };
+    const held = readPwaInstallStash()?.event;
+    if (held) hold(held);
+    const adopt = () => {
+      const fresh = readPwaInstallStash()?.event;
+      if (fresh) hold(fresh);
+    };
+    const capture = (event) => {
+      event.preventDefault();
+      hold(event);
+    };
+    window.addEventListener(PWA_INSTALL_AVAILABLE_EVENT, adopt);
+    window.addEventListener("beforeinstallprompt", capture);
+    return () => {
+      window.removeEventListener(PWA_INSTALL_AVAILABLE_EVENT, adopt);
+      window.removeEventListener("beforeinstallprompt", capture);
+    };
+  }, []);
+  const clearPrompt = useCallback(() => {
+    deferredRef.current = null;
+    setPromptReady(false);
+  }, []);
+  return { deferredRef, promptReady, clearPrompt };
+};
+var useDismissal = (storageKey, dismissForDays) => {
+  const [dismissed, setDismissed] = useState(false);
+  useEffect(() => {
+    const dismissedAt = readDismissedAt(storageKey);
+    setDismissed(isDismissalActive(dismissedAt, dismissForDays, Date.now()));
+  }, [storageKey, dismissForDays]);
+  const persistDismissal = useCallback(() => {
+    writeDismissedAt(storageKey, Date.now());
+    setDismissed(true);
+  }, [storageKey]);
+  return { dismissed, persistDismissal };
+};
+var useInstallPlatform = (promptReady) => {
+  const [platform, setPlatform] = useState("unsupported");
+  useEffect(() => {
+    setPlatform(resolveInstallPlatform(promptReady));
+  }, [promptReady]);
+  return platform;
+};
+var usePwaInstall = (options = {}) => {
+  const {
+    storageKey = DEFAULT_STORAGE_KEY,
+    dismissForDays = DEFAULT_DISMISS_DAYS,
+    onInstalled
+  } = options;
+  const isInstalled = useInstalledState(onInstalled);
+  const { deferredRef, promptReady, clearPrompt } = useDeferredPrompt();
+  const { dismissed, persistDismissal } = useDismissal(storageKey, dismissForDays);
+  const platform = useInstallPlatform(promptReady);
+  const promptInstall = useCallback(async () => {
+    const deferred = deferredRef.current;
+    if (!deferred) return "unavailable";
+    await deferred.prompt();
+    const { outcome } = await deferred.userChoice;
+    clearPrompt();
+    if (outcome === "dismissed") persistDismissal();
+    return outcome;
+  }, [deferredRef, clearPrompt, persistDismissal]);
+  const canInstall = !isInstalled && !dismissed && (platform === "ios" || promptReady);
+  return {
+    canInstall,
+    platform,
+    isInstalled,
+    promptInstall,
+    dismiss: persistDismissal
+  };
+};
+
+// src/components/utility/InstallPrompt/InstallPrompt.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledInstallPrompt = styled(Box)(({ theme }) => installPromptStyles(theme));
+var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `install-prompt-${suffix}`;
+var IosInstructions = ({ instructions, dataTestId }) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    className: "install-prompt-description",
+    variant: "body2",
+    component: "div",
+    "data-testid": testIdFor(dataTestId, "ios-instructions"),
+    sx: { display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap" },
+    children: instructions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Tap ",
+      /* @__PURE__ */ jsx(IosShare, { fontSize: "small", "aria-label": "Share" }),
+      ' then "Add to Home Screen"'
+    ] })
+  }
+);
+var InstallPromptBody = ({ icon, title, description, iosInstructions, platform, dataTestId }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Box, { className: "install-prompt-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(InstallMobile, {}) }),
+  /* @__PURE__ */ jsxs(Box, { className: "install-prompt-content", children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "install-prompt-title",
+        variant: "subtitle2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "title"),
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "install-prompt-description",
+        variant: "body2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "description"),
+        children: description
+      }
+    ),
+    platform === "ios" && /* @__PURE__ */ jsx(IosInstructions, { instructions: iosInstructions, dataTestId })
+  ] })
+] });
+var InstallPromptActions = ({ platform, installLabel, dismissLabel, onInstallClick, onDismissClick, dataTestId }) => /* @__PURE__ */ jsxs(Box, { className: "install-prompt-actions", children: [
+  platform === "prompt" && /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "contained",
+      onClick: onInstallClick,
+      "data-testid": testIdFor(dataTestId, "install"),
+      children: installLabel
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      onClick: onDismissClick,
+      "aria-label": dismissLabel,
+      "data-testid": testIdFor(dataTestId, "dismiss"),
+      children: /* @__PURE__ */ jsx(Close, { fontSize: "small" })
+    }
+  )
+] });
+var InstallPrompt = React.forwardRef(
+  ({
+    title = "Install this app",
+    description,
+    installLabel = "Install",
+    iosInstructions,
+    dismissLabel = "Dismiss install prompt",
+    icon,
+    onInstall,
+    onDismiss,
+    storageKey,
+    dismissForDays,
+    className,
+    "data-testid": dataTestId = "install-prompt",
+    ...props
+  }, ref) => {
+    const { canInstall, platform, promptInstall, dismiss } = usePwaInstall({
+      storageKey,
+      dismissForDays
+    });
+    const handleInstall = React.useCallback(() => {
+      void promptInstall().then((outcome) => onInstall?.(outcome));
+    }, [promptInstall, onInstall]);
+    const handleDismiss = React.useCallback(() => {
+      dismiss();
+      onDismiss?.();
+    }, [dismiss, onDismiss]);
+    if (!canInstall) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledInstallPrompt,
+      {
+        ref,
+        className,
+        role: "region",
+        "aria-label": title,
+        "data-testid": dataTestId,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            InstallPromptBody,
+            {
+              icon,
+              title,
+              description,
+              iosInstructions,
+              platform,
+              dataTestId
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InstallPromptActions,
+            {
+              platform,
+              installLabel,
+              dismissLabel,
+              onInstallClick: handleInstall,
+              onDismissClick: handleDismiss,
+              dataTestId
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InstallPrompt.displayName = "InstallPrompt";
+export {
+  InstallPrompt,
+  PWA_INSTALL_AVAILABLE_EVENT,
+  PWA_INSTALL_STASH_KEY,
+  capturePwaInstallEvent,
+  readPwaInstallStash,
+  resetPwaInstallStash,
+  usePwaInstall
+};
+//# sourceMappingURL=InstallPrompt.js.map