@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-M6PWPEAV.js

@@ -0,0 +1,179 @@
+import {
+  DEFAULT_AUTOPLAY_INTERVAL_MS,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  WHEEL_ZOOM_FACTOR,
+  ZOOM_STEP,
+  minSwipeDistance
+} from "./chunk-3KA6MYIR.js";
+
+// src/components/data-display/Lightbox/Lightbox.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+var clampZoom = (zoom) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
+var isImageItem = (item) => Boolean(item && (item.type === "image" || !item.type));
+var usePreloader = () => {
+  const [preloadedImages, setPreloadedImages] = useState(/* @__PURE__ */ new Set());
+  return useCallback(
+    (src) => {
+      if (preloadedImages.has(src)) return;
+      const img = new window.Image();
+      img.onload = () => setPreloadedImages((prev) => /* @__PURE__ */ new Set([...prev, src]));
+      img.src = src;
+    },
+    [preloadedImages]
+  );
+};
+var useZoomState = () => {
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const resetZoom = useCallback(() => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, []);
+  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);
+  const zoomOut = useCallback(
+    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),
+    []
+  );
+  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };
+};
+var useWheelZoom = ({
+  enabled,
+  setZoomLevel
+}) => useCallback(
+  (event) => {
+    if (!enabled) return;
+    event.preventDefault();
+    setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));
+  },
+  [enabled, setZoomLevel]
+);
+var useNavigation = ({
+  items,
+  loop,
+  startIndex,
+  resetZoom,
+  preloadImage
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(
+    Math.max(0, Math.min(startIndex, items.length - 1))
+  );
+  const goToIndex = useCallback(
+    (index) => {
+      if (items.length === 0) return;
+      const newIndex = loop ? (index % items.length + items.length) % items.length : Math.max(0, Math.min(index, items.length - 1));
+      setCurrentIndex(newIndex);
+      resetZoom();
+      [items[newIndex - 1], items[newIndex + 1]].filter(isImageItem).forEach((item) => preloadImage(item.src));
+    },
+    [items, loop, resetZoom, preloadImage]
+  );
+  const next = useCallback(() => {
+    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);
+  }, [currentIndex, items.length, loop, goToIndex]);
+  const prev = useCallback(() => {
+    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);
+  }, [currentIndex, loop, goToIndex]);
+  return { currentIndex, goToIndex, next, prev };
+};
+var useAutoplay = ({
+  isOpen,
+  autoplay,
+  itemCount,
+  currentIndex,
+  next
+}) => {
+  const [isAutoPlaying, setIsAutoPlaying] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;
+    const interval = typeof autoplay === "object" ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS : DEFAULT_AUTOPLAY_INTERVAL_MS;
+    timerRef.current = window.setTimeout(next, interval);
+    return () => window.clearTimeout(timerRef.current);
+  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);
+  useEffect(() => {
+    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));
+  }, [isOpen, autoplay, itemCount]);
+  const stopAutoplay = useCallback(() => {
+    setIsAutoPlaying(false);
+    window.clearTimeout(timerRef.current);
+  }, []);
+  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };
+};
+var useLightboxKeyboard = ({
+  isOpen,
+  showControls,
+  autoplay,
+  close,
+  prev,
+  next,
+  setIsAutoPlaying
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const arrows = { ArrowLeft: prev, ArrowRight: next };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+        return;
+      }
+      const arrow = arrows[event.key];
+      if (arrow && showControls) {
+        event.preventDefault();
+        arrow();
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        if (autoplay) setIsAutoPlaying((playing) => !playing);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);
+};
+var useSwipe = ({
+  prev,
+  next,
+  close
+}) => {
+  const theme = useTheme();
+  const touchStartRef = useRef(null);
+  const handleTouchStart = useCallback((event) => {
+    const touch = event.touches.length === 1 ? event.touches[0] : void 0;
+    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+  }, []);
+  const handleTouchEnd = useCallback(
+    (event) => {
+      const start = touchStartRef.current;
+      const touch = event.changedTouches[0];
+      touchStartRef.current = null;
+      if (!start || !touch) return;
+      const deltaX = touch.clientX - start.x;
+      const deltaY = touch.clientY - start.y;
+      const swipe = minSwipeDistance(theme);
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (Math.abs(deltaX) > swipe) {
+          if (deltaX > 0) prev();
+          else next();
+        }
+        return;
+      }
+      if (deltaY > swipe) close();
+    },
+    [prev, next, close, theme]
+  );
+  return { handleTouchStart, handleTouchEnd };
+};
+
+export {
+  usePreloader,
+  useZoomState,
+  useWheelZoom,
+  useNavigation,
+  useAutoplay,
+  useLightboxKeyboard,
+  useSwipe
+};
+//# sourceMappingURL=chunk-M6PWPEAV.js.map

