@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-5ERH4OIK.js

@@ -0,0 +1,254 @@
+// src/components/data-display/Alert/Alert.styles.tsx
+import Error from "@mui/icons-material/Error";
+import Info from "@mui/icons-material/Info";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Warning from "@mui/icons-material/Warning";
+import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+var fadeInScale = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+`;
+var iconRotate = keyframes`
+  0% {
+    transform: rotate(0deg) scale(0.8);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.1);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var getColorFromTheme = (theme, variant) => {
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    neutral: {
+      main: theme.palette.grey[500] || "#9E9E9E",
+      light: theme.palette.grey[300] || "#E0E0E0",
+      dark: theme.palette.grey[700] || "#616161"
+    }
+  };
+  return colorMap[variant] || theme.palette.info;
+};
+var getVariantIcon = (variant) => {
+  const iconMap = {
+    info: /* @__PURE__ */ jsx(Info, {}),
+    success: /* @__PURE__ */ jsx(CheckCircle, {}),
+    warning: /* @__PURE__ */ jsx(Warning, {}),
+    danger: /* @__PURE__ */ jsx(Error, {})
+  };
+  return iconMap[variant];
+};
+var SEMANTIC_VARIANTS = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
+var alertLayoutStyles = (theme, colorPalette, animate) => ({
+  // ROOM TO READ.
+  //
+  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert
+  // routinely carries three things stacked — a sentence, a smaller explanation,
+  // then a control — and at 6px they touched top and bottom and ran together
+  // vertically, so the whole card read as one dense block instead of as a
+  // message with parts. The generosity is what makes the structure legible; it
+  // is not decoration.
+  //
+  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants
+  // it tight), because this is a default rather than a rule.
+  padding: theme.spacing(1.75, 2),
+  ".MuiAlert-message": {
+    display: "flex",
+    flexDirection: "column",
+    // 0.5 put a title, its explanation and a button 4px apart, which reads as a
+    // spacing bug rather than as a group. 1 separates the lines; the extra
+    // margin below goes to whatever CONTROL sits at the end, because the gap
+    // between prose and a thing you press has to be bigger than the gap between
+    // two lines of prose or the button looks like part of the text.
+    gap: theme.spacing(1),
+    fontSize: "0.95rem",
+    lineHeight: 1.5,
+    // No padding of its own — the root's is now doing that job, and MUI's
+    // default `8px 0` on top of it would double the vertical space.
+    padding: 0,
+    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.
+    //
+    // `ghost` and `text` paint no background and no border — bare labels, which
+    // works on white where the surrounding page is obviously not clickable.
+    // Inside a coloured Alert it stops working: the label is one more coloured
+    // phrase among several, and a "Cancelar" beside two lines of prose reads as
+    // part of the prose.
+    //
+    // Only the BORDER is set, never the background or the colour, and that is
+    // what makes it safe to apply to every button rather than just the bare
+    // ones: a `solid` keeps its fill and its light label and gains a hairline
+    // in the same hue, while a `ghost` gains the whole affordance.
+    ".MuiButton-root": {
+      marginTop: theme.spacing(0.5),
+      border: `1px solid ${alpha(colorPalette.main, 0.45)}`
+    }
+  },
+  ".MuiAlert-icon": {
+    transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    alignItems: "center",
+    // Clear of the words rather than nearly touching them, and aligned to the
+    // FIRST line instead of centred on the whole block — an icon floating
+    // halfway down a three-line message points at nothing.
+    alignSelf: "flex-start",
+    marginRight: theme.spacing(1.75),
+    paddingTop: theme.spacing(0.25),
+    animation: animate ? `${iconRotate} 0.6s ease-out` : "none"
+  },
+  // The close button, kept off the text it sits beside.
+  ".MuiAlert-action": {
+    alignItems: "flex-start",
+    paddingLeft: theme.spacing(2)
+  }
+});
+var semanticSurface = (theme, colorPalette) => {
+  const dark = theme.palette.mode === "dark";
+  return {
+    backgroundColor: dark ? darken(colorPalette.main, 0.8) : lighten(colorPalette.main, 0.9),
+    color: dark ? lighten(colorPalette.main, 0.6) : darken(colorPalette.main, 0.6),
+    border: `1px solid ${alpha(colorPalette.main, 0.35)}`,
+    ".MuiAlert-icon": {
+      color: colorPalette.main
+    }
+  };
+};
+var alertVariantStyles = (theme, customVariant, colorPalette) => ({
+  ...customVariant !== void 0 && SEMANTIC_VARIANTS.has(customVariant) && semanticSurface(theme, colorPalette),
+  ...customVariant === "glass" && {
+    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it
+    // was the same mistake in a costume: at 0.1 the blur had almost nothing to
+    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to
+    // be mostly pane — the backdrop should be legible AS texture behind the
+    // text, never as competition with it.
+    backgroundColor: alpha(theme.palette.background.paper, 0.85),
+    backdropFilter: "blur(20px) saturate(180%)",
+    WebkitBackdropFilter: "blur(20px) saturate(180%)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.4)}`,
+    color: theme.palette.text.primary,
+    ".MuiAlert-icon": {
+      color: theme.palette.primary.main
+    },
+    // Safari before 18 and Firefox with the filter disabled paint the declared
+    // alpha with nothing blurred behind it — the see-through banner this is
+    // fixing. There is no degraded frost to fall back to, so it falls back to an
+    // opaque pane: less pretty, still readable.
+    "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  ...customVariant === "gradient" && {
+    background: `linear-gradient(135deg, ${alpha(colorPalette.light || colorPalette.main, 0.9)}, ${alpha(colorPalette.dark || colorPalette.main, 0.9)})`,
+    color: theme.palette.getContrastText(colorPalette.main),
+    border: "none",
+    position: "relative",
+    overflow: "hidden",
+    ".MuiAlert-icon": {
+      color: theme.palette.getContrastText(colorPalette.main)
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: "-1000px",
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, 0.2)}, transparent)`,
+      animation: `${shimmerAnimation} 3s infinite`
+    },
+    "&:hover": {
+      filter: "brightness(1.1)",
+      transform: "translateY(-2px) scale(1.01)"
+    }
+  }
+});
+var alertEmphasisStyles = (colorPalette, glow, pulse) => ({
+  ...glow && !pulse && {
+    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,
+    filter: "brightness(1.05)"
+  },
+  // Pulse animation
+  ...pulse && !glow && {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: colorPalette.main,
+      opacity: 0.2,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  },
+  // Both glow and pulse
+  ...glow && pulse && {
+    position: "relative",
+    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,
+    filter: "brightness(1.05)",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: colorPalette.main,
+      opacity: 0.2,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  }
+});
+
+export {
+  pulseAnimation,
+  shimmerAnimation,
+  fadeInScale,
+  iconRotate,
+  getColorFromTheme,
+  getVariantIcon,
+  alertLayoutStyles,
+  alertVariantStyles,
+  alertEmphasisStyles
+};
+//# sourceMappingURL=chunk-5ERH4OIK.js.map

package/dist/chunk-5ERH4OIK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -1000px 0;\n  }\n  100% {\n    background-position: 1000px 0;\n  }\n`;\n\nexport const fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(0.8);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.1);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\nexport const getColorFromTheme = (theme: Theme, variant: string) => {\n  const colorMap: Record<string, { main: string; light?: string; dark?: string }> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: {\n      main: theme.palette.grey[500] || '#9E9E9E',\n      light: theme.palette.grey[300] || '#E0E0E0',\n      dark: theme.palette.grey[700] || '#616161',\n    },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\nexport const getVariantIcon = (variant: string) => {\n  const iconMap: Record<string, React.ReactNode> = {\n    info: <Info />,\n    success: <CheckCircle />,\n    warning: <Warning />,\n    danger: <Error />,\n  };\n\n  return iconMap[variant];\n};\n\n// The palette shape getColorFromTheme returns — a main plus optional light/dark,\n// which is narrower than MUI's PaletteColor.\nexport type AlertPalette = { main: string; light?: string; dark?: string };\n\n/** The four semantic variants, which differ only in which palette they read. */\nconst SEMANTIC_VARIANTS = new Set(['info', 'success', 'warning', 'danger']);\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(1.75, 2),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(1),\n    fontSize: '0.95rem',\n    lineHeight: 1.5,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(0.5),\n      border: `1px solid ${alpha(colorPalette.main, 0.45)}` },\n  },\n\n  '.MuiAlert-icon': {\n    transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(1.75),\n    paddingTop: theme.spacing(0.25),\n    animation: animate ? `${iconRotate} 0.6s ease-out` : 'none' },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(2) },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark ? darken(colorPalette.main, 0.8) : lighten(colorPalette.main, 0.9),\n    color: dark ? lighten(colorPalette.main, 0.6) : darken(colorPalette.main, 0.6),\n    border: `1px solid ${alpha(colorPalette.main, 0.35)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n...(customVariant !== undefined &&\n  SEMANTIC_VARIANTS.has(customVariant) &&\n  semanticSurface(theme, colorPalette)),\n\n...(customVariant === 'glass' && {\n  // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n  // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n  // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n  // be mostly pane — the backdrop should be legible AS texture behind the\n  // text, never as competition with it.\n  backgroundColor: alpha(theme.palette.background.paper, 0.85),\n  backdropFilter: 'blur(20px) saturate(180%)',\n  WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.4)}`,\n  color: theme.palette.text.primary,\n  '.MuiAlert-icon': {\n    color: theme.palette.primary.main,\n  },\n  // Safari before 18 and Firefox with the filter disabled paint the declared\n  // alpha with nothing blurred behind it — the see-through banner this is\n  // fixing. There is no degraded frost to fall back to, so it falls back to an\n  // opaque pane: less pretty, still readable.\n  '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n    backgroundColor: theme.palette.background.paper,\n  },\n}),\n\n...(customVariant === 'gradient' && {\n  background: `linear-gradient(135deg, ${alpha(colorPalette.light || colorPalette.main, 0.9)}, ${alpha(colorPalette.dark || colorPalette.main, 0.9)})`,\n  color: theme.palette.getContrastText(colorPalette.main),\n  border: 'none',\n  position: 'relative',\n  overflow: 'hidden',\n  '.MuiAlert-icon': {\n    color: theme.palette.getContrastText(colorPalette.main),\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: '-1000px',\n    width: '100%',\n    height: '100%',\n    background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, 0.2)}, transparent)`,\n    animation: `${shimmerAnimation} 3s infinite`,\n  },\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    transform: 'translateY(-2px) scale(1.01)',\n  },\n}),\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case.\nexport const alertEmphasisStyles = (\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n...(glow &&\n  !pulse && {\n    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n\n// Pulse animation\n...(pulse &&\n  !glow && {\n    position: 'relative',\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: colorPalette.main,\n      opacity: 0.2,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n\n// Both glow and pulse\n...(glow &&\n  pulse && {\n    position: 'relative',\n    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: colorPalette.main,\n      opacity: 0.2,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n});\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,aAAa;AACpB,SAAS,OAAO,QAAQ,WAAW,eAAe;AAsGxC;AAlGH,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CvB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYnB,IAAM,oBAAoB,CAAC,OAAc,YAAoB;AAClE,QAAM,WAA4E;AAAA,IAChF,MAAM,MAAM,QAAQ;AAAA,IACpB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,QAAQ,MAAM,QAAQ;AAAA,IACtB,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS;AAAA,MACP,MAAM,MAAM,QAAQ,KAAK,GAAG,KAAK;AAAA,MACjC,OAAO,MAAM,QAAQ,KAAK,GAAG,KAAK;AAAA,MAClC,MAAM,MAAM,QAAQ,KAAK,GAAG,KAAK;AAAA,IACnC;AAAA,EACF;AAEA,SAAO,SAAS,OAAO,KAAK,MAAM,QAAQ;AAC5C;AAEO,IAAM,iBAAiB,CAAC,YAAoB;AACjD,QAAM,UAA2C;AAAA,IAC/C,MAAM,oBAAC,QAAK;AAAA,IACZ,SAAS,oBAAC,eAAY;AAAA,IACtB,SAAS,oBAAC,WAAQ;AAAA,IAClB,QAAQ,oBAAC,SAAM;AAAA,EACjB;AAEA,SAAO,QAAQ,OAAO;AACxB;AAOA,IAAM,oBAAoB,oBAAI,IAAI,CAAC,QAAQ,WAAW,WAAW,QAAQ,CAAC;AAYnE,IAAM,oBAAoB,CAC/B,OACA,cACA,aACe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYf,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,EAE9B,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMf,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,UAAU;AAAA,IACV,YAAY;AAAA;AAAA;AAAA,IAGZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaT,mBAAmB;AAAA,MACjB,WAAW,MAAM,QAAQ,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,aAAa,MAAM,IAAI,CAAC;AAAA,IAAG;AAAA,EAC1D;AAAA,EAEA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA;AAAA;AAAA,IAIZ,WAAW;AAAA,IACX,aAAa,MAAM,QAAQ,IAAI;AAAA,IAC/B,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B,WAAW,UAAU,GAAG,UAAU,mBAAmB;AAAA,EAAO;AAAA;AAAA,EAG9D,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,aAAa,MAAM,QAAQ,CAAC;AAAA,EAAE;AAClC;AAmCA,IAAM,kBAAkB,CAAC,OAAc,iBAA0C;AAC/E,QAAM,OAAO,MAAM,QAAQ,SAAS;AACpC,SAAO;AAAA,IACL,iBAAiB,OAAO,OAAO,aAAa,MAAM,GAAG,IAAI,QAAQ,aAAa,MAAM,GAAG;AAAA,IACvF,OAAO,OAAO,QAAQ,aAAa,MAAM,GAAG,IAAI,OAAO,aAAa,MAAM,GAAG;AAAA,IAC7E,QAAQ,aAAa,MAAM,aAAa,MAAM,IAAI,CAAC;AAAA,IACnD,kBAAkB;AAAA,MAChB,OAAO,aAAa;AAAA,IACtB;AAAA,EACF;AACF;AAOO,IAAM,qBAAqB,CAChC,OACA,eACA,kBACe;AAAA,EACjB,GAAI,kBAAkB,UACpB,kBAAkB,IAAI,aAAa,KACnC,gBAAgB,OAAO,YAAY;AAAA,EAErC,GAAI,kBAAkB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/B,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,IAC3D,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,IACtD,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,kBAAkB;AAAA,MAChB,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,wFAAwF;AAAA,MACtF,iBAAiB,MAAM,QAAQ,WAAW;AAAA,IAC5C;AAAA,EACF;AAAA,EAEA,GAAI,kBAAkB,cAAc;AAAA,IAClC,YAAY,2BAA2B,MAAM,aAAa,SAAS,aAAa,MAAM,GAAG,CAAC,KAAK,MAAM,aAAa,QAAQ,aAAa,MAAM,GAAG,CAAC;AAAA,IACjJ,OAAO,MAAM,QAAQ,gBAAgB,aAAa,IAAI;AAAA,IACtD,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,kBAAkB;AAAA,MAChB,OAAO,MAAM,QAAQ,gBAAgB,aAAa,IAAI;AAAA,IACxD;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY,uCAAuC,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,CAAC;AAAA,MACzF,WAAW,GAAG,gBAAgB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,WAAW;AAAA,IACb;AAAA,EACF;AACA;AAKO,IAAM,sBAAsB,CACjC,cACA,MACA,WACe;AAAA,EACjB,GAAI,QACF,CAAC,SAAS;AAAA,IACR,WAAW,gBAAgB,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,IACxD,QAAQ;AAAA,EACV;AAAA;AAAA,EAGF,GAAI,SACF,CAAC,QAAQ;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,iBAAiB,aAAa;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW,GAAG,cAAc;AAAA,MAC5B,eAAe;AAAA,MACf,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA,EAGF,GAAI,QACF,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW,gBAAgB,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,IACxD,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,iBAAiB,aAAa;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW,GAAG,cAAc;AAAA,MAC5B,eAAe;AAAA,MACf,QAAQ;AAAA,IACV;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-5F4NIRVF.js

@@ -0,0 +1,151 @@
+import {
+  CategoryHeadRow,
+  CategorySectionHeading,
+  SubcategoryRow
+} from "./chunk-Z5E2PXGN.js";
+import {
+  emptySx,
+  listSx,
+  skeletonSx
+} from "./chunk-XCT2ZLA6.js";
+import {
+  categoryCheckState
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Skeleton from "@mui/material/Skeleton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SENTENCE_CASE = { textTransform: "none" };
+var SKELETON_ROWS = 6;
+function LoadingRows() {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
+}
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.emptyTitle }),
+    /* @__PURE__ */ jsx("p", { children: copy.purpose }),
+    onCreateCategory && /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: copy.createCategory })
+  ] });
+}
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.noResults.title(query) }),
+    /* @__PURE__ */ jsx("p", { children: copy.noResults.hint }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px", justifyContent: "center" }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: copy.noResults.clearSearch }),
+      onCreateCategory && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "small",
+          sx: SENTENCE_CASE,
+          "data-testid": `${dataTestId}-create`,
+          onClick: () => onCreateCategory(query.trim()),
+          children: copy.noResults.create(query.trim())
+        }
+      )
+    ] })
+  ] });
+}
+function CategoryGroupRows({
+  group,
+  props
+}) {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = group.category.id;
+  const expanded = props.isExpanded(categoryId);
+  const asHeading = single && !allowParentSelection;
+  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    asHeading ? /* @__PURE__ */ jsx(CategorySectionHeading, { option: group.category, query }) : /* @__PURE__ */ jsx(
+      CategoryHeadRow,
+      {
+        option: group.category,
+        query,
+        expanded,
+        active: rowIds[activeIndex] === categoryId,
+        sheet,
+        checkState: allowParentSelection ? categoryCheckState(group, draft) : void 0,
+        selectedCount,
+        showCounts: props.showCounts,
+        onToggleExpanded: () => props.onToggleExpanded(categoryId),
+        onActivate: () => props.onActivateCategory(group),
+        dataTestId: props.dataTestId,
+        copy: props.copy
+      }
+    ),
+    (expanded || asHeading) && group.subcategories.map((sub) => /* @__PURE__ */ jsx(
+      SubcategoryRow,
+      {
+        option: sub,
+        query,
+        selected: draft.has(sub.id),
+        active: rowIds[activeIndex] === sub.id,
+        sheet,
+        single,
+        showCounts: props.showCounts,
+        onActivate: () => props.onActivateSubcategory(sub.id),
+        dataTestId: props.dataTestId
+      },
+      sub.id
+    ))
+  ] });
+}
+function CategoryPanelList(props) {
+  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
+  const body = () => {
+    if (loading) return /* @__PURE__ */ jsx(LoadingRows, {});
+    if (groups.length === 0 && query.trim().length > 0) {
+      return /* @__PURE__ */ jsx(
+        NoResults,
+        {
+          copy,
+          query,
+          onClearQuery: props.onClearQuery,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    if (groups.length === 0) {
+      return /* @__PURE__ */ jsx(
+        EmptyCatalogue,
+        {
+          copy,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsx(CategoryGroupRows, { group, props }, group.category.id)) });
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": props.single ? void 0 : true,
+      tabIndex: -1,
+      "data-testid": `${dataTestId}-list`,
+      sx: listSx(sheet),
+      children: body()
+    }
+  );
+}
+
+export {
+  CategoryPanelList
+};
+//# sourceMappingURL=chunk-5F4NIRVF.js.map

package/dist/chunk-5F4NIRVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelList.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../copy\";\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\n\nimport { categoryCheckState } from './category-tree';\nimport {\n  CategoryHeadRow,\n  CategorySectionHeading,\n  SubcategoryRow,\n} from './CategoryRows';\nimport { emptySx, listSx, skeletonSx } from './CategorySelect.styles';\nimport type { CategoryGroup } from './CategorySelect.types';\n\n/** The design sets these labels in sentence case, not MUI's default caps. */\nconst SENTENCE_CASE = { textTransform: 'none' } as const;\n\n/** How many skeleton rows stand in for the catalogue while it loads. */\nconst SKELETON_ROWS = 6;\n\ninterface PanelListProps {\n  /** The words this panel renders. REQUIRED — no default copy. */\n  copy: CategorySelectCopy;\n  groups: CategoryGroup[];\n  query: string;\n  draft: ReadonlySet<string>;\n  rowIds: string[];\n  activeIndex: number;\n  sheet: boolean;\n  single: boolean;\n  loading: boolean;\n  showCounts: boolean;\n  allowParentSelection: boolean;\n  isExpanded: (categoryId: string) => boolean;\n  onToggleExpanded: (categoryId: string) => void;\n  onActivateCategory: (group: CategoryGroup) => void;\n  onActivateSubcategory: (id: string) => void;\n  onClearQuery: () => void;\n  onCreateCategory?: (name?: string) => void;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  dataTestId: string;\n}\n\nfunction LoadingRows(): React.JSX.Element {\n  return (\n    <>\n      {Array.from({ length: SKELETON_ROWS }, (_unused, index) => (\n        <Skeleton key={index} variant=\"rounded\" sx={skeletonSx} />\n      ))}\n    </>\n  );\n}\n\n/** No categories exist at all — an onboarding moment, not an error. */\nfunction EmptyCatalogue({\n  onCreateCategory,\n  dataTestId,\n  copy,\n}: {\n  onCreateCategory?: (name?: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}): React.JSX.Element {\n  return (\n    <Box sx={emptySx} data-testid={`${dataTestId}-empty-catalogue`}>\n      <strong>{copy.emptyTitle}</strong>\n      <p>{copy.purpose}</p>\n      {onCreateCategory && (\n        <Button variant=\"contained\" size=\"small\" sx={SENTENCE_CASE} onClick={() => onCreateCategory()}>\n          {copy.createCategory}\n        </Button>\n      )}\n    </Box>\n  );\n}\n\n/** The search found nothing — offer creation, or the way back. */\nfunction NoResults({\n  query,\n  onClearQuery,\n  onCreateCategory,\n  dataTestId,\n  copy,\n}: {\n  query: string;\n  onClearQuery: () => void;\n  onCreateCategory?: (name?: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}): React.JSX.Element {\n  return (\n    <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>\n      <strong>{copy.noResults.title(query)}</strong>\n      <p>{copy.noResults.hint}</p>\n      <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>\n        <Button variant=\"outlined\" size=\"small\" sx={SENTENCE_CASE} onClick={onClearQuery}>\n          {copy.noResults.clearSearch}\n        </Button>\n        {onCreateCategory && (\n          <Button\n            variant=\"contained\"\n            size=\"small\"\n            sx={SENTENCE_CASE}\n            data-testid={`${dataTestId}-create`}\n            onClick={() => onCreateCategory(query.trim())}\n          >\n            {copy.noResults.create(query.trim())}\n          </Button>\n        )}\n      </Box>\n    </Box>\n  );\n}\n\n/** One group: its heading or head row, then whichever children are visible. */\nfunction CategoryGroupRows({\n  group,\n  props,\n}: {\n  group: CategoryGroup;\n  props: PanelListProps;\n}): React.JSX.Element {\n  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;\n  const categoryId = group.category.id;\n  const expanded = props.isExpanded(categoryId);\n  const asHeading = single && !allowParentSelection;\n  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;\n\n  return (\n    <>\n      {asHeading ? (\n        <CategorySectionHeading option={group.category} query={query} />\n      ) : (\n        <CategoryHeadRow\n          option={group.category}\n          query={query}\n          expanded={expanded}\n          active={rowIds[activeIndex] === categoryId}\n          sheet={sheet}\n          checkState={\n            allowParentSelection ? categoryCheckState(group, draft) : undefined\n          }\n          selectedCount={selectedCount}\n          showCounts={props.showCounts}\n          onToggleExpanded={() => props.onToggleExpanded(categoryId)}\n          onActivate={() => props.onActivateCategory(group)}\n          dataTestId={props.dataTestId}\n          copy={props.copy}\n        />\n      )}\n      {(expanded || asHeading) &&\n        group.subcategories.map((sub) => (\n          <SubcategoryRow\n            key={sub.id}\n            option={sub}\n            query={query}\n            selected={draft.has(sub.id)}\n            active={rowIds[activeIndex] === sub.id}\n            sheet={sheet}\n            single={single}\n            showCounts={props.showCounts}\n            onActivate={() => props.onActivateSubcategory(sub.id)}\n            dataTestId={props.dataTestId}\n          />\n        ))}\n    </>\n  );\n}\n\n/** The scrolling body of the panel, including its three non-list states. */\nexport function CategoryPanelList(props: PanelListProps): React.JSX.Element {\n  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;\n\n  const body = (): React.JSX.Element => {\n    if (loading) return <LoadingRows />;\n    if (groups.length === 0 && query.trim().length > 0) {\n      return (\n        <NoResults copy={copy}\n          query={query}\n          onClearQuery={props.onClearQuery}\n          onCreateCategory={props.onCreateCategory}\n          dataTestId={dataTestId}\n        />\n      );\n    }\n    if (groups.length === 0) {\n      return (\n        <EmptyCatalogue copy={copy}\n          onCreateCategory={props.onCreateCategory}\n          dataTestId={dataTestId}\n        />\n      );\n    }\n    return (\n      <>\n        {groups.map((group) => (\n          <CategoryGroupRows key={group.category.id} group={group} props={props} />\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <Box\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={props.single ? undefined : true}\n      tabIndex={-1}\n      data-testid={`${dataTestId}-list`}\n      sx={listSx(sheet)}\n    >\n      {body()}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-5GMHJ7Y5.js

@@ -0,0 +1,116 @@
+import {
+  DEFAULT_DISMISS_DAYS,
+  DEFAULT_STORAGE_KEY,
+  isDismissalActive,
+  isStandaloneDisplay,
+  readDismissedAt,
+  resolveInstallPlatform,
+  writeDismissedAt
+} from "./chunk-WXYLH3QZ.js";
+import {
+  PWA_INSTALL_AVAILABLE_EVENT,
+  readPwaInstallStash
+} from "./chunk-UUL44SUX.js";
+
+// src/components/utility/InstallPrompt/usePwaInstall.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+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
+  };
+};
+
+export {
+  usePwaInstall
+};
+//# sourceMappingURL=chunk-5GMHJ7Y5.js.map