{"version":3,"file":"index.cjs","names":[],"sources":["../package/common/accordion/accordion.types.ts","../package/common/accordion/accordion.module.pcss","../package/common/configProvider/validLocale.ts","../package/common/configProvider/configProvider.tsx","../package/common/configProvider/useComponentDefaults.ts","../package/common/configProvider/useLabels.ts","../package/common/configProvider/usePresentationDefault.ts","../package/common/configProvider/useLocale.ts","../package/common/configProvider/presentation.types.ts","../package/common/utils/activationKey.ts","../package/common/themeProvider/color.types.ts","../package/common/utils/isDev.ts","../package/common/styles/tone.module.pcss","../package/common/styles/tone.ts","../package/common/accordion/accordion.tsx","../package/common/actionButtons/actionButtons.module.pcss","../package/common/button/button.module.pcss","../package/common/loader/loader.types.ts","../package/common/loader/loader.module.pcss","../package/common/loader/loader.tsx","../package/common/button/button.types.ts","../package/common/ripple/ripple.module.pcss","../package/common/utils/interactiveTarget.ts","../package/common/ripple/ripple.tsx","../package/common/utils/renderIcon.tsx","../package/common/hooks/useHotkeys.ts","../package/common/utils/navigation.ts","../package/common/button/button.tsx","../package/common/actionButtons/actionButtons.tsx","../package/common/actionIcon/actionIcon.module.pcss","../package/common/actionIcon/actionIcon.tsx","../package/common/scrollbarProvider/scrollbarProvider.module.pcss","../package/common/scrollbarProvider/scrollbarProvider.tsx","../package/common/scrollbarProvider/index.ts","../package/common/themeProvider/defaultTheme.ts","../package/common/themeProvider/themeVariablesContext.ts","../package/common/themeProvider/themeReveal.ts","../package/common/themeProvider/theme.module.pcss","../package/common/themeProvider/themeProvider.tsx","../package/common/themeProvider/lightTheme.ts","../package/common/bodyEnd/portalHostContext.ts","../package/common/bodyEnd/bodyEnd.tsx","../package/common/toast/toast.module.pcss","../package/common/hooks/useMediaQuery.ts","../package/common/hooks/useCoarsePointer.ts","../package/common/hooks/useSwipeDismiss.ts","../package/common/toast/toast.tsx","../package/common/toast/toastService.ts","../package/common/toast/toastHost.tsx","../package/common/ahroweProvider/ahroweProvider.tsx","../package/common/alert/alert.module.pcss","../package/common/alert/alert.tsx","../package/common/animatedLogo/animatedLogo.module.pcss","../package/common/animatedLogo/animatedLogo.tsx","../package/common/animatedText/animatedText.types.ts","../package/common/animatedText/animatedText.module.pcss","../package/common/animatedText/animatedText.tsx","../package/common/badge/badge.types.ts","../package/common/badge/badge.module.pcss","../package/common/badge/badge.tsx","../package/common/avatar/avatar.module.pcss","../package/common/avatar/avatar.tsx","../package/common/avatar/avatarGroup.tsx","../package/common/interactableDiv/interactableDiv.module.pcss","../package/common/interactableDiv/interactableDiv.tsx","../package/common/interactableDiv/index.ts","../package/common/popover/popover.module.pcss","../package/common/styles/sheet.module.pcss","../package/common/sheetBackdrop/sheetBackdrop.tsx","../package/common/utils/scrollAncestors.ts","../package/common/utils/visualViewport.ts","../package/common/hooks/useAnchorTracking.ts","../package/common/popover/popover.types.ts","../package/common/popover/usePopoverPosition.ts","../package/common/hooks/useFocusBoundary.ts","../package/common/hooks/useVisualViewportSize.ts","../package/common/hooks/useSheet.ts","../package/common/hooks/useOverlay.ts","../package/common/utils/dismissClick.ts","../package/common/popover/popover.tsx","../package/common/breadcrumb/breadcrumb.module.pcss","../package/common/breadcrumb/breadcrumb.tsx","../package/common/buttonGroup/buttonGroup.types.ts","../package/common/buttonGroup/buttonGroup.module.pcss","../package/common/buttonGroup/buttonGroup.tsx","../package/common/utils/mergeRefs.ts","../package/common/utils/day.ts","../package/common/calendar/calendar.types.ts","../package/common/calendar/dates.ts","../package/common/calendar/format.ts","../package/common/utils/weekStart.ts","../package/common/calendar/useNow.ts","../package/common/emptyState/emptyState.module.pcss","../package/common/emptyState/emptyState.tsx","../package/common/calendar/layout.ts","../package/common/calendar/components/agendaList/agendaList.module.pcss","../package/common/calendar/components/agendaList/agendaList.tsx","../package/common/optionPicker/optionPicker.module.pcss","../package/common/optionPicker/optionPicker.tsx","../package/common/calendar/components/calendarHeader/calendarHeader.module.pcss","../package/common/calendar/components/calendarHeader/calendarHeader.tsx","../package/common/calendar/gesture.ts","../package/common/calendar/useGestures.ts","../package/common/calendar/usePager.ts","../package/common/calendar/pager.module.pcss","../package/common/calendar/components/compactMonth/compactMonth.module.pcss","../package/common/calendar/components/compactMonth/compactMonth.tsx","../package/common/calendar/components/monthView/monthView.module.pcss","../package/common/calendar/components/monthView/monthView.tsx","../package/common/calendar/components/timeGrid/timeGrid.module.pcss","../package/common/calendar/components/timeGrid/timeGrid.tsx","../package/common/calendar/calendar.module.pcss","../package/common/calendar/calendar.tsx","../package/common/card/card.types.ts","../package/common/card/card.module.pcss","../package/common/card/Card.tsx","../package/common/card/CardHeader.tsx","../package/common/skeleton/skeleton.types.ts","../package/common/skeleton/skeleton.module.pcss","../package/common/skeleton/skeleton.tsx","../package/common/image/image.module.pcss","../package/common/image/image.tsx","../package/common/card/CardMedia.tsx","../package/common/card/CardContent.tsx","../package/common/card/CardActions.tsx","../package/common/carousel/carouselSlideContext.ts","../package/common/carousel/carousel.module.pcss","../package/common/styles/scrollFade.module.pcss","../package/common/carousel/carousel.tsx","../package/common/hooks/useAutoGrow.ts","../package/common/chatComposer/chatComposer.module.pcss","../package/common/chatComposer/chatComposer.tsx","../package/common/chatMessage/chatMessage.types.ts","../package/common/chatMessage/chatMessage.module.pcss","../package/common/chatMessage/chatMessage.tsx","../package/common/infiniteBlock/useInfiniteScroll.ts","../package/common/chatMessageList/chatMessageList.module.pcss","../package/common/chatMessageList/chatMessageList.tsx","../package/common/checkbox/checkbox.module.pcss","../package/common/checkbox/checkbox.tsx","../package/common/chip/chip.types.ts","../package/common/chip/chip.module.pcss","../package/common/chip/chip.tsx","../package/common/chip/chipContainer.tsx","../package/common/tooltip/tooltip.module.pcss","../package/common/tooltip/tooltip.tsx","../package/common/animatedIcon/animatedIcon.module.pcss","../package/common/animatedIcon/animatedIcon.tsx","../package/common/input/input.module.pcss","../package/common/input/input.types.ts","../package/common/input/input.tsx","../package/common/colorPicker/toHex.ts","../package/common/colorPicker/colorPicker.module.pcss","../package/common/colorPicker/colorPicker.tsx","../package/common/modal/modal.module.pcss","../package/common/hooks/useScrollEdges.ts","../package/common/modal/modal.tsx","../package/common/utils/listNavigation.ts","../package/common/menu/menu.types.ts","../package/common/menu/menuItem.tsx","../package/common/commandPalette/filterCommands.ts","../package/common/commandPalette/commandPalette.module.pcss","../package/common/commandPalette/commandPalette.tsx","../package/common/confirmModal/confirmModal.tsx","../package/common/hooks/useClipboard.ts","../package/common/copyButton/copyButton.module.pcss","../package/common/copyButton/copyButton.tsx","../package/common/datePicker/components/datePickerMonth/datePickerMonth.module.pcss","../package/common/datePicker/dateFunctions.ts","../package/common/datePicker/components/datePickerMonth/datePickerMonth.tsx","../package/common/dropdown/dropdown.module.pcss","../package/common/dropdown/dropdown.tsx","../package/common/maskedInput/mask.ts","../package/common/maskedInput/maskedInput.tsx","../package/common/datePicker/datePicker.module.pcss","../package/common/datePicker/datePicker.tsx","../package/common/divider/divider.types.ts","../package/common/divider/divider.module.pcss","../package/common/divider/divider.tsx","../package/common/drawer/drawer.module.pcss","../package/common/drawer/drawer.tsx","../package/common/dropZone/dropZone.types.ts","../package/common/dropZone/dropZone.module.pcss","../package/common/dropZone/dropZone.tsx","../package/common/errorBoundary/errorBoundary.module.pcss","../package/common/errorBoundary/errorBoundary.tsx","../package/common/fab/components/fabBase/fabBase.module.pcss","../package/common/fab/components/fabBase/fabBase.tsx","../package/common/fab/fab.module.pcss","../package/common/fab/fab.tsx","../package/common/flip/flip.module.pcss","../package/common/flip/flip.tsx","../package/common/iconPicker/iconPicker.module.pcss","../package/common/iconPicker/iconPicker.tsx","../package/common/idleManager/idleManager.tsx","../package/common/inputDropdown/inputDropdown.module.pcss","../package/common/inputDropdown/inputDropdown.tsx","../package/common/kanbanBoard/kanbanBoard.module.pcss","../package/common/kanbanBoard/KanbanItem.tsx","../package/common/kanbanBoard/KanbanColumn.tsx","../package/common/kanbanBoard/kanbanBoard.utils.ts","../package/common/kanbanBoard/KanbanBoard.tsx","../package/services/klipy.ts","../package/common/searchInput/searchInput.module.pcss","../package/common/searchInput/searchInput.tsx","../package/common/klipyPicker/components/gifPreview/gifPreview.module.pcss","../package/common/klipyPicker/components/gifPreview/gifPreview.tsx","../package/common/klipyPicker/components/gifView/gifView.module.pcss","../package/common/klipyPicker/components/gifView/gifView.tsx","../package/common/klipyPicker/klipyPicker.module.pcss","../package/common/klipyPicker/klipyPicker.tsx","../package/common/panZoom/panZoom.geometry.ts","../package/common/panZoom/panZoom.module.pcss","../package/common/panZoom/panZoom.tsx","../package/common/lightbox/lightbox.flight.ts","../package/common/lightbox/lightbox.module.pcss","../package/common/lightbox/lightbox.tsx","../package/common/listItem/listItem.module.pcss","../package/common/listItem/listItem.tsx","../package/common/loadingOverlay/loadingOverlay.module.pcss","../package/common/loadingOverlay/loadingOverlay.tsx","../package/common/menu/menu.module.pcss","../package/common/menu/menu.tsx","../package/common/menu/menuHotkeys.ts","../package/common/multiSelect/multiSelect.module.pcss","../package/common/multiSelect/multiSelect.tsx","../package/common/numberInput/numberInput.module.pcss","../package/common/numberInput/useStepRepeat.ts","../package/common/numberInput/numberInput.tsx","../package/common/numberInput/index.ts","../package/common/otpInput/otpInput.types.ts","../package/common/otpInput/otpInput.module.pcss","../package/common/otpInput/otpInput.tsx","../package/hooks/useWindowSize.ts","../package/common/overscroll/overscroll.module.pcss","../package/common/overscroll/overscroll.tsx","../package/common/pagination/pagination.module.pcss","../package/common/pagination/pagination.tsx","../package/common/progressBar/progressBar.module.pcss","../package/common/progressBar/progressBar.tsx","../package/common/radioGroup/radioGroup.types.ts","../package/common/radioGroup/radioGroup.module.pcss","../package/common/radioGroup/radioGroup.tsx","../package/common/rating/rating.module.pcss","../package/common/rating/rating.tsx","../package/common/revealLens/revealLens.module.pcss","../package/common/revealLens/revealLens.tsx","../package/common/planCanvas/planCanvas.module.pcss","../package/common/planCanvas/planCanvas.tsx","../package/common/roomDrawer/usePlanHistory.ts","../package/common/roomDrawer/roomDrawer.module.pcss","../package/common/roomDrawer/roomDrawer.tsx","../package/common/roomViewer/roomViewer.module.pcss","../package/common/roomViewer/roomViewer.tsx","../package/common/scrollFade/scrollFade.types.ts","../package/common/scrollFade/scrollFade.module.pcss","../package/common/scrollFade/scrollFade.tsx","../package/common/sectionHeader/sectionHeader.types.ts","../package/common/sectionHeader/sectionHeader.module.pcss","../package/common/sectionHeader/sectionHeader.tsx","../package/common/slider/slider.module.pcss","../package/common/slider/slider.tsx","../package/common/splitButton/splitButton.module.pcss","../package/common/splitButton/splitButton.tsx","../package/common/stepper/stepper.module.pcss","../package/common/stepper/stepper.types.ts","../package/common/stepper/stepper.tsx","../package/common/sticky/stickyStack.ts","../package/common/sticky/sticky.module.pcss","../package/common/sticky/sticky.tsx","../package/common/switch/switch.module.pcss","../package/common/switch/switch.tsx","../package/common/tabHeader/tabHeader.module.pcss","../package/common/tabHeader/tabHeader.tsx","../package/common/templateEditor/templateEditor.module.pcss","../package/common/templateEditor/templateEditor.utils.ts","../package/common/templateEditor/templateEditorSuggestions.tsx","../package/common/templateEditor/templateEditor.dom.ts","../package/common/templateEditor/templateEditable.tsx","../package/common/templateEditor/templateEditor.types.ts","../package/common/templateEditor/templateEditorPalette.tsx","../package/common/templateEditor/templateEditor.tsx","../package/common/textarea/textarea.tsx","../package/common/themeProvider/useTheme.ts","../package/common/tiltGroup/tiltGroup.tsx","../package/common/tilt/tiltMath.ts","../package/common/tilt/tilt.module.pcss","../package/common/tilt/tilt.tsx","../package/common/timeInput/timeFunctions.ts","../package/common/timeInput/components/clockDial/clockDial.module.pcss","../package/common/timeInput/components/clockDial/clockDial.tsx","../package/common/timeInput/timeInput.module.pcss","../package/common/timeInput/timeInput.tsx","../package/common/timeline/timeline.module.pcss","../package/common/timeline/timeline.types.ts","../package/common/timeline/timeline.tsx","../package/common/timer/timer.chime.ts","../package/common/timer/timer.module.pcss","../package/common/timer/timer.tsx","../package/common/virtualList/virtualList.module.pcss","../package/common/virtualList/virtualList.utils.ts","../package/common/virtualList/virtualRow.tsx","../package/common/virtualList/useHeaderNavigation.ts","../package/common/virtualList/virtualListHeader.tsx","../package/common/virtualList/scroller.ts","../package/common/virtualList/useVirtualWindow.ts","../package/common/virtualList/useSelection.ts","../package/common/virtualList/useColumns.ts","../package/common/virtualList/useRowDrag.ts","../package/common/virtualList/useSorting.ts","../package/common/virtualList/useColumnResize.ts","../package/common/virtualList/useRowNavigation.ts","../package/common/virtualList/virtualList.tsx","../package/common/tree/flattenTree.ts","../package/common/tree/tree.module.pcss","../package/common/tree/tree.tsx","../package/common/weatherIcon/weatherIcon.types.ts","../package/common/weatherIcon/weatherIcon.module.pcss","../package/common/weatherIcon/parts.tsx","../package/common/weatherIcon/weatherIcon.tsx","../package/common/wizard/wizard.module.pcss","../package/common/wizard/wizard.tsx","../package/services/formValidation/FormValidatorGroupWithForm.tsx","../package/services/formValidation/validatableComponent.tsx","../package/services/formValidation/useFormValidatorGroup.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/**\n * How much the header stands out, as on Button, Badge and Chip. No `Filled`: a section of content\n * should not compete with the page's main action.\n */\nexport enum AccordionStyleType {\n /** The header in a light tint of the colour, its text in the colour. */\n Light = 'light',\n /** A border in the colour, the header's text in the colour. The default. */\n Outlined = 'outlined',\n /** The header's text in the colour, no chrome and no padding, for a disclosure inside other content. */\n Plain = 'plain',\n}\n\nexport type AccordionSlots = 'root' | 'header' | 'title' | 'icon' | 'body' | 'bodyInner';\n\nexport interface AccordionProps extends HtmlProps {\n title?: string;\n children?: ReactNode;\n expanded?: boolean | null;\n onHeaderClicked?: (id: string, isExpanded: boolean) => void;\n styleType?: AccordionStyleType;\n /** A `ThemeColor` (default `Neutral`) or any CSS colour. */\n color?: ColorValue;\n /**\n * Joins this accordion to the joined ones beside it into one block; otherwise neighbours keep a\n * small gap. Default `false`.\n */\n joined?: boolean;\n startOpen?: boolean;\n hideHeader?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames;\n styles?: SlotStyles;\n}\n",".accordion {\n color: var(--text-color);\n\n /* Clips the header's fill and hover layer to the corners; the body clips anyway, for its height\n transition. */\n overflow: hidden;\n\n /* Positioned, so a joined section paints over the one above, whose positioned header would\n otherwise cover the seam where WebKit draws it thinner than the 1px overlap. */\n position: relative;\n\n &-header {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75em;\n padding: 0.75em 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* The rest of the accordion measures from the header, so the base is set here. */\n font-size: var(--default-font-size);\n\n /* A layer in currentcolor, so it shows on a fill as on nothing: a Light header already uses\n the background. */\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: currentcolor;\n opacity: 0;\n transition: opacity 0.15s;\n pointer-events: none;\n }\n\n /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.06;\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n /* Positioned, so they paint above the hover layer, which is positioned too and comes first. */\n &-title {\n position: relative;\n flex: 1;\n min-width: 0;\n }\n\n &-icon {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n position: relative;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n transition: transform 0.2s;\n\n &-active {\n transform: rotate(180deg);\n }\n }\n\n &-body {\n overflow: hidden;\n position: relative;\n transition: height 0.2s ease;\n\n &-inner {\n padding: 1em;\n }\n }\n\n /* --accordion-seam is the line a joined section draws where it meets the one above. */\n &-style {\n &-light {\n /* The page colour: the border is the tint itself, so a seam in it would merge two tinted\n headers into one block. */\n --accordion-seam: var(--background);\n\n border: 1px solid var(--tone-light);\n border-radius: var(--default-border-radius);\n }\n\n &-outlined {\n --accordion-seam: var(--tone-outline);\n\n border: 1px solid var(--tone-outline);\n border-radius: var(--default-border-radius);\n }\n }\n\n &-style-light &-header {\n background: var(--tone-light);\n color: var(--tone-text);\n }\n\n &-style-outlined &-header,\n &-style-plain &-header {\n color: var(--tone-text);\n }\n\n /* Plain sits inside other content: no padding, so no hover layer, and the focus ring goes\n outside the text rather than over it. */\n &-style-plain &-header {\n padding: 0;\n\n &::before {\n display: none;\n }\n\n &:focus-visible {\n outline-offset: 2px;\n }\n }\n\n &-style-plain &-body-inner {\n padding: 0.375em 0 0;\n }\n\n & + & {\n margin-top: 0.5em;\n }\n\n /* Each joined section overlaps the one above by its 1px border, and that one hides (not removes)\n its bottom border: a 1px gap or two borders snap to different device pixels at fractional zoom.\n Ties `& + &` on specificity, so it stays after it. Firefox before 121 lacks :has(). */\n &-joined + &-joined {\n margin-top: -1px;\n border-top-color: var(--accordion-seam);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n &-style-plain&-joined + &-style-plain&-joined {\n margin-top: 0;\n }\n\n &-joined:has(+ &-joined) {\n border-bottom-color: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-body,\n .accordion-icon {\n transition: none;\n }\n}\n","const reported = new Set();\n\n/**\n * `tag` as Intl writes it, or `undefined` (the browser's locale) for a tag Intl throws on, such as\n * `'de_AT'` or `''`: every formatter and collator below it would throw during render.\n */\nexport function validLocale(tag: string | undefined, source: string): string | undefined {\n if (tag === undefined) return undefined;\n try {\n return Intl.getCanonicalLocales(tag)[0];\n } catch {\n if (!reported.has(tag)) {\n reported.add(tag);\n console.warn(\n `${source}: \\`locale\\` ${JSON.stringify(tag)} is not a language tag, so the browser's locale is used. ` +\n `Write it like 'de-AT'.`,\n );\n }\n return undefined;\n }\n}\n","import React, { createContext, useContext, useMemo } from 'react';\nimport type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';\nimport type { Presentation } from '../configProvider/presentation.types';\nimport { validLocale } from './validLocale';\n\nexport const ConfigContext = createContext(null);\n\n/**\n * One setting for every component that can present as a bottom sheet, kept separate from\n * `defaultProps` so that turning sheets on (or off) app-wide is a single switch rather than one\n * entry per component key — the components that can do it are unrelated to each other, and a\n * consumer who missed one would get sheets in half their app.\n */\nexport const PresentationContext = createContext(undefined);\n\nexport const NavigateContext = createContext(undefined);\n\nexport const LocaleContext = createContext(undefined);\n\n/**\n * Shallow-merge two default maps per component key, so nested ConfigProviders\n * compose: an inner provider's `Input` defaults extend (and override on\n * conflict) the outer provider's `Input` defaults rather than replacing them.\n */\nfunction mergeDefaults(parent: ComponentDefaults | null, own: ComponentDefaults | undefined): ComponentDefaults {\n if (!parent) return own ?? {};\n if (!own) return parent;\n\n const merged: Record = { ...parent };\n for (const key in own) {\n merged[key] = {\n ...(parent as Record)[key],\n ...(own as Record)[key],\n };\n }\n return merged as ComponentDefaults;\n}\n\nfunction ConfigProvider({ children, defaultProps, presentation, navigate, locale }: ConfigProviderProps) {\n const parent = useContext(ConfigContext);\n const value = useMemo(() => mergeDefaults(parent, defaultProps), [parent, defaultProps]);\n\n // A nested provider that doesn't set `presentation` keeps the outer one's, the same way\n // `defaultProps` compose.\n const inheritedPresentation = useContext(PresentationContext);\n const presentationValue = presentation ?? inheritedPresentation;\n const inheritedNavigate = useContext(NavigateContext);\n const inheritedLocale = useContext(LocaleContext);\n\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\nexport default ConfigProvider;\n","import { useContext } from 'react';\nimport { ConfigContext } from './configProvider';\nimport type { ComponentDefaults } from './configProvider.types';\n\n/**\n * Merge global defaults from the nearest `ConfigProvider` **under** the props\n * the caller actually passed: an explicit prop always wins, a global default\n * fills in only props the caller left `undefined`, and the component's own\n * built-in default (its destructuring default) applies when neither is set.\n *\n * Call it at the very top of a component and destructure from the result\n * instead of from the raw props:\n *\n * ```tsx\n * function Input(props: InputProps) {\n * const { alwaysFloatLabel = false, ... } = useComponentDefaults('Input', props);\n * }\n * ```\n */\nexport function useComponentDefaults

(component: keyof ComponentDefaults, props: P): P {\n const ctx = useContext(ConfigContext);\n const defaults = ctx?.[component];\n if (!defaults) return props;\n\n const merged: Record = { ...defaults };\n for (const key in props) {\n const value = (props as Record)[key];\n if (value !== undefined) merged[key] = value;\n }\n return merged as P;\n}\n","import { useContext } from 'react';\n\nimport { ConfigContext } from './configProvider';\nimport type { ComponentDefaults } from './configProvider.types';\n\n/**\n * Resolves the text a component renders of its own, per key, from three places:\n * the component's built-in English, the nearest `ConfigProvider`, and the\n * instance's `labels` prop, in that order of increasing precedence.\n *\n * Per key is the point, and the reason this exists next to `useComponentDefaults`\n * rather than relying on it. That one fills in whole props: a `labels` object on\n * an instance would replace the provider's entirely, so translating an app once\n * and overriding a single string on one instance would silently drop every other\n * translation for that component.\n *\n * ```tsx\n * const DEFAULT_LABELS: Required = { close: 'Close' };\n *\n * function Modal({ labels, ...rest }: ModalProps) {\n * const text = useLabels('Modal', labels, DEFAULT_LABELS);\n * // text.close\n * }\n * ```\n */\nexport function useLabels(\n component: keyof ComponentDefaults,\n labels: Partial | undefined,\n defaults: L,\n): L {\n const ctx = useContext(ConfigContext);\n const global = (ctx?.[component] as { labels?: Partial } | undefined)?.labels;\n // Not memoised on purpose: `defaults` and `labels` are object literals at every\n // call site, so a dependency list would never hit and the bookkeeping would\n // cost more than three spreads of a handful of strings.\n return { ...defaults, ...global, ...labels };\n}\n","import { useContext } from 'react';\nimport { PresentationContext } from './configProvider';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/**\n * The nearest `ConfigProvider`'s app-wide `presentation`, or `undefined` when none is set.\n *\n * Sits between a component-keyed global default and the component's own built-in default, so the\n * full order is: explicit prop → `defaultProps..presentation` → this → built-in.\n */\nexport function usePresentationDefault(): Presentation | undefined {\n return useContext(PresentationContext);\n}\n","import { useContext } from 'react';\nimport { LocaleContext } from './configProvider';\n\n/**\n * The nearest `ConfigProvider`'s `locale`, or `undefined` when none is set, which `Intl` reads as\n * the browser's locale. Pass it straight to `Intl` so the app's own dates match the components'.\n */\nexport function useLocale(): string | undefined {\n return useContext(LocaleContext);\n}\n","/**\n * How a surface is presented on screen. Lives here rather than with any one of\n * the components that read it: `Modal`, `Popover`, `Dropdown` and `MultiSelect`\n * all take it, and `ConfigProvider` owns the app-wide switch that sets it for\n * every one of them at once.\n */\nexport enum Presentation {\n /** Wherever the component normally puts it: anchored to its trigger, or centred for a Modal. */\n Default = 'default',\n /** Pinned to the bottom of the screen, full width up to a maximum. */\n Sheet = 'sheet',\n /** A sheet on touch devices with a small screen, anchored everywhere else. */\n Auto = 'auto',\n}\n","import type React from 'react';\n\n/**\n * Whether a keydown is a click-equivalent activation of the element the handler sits on.\n *\n * The target check is the important half: keydown bubbles, so without it a Space typed into a\n * nested input activates the container and, once the container calls `preventDefault()`, never\n * reaches the input at all.\n */\nexport function isSelfActivation(event: React.KeyboardEvent): boolean {\n return event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ');\n}\n","/** The theme's named colours, shared by every component that takes a `color`. */\nexport enum ThemeColor {\n /** `--primary-color`. */\n Primary = 'primary',\n /** The surrounding text colour, with `--border-color` for an outline. */\n Neutral = 'neutral',\n /** `--success-color`. */\n Success = 'success',\n /** `--info-color`. */\n Info = 'info',\n /** `--warn-color`. */\n Warn = 'warn',\n /** `--error-color`. */\n Error = 'error',\n}\n\n/**\n * A `ThemeColor`, or any CSS colour such as `'var(--brand)'` or `'#7c3aed'`.\n * `string & {}` rather than `string`, which would swallow the enum into one plain string type.\n */\nexport type ColorValue = ThemeColor | (string & {});\n","// No `typeof process` guard: a browser has no `process` even where a bundler replaced\n// `process.env.NODE_ENV`, so the guard turned every warning off. Unbundled, the ReferenceError\n// means production. Declared here rather than globally, to stay out of the .d.ts.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nexport function isDev(): boolean {\n try {\n return process.env.NODE_ENV !== 'production';\n } catch {\n return false;\n }\n}\n","/* --tone comes from a colour class below, or inline (tone.ts) for any other colour. */\n.tone {\n /* White wherever it reaches 3:1 (relative luminance below 0.3, as Mantine), else black at 7:1 or\n more. Not WCAG 2's own crossover at 0.179, which puts black on mid-tone blues where white reads\n far better. */\n --tone-is-dark: clamp(0, (0.3 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1);\n --tone-auto-contrast: color(from var(--tone) srgb-linear var(--tone-is-dark) var(--tone-is-dark) var(--tone-is-dark));\n --tone-contrast: var(--tone-auto-contrast);\n\n /* A third of the way to the text colour, so it reads (dark red on a dark theme), with the lost\n saturation put back (x1.5) so a light theme is not muddy. Borders, dots and icons keep the\n pure colour. */\n --tone-text: oklch(from color-mix(in oklab, var(--tone) 67%, var(--text-color, currentcolor)) l calc(c * 1.5) h);\n --tone-light: color-mix(in srgb, var(--tone) 22%, transparent);\n --tone-fill: var(--tone);\n --tone-outline: var(--tone);\n --tone-gradient: none;\n}\n\n/* After .tone, whose defaults these override. Not the theme's solid -lighter pastels for\n --tone-light: Light looked like two styles depending on the colour. */\n.primary {\n --tone: var(--primary-color);\n --tone-contrast: var(--text-on-primary, var(--tone-auto-contrast));\n --tone-gradient: var(--primary-gradient, none);\n}\n\n/* currentcolor, so it takes the colour of what it sits on, such as a close button on an Alert. Not\n --background-accent for the fill: in a light theme it stood out less than the tint. */\n.neutral {\n --tone: currentcolor;\n --tone-contrast: currentcolor;\n --tone-text: currentcolor;\n --tone-fill: color-mix(in srgb, currentcolor 20%, transparent);\n --tone-light: color-mix(in srgb, currentcolor 8%, transparent);\n --tone-outline: var(--border-color);\n}\n\n.success {\n --tone: var(--success-color);\n}\n\n.info {\n --tone: var(--info-color);\n}\n\n.warn {\n --tone: var(--warn-color);\n}\n\n.error {\n --tone: var(--error-color);\n --tone-contrast: var(--text-on-delete, var(--tone-auto-contrast));\n}\n\n/* Browsers in the support floor without relative colour syntax (Chrome 119, Firefox 128). Tests\n the formula itself, so a browser that parses `from` but not the rest falls back too. */\n@supports not\n((color: color(from red srgb-linear clamp(0, (0.3 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) 0 0)) and\n (color: oklch(from red l calc(c * 1.5) h))) {\n .tone {\n --tone-auto-contrast: var(--text-on-primary);\n --tone-text: color-mix(in oklab, var(--tone) 67%, var(--text-color, currentcolor));\n }\n}\n","import { useEffect, type CSSProperties } from 'react';\nimport cx from 'classnames';\n\nimport { ThemeColor, type ColorValue } from '../themeProvider/color.types';\nimport { isDev } from '../utils/isDev';\nimport styles from './tone.module.pcss';\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst CLASS_BY_COLOR = new Map(\n Object.entries({\n primary: styles.primary,\n neutral: styles.neutral,\n success: styles.success,\n info: styles.info,\n warn: styles.warn,\n error: styles.error,\n } satisfies Record),\n);\n\n/** The class, and for a colour of the caller's own the inline style, that set the --tone properties. */\nexport function toneProps(color: ColorValue): { className: string; style?: CSSProperties } {\n const named = CLASS_BY_COLOR.get(color);\n if (named) return { className: cx(styles.tone, named) };\n return { className: styles.tone, style: { '--tone': color } as CSSProperties };\n}\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst VAR_BY_COLOR = new Map(\n Object.entries({\n primary: 'var(--primary-color)',\n neutral: 'currentcolor',\n success: 'var(--success-color)',\n info: 'var(--info-color)',\n warn: 'var(--warn-color)',\n error: 'var(--error-color)',\n } satisfies Record),\n);\n\n/** A colour as a CSS value, for a component that paints it itself rather than through --tone. */\nexport function cssColor(color: ColorValue): string {\n return VAR_BY_COLOR.get(color) ?? color;\n}\n\n/** Warns in development about a value that can never be a colour. A var() passes: it only resolves on screen. */\nexport function useToneCheck(component: string, colors: (ColorValue | undefined)[]): void {\n const key = colors.join('\\n');\n useEffect(() => {\n // jsdom before 30 has no CSS.supports, and a development check must not break a consumer's tests.\n if (!isDev() || typeof globalThis.CSS?.supports !== 'function') return;\n for (const color of key.split('\\n')) {\n if (color && !CLASS_BY_COLOR.has(color) && !CSS.supports('color', color)) {\n console.warn(`${component}: \\`color\\` takes a ThemeColor or a CSS colour, and got '${color}'.`);\n }\n }\n }, [component, key]);\n}\n","import React, { useState, useEffect, useId, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport s from './accordion.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nconst CLASS_BY_STYLE: Record = {\n [AccordionStyleType.Light]: s.accordionStyleLight,\n [AccordionStyleType.Outlined]: s.accordionStyleOutlined,\n [AccordionStyleType.Plain]: s.accordionStylePlain,\n};\n\nconst NAVIGATION_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);\n\n/** Same parent only, so a list nested in a body is a set of its own. */\nfunction siblingHeaders(root: HTMLElement): HTMLElement[] {\n return [...(root.parentElement?.children ?? [])].flatMap((sibling) => {\n if (!sibling.classList.contains(s.accordion)) return [];\n const header = sibling.querySelector(':scope > [role=\"button\"][aria-expanded]');\n return header ? [header] : [];\n });\n}\n\nfunction focusSiblingHeader(header: HTMLElement, key: string) {\n const headers = header.parentElement ? siblingHeaders(header.parentElement) : [];\n const index = headers.indexOf(header);\n if (index < 0) return;\n const last = headers.length - 1;\n const next =\n key === 'Home'\n ? 0\n : key === 'End'\n ? last\n : key === 'ArrowDown'\n ? (index + 1) % headers.length\n : (index - 1 + headers.length) % headers.length;\n headers[next].focus();\n}\n\nfunction Accordion(props: AccordionProps): ReactElement {\n const {\n id = '',\n title = '',\n children = null,\n expanded = null,\n onHeaderClicked = () => {},\n styleType = AccordionStyleType.Outlined,\n color = ThemeColor.Neutral,\n joined = false,\n startOpen = false,\n hideHeader = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Accordion', props);\n // The header and the body name each other through aria-controls/aria-labelledby, so both need\n // an id that is stable across renders and unique even with several accordions on the page.\n const generatedId = useId();\n const headerId = `${generatedId}-header`;\n const bodyId = `${generatedId}-body`;\n const bodyRef = useRef(null);\n const bodyInnerRef = useRef(null);\n\n const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n const [bodyHeight, setBodyHeight] = useState(null);\n\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n if (expanded !== null) setIsExpanded(expanded);\n }, [expanded]);\n\n useEffect(() => {\n const el = bodyRef.current;\n if (el) el.inert = !isExpanded;\n }, [isExpanded]);\n\n useEffect(() => {\n const el = bodyInnerRef.current;\n if (!el) return;\n const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n observer.observe(el);\n return () => observer.unobserve(el);\n }, []);\n\n function toggleExpanded() {\n const next = !isExpanded;\n onHeaderClicked(id, next);\n if (expanded === null) setIsExpanded(next);\n }\n\n const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n const tone = toneProps(color);\n useToneCheck('Accordion', [color]);\n\n return (\n \n {!hideHeader && (\n {\n if (NAVIGATION_KEYS.has(event.key) && event.target === event.currentTarget) {\n event.preventDefault();\n focusSiblingHeader(event.currentTarget, event.key);\n return;\n }\n if (!isSelfActivation(event)) return;\n // Space scrolls the page otherwise, which is what a real \n );\n}\n\nButton.StyleType = ButtonStyleType;\nButton.Size = ButtonSize;\nButton.Type = ButtonType;\n\nexport default Button;\n","import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\nimport type { ActionButtonsLabels } from './actionButtons.types';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required = {\n submit: 'Save',\n cancel: 'Cancel',\n};\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n const {\n onSubmit = () => null,\n onClose = () => null,\n labels,\n submitButtonStyle = ButtonStyleType.Filled,\n submitButtonColor = ThemeColor.Primary,\n isSubmitButtonLoading = false,\n isSubmitButtonDisabled = false,\n submitButtonIcon = undefined,\n cancelButtonStyle = ButtonStyleType.Outlined,\n cancelButtonColor = ThemeColor.Primary,\n isCancelButtonLoading = false,\n isCancelButtonDisabled = false,\n cancelButtonIcon = undefined,\n hidePrimaryButton = false,\n hideSecondaryButton = false,\n noMargin = false,\n stackButtons = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('ActionButtons', props);\n const text = useLabels('ActionButtons', labels, DEFAULT_LABELS);\n return (\n \n {!hidePrimaryButton && (\n \n {text.submit}\n \n )}\n {!hideSecondaryButton && (\n \n {text.cancel}\n \n )}\n \n );\n}\n","/* Sized by its icon, where an Icon-size Button leaves the box to the caller. */\n.actionIcon {\n width: calc(1em + 8px);\n height: calc(1em + 8px);\n\n /* A flex box, so the icon centres in it rather than riding on a text baseline. */\n &-label {\n display: flex;\n }\n}\n","import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport Button from '../button';\nimport { ButtonSize, ButtonStyleType } from '../button/button.types';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport type { ActionIconProps } from './actionIcon.types';\nimport styles from './actionIcon.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction ActionIcon({\n icon,\n styleType = ButtonStyleType.Plain,\n color = ThemeColor.Neutral,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: ActionIconProps): ReactElement {\n return (\n \n {renderIcon(icon, { className: classNames?.icon, style: slotStyles?.icon })}\n \n );\n}\n\nexport default ActionIcon;\n",".scrollbarProvider {\n display: contents;\n}\n\n/* Zero specificity, so any scrollbar rule of a component's or the app's own wins. As\n `.scrollbarProvider *` these tied with a single class and won or lost on stylesheet order. */\n\n/* Firefox */\n:where(.scrollbarProvider *) {\n scrollbar-width: thin;\n scrollbar-color: var(--background-accent-light) transparent;\n}\n\n/* Chrome, Edge, and Safari */\n:where(.scrollbarProvider *)::-webkit-scrollbar {\n width: 12px;\n}\n\n:where(.scrollbarProvider *)::-webkit-scrollbar-track {\n background: transparent;\n}\n\n:where(.scrollbarProvider *)::-webkit-scrollbar-thumb {\n background-color: var(--background-accent-light);\n border-radius: 10px;\n border: 3px solid transparent;\n background-clip: padding-box;\n}\n\n/* The page's own scrollbar: is outside every provider, so AhroweProvider sets the thumb\n colour on it. Without that property the value is invalid, and the browser's own stays. */\n:where(html) {\n scrollbar-color: var(--ahrowe-page-scrollbar-thumb) transparent;\n}\n","import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './scrollbarProvider.module.pcss';\n\ninterface Properties {\n className?: string | undefined;\n children?: React.ReactNode | undefined;\n}\n\nfunction ScrollbarProvider({ className = undefined, children = undefined }: Properties): ReactElement {\n return

{children}
;\n}\n\nexport default ScrollbarProvider;\n","import ScrollbarProvider from './scrollbarProvider';\n\nexport default ScrollbarProvider;\n","import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n id: 'default',\n variables: {\n '--grey': '#8A8A8A',\n '--lightgrey': '#e0e0e0',\n '--lightergrey': '#B1B1B1',\n '--white': '#FFFFFF',\n '--red': '#D6002A',\n '--lighter-red': '#ffeae9',\n '--green': '#287626',\n '--lighter-green': '#C4FFC9',\n '--blue': '#5873d5',\n '--lighter-blue': '#C6DBFF',\n '--black': 'black',\n '--orange': '#ff7f50',\n '--lighter-orange': '#ffe5d9',\n\n '--primary-color': '#8184d6',\n '--primary-accent': '#90CAF9',\n '--primary-lighter': '#9a9ce4',\n '--accent-color': 'var(--grey)',\n '--accent-color-light': 'var(--lightgrey)',\n\n '--text-color': 'var(--white)',\n '--text-dark': 'var(--lightergrey)',\n '--text-light': 'var(--lightergrey)',\n '--text-on-primary': 'var(--white)',\n '--text-on-delete': 'var(--white)',\n '--border-color': '#656574',\n '--focus-border-color': 'var(--primary-color)',\n\n '--background': '#393945',\n '--background-accent': '#33333c',\n '--background-accent-dark': 'var(--grey)',\n '--background-accent-light': '#484856',\n '--background-modal': '#484856',\n\n '--success-color': 'var(--green)',\n '--success-lighter': 'var(--lighter-green)',\n '--error-color': 'var(--red)',\n '--error-lighter': 'var(--lighter-red)',\n '--required-mark-color': 'var(--error-color)',\n '--info-color': 'var(--blue)',\n '--info-lighter': 'var(--lighter-blue)',\n '--warn-color': 'var(--orange)',\n '--warn-lighter': 'var(--lighter-orange)',\n\n '--default-font-size': '16px',\n '--text-small-font-size': '14px',\n '--header-font-size': '24px',\n '--header-medium-font-size': '18px',\n '--header-small-font-size': '16px',\n\n '--default-font-weight': '400',\n '--header-font-weight': '600',\n\n '--input-background': 'transparent',\n '--input-icon-color': 'var(--text-color)',\n '--error-border-color': 'var(--red)',\n\n '--default-border-radius': '8px',\n '--padding-sides': '15px',\n '--margin-top': '10px',\n\n '--default-font': \"'Inter', sans-serif\",\n '--themed-font': \"'Inter', sans-serif\",\n\n '--card-shadow': '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n '--background-card-elevated': 'var(--background-accent-light)',\n '--background-card-outlined': 'transparent',\n // Below the page: on a dark theme the tint fallback is as light as Elevated.\n '--background-card-filled': 'var(--background-accent)',\n\n '--spacing-s': '4px',\n '--spacing-m': '8px',\n '--spacing-l': '16px',\n },\n};\n","import { createContext } from 'react';\n\n/**\n * The nearest ThemeProvider's resolved variables, for content that renders outside its DOM\n * subtree. Theme variables reach a component by CSS inheritance, which a portal breaks: a\n * `BodyEnd` child lands wherever the portal target is, so it picks up whatever provider wraps\n * *that* node rather than the one it was written under.\n *\n * Deliberately its own module rather than a member of `themeProvider.tsx`: BodyEnd needs the\n * context and nothing else, and importing the component for it would pull the whole\n * ThemeProvider into every bundle that uses a portal.\n */\nexport const ThemeVariablesContext = createContext | null>(null);\n","import { flushSync } from 'react-dom';\n\nlet revealing = false;\n\n/**\n * True while a reveal renders its new theme. ThemeProvider skips its colour fade then: the new\n * page is live inside the blob, so the fade played there too and the blob opened grey.\n */\nexport function isRevealingTheme(): boolean {\n return revealing;\n}\n\n/**\n * The outline of the new page `progress` (0 to 1) of the way through: a blob round `x`, `y` whose\n * edge ripples as two waves travel round it. The ripple dies down as it grows, so it ends as a\n * circle of exactly `radius`, covering the farthest corner as the animation ends. Ending any\n * larger, so the dents could cover the corner too, it went on growing off screen for a while after\n * it looked finished, and the page took no clicks all that time.\n */\nfunction blob(x: number, y: number, radius: number, progress: number): string {\n const size = radius * progress;\n const phase = progress * Math.PI * 3;\n const wobble = 0.16 * (1 - progress);\n const vertices = Array.from({ length: 72 }, (_, i) => {\n const angle = (i / 72) * Math.PI * 2;\n const r = size * (1 + wobble * (0.6 * Math.sin(3 * angle + phase) + 0.4 * Math.sin(5 * angle - 1.7 * phase)));\n return `${(x + r * Math.cos(angle)).toFixed(1)}px ${(y + r * Math.sin(angle)).toFixed(1)}px`;\n });\n return `polygon(${vertices.join(', ')})`;\n}\n\n/**\n * Applies `change` inside a view transition that clips the new page in as a blob growing out of\n * `origin`. Without view transitions, or when the user asks for reduced motion, the change just\n * happens.\n */\nexport function revealTheme(change: () => void, origin: Element): void {\n const reduceMotion =\n typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n if (typeof document.startViewTransition !== 'function' || reduceMotion) {\n change();\n return;\n }\n\n const box = origin.getBoundingClientRect();\n const x = box.left + box.width / 2;\n const y = box.top + box.height / 2;\n const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));\n const root = document.documentElement;\n\n // The new theme is captured when this callback returns, so React has to have rendered it by then.\n const transition = document.startViewTransition(() => {\n revealing = true;\n try {\n flushSync(change);\n } finally {\n revealing = false;\n }\n });\n transition.ready\n .then(() => {\n const timing = { duration: 900, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' };\n // Both pictures kept whole and unblended over the browser's own cross-fade, which would show\n // both themes at half strength inside the blob. Here rather than in the stylesheet, where\n // an app's unlayered view-transition rule would beat the library's layered one.\n const whole = { opacity: [1, 1], mixBlendMode: ['normal', 'normal'] };\n root.animate(whole, { ...timing, pseudoElement: '::view-transition-old(root)' });\n // Eight steps are enough for the ripple to read as motion rather than as a shape.\n const clipPath = Array.from({ length: 9 }, (_, step) => blob(x, y, radius, step / 8));\n root.animate({ ...whole, clipPath }, { ...timing, pseudoElement: '::view-transition-new(root)' });\n })\n // Rejects when the transition is skipped, such as by another one starting. The theme has\n // changed all the same: a skipped transition still runs its update.\n .catch(() => {});\n}\n",".themeRoot {\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n font-weight: var(--default-font-weight);\n color: var(--text-color);\n}\n\n/* The class is doubled to beat a component's own `transition` declaration. `.colorFade *` and a\n plain `.drawer` both count as one class, so which one a descendant gets was decided by whichever\n stylesheet the bundler happened to emit last, and the theme fade silently stopped applying to\n whole components when that order moved. */\n.colorFade.colorFade * {\n transition: background 0.3s ease-in-out;\n}\n","import React, { Component } from 'react';\nimport cx from 'classnames';\n\nimport type { Theme, ThemeProviderProps } from './theme.types';\nimport { defaultTheme } from './defaultTheme';\nimport { ThemeVariablesContext } from './themeVariablesContext';\nimport { isRevealingTheme } from './themeReveal';\nimport styles from './theme.module.pcss';\n\ninterface State {\n resolvedVariables: Record;\n colorFadeActive: boolean;\n currentThemeColor: string | null;\n /** What `resolvedVariables` was resolved from, to tell a theme change from any other render. */\n resolvedFrom: { themes: Theme[] | undefined; currentThemeId: string | undefined };\n}\n\n/**\n * Resolves a theme ID's variables by walking up its baseThemeId chain, ordered from deepest\n * ancestor to the requested theme so they merge in order (later entries win).\n */\nfunction resolveChain(themes: Theme[], id: string): Record[] {\n const theme = themes.find((t) => t.id === id);\n if (!theme) return [];\n const parentVars = theme.baseThemeId ? resolveChain(themes, theme.baseThemeId) : [];\n return [...parentVars, theme.variables as Record];\n}\n\nfunction resolveVariables({ themes = [defaultTheme], currentThemeId }: ThemeProviderProps): Record {\n // The root theme, the first without a baseThemeId, is always the foundation.\n const rootTheme = themes.find((t) => !t.baseThemeId) ?? themes[0];\n const rootVars = rootTheme ? (rootTheme.variables as Record) : {};\n const chainVars = currentThemeId ? resolveChain(themes, currentThemeId) : [];\n return Object.assign({}, rootVars, ...chainVars);\n}\n\nclass ThemeProvider extends Component {\n // A nested provider themes a section, not the page, so it leaves the page's `theme-color` alone.\n static contextType = ThemeVariablesContext;\n declare context: React.ContextType;\n\n // Resolved before the first render rather than after mount: resolved in componentDidMount, every\n // component rendered and measured itself unthemed first, and on each page load some 50\n // backgrounds then faded in from nothing.\n state: State = {\n resolvedVariables: resolveVariables(this.props),\n colorFadeActive: false,\n currentThemeColor: null,\n resolvedFrom: { themes: this.props.themes, currentThemeId: this.props.currentThemeId },\n };\n\n private colorFadeTimeout: ReturnType | null = null;\n private wrapperRef = React.createRef();\n private themeColorMeta: HTMLMetaElement | null = null;\n private createdThemeColorMeta = false;\n\n // The fade and the new variables have to land in the same render: added a render later, the\n // browser may already have painted the new colours without it.\n static getDerivedStateFromProps(props: ThemeProviderProps, state: State): Partial | null {\n const { themes, currentThemeId } = state.resolvedFrom;\n if (props.themes === themes && props.currentThemeId === currentThemeId) return null;\n return {\n resolvedVariables: resolveVariables(props),\n colorFadeActive: !isRevealingTheme(),\n resolvedFrom: { themes: props.themes, currentThemeId: props.currentThemeId },\n };\n }\n\n componentDidMount() {\n this.readThemeColor();\n }\n\n componentDidUpdate(prevProps: ThemeProviderProps, prevState: State) {\n if (prevState.resolvedVariables !== this.state.resolvedVariables) {\n this.readThemeColor();\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n this.colorFadeTimeout = setTimeout(() => {\n this.setState({ colorFadeActive: false });\n this.colorFadeTimeout = null;\n }, 500);\n }\n if (prevState.currentThemeColor !== this.state.currentThemeColor) {\n this.syncThemeColorMeta(this.state.currentThemeColor ?? '');\n }\n }\n\n componentWillUnmount() {\n if (this.colorFadeTimeout) clearTimeout(this.colorFadeTimeout);\n // Only remove the meta tag if we created it; leave a host-app tag intact.\n // Also clear the cached refs — StrictMode's dev-only mount/unmount/remount\n // cycle reuses this instance, and a stale ref would otherwise point at a\n // detached element on remount instead of re-inserting into .\n if (this.createdThemeColorMeta) {\n this.themeColorMeta?.remove();\n this.themeColorMeta = null;\n this.createdThemeColorMeta = false;\n }\n }\n\n /**\n * Replaces the former react-helmet usage: keep a single\n * in sync with the active theme's primary colour.\n * Reuses a tag the host app already declares; otherwise creates its own\n * (and removes it again on unmount).\n */\n private syncThemeColorMeta(color: string) {\n if (typeof document === 'undefined') return;\n\n if (!this.themeColorMeta) {\n const existing = document.head.querySelector('meta[name=\"theme-color\"]');\n if (existing) {\n this.themeColorMeta = existing;\n } else {\n const meta = document.createElement('meta');\n meta.setAttribute('name', 'theme-color');\n document.head.appendChild(meta);\n this.themeColorMeta = meta;\n this.createdThemeColorMeta = true;\n }\n }\n\n this.themeColorMeta.setAttribute('content', color);\n }\n\n /** `--primary-color` as the browser resolved it, which may be a `var()` of another variable. */\n private readThemeColor() {\n if (this.context || !this.wrapperRef.current) return;\n const color = getComputedStyle(this.wrapperRef.current).getPropertyValue('--primary-color').trim();\n if (color !== this.state.currentThemeColor) this.setState({ currentThemeColor: color });\n }\n\n render() {\n const { children } = this.props;\n const { resolvedVariables, colorFadeActive } = this.state;\n\n return (\n \n {children}\n \n );\n }\n}\n\nexport default ThemeProvider;\n","import type { Theme } from './theme.types';\n\n/**\n * The light sibling of {@link defaultTheme}, which is dark. Same brand, inverted surfaces:\n * it declares only what has to flip, and inherits the rest through `baseThemeId`, so a change\n * to the palette or the type scale reaches both themes at once.\n *\n * ```tsx\n * \n * ```\n *\n * `--primary-color` is deliberately untouched: it is the brand, and it reads on both.\n */\nexport const lightTheme: Theme = {\n id: 'light',\n baseThemeId: 'default',\n variables: {\n '--background': '#FFFFFF',\n '--background-accent': '#F4F4F8',\n '--background-accent-light': '#FAFAFD',\n '--background-accent-dark': '#D4D4E0',\n '--background-modal': '#FFFFFF',\n\n '--text-color': '#1E1E2E',\n '--text-dark': '#55556E',\n '--text-light': '#75758C',\n\n '--border-color': '#DCDCE8',\n\n // Dark text on the dark theme's own lighter-* tints is unreadable; on white they are the\n // right weight as-is, so only the greens and reds that were tuned for a dark ground move.\n '--lighter-green': '#DFF5E1',\n '--lighter-red': '#FCE4E6',\n '--lighter-blue': '#E1EBFF',\n '--lighter-orange': '#FFEADF',\n\n // The default theme's green is dark enough to read on white; its grey text is not.\n '--accent-color': '#6E6E80',\n\n '--input-background': '#F4F4F8',\n\n // Three stacked black shadows read as grime on a white surface.\n '--card-shadow': '0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 6%)',\n },\n};\n","import { createContext } from 'react';\n\n/**\n * The element `AhroweProvider` portals into. `undefined` means there is no provider, so BodyEnd\n * falls back to `#bodyEnd`; `null` means a provider that cannot portal yet, on the server and\n * while hydrating, and must not be reported missing.\n */\nexport const PortalHostContext = createContext(undefined);\n","import { createPortal } from 'react-dom';\nimport { useContext, type CSSProperties, type ReactElement } from 'react';\n\nimport { ThemeVariablesContext } from '../themeProvider/themeVariablesContext';\nimport themeStyles from '../themeProvider/theme.module.pcss';\nimport { PortalHostContext } from './portalHostContext';\nimport type { BodyEndProps } from './bodyEnd.types';\nimport { isDev } from '../utils/isDev';\n\nfunction BodyEnd({ children = null }: BodyEndProps): ReactElement | null {\n const themeVariables = useContext(ThemeVariablesContext);\n const host = useContext(PortalHostContext);\n const target = host === undefined ? document.getElementById('bodyEnd') : host;\n if (!target) {\n if (host === undefined && isDev()) {\n console.error('[BodyEnd] Nowhere to render. Wrap your app in , or add
.');\n }\n return null;\n }\n /*\n * Carry the nearest theme through the portal. `display: contents` is what makes this safe:\n * the wrapper generates no box, so positioning, stacking and clipping are untouched —\n * escaping clipping ancestors is the whole point of this component — while custom\n * properties still inherit, because inheritance follows the element tree, not the box tree.\n *\n * Variables this theme leaves unset still fall through to whatever wraps the target, which\n * is the same cascade the children would have seen rendered in place. `themeRoot` sets the\n * base typography again, which the target would otherwise pass down from its own theme.\n */\n if (!themeVariables) return createPortal(children, target);\n return createPortal(\n
\n {children}\n
,\n target,\n );\n}\n\nexport default BodyEnd;\n",".container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n pointer-events: none;\n padding: 1em;\n box-sizing: border-box;\n\n &-top-left {\n top: 0;\n left: 0;\n align-items: flex-start;\n }\n\n &-top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n\n &-top-right {\n top: 0;\n right: 0;\n align-items: flex-end;\n }\n\n &-bottom-left {\n bottom: 0;\n left: 0;\n align-items: flex-start;\n flex-direction: column-reverse;\n }\n\n &-bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n flex-direction: column-reverse;\n }\n\n &-bottom-right {\n bottom: 0;\n right: 0;\n align-items: flex-end;\n flex-direction: column-reverse;\n }\n}\n\n.toast {\n pointer-events: all;\n display: flex;\n align-items: flex-start;\n gap: 0.625em;\n padding: 0.75em 0.875em;\n border-radius: var(--default-border-radius);\n border-left: 0.1875em solid var(--tone);\n background: var(--background-modal);\n\n /* Must follow the shorthand above, which resets it. The gradient reaches over border-left only\n because its origin is the border box; the border is the fallback. */\n background-image: var(--tone-gradient);\n background-repeat: no-repeat;\n background-size: 0.1875em 100%;\n background-origin: border-box;\n color: var(--text-color);\n font-family: var(--default-font);\n box-shadow: var(--card-shadow);\n\n /* em, so the line length stays a measure rather than a pixel count. The screen\n wins over both: below about 270px the minimum alone was wider than the space\n the container had, and a toast pinned to one edge hung off the other. The 2em\n is the container's own padding, which is in the same em as these. */\n min-width: min(15em, calc(100vw - 2em));\n max-width: min(23.75em, calc(100vw - 2em));\n box-sizing: border-box;\n position: relative;\n\n /* Tells the browser vertical panning is native (so the page can still scroll behind the toast)\n while horizontal movement is left for useSwipeDismiss's own pointer handling to decide. */\n touch-action: pan-y;\n overflow: hidden;\n animation: toastSlideDown 0.25s ease forwards;\n\n &-bottom {\n animation: toastSlideUp 0.25s ease forwards;\n }\n\n &-dismissing {\n animation: toastFadeOut 0.2s ease forwards;\n }\n\n &-paused .toastProgressBar {\n animation-play-state: paused;\n }\n}\n\n.toastIcon {\n flex-shrink: 0;\n color: var(--tone);\n margin-top: 0.0667em; /* 1px against this element's own 0.9375em */\n font-size: 0.9375em;\n}\n\n.toastContent {\n flex: 1;\n font-size: 0.875em;\n line-height: 1.4;\n}\n\n/* Two classes, to outrank Button's font-size and ActionIcon's box whichever stylesheet loads\n first. */\n.toast .toastCloseButton {\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n font-size: 0.8125em;\n opacity: 0.6;\n transition: opacity 0.15s;\n margin-top: 0.0769em; /* 1px against this element's own 0.8125em */\n\n &:hover {\n opacity: 1;\n }\n}\n\n.toastProgressBar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 0.1875em;\n width: 100%;\n background: currentcolor;\n opacity: 0.35;\n transform-origin: left;\n animation: toastShrink var(--toast-duration) linear forwards;\n}\n\n@keyframes toastSlideDown {\n from {\n opacity: 0;\n transform: translateY(-0.75em);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastSlideUp {\n from {\n opacity: 0;\n transform: translateY(0.75em);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastFadeOut {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.92);\n }\n}\n\n@keyframes toastShrink {\n from {\n transform: scaleX(1);\n }\n\n to {\n transform: scaleX(0);\n }\n}\n\n/* The entrance and exit slide go. `toastShrink` stays: it is the remaining-time indicator, and a\n progress bar frozen at full width would tell the user the opposite of what is true. Removal is\n driven by a timer in toastProvider, not by these animations, so dropping them cannot strand a\n toast on screen. */\n@media (prefers-reduced-motion: reduce) {\n .toast,\n .toast-bottom,\n .toast-dismissing {\n animation: none;\n }\n}\n","import { useCallback, useSyncExternalStore } from 'react';\n\nfunction supported(): boolean {\n return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\n/**\n * `true` while `query` matches, kept current so a resize or an input-mode change re-renders.\n *\n * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,\n * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`\n * initialiser makes the client's first render disagree with the server's HTML.\n */\nexport function useMediaQuery(query: string): boolean {\n const subscribe = useCallback(\n (onChange: () => void) => {\n if (!supported()) return () => {};\n const mql = window.matchMedia(query);\n mql.addEventListener('change', onChange);\n return () => mql.removeEventListener('change', onChange);\n },\n [query],\n );\n\n const getSnapshot = useCallback(() => supported() && window.matchMedia(query).matches, [query]);\n\n /** No media query exists on the server, so the tree renders as if nothing matched. */\n const getServerSnapshot = useCallback(() => false, []);\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport default useMediaQuery;\n","import { useMediaQuery } from './useMediaQuery';\n\n/** `true` when the primary pointing device is coarse (touch). */\nexport function useCoarsePointer(): boolean {\n return useMediaQuery('(pointer: coarse)');\n}\n\nexport default useCoarsePointer;\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n * not the instant the pointer is released, unless `animateExit` is `false`. */\n onDismiss: () => void;\n /** Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). */\n axis?: 'x' | 'y';\n /** Distance in px past which releasing counts as a commit, regardless of speed (default `80`). */\n distanceThreshold?: number;\n /** Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n * lets a fast flick dismiss even if the pointer didn't travel very far. */\n velocityThreshold?: number;\n /** Disables the gesture entirely — no listeners are attached. */\n disabled?: boolean;\n /** The offset in px as it changes: on every move, then `0` as it springs back or the exit offset\n * once it commits. For something else that follows the drag, such as a fading backdrop. */\n onDrag?: (offset: number) => void;\n /** Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n * case. Default `true`; set `false` to allow the gesture on any pointer type. */\n mobileOnly?: boolean;\n /** Fades the element out as it is dragged (default `true`). */\n fade?: boolean;\n /** Slides the element off before calling `onDismiss` (default `true`). `false` calls it the moment\n * the swipe commits and leaves the element where it was let go, for a caller that animates the\n * exit itself. */\n animateExit?: boolean;\n}\n\nexport interface UseSwipeDismissResult {\n /** Attach to the element that should become draggable. The hook wires up its own pointer\n * listeners on this node directly (no handlers to spread), so this is the only thing to attach.\n *\n * A callback ref rather than an object one, because the hook has to know when the node changes:\n * an element that is unmounted and rendered again is a *different* node, and a ref object cannot\n * say so. To keep a ref of your own on the element, call both from one callback. */\n ref: React.RefCallback;\n /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */\n isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/**\n * Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n */\nexport function useSwipeDismiss({\n onDismiss,\n axis = 'x',\n distanceThreshold = 80,\n velocityThreshold = 0.5,\n disabled = false,\n mobileOnly = true,\n fade = true,\n animateExit = true,\n onDrag,\n}: UseSwipeDismissOptions): UseSwipeDismissResult {\n // The node lives in state, not in a ref: the listeners have to be re-attached when the element\n // is replaced, and a ref object's `current` changing never re-runs the effect below. Rendering\n // the element again after it was unmounted otherwise left the gesture wired to the old node.\n const [node, setNode] = useState(null);\n const ref = useCallback((element: T | null) => setNode(element), []);\n const [isDragging, setIsDragging] = useState(false);\n\n const isCoarsePointer = useCoarsePointer();\n\n const effectiveDisabled = disabled || (mobileOnly && !isCoarsePointer);\n\n // Mutable across the life of one drag; doesn't need to trigger re-renders.\n const dragRef = useRef<{\n pointerId: number;\n startX: number;\n startY: number;\n startTime: number;\n offset: number;\n axisLocked: boolean;\n active: boolean;\n } | null>(null);\n\n const onDismissRef = useRef(onDismiss);\n const onDragRef = useRef(onDrag);\n useEffect(() => {\n onDismissRef.current = onDismiss;\n onDragRef.current = onDrag;\n });\n\n useEffect(() => {\n const el = node;\n if (!el || effectiveDisabled) return;\n let settleTimer: ReturnType | undefined;\n\n function applyTransform(offset: number, transition: string) {\n if (!el) return;\n if (transition !== 'none') {\n // Switching straight from the live drag's `transition: none` to an animated one, in the\n // same tick as the transform change, can get coalesced into a single frame with no\n // animation in between — the element just jumps to its end state instead of sliding\n // there. Forcing a layout read first commits the current (pre-transition) position as\n // its own frame, so the transition below actually has something to animate from.\n void el.offsetHeight;\n }\n const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n el.style.transition = transition;\n el.style.transform = translate;\n if (fade) el.style.opacity = String(Math.max(0, 1 - Math.abs(offset) / (distanceThreshold * 2.5)));\n onDragRef.current?.(offset);\n }\n\n // Left behind, the inline styles would override the element's stylesheet for good.\n function clearInlineStyles() {\n if (!el || dragRef.current) return;\n el.style.removeProperty('transform');\n el.style.removeProperty('opacity');\n el.style.removeProperty('transition');\n }\n\n function onPointerMove(event: PointerEvent) {\n const drag = dragRef.current;\n if (!drag || event.pointerId !== drag.pointerId) return;\n // No button held: its release never reached the page, as when a context menu kept it.\n if (event.buttons === 0) {\n finishDrag();\n return;\n }\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n const primary = axis === 'x' ? deltaX : deltaY;\n const cross = axis === 'x' ? deltaY : deltaX;\n if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(cross) > Math.abs(primary)) {\n // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setIsDragging(true);\n // A finished `forwards` animation (a toast's entrance) holds its frame over inline styles.\n // Cancelled, as `animation: none` would replay it once restored. Not on a mere tap.\n for (const animation of el?.getAnimations?.() ?? []) animation.cancel();\n }\n\n if (!drag.active) return;\n event.preventDefault();\n drag.offset = axis === 'x' ? deltaX : deltaY;\n applyTransform(drag.offset, 'none');\n }\n\n function finishDrag() {\n const drag = dragRef.current;\n dragRef.current = null;\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n if (!drag || !drag.active || !drag.axisLocked) {\n setIsDragging(false);\n return;\n }\n\n const elapsed = Math.max(1, Date.now() - drag.startTime);\n const velocity = drag.offset / elapsed;\n const committed = Math.abs(drag.offset) >= distanceThreshold || Math.abs(velocity) >= velocityThreshold;\n\n if (committed && !animateExit) {\n onDismissRef.current();\n } else if (committed) {\n const rect = el?.getBoundingClientRect();\n const size = (axis === 'x' ? rect?.width : rect?.height) ?? 0;\n const exitOffset = Math.sign(drag.offset || 1) * (size + 40);\n applyTransform(\n exitOffset,\n `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n );\n setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n } else {\n applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n clearTimeout(settleTimer);\n settleTimer = setTimeout(clearInlineStyles, EXIT_TRANSITION_MS);\n }\n setIsDragging(false);\n }\n\n function onPointerDown(event: PointerEvent) {\n // Another mouse button opens a menu, which can keep its release from the page.\n if (dragRef.current || !el || event.button !== 0) return;\n dragRef.current = {\n pointerId: event.pointerId,\n startX: event.clientX,\n startY: event.clientY,\n startTime: Date.now(),\n offset: 0,\n axisLocked: false,\n active: true,\n };\n window.addEventListener('pointermove', onPointerMove, { passive: false });\n window.addEventListener('pointerup', finishDrag);\n window.addEventListener('pointercancel', finishDrag);\n }\n\n el.addEventListener('pointerdown', onPointerDown);\n return () => {\n clearTimeout(settleTimer);\n // A press under way would miss its release, and its drag would block every press after it.\n dragRef.current = null;\n setIsDragging(false);\n el.removeEventListener('pointerdown', onPointerDown);\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n };\n }, [node, axis, distanceThreshold, velocityThreshold, effectiveDisabled, fade, animateExit]);\n\n return { ref, isDragging };\n}\n","import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './toast.module.pcss';\nimport type { ToastItem, ToastLabels } from './toast.types';\nimport ActionIcon from '../actionIcon';\nimport { useSwipeDismiss } from '../hooks/useSwipeDismiss';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\ninterface ToastProps {\n item: ToastItem;\n isBottom: boolean;\n onDismiss: (id: string) => void;\n /** Already resolved by the provider: defaults, provider, then this toast's own. */\n labels: Required;\n}\n\n// A Map, so a CSS colour can never hit an Object.prototype key.\nconst ICON_BY_COLOR = new Map([\n [ThemeColor.Info, faCircleInfo],\n [ThemeColor.Success, faCircleCheck],\n [ThemeColor.Warn, faTriangleExclamation],\n [ThemeColor.Error, faCircleXmark],\n]);\n\nfunction Toast({ item, isBottom, onDismiss, labels }: ToastProps) {\n const { id, content, options, dismissing } = item;\n const { duration, showRemainingTime, showCloseButton, pauseOnHover, color, classNames, styles: slotStyles } = options;\n const tone = toneProps(color);\n useToneCheck('Toast', [color]);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const [swiped, setSwiped] = useState(false);\n const { ref: swipeRef, isDragging } = useSwipeDismiss({\n onDismiss: () => {\n setSwiped(true);\n onDismiss(id);\n },\n });\n\n const paused = (pauseOnHover && (hovered || focused)) || isDragging;\n\n // Remaining time is carried across pause/resume cycles so the timer continues\n // where it left off instead of restarting on every hover.\n const remainingRef = useRef(duration);\n\n useEffect(() => {\n if (duration === 0 || paused) return;\n const start = Date.now();\n const timer = setTimeout(() => onDismiss(id), remainingRef.current);\n return () => {\n clearTimeout(timer);\n remainingRef.current -= Date.now() - start;\n };\n }, [id, duration, onDismiss, paused]);\n\n return (\n setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n >\n }\n />\n\n
\n {content}\n
\n\n {showCloseButton && (\n onDismiss(id)}\n className={cx(styles.toastCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label={labels.close}\n />\n )}\n\n {showRemainingTime && duration > 0 && (\n \n )}\n \n );\n}\n\nexport default Toast;\n","import type { ReactNode } from 'react';\nimport type { ToastOptions } from './toast.types';\n\ntype ShowToastFn = (content: ReactNode, options?: ToastOptions) => void;\n\n// A list, so that when the host registered last unmounts, the one before it takes over again.\nconst handlers: ShowToastFn[] = [];\n\nexport function _registerToastHandler(fn: ShowToastFn): void {\n if (handlers.length > 0) {\n console.warn(\n '[Toast] More than one outermost AhroweProvider is mounted, and toasts show in only one of them. Keep one at the root and nest any other inside it.',\n );\n }\n handlers.push(fn);\n}\n\nexport function _unregisterToastHandler(fn: ShowToastFn): void {\n const index = handlers.indexOf(fn);\n if (index !== -1) handlers.splice(index, 1);\n}\n\nexport function showToast(content: ReactNode, options?: ToastOptions): void {\n const handler = handlers[handlers.length - 1];\n if (!handler) {\n console.error('[Toast] No AhroweProvider found. Wrap your app in .');\n return;\n }\n handler(content, options);\n}\n","import React, { useCallback, useInsertionEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './toast.module.pcss';\nimport Toast from './toast';\nimport { _registerToastHandler, _unregisterToastHandler } from './toastService';\nimport type {\n ToastContextConfig,\n ToastItem,\n ToastOptions,\n ResolvedToastOptions,\n ToastPosition,\n ToastLabels,\n ToastHostProps,\n} from './toast.types';\nimport type { ReactNode } from 'react';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULTS: Required = {\n position: 'top-right',\n duration: 4000,\n showRemainingTime: true,\n showCloseButton: true,\n allowStacking: true,\n pauseOnHover: true,\n labels: { close: 'Close' },\n};\n\nconst DISMISS_ANIMATION_MS = 220;\n\nfunction positionToClass(position: ToastPosition): string {\n return styles[`container-${position}`];\n}\n\nfunction ToastHost({\n children,\n position = DEFAULTS.position,\n duration = DEFAULTS.duration,\n showRemainingTime = DEFAULTS.showRemainingTime,\n showCloseButton = DEFAULTS.showCloseButton,\n allowStacking = DEFAULTS.allowStacking,\n pauseOnHover = DEFAULTS.pauseOnHover,\n labels,\n}: ToastHostProps) {\n const [toasts, setToasts] = useState([]);\n const counterRef = useRef(0);\n\n const dismiss = useCallback((id: string) => {\n setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, dismissing: true } : t)));\n setTimeout(() => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, DISMISS_ANIMATION_MS);\n }, []);\n\n const addToast = useCallback(\n (content: ReactNode, options?: ToastOptions) => {\n const resolved: ResolvedToastOptions = {\n position: options?.position ?? position,\n duration: options?.duration ?? duration,\n showRemainingTime: options?.showRemainingTime ?? showRemainingTime,\n showCloseButton: options?.showCloseButton ?? showCloseButton,\n pauseOnHover: options?.pauseOnHover ?? pauseOnHover,\n color: options?.color ?? ThemeColor.Primary,\n classNames: options?.classNames,\n styles: options?.styles,\n };\n\n counterRef.current += 1;\n const id = `toast-${counterRef.current}`;\n const newToast: ToastItem = { id, content, options: resolved, dismissing: false, labels: options?.labels };\n\n setToasts((prev) => {\n if (!allowStacking && prev.length > 0) {\n // Mark all existing as dismissing, then replace\n setTimeout(() => {\n setToasts([newToast]);\n }, DISMISS_ANIMATION_MS);\n return prev.map((t) => ({ ...t, dismissing: true }));\n }\n return [...prev, newToast];\n });\n },\n [position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover],\n );\n\n // Insertion effects run before every layout and passive effect, including the app's, which as\n // this host's descendants would otherwise run first. Registered once, so that a settings change\n // does not move this host to the end of the list.\n const latestAddToast = useRef(addToast);\n useInsertionEffect(() => {\n latestAddToast.current = addToast;\n }, [addToast]);\n\n useInsertionEffect(() => {\n const show: typeof addToast = (content, options) => latestAddToast.current(content, options);\n _registerToastHandler(show);\n return () => _unregisterToastHandler(show);\n }, []);\n\n // Group toasts by position so per-toast position overrides work correctly\n const byPosition = toasts.reduce>((acc, t) => {\n const pos = t.options.position;\n if (!acc[pos]) acc[pos] = [];\n acc[pos].push(t);\n return acc;\n }, {});\n\n return (\n <>\n {children}\n \n {Object.entries(byPosition).map(([pos, items]) => (\n
\n {items.map((item) => (\n }\n />\n ))}\n
\n ))}\n \n \n );\n}\n\nexport default ToastHost;\n","import {\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useState,\n useSyncExternalStore,\n type ReactElement,\n} from 'react';\n\nimport ConfigProvider from 'components/common/configProvider';\nimport ScrollbarProvider from 'components/common/scrollbarProvider';\nimport ThemeProvider from 'components/common/themeProvider';\nimport ToastHost from '../toast/toastHost';\nimport { PortalHostContext } from '../bodyEnd/portalHostContext';\nimport type { AhroweProviderProps } from './ahroweProvider.types';\n\nconst subscribeToNothing = () => () => {};\n\nfunction AhroweProvider({\n children,\n themes,\n currentThemeId,\n defaultProps,\n presentation,\n navigate,\n locale,\n toast,\n scrollbars,\n}: AhroweProviderProps): ReactElement {\n // A nested provider themes and configures its section only. A second toast list would stack\n // over the first in the same corner, and a second host would split the portals in two.\n const isNested = useContext(PortalHostContext) !== undefined;\n\n // The server renders no portal, so hydration must not either: `false` there, and `true` from\n // the first render of an app that is not hydrating.\n const canPortal = useSyncExternalStore(\n subscribeToNothing,\n () => true,\n () => false,\n );\n\n // Created up front instead of rendered: a rendered host exists only after the first commit, so\n // a modal open on the first render mounted a commit late and its initial focus found nothing.\n const [host] = useState(() => (typeof document === 'undefined' ? null : document.createElement('div')));\n\n // Attached from a marker before the app, because refs attach in tree order: this way the host is\n // in the page before any layout effect runs. The slot stays last, so panels paint above the app.\n const attachHost = useCallback(\n (marker: HTMLTemplateElement | null) => {\n const slot = marker?.parentElement?.lastElementChild;\n if (!slot || !host) return;\n // No cleanup, and no move when already in place: the host leaves with its slot anyway, and\n // StrictMode's extra detach and reattach otherwise took a focused element in it along.\n if (host.parentNode !== slot) slot.appendChild(host);\n },\n [host],\n );\n\n // Read from the host rather than `themes`, for the resolved value, `var()` references included.\n const stylesPage = !isNested && scrollbars !== false;\n useLayoutEffect(() => {\n if (!stylesPage || !host) return;\n const thumb = getComputedStyle(host).getPropertyValue('--background-accent-light').trim();\n const page = document.documentElement.style;\n page.setProperty('--ahrowe-page-scrollbar-thumb', thumb);\n return () => {\n page.removeProperty('--ahrowe-page-scrollbar-thumb');\n };\n }, [stylesPage, host, themes, currentThemeId]);\n\n const ignoresRootProps = isNested && (toast !== undefined || scrollbars !== undefined);\n useEffect(() => {\n if (ignoresRootProps) {\n console.warn(\n '[AhroweProvider] `toast` and `scrollbars` are read by the outermost AhroweProvider only. Set them there.',\n );\n }\n }, [ignoresRootProps]);\n\n const root = (\n \n