package/dist/chunk-M6PWPEAV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {\n  DEFAULT_AUTOPLAY_INTERVAL_MS,\n  MAX_ZOOM,\n  MIN_ZOOM,\n  minSwipeDistance,\n  WHEEL_ZOOM_FACTOR,\n  ZOOM_STEP,\n} from './Lightbox.constants';\nimport type { LightboxItem, LightboxProps } from './Lightbox.types';\n\nconst clampZoom = (zoom: number): number => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));\n\n// Items with no explicit type are images.\nconst isImageItem = (item?: LightboxItem): item is LightboxItem =>\n  Boolean(item && (item.type === 'image' || !item.type));\n\n// Images are fetched once and remembered, so stepping back to one is instant.\nexport const usePreloader = () => {\n  const [preloadedImages, setPreloadedImages] = useState<Set<string>>(new Set());\n\n  return useCallback(\n    (src: string) => {\n      if (preloadedImages.has(src)) return;\n\n      const img = new window.Image();\n      img.onload = () => setPreloadedImages((prev) => new Set([...prev, src]));\n      img.src = src;\n    },\n    [preloadedImages],\n  );\n};\n\nexport interface ZoomState {\n  zoomLevel: number;\n  panOffset: { x: number; y: number };\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n  resetZoom: () => void;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nexport const useZoomState = (): ZoomState => {\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });\n\n  const resetZoom = useCallback(() => {\n    setZoomLevel(1);\n    setPanOffset({ x: 0, y: 0 });\n  }, []);\n\n  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);\n  const zoomOut = useCallback(\n    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),\n    [],\n  );\n\n  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };\n};\n\nexport const useWheelZoom = ({\n  enabled,\n  setZoomLevel,\n}: {\n  enabled: boolean;\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n}) =>\n  useCallback(\n    (event: React.WheelEvent) => {\n      if (!enabled) return;\n\n      event.preventDefault();\n      // Scrolling up (negative deltaY) zooms in.\n      setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));\n    },\n    [enabled, setZoomLevel],\n  );\n\nexport const useNavigation = ({\n  items,\n  loop,\n  startIndex,\n  resetZoom,\n  preloadImage,\n}: {\n  items: LightboxItem[];\n  loop: boolean;\n  startIndex: number;\n  resetZoom: () => void;\n  preloadImage: (src: string) => void;\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(\n    Math.max(0, Math.min(startIndex, items.length - 1)),\n  );\n\n  const goToIndex = useCallback(\n    (index: number) => {\n      if (items.length === 0) return;\n\n      // Looping wraps both ways; otherwise the index sticks at the ends.\n      const newIndex = loop\n        ? ((index % items.length) + items.length) % items.length\n        : Math.max(0, Math.min(index, items.length - 1));\n\n      setCurrentIndex(newIndex);\n      resetZoom();\n\n      // Fetch the neighbours so a step in either direction shows immediately.\n      [items[newIndex - 1], items[newIndex + 1]]\n        .filter(isImageItem)\n        .forEach((item) => preloadImage(item.src));\n    },\n    [items, loop, resetZoom, preloadImage],\n  );\n\n  const next = useCallback(() => {\n    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);\n  }, [currentIndex, items.length, loop, goToIndex]);\n\n  const prev = useCallback(() => {\n    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);\n  }, [currentIndex, loop, goToIndex]);\n\n  return { currentIndex, goToIndex, next, prev };\n};\n\nexport const useAutoplay = ({\n  isOpen,\n  autoplay,\n  itemCount,\n  currentIndex,\n  next,\n}: {\n  isOpen: boolean;\n  autoplay: LightboxProps['autoplay'];\n  itemCount: number;\n  currentIndex: number;\n  next: () => void;\n}) => {\n  const [isAutoPlaying, setIsAutoPlaying] = useState(false);\n  const timerRef = useRef<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;\n\n    const interval =\n      typeof autoplay === 'object'\n        ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS\n        : DEFAULT_AUTOPLAY_INTERVAL_MS;\n\n    timerRef.current = window.setTimeout(next, interval);\n\n    return () => window.clearTimeout(timerRef.current);\n  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);\n\n  // Opening a gallery with more than one item starts the slideshow.\n  useEffect(() => {\n    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));\n  }, [isOpen, autoplay, itemCount]);\n\n  const stopAutoplay = useCallback(() => {\n    setIsAutoPlaying(false);\n    window.clearTimeout(timerRef.current);\n  }, []);\n\n  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };\n};\n\nexport const useLightboxKeyboard = ({\n  isOpen,\n  showControls,\n  autoplay,\n  close,\n  prev,\n  next,\n  setIsAutoPlaying,\n}: {\n  isOpen: boolean;\n  showControls: boolean;\n  autoplay: LightboxProps['autoplay'];\n  close: () => void;\n  prev: () => void;\n  next: () => void;\n  setIsAutoPlaying: React.Dispatch<React.SetStateAction<boolean>>;\n}) => {\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const arrows: Record<string, () => void> = { ArrowLeft: prev, ArrowRight: next };\n\n    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {\n      if (event.key === 'Escape') {\n        close();\n        return;\n      }\n\n      const arrow = arrows[event.key];\n      if (arrow && showControls) {\n        event.preventDefault();\n        arrow();\n        return;\n      }\n\n      if (event.key === ' ') {\n        event.preventDefault();\n        if (autoplay) setIsAutoPlaying((playing) => !playing);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);\n};\n\n// Horizontal swipes step through the gallery; a downward swipe dismisses it.\nexport const useSwipe = ({\n  prev,\n  next,\n  close,\n}: {\n  prev: () => void;\n  next: () => void;\n  close: () => void;\n}) => {\n  const theme = useTheme();\n  const touchStartRef = useRef<{ x: number; y: number } | null>(null);\n\n  const handleTouchStart = useCallback((event: React.TouchEvent) => {\n    const touch = event.touches.length === 1 ? event.touches[0] : undefined;\n    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };\n  }, []);\n\n  const handleTouchEnd = useCallback(\n    (event: React.TouchEvent) => {\n      const start = touchStartRef.current;\n      const touch = event.changedTouches[0];\n      touchStartRef.current = null;\n      if (!start || !touch) return;\n\n      const deltaX = touch.clientX - start.x;\n      const deltaY = touch.clientY - start.y;\n      const swipe = minSwipeDistance(theme);\n\n      // Whichever axis moved further decides what the gesture meant.\n      if (Math.abs(deltaX) > Math.abs(deltaY)) {\n        if (Math.abs(deltaX) > swipe) {\n          if (deltaX > 0) prev();\n          else next();\n        }\n        return;\n      }\n\n      if (deltaY > swipe) close();\n    },\n    [prev, next, close, theme],\n  );\n\n  return { handleTouchStart, handleTouchEnd };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-MBC55H6M.js

@@ -0,0 +1,170 @@
+import {
+  NavigationMegaSection
+} from "./chunk-5QWQR7XT.js";
+import {
+  NavigationStandardBody
+} from "./chunk-PT2XADGH.js";
+import {
+  LogoBar,
+  NavigationShell
+} from "./chunk-HB7ISSLK.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MegaMenuLayout = React.forwardRef(
+  ({
+    variant,
+    logo,
+    items,
+    size,
+    minimal,
+    dataTestId: _dataTestId,
+    className,
+    maxWidth,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        className,
+        style: { maxWidth, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            elevation: minimal ? 0 : 1,
+            sx: {
+              width: "100%",
+              overflow: "hidden",
+              background: minimal ? "transparent" : void 0
+            },
+            children: [
+              logo && /* @__PURE__ */ jsx(LogoBar, { children: logo }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+                    gap: 3,
+                    p: 3
+                  },
+                  children: items.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+                    NavigationMegaSection,
+                    {
+                      section,
+                      sectionIndex,
+                      variant,
+                      size,
+                      minimal
+                    },
+                    section.id
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MegaMenuLayout.displayName = "MegaMenuLayout";
+var NAVIGATION_DEFAULTS = {
+  variant: "vertical",
+  size: "md",
+  minimal: false,
+  collapsible: false,
+  showDividers: false
+};
+var resolveProps = (props) => ({
+  ...NAVIGATION_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var NavigationMenu = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      items,
+      size,
+      minimal,
+      collapsible,
+      collapsed: controlledCollapsed,
+      onCollapseChange,
+      logo,
+      endContent,
+      maxWidth,
+      showDividers,
+      className,
+      style,
+      ...props
+    } = resolveProps(componentProps);
+    const [internalCollapsed, setInternalCollapsed] = useState(false);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleCollapseToggle = () => {
+      if (!isControlled) setInternalCollapsed(!collapsed);
+      onCollapseChange?.(!collapsed);
+    };
+    if (variant === "mega") {
+      return /* @__PURE__ */ jsx(
+        MegaMenuLayout,
+        {
+          ref,
+          variant,
+          collapsed,
+          logo,
+          items,
+          size,
+          minimal,
+          className,
+          maxWidth,
+          style,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        collapsed,
+        className,
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          NavigationStandardBody,
+          {
+            variant,
+            size,
+            minimal,
+            collapsed,
+            collapsible,
+            showDividers,
+            items,
+            logo,
+            endContent,
+            onCollapseToggle: handleCollapseToggle
+          }
+        )
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+
+export {
+  NavigationMenu
+};
+//# sourceMappingURL=chunk-MBC55H6M.js.map

package/dist/chunk-MBSYD3ZU.js

@@ -0,0 +1,82 @@
+import {
+  brandGradient,
+  initialsOf
+} from "./chunk-IQU4HKND.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/AppHeader/AppHeader.brand.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var MARK_PX = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
+var INITIALS_RATIO = 0.4;
+function markSx(theme, { edge, round, showLogo, seed }) {
+  return {
+    width: edge,
+    height: edge,
+    flex: "0 0 auto",
+    overflow: "hidden",
+    borderRadius: round ? "50%" : "30%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // Only the initials need the gradient; a logo covers it entirely, and
+    // painting it underneath would show at the corners of a transparent PNG.
+    backgroundImage: showLogo ? "none" : brandGradient(seed),
+    backgroundColor: showLogo ? theme.palette.action.hover : "transparent",
+    color: theme.palette.getContrastText(seed),
+    fontSize: rem(theme, Math.round(edge * INITIALS_RATIO)),
+    fontWeight: 700,
+    lineHeight: 1,
+    letterSpacing: "0.02em",
+    userSelect: "none"
+  };
+}
+var AppHeaderBrand = ({
+  name,
+  logoUrl,
+  seedColor,
+  size = "md",
+  shape = "rounded",
+  className,
+  dataTestId = "app-header-brand"
+}) => {
+  const theme = useTheme();
+  const [broken, setBroken] = React.useState(false);
+  React.useEffect(() => setBroken(false), [logoUrl]);
+  const edge = MARK_PX[size];
+  const seed = seedColor || theme.palette.primary.main;
+  const showLogo = Boolean(logoUrl) && !broken;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      role: "img",
+      "aria-label": name,
+      sx: markSx(theme, { edge, round: shape === "circle", showLogo, seed }),
+      children: showLogo ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "img",
+          src: logoUrl ?? void 0,
+          alt: "",
+          onError: () => setBroken(true),
+          "data-testid": `${dataTestId}-logo`,
+          sx: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) : /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, "data-testid": `${dataTestId}-initials`, children: initialsOf(name) })
+    }
+  );
+};
+AppHeaderBrand.displayName = "AppHeaderBrand";
+var AppHeader_brand_default = AppHeaderBrand;
+
+export {
+  AppHeaderBrand,
+  AppHeader_brand_default
+};
+//# sourceMappingURL=chunk-MBSYD3ZU.js.map

package/dist/chunk-MBSYD3ZU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.brand.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/scales';\n\nimport { brandGradient, initialsOf } from './AppHeader.colors';\nimport type { AppHeaderBrandProps } from './AppHeader.types';\n\n/** The mark's edge, per house size step. */\nconst MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };\n\n/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */\nconst INITIALS_RATIO = 0.4;\n\n/** The mark's box, lifted out of the component to keep it inside the complexity bar. */\nfunction markSx(\n  theme: Theme,\n  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },\n): Record<string, unknown> {\n  return {\n    width: edge,\n    height: edge,\n    flex: '0 0 auto',\n    overflow: 'hidden',\n    borderRadius: round ? '50%' : '30%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Only the initials need the gradient; a logo covers it entirely, and\n    // painting it underneath would show at the corners of a transparent PNG.\n    backgroundImage: showLogo ? 'none' : brandGradient(seed),\n    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',\n    color: theme.palette.getContrastText(seed),\n    fontSize: rem(theme, Math.round(edge * INITIALS_RATIO)),\n    fontWeight: 700,\n    lineHeight: 1,\n    letterSpacing: '0.02em',\n    userSelect: 'none',\n  };\n}\n\n/**\n * The mark that opens the header: the logo when there is one, the name's\n * initials on a gradient derived from the brand colour when there is not.\n *\n * Both branches occupy the SAME box, so a header does not resize when a logo\n * arrives — or when one fails to load and the initials take over, which is the\n * case a plain `<img>` renders as a torn-page glyph beside the store's name.\n */\nexport const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({\n  name,\n  logoUrl,\n  seedColor,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  dataTestId = 'app-header-brand',\n}) => {\n  const theme = useTheme();\n  const [broken, setBroken] = React.useState(false);\n  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather\n  // than inheriting the previous one's failure.\n  React.useEffect(() => setBroken(false), [logoUrl]);\n\n  const edge = MARK_PX[size];\n  const seed = seedColor || theme.palette.primary.main;\n  const showLogo = Boolean(logoUrl) && !broken;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      // `role=\"img\"` + the name: the initials are a picture of the brand, not\n      // two letters a screen reader should spell out.\n      role=\"img\"\n      aria-label={name}\n      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}\n    >\n      {showLogo ? (\n        <Box\n          component=\"img\"\n          src={logoUrl ?? undefined}\n          alt=\"\"\n          onError={() => setBroken(true)}\n          data-testid={`${dataTestId}-logo`}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n        />\n      ) : (\n        <Box component=\"span\" aria-hidden data-testid={`${dataTestId}-initials`}>\n          {initialsOf(name)}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nAppHeaderBrand.displayName = 'AppHeaderBrand';\n\nexport default AppHeaderBrand;\n"],"mappings":";;;;;;;;;AAEA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AA+EV;AAtER,IAAM,UAAqC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAGpF,IAAM,iBAAiB;AAGvB,SAAS,OACP,OACA,EAAE,MAAM,OAAO,UAAU,KAAK,GACL;AACzB,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,cAAc,QAAQ,QAAQ;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA;AAAA,IAGhB,iBAAiB,WAAW,SAAS,cAAc,IAAI;AAAA,IACvD,iBAAiB,WAAW,MAAM,QAAQ,OAAO,QAAQ;AAAA,IACzD,OAAO,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IACzC,UAAU,IAAI,OAAO,KAAK,MAAM,OAAO,cAAc,CAAC;AAAA,IACtD,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AACF;AAUO,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAGhD,QAAM,UAAU,MAAM,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,QAAM,OAAO,QAAQ,IAAI;AACzB,QAAM,OAAO,aAAa,MAAM,QAAQ,QAAQ;AAChD,QAAM,WAAW,QAAQ,OAAO,KAAK,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI,OAAO,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,UAAU,KAAK,CAAC;AAAA,MAEpE,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,WAAW;AAAA,UAChB,KAAI;AAAA,UACJ,SAAS,MAAM,UAAU,IAAI;AAAA,UAC7B,eAAa,GAAG,UAAU;AAAA,UAC1B,IAAI,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,MAC5E,IAEA,oBAAC,OAAI,WAAU,QAAO,eAAW,MAAC,eAAa,GAAG,UAAU,aACzD,qBAAW,IAAI,GAClB;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAO,0BAAQ;","names":[]}