{"version":3,"sources":["../src/components/branding/AppZumDocBadge.tsx","../src/components/branding/AppZumDocLogo.tsx","../src/components/branding/HelpwaveLogo.tsx","../src/components/branding/HelpwaveBadge.tsx","../src/components/chat/ChatAttachmentCard.tsx","../src/components/user-interaction/IconButton.tsx","../src/components/user-interaction/Tooltip.tsx","../src/hooks/useOverlayRegistry.ts","../src/hooks/useTransitionState.ts","../src/global-contexts/HightideConfigContext.tsx","../src/components/utils/Portal.tsx","../src/components/layout/AnchoredFloatingContainer.tsx","../src/hooks/useAnchoredPosition.ts","../src/utils/math.ts","../src/hooks/useWindowResizeObserver.ts","../src/hooks/useResizeObserver.ts","../src/hooks/useScrollObserver.ts","../src/utils/reactRefs.ts","../src/utils/bagFunctions.ts","../src/components/layout/Visibility.tsx","../src/hooks/useLogOnce.ts","../src/components/chat/ChatConversationList.tsx","../src/components/layout/ScrollableList.tsx","../src/components/chat/ChatConversationRow.tsx","../src/components/display-and-visualization/Avatar.tsx","../src/utils/array.ts","../src/utils/propsUtil.ts","../src/components/chat/ChatDateDivider.tsx","../src/components/chat/ChatMessageBubble.tsx","../src/components/chat/ChatMessageCard.tsx","../src/components/chat/ChatMessageComposer.tsx","../src/hooks/useControlledState.ts","../src/utils/resolveSetState.ts","../src/hooks/useEventCallbackStabelizer.ts","../src/components/chat/ChatMessageList.tsx","../src/components/chat/ChatQuickReplyChip.tsx","../src/components/chat/ChatSystemLine.tsx","../src/components/chat/ChatThreadHeader.tsx","../src/components/display-and-visualization/Card.tsx","../src/hooks/useChangingNumber.ts","../src/utils/curve.ts","../src/components/display-and-visualization/ChangingNumber.tsx","../src/components/user-interaction/Button.tsx","../src/components/display-and-visualization/Chip.tsx","../src/components/display-and-visualization/ExpansionIcon.tsx","../src/components/display-and-visualization/ProgressIndicator.tsx","../src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx","../src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx","../src/components/display-and-visualization/process-model/layoutProcessModel.ts","../src/components/display-and-visualization/process-model/ProcessModelTerminalNode.tsx","../src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx","../src/global-contexts/LocaleContext.tsx","../src/hooks/useStorage.ts","../src/utils/StorageListener.ts","../src/i18n/translations.ts","../src/i18n/util.ts","../src/i18n/useHightideTranslation.ts","../src/components/user-interaction/Select/Select.tsx","../src/components/user-interaction/Select/SelectRoot.tsx","../src/components/user-interaction/Select/SelectContext.tsx","../src/components/user-interaction/Select/useSelect.ts","../src/hooks/useSingleSelection.ts","../src/hooks/useListNavigation.tsx","../src/hooks/useSearch.ts","../src/utils/simpleSearch.ts","../src/hooks/useTypeAheadSearch.ts","../src/utils/dom.ts","../src/components/layout/popup/PopUpContext.tsx","../src/components/user-interaction/Select/SelectButton.tsx","../src/components/user-interaction/Select/SelectOption.tsx","../src/components/user-interaction/Select/SelectContent.tsx","../src/components/layout/popup/PopUp.tsx","../src/components/utils/FocusTrap.tsx","../src/hooks/focus/useFocusTrap.ts","../src/hooks/useOutsideClick.ts","../src/hooks/usePresenceRef.ts","../src/components/user-interaction/input/Input.tsx","../src/hooks/useDelay.ts","../src/hooks/focus/useFocusManagement.ts","../src/components/display-and-visualization/process-model/processModelLibrary.ts","../src/components/form/FieldLayout.tsx","../src/components/form/FormContext.tsx","../src/components/form/FormField.tsx","../src/components/form/FormObserver.tsx","../src/components/form/FormStore.ts","../src/components/form/useCreateForm.tsx","../src/components/layout/Carousel.tsx","../src/components/layout/DividerInserter.tsx","../src/components/layout/Expandable.tsx","../src/components/layout/FAQSection.tsx","../src/components/layout/InifiniteScroll.tsx","../src/components/layout/MarkdownInterpreter.tsx","../src/components/layout/TabSwitcher.tsx","../src/components/layout/TextImage.tsx","../src/components/layout/VerticalDivider.tsx","../src/components/layout/app/AppPage.tsx","../src/hooks/trees/treeUtilities.ts","../src/hooks/trees/useTreeExpansion.ts","../src/components/layout/navigation/navigation-menus/NavigationContext.tsx","../src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx","../src/components/layout/navigation/navigation-menus/types.ts","../src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx","../src/components/layout/dialog/Dialog.tsx","../src/components/layout/dialog/DialogContext.tsx","../src/components/layout/dialog/DialogOpener.tsx","../src/components/layout/dialog/DialogRoot.tsx","../src/components/layout/dialog/premade/ConfirmDialog.tsx","../src/components/layout/dialog/premade/DiscardChangesDialog.tsx","../src/components/layout/dialog/premade/InputDialog.tsx","../src/components/layout/dialog/premade/LanguageDialog.tsx","../src/components/layout/dialog/premade/ThemeDialog.tsx","../src/global-contexts/ThemeContext.tsx","../src/components/layout/drawer/Drawer.tsx","../src/components/layout/drawer/DrawerContainer.tsx","../src/components/layout/drawer/DrawerContext.tsx","../src/components/layout/drawer/DrawerCloseButton.tsx","../src/components/layout/drawer/DrawerRoot.tsx","../src/components/layout/loading/ErrorComponent.tsx","../src/components/layout/loading/LoadingAndErrorComponent.tsx","../src/components/layout/loading/LoadingContainer.tsx","../src/components/layout/loading/LoadingAnimation.tsx","../src/components/layout/navigation/BreadCrumbs.tsx","../src/components/layout/navigation/Navigation.tsx","../src/components/layout/navigation/Pagination.tsx","../src/components/layout/navigation/StepperBar.tsx","../src/components/layout/popup/PopUpOpener.tsx","../src/components/layout/popup/PopUpRoot.tsx","../src/components/layout/table/AutoColumnOrderFeature.ts","../src/components/layout/table/columnSizeUtil.ts","../src/components/layout/table/ColumnSizingWithTargetFeature.ts","../src/components/layout/table/FillerCell.tsx","../src/components/layout/table/TableProvider.tsx","../src/components/layout/table/TableContext.tsx","../src/components/user-interaction/data/FilterOperator.tsx","../src/components/user-interaction/data/filter-function.ts","../src/utils/date.ts","../src/components/layout/table/TableFilter.ts","../src/components/layout/table/TableCell.tsx","../src/components/layout/table/placeholderColumn.ts","../src/components/layout/table/TableDisplay.tsx","../src/components/layout/table/TableBody.tsx","../src/components/layout/table/TableHeader.tsx","../src/components/layout/table/TableSortButton.tsx","../src/components/layout/table/TableFilterButton.tsx","../src/components/user-interaction/data/FilterPopUp.tsx","../src/components/user-interaction/input/DateTimeInput.tsx","../src/components/user-interaction/date/TimeInput.tsx","../src/components/user-interaction/input/NumberStepperInput.tsx","../src/hooks/useStepperHold.ts","../src/components/user-interaction/input/NumberInput.tsx","../src/components/user-interaction/date/DatePicker.tsx","../src/components/user-interaction/date/DayPicker.tsx","../src/components/user-interaction/date/YearMonthPicker.tsx","../src/components/user-interaction/date/DateTimePicker.tsx","../src/components/user-interaction/date/DateTimePickerDialog.tsx","../src/components/user-interaction/input/DateTimeField.tsx","../src/components/user-interaction/input/dateTimeSegments.ts","../src/components/user-interaction/MultiSelect/MultiSelect.tsx","../src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx","../src/components/user-interaction/MultiSelect/MultiSelectContext.tsx","../src/components/user-interaction/MultiSelect/useMultiSelect.ts","../src/hooks/useMultiSelection.ts","../src/components/user-interaction/MultiSelect/MultiSelectButton.tsx","../src/components/user-interaction/MultiSelect/MultiSelectOption.tsx","../src/components/user-interaction/MultiSelect/MultiSelectContent.tsx","../src/components/user-interaction/data/FilterOperatorLabel.tsx","../src/components/user-interaction/data/data-types.tsx","../src/components/layout/table/VirtualizedTableBody.tsx","../src/components/layout/virtualization/useVirtualizedRows.ts","../src/components/layout/virtualization/virtualizationScroll.ts","../src/hooks/useScrollbarState.ts","../src/components/layout/table/useNaturalColumnWidthLock.ts","../src/components/layout/table/TablePagination.tsx","../src/components/user-interaction/Checkbox.tsx","../src/components/layout/table/TableWithSelectionProvider.tsx","../src/components/layout/table/Table.tsx","../src/components/layout/table/TableColumn.tsx","../src/components/layout/table/TableColumnSwitcher.tsx","../src/components/layout/virtualization/VirtualizedCardGrid.tsx","../src/components/layout/virtualization/gridLayout.ts","../src/components/user-interaction/Combobox/Combobox.tsx","../src/components/user-interaction/Combobox/ComboboxRoot.tsx","../src/components/user-interaction/Combobox/ComboboxContext.tsx","../src/components/user-interaction/Combobox/useCombobox.ts","../src/components/user-interaction/Combobox/ComboboxInput.tsx","../src/components/user-interaction/Combobox/ComboboxList.tsx","../src/components/user-interaction/Combobox/ComboboxOption.tsx","../src/components/user-interaction/CopyToClipboardWrapper.tsx","../src/utils/writeToClipboard.ts","../src/components/user-interaction/LabelledCheckbox.tsx","../src/components/user-interaction/Menu.tsx","../src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx","../src/components/user-interaction/ScrollPicker.tsx","../src/components/user-interaction/Switch.tsx","../src/components/user-interaction/Textarea.tsx","../src/components/user-interaction/data/FilterList.tsx","../src/components/user-interaction/data/SortingList.tsx","../src/components/user-interaction/date/TimeDisplay.tsx","../src/components/user-interaction/date/TimePicker.tsx","../src/components/user-interaction/input/FlexibleDateTimeInput.tsx","../src/components/user-interaction/input/InsideLabelInput.tsx","../src/components/user-interaction/input/SearchBar.tsx","../src/components/user-interaction/input/ToggleableInput.tsx","../src/components/user-interaction/properties/CheckboxProperty.tsx","../src/components/user-interaction/properties/PropertyBase.tsx","../src/components/user-interaction/properties/DateProperty.tsx","../src/components/user-interaction/properties/MultiSelectProperty.tsx","../src/components/user-interaction/properties/NumberProperty.tsx","../src/components/user-interaction/properties/SelectProperty.tsx","../src/components/user-interaction/properties/TextProperty.tsx","../src/components/utils/Transition.tsx","../src/global-contexts/HightideProvider.tsx","../src/hooks/focus/useFocusGuards.ts","../src/hooks/focus/useFocusOnceVisible.ts","../src/hooks/trees/useTreeFocusNavigation.ts","../src/hooks/trees/useTreeNavigation.ts","../src/hooks/useDebouncer.ts","../src/hooks/useHandleRefs.ts","../src/hooks/useIsMounted.ts","../src/hooks/useLogUnstableDependencies.ts","../src/hooks/useOverwritableState.ts","../src/hooks/useRerender.ts","../src/hooks/useSwipeGesture.ts","../src/hooks/useThrottle.ts","../src/hooks/useUpdatingDateString.ts","../src/utils/emailValidation.ts","../src/hooks/useValidators.ts","../src/utils/builder.ts","../src/utils/duration.ts","../src/utils/loopingArray.ts","../src/utils/match.ts","../src/utils/noop.ts","../src/utils/promise.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\nimport { AppZumDocLogo } from './AppZumDocLogo'\n\ntype Size = 'sm' | 'md' | 'lg'\n\nexport type AppZumDocBadgeProps = HTMLAttributes & {\n size?: Size,\n}\n\nexport const AppZumDocBadge = ({\n size = 'sm',\n ...props\n}: AppZumDocBadgeProps) => {\n return (\n \n \n App zum Doc\n \n )\n}\n","import type { CSSProperties, SVGProps } from 'react'\nimport { useId } from 'react'\nimport { clsx } from 'clsx'\n\nconst backFillPath = 'M33.1817 37.511L29.7804 37.511C21.7695 37.511 15.2754 44.0051 15.2754 52.016C15.2754 60.0268 21.7695 66.5209 29.7804 66.5209H35.4017C35.4208 66.5209 35.4274 66.5239 35.4301 66.5251C35.436 66.5275 35.4456 66.5331 35.4559 66.5434C35.4662 66.5536 35.4717 66.5633 35.4742 66.5691C35.4754 66.5719 35.4783 66.5785 35.4783 66.5975L35.4783 72.852C35.4783 80.8628 41.9724 87.3569 49.9833 87.3569C57.9942 87.3569 64.4883 80.8628 64.4883 72.852L64.4883 54.7684C64.4883 45.2374 56.7619 37.511 47.2309 37.511L43.6515 37.511V42.1072L47.2309 42.1072C54.2235 42.1072 59.8921 47.7758 59.8921 54.7684V72.852C59.8921 78.3244 55.4558 82.7608 49.9833 82.7608C44.5108 82.7608 40.0745 78.3244 40.0745 72.852L40.0745 66.5975C40.0745 64.0168 37.9824 61.9248 35.4017 61.9248L29.7804 61.9248C24.3079 61.9248 19.8716 57.4884 19.8716 52.016C19.8716 46.5435 24.3079 42.1072 29.7804 42.1072L33.1817 42.1072V37.511Z'\n\nconst frontFillPath = 'M65.0734 29.3412C65.0734 21.3303 58.5793 14.8362 50.5685 14.8362C42.5576 14.8362 36.0635 21.3303 36.0635 29.3412V47.4247C36.0635 56.9557 43.7899 64.6821 53.3209 64.6821H57.4673V60.086H53.3209C46.3283 60.086 40.6597 54.4173 40.6597 47.4247V29.3412C40.6597 23.8687 45.096 19.4324 50.5685 19.4324C56.0409 19.4324 60.4773 23.8687 60.4773 29.3412V35.5956C60.4773 38.1763 62.5693 40.2684 65.15 40.2684H70.7714C76.2439 40.2684 80.6802 44.7047 80.6802 50.1772C80.6802 55.6496 76.2439 60.086 70.7714 60.086H66.7949V64.6821H70.7714C78.7823 64.6821 85.2764 58.188 85.2764 50.1772C85.2764 42.1663 78.7823 35.6722 70.7714 35.6722H65.15C65.131 35.6722 65.1244 35.6692 65.1216 35.668C65.1158 35.6656 65.1061 35.66 65.0959 35.6497C65.0856 35.6395 65.08 35.6298 65.0776 35.624L65.0775 35.6238C65.0763 35.6209 65.0734 35.6142 65.0734 35.5956V29.3412Z'\n\nconst backStrokePath = 'M43.65 39.81 L47.23 39.81 A14.96 14.96 0 0 1 62.19 54.77 L62.19 72.85 A12.21 12.21 0 0 1 37.78 72.85 L37.78 66.6 Q37.78 64.22 35.4 64.22 L29.78 64.22 A12.21 12.21 0 0 1 29.78 39.81 L33.18 39.81'\n\nconst frontStrokePath = 'M57.47 62.38 L53.32 62.38 A14.96 14.96 0 0 1 38.36 47.42 L38.36 29.34 A12.21 12.21 0 0 1 62.78 29.34 L62.78 35.6 Q62.78 37.97 65.15 37.97 L70.77 37.97 A12.21 12.21 0 0 1 70.77 62.38 L66.79 62.38'\n\nexport type AppZumDocLogoProps = SVGProps & {\n frontColor?: string,\n backColor?: string,\n animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n size?: 'sm' | 'md' | 'lg',\n animationDuration?: number,\n}\n\nexport const AppZumDocLogo = ({\n frontColor = '#095763',\n backColor = '#4E97A2',\n animate = 'none',\n size,\n animationDuration = 1.7,\n ...props\n}: AppZumDocLogoProps) => {\n const id = useId()\n const isLoadingAnimation = animate === 'loading'\n let svgAnimationKey = ''\n\n if (animate === 'pulse') {\n svgAnimationKey = 'animate-pulse'\n } else if (animate === 'bounce') {\n svgAnimationKey = 'animate-bounce'\n }\n\n const style = animationDuration !== undefined && isLoadingAnimation\n ? { ...props.style, '--helpwave-loading-duration': `${animationDuration}s` } as CSSProperties\n : props.style\n\n return (\n \n \n {isLoadingAnimation ? (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n ) : (\n <>\n \n \n \n )}\n \n \n )\n}\n","import type { CSSProperties, SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps & {\n color?: string,\n animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n size?: 'sm' | 'md' | 'lg',\n animationDuration?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const HelpwaveLogo = ({\n color = 'currentColor',\n size,\n animate = 'none',\n animationDuration = 1.7,\n ...props\n}: HelpwaveProps) => {\n const isLoadingAnimation = animate === 'loading'\n let svgAnimationKey = ''\n\n if (animate === 'pulse') {\n svgAnimationKey = 'animate-pulse'\n } else if (animate === 'bounce') {\n svgAnimationKey = 'animate-bounce'\n }\n\n const style = animationDuration !== undefined && isLoadingAnimation\n ? { ...props.style, '--helpwave-loading-duration': `${animationDuration}s` } as CSSProperties\n : props.style\n\n return (\n \n \n \n \n \n \n \n \n )\n}\n","import { HelpwaveLogo } from './HelpwaveLogo'\nimport type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\ntype Size = 'sm' | 'md' | 'lg'\n\nexport type HelpwaveBadgeProps = HTMLAttributes & {\n size?: Size,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n size = 'sm',\n ...props\n}: HelpwaveBadgeProps) => {\n return (\n \n \n helpwave\n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Download, FileText } from 'lucide-react'\nimport { IconButton } from '../user-interaction/IconButton'\nimport type { ChatMessageDirection } from './ChatMessageBubble'\n\nexport type ChatAttachmentCardProps = HTMLAttributes & {\n name: ReactNode,\n metadata?: ReactNode,\n icon?: ReactNode,\n direction?: ChatMessageDirection,\n downloadLabel?: string,\n onDownload?: () => void,\n}\n\nexport const ChatAttachmentCard = ({\n name,\n metadata,\n icon,\n direction = 'incoming',\n downloadLabel = 'Download',\n onDownload,\n ...props\n}: ChatAttachmentCardProps) => {\n return (\n \n \n {icon ?? }\n \n \n {name}\n {metadata && (\n {metadata}\n )}\n \n {onDownload && (\n \n \n \n )}\n \n )\n}\n","import type { ForwardedRef, ReactNode } from 'react'\nimport { forwardRef,type ButtonHTMLAttributes } from 'react'\nimport type { TooltipDisplayProps } from './Tooltip'\nimport { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'\nimport { Visibility } from '../layout/Visibility'\nimport { useLogOnce } from '@/src/hooks/useLogOnce'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\nimport clsx from 'clsx'\n\n/**\n * The different sizes for a icon button\n */\ntype IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null\n\ntype IconButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null\n\n\n\nexport interface IconButtonBaseProps extends ButtonHTMLAttributes {\n /**\n * @default 'medium'\n */\n size?: IconButtonSize,\n /**\n * @default 'solid'\n */\n coloringStyle?: IconButtonColoringStyle,\n}\n\nexport const IconButtonBase = forwardRef(function IconButtonBase({\n children,\n size = 'md',\n color = 'primary',\n coloringStyle = 'solid',\n disabled,\n ...props\n}, ref) {\n return (\n {\n props.onClick?.(event)\n }}\n\n className={clsx('icon-button', props.className)}\n data-disabled={disabled ? '': undefined}\n data-size={size ?? undefined}\n data-color={color ?? undefined}\n data-coloringstyle={coloringStyle ?? undefined}\n >\n {children}\n \n )\n})\n\n\n\n\n\n\ntype IconButtonTooltipTriggerProps = IconButtonBaseProps\n\n\nconst IconButtonTooltipTrigger = forwardRef(function IconButtonTooltipTrigger({\n disabled,\n ...props\n}, ref) {\n const { trigger: { ref: triggerRef, props: tooltipTriggerProps } } = useTooltip()\n\n return (\n ])}\n disabled={disabled}\n type={props['type'] ?? 'button'}\n\n onClick={event => {\n if(!disabled) {\n tooltipTriggerProps.onClick()\n }\n props.onClick?.(event)\n }}\n onKeyDown={(e) => {\n if(!disabled) {\n if(e.key === 'Enter' || e.key === ' ') {\n tooltipTriggerProps.onClick()\n }\n }\n props.onKeyDown?.(e)\n }}\n onPointerEnter={(e) => {\n if(!disabled) {\n tooltipTriggerProps.onPointerEnter()\n }\n props.onPointerEnter?.(e)\n }}\n onPointerLeave={(e) => {\n if(!disabled) {\n tooltipTriggerProps.onPointerLeave()\n }\n props.onPointerLeave?.(e)\n }}\n onPointerCancel={(e) => {\n if(!disabled) {\n tooltipTriggerProps.onPointerCancel()\n }\n props.onPointerCancel?.(e)\n }}\n onBlur={(e) => {\n if(!disabled) {\n tooltipTriggerProps.onBlur()\n }\n props.onBlur?.(e)\n }}\n />\n )\n})\n\n\n\nexport interface IconButtonProps extends IconButtonBaseProps {\n useTooltipAsLabel?: boolean,\n tooltip?: ReactNode,\n tooltipProps?: Omit,\n}\n\n/**\n * A icon button with a tooltip\n */\nexport const IconButton = forwardRef(function IconButton({\n tooltip,\n tooltipProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n useTooltipAsLabel = true,\n color = 'neutral',\n disabled,\n ...props\n}, ref) {\n const isLabeled = !!ariaLabel || !!ariaLabelledby\n const isTooltipLabel = useTooltipAsLabel && !!tooltip\n\n useLogOnce('IconButton: Either provide \"aria-label\" or \"aria-labelledby\" or use ' +\n '\"useTooltipAsLabel\" and \"tooltip\" to give the icon button a semantic meaning',\n !isLabeled && !isTooltipLabel, { type: 'warning' })\n\n return (\n \n \n {(context) => {\n const id = context?.tooltip.id\n return (\n \n )}}\n \n \n \n {tooltip}\n \n \n \n )\n})","import type { PropsWithChildren, ReactNode, RefObject } from 'react'\nimport { forwardRef, useContext, useEffect } from 'react'\nimport { useId } from 'react'\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport type { FloatingElementAlignment, UseAnchoredPositionOptions } from '@/src/hooks/useAnchoredPosition'\nimport { useOverlayRegistry } from '@/src/hooks/useOverlayRegistry'\nimport { useTransitionState } from '@/src/hooks/useTransitionState'\nimport type { TooltipConfig } from '@/src/global-contexts/HightideConfigContext'\nimport { useHightideConfig } from '@/src/global-contexts/HightideConfigContext'\nimport { Portal } from '@/src/components/utils/Portal'\nimport type { AnchoredFloatingContainerProps } from '../layout/AnchoredFloatingContainer'\nimport { AnchoredFloatingContainer } from '../layout/AnchoredFloatingContainer'\nimport { createContext } from 'react'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport interface TooltipTriggerContextValue {\n ref: RefObject,\n callbackRef: (el: HTMLElement | null) => void,\n props: {\n 'onPointerEnter': () => void,\n 'onPointerLeave': () => void,\n 'onPointerCancel': () => void,\n 'onClick': () => void,\n 'onBlur': () => void,\n 'aria-describedby'?: string,\n },\n}\n\nexport interface TooltipContextType {\n tooltip: {\n id: string,\n setId: (id: string) => void,\n },\n trigger: TooltipTriggerContextValue,\n disabled: boolean,\n isShown: boolean,\n open: () => void,\n close: () => void,\n}\n\nexport const TooltipContext = createContext(null)\n\nexport const useTooltip = () => {\n const context = useContext(TooltipContext)\n if(!context) {\n throw new Error('useTooltip must be used within a TooltipContext.Provider or TooltipRoot')\n }\n return context\n}\n\nexport interface TooltipRootProps extends PropsWithChildren {\n isInitiallyShown?: boolean,\n onIsShownChange?: (isShown: boolean) => void,\n appearDelay?: number,\n disabled?: boolean,\n}\n\nexport const TooltipRoot = ({\n children,\n isInitiallyShown = false,\n onIsShownChange,\n appearDelay: appearOverwrite,\n disabled = false,\n}: TooltipRootProps) => {\n const generatedId = 'tooltip-' + useId()\n const [tooltipId, setTooltipId] = useState(generatedId)\n const [isShown, setIsShown] = useState(isInitiallyShown)\n\n const timeoutRef = useRef(undefined)\n\n const { config } = useHightideConfig()\n\n const appearDelay = useMemo(() =>\n appearOverwrite ?? config.tooltip.appearDelay,\n [appearOverwrite, config.tooltip.appearDelay])\n\n const triggerRef = useRef(null)\n\n useEffect(() => {\n onIsShownChange?.(isShown)\n }, [isShown, onIsShownChange])\n\n const openWithDelay = useCallback(() => {\n if (timeoutRef.current || isShown) return\n\n if(appearDelay < 0) {\n setIsShown(true)\n return\n }\n\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = undefined\n setIsShown(true)\n }, appearDelay)\n }, [appearDelay, isShown])\n\n\n const close = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }\n setIsShown(false)\n }, [])\n\n useEffect(() => {\n if (!isShown) return\n\n const closeOnBlur = () => close()\n const closeOnScroll = () => close()\n\n window.addEventListener('blur', closeOnBlur)\n window.addEventListener('scroll', closeOnScroll, true)\n\n return () => {\n window.removeEventListener('blur', closeOnBlur)\n window.removeEventListener('scroll', closeOnScroll, true)\n }\n }, [isShown, close])\n\n useEffect(() => {\n if(disabled) {\n setIsShown(false)\n if(timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }\n }\n }, [disabled])\n\n const contextValue: TooltipContextType = useMemo(() => ({\n tooltip: {\n id: tooltipId,\n setId: setTooltipId,\n },\n trigger: {\n ref: triggerRef,\n callbackRef: (el: HTMLElement | null) => triggerRef.current = el,\n props: {\n 'onPointerEnter': openWithDelay,\n 'onPointerLeave': close,\n 'onPointerCancel': close,\n 'onClick': openWithDelay,\n 'onBlur': close,\n 'aria-describedby': tooltipId,\n },\n },\n disabled,\n isShown,\n open: openWithDelay,\n close,\n }), [tooltipId, openWithDelay, close, isShown, disabled])\n\n return (\n \n {children}\n \n )\n}\n\n\n\n\n\n\n\ntype TooltipAligment = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface TooltipDisplayProps extends Omit, Partial {\n 'alignment'?: TooltipAligment,\n 'disabled'?: boolean,\n 'anchor'?: RefObject,\n 'isShown'?: boolean,\n 'options'?: Omit,\n 'data-name'?: string,\n}\n\nexport const TooltipDisplay = forwardRef(function TooltipAnchoredFloatingContainer({\n children,\n alignment = 'bottom',\n disabled: disabledOverwrite,\n isShown: isShownOverwrite,\n isAnimated: isAnimatedOverwrite,\n anchor: anchorOverwrite,\n ...props\n}, forwardRef) {\n const { config } = useHightideConfig()\n const tooltipContext = useContext(TooltipContext)\n const anchorFallback = useRef(null)\n\n const disabled = disabledOverwrite ?? tooltipContext?.disabled\n const isShown = isShownOverwrite ?? tooltipContext?.isShown ?? false\n const anchor = anchorOverwrite ?? tooltipContext?.trigger.ref ?? anchorFallback\n const id = tooltipContext?.tooltip.id ?? props.id\n\n useEffect(() => {\n if(!tooltipContext || !props.id) return\n tooltipContext?.tooltip.setId(props.id)\n }, [props.id, tooltipContext])\n\n const isAnimated = useMemo(() =>\n isAnimatedOverwrite ?? config.tooltip.isAnimated,\n [isAnimatedOverwrite, config.tooltip.isAnimated])\n\n const container = useRef(null)\n\n const isActive = !disabled && isShown\n\n const { isVisible, transitionState } = useTransitionState(\n useMemo(() => ({ isOpen: isShown, ref: container }), [isShown])\n )\n\n const verticalAlignment: FloatingElementAlignment = useMemo(() =>\n alignment === 'top' ? 'beforeStart' : alignment === 'bottom' ? 'afterEnd' : 'center',\n [alignment])\n\n const horizontalAlignment: FloatingElementAlignment = useMemo(() =>\n alignment === 'left' ? 'beforeStart' : alignment === 'right' ? 'afterEnd' : 'center',\n [alignment])\n\n const { zIndex } = useOverlayRegistry({ isActive })\n\n if(disabled) return null\n\n return (\n \n \n {children}\n \n \n )\n})\n\n\n\nexport interface TooltipTriggerBag extends TooltipTriggerContextValue {\n disabled: boolean,\n isShown: boolean,\n}\n\nexport interface TooltipTriggerProps {\n children: (bag: TooltipTriggerBag) => ReactNode,\n}\n\nexport const TooltipTrigger = ({\n children,\n}: TooltipTriggerProps) => {\n const context = useTooltip()\n const bag: TooltipTriggerBag = { ...context.trigger, disabled: context.disabled, isShown: context.isShown }\n\n return BagFunctionUtil.resolve(children, bag)\n}\n\n\n\n\nexport interface TooltipProps extends TooltipRootProps, Pick {\n tooltip: ReactNode,\n containerClassName?: string,\n displayProps?: Omit,\n}\n\n/**\n * A Component for showing a tooltip when hovering over Content\n */\nexport const Tooltip = ({\n tooltip,\n children,\n isInitiallyShown,\n appearDelay,\n disabled,\n containerClassName,\n alignment,\n isAnimated,\n onIsShownChange,\n displayProps,\n}: TooltipProps) => {\n\n return (\n \n \n {({ props, callbackRef, disabled }) => (\n \n {children}\n \n )}\n \n \n {tooltip}\n \n \n )\n}\n","import { useEffect, useId, useMemo, useState } from 'react'\n\nexport type OverlayItem = {\n id: string,\n tags?: string[],\n}\n\ntype OverlayItemInformation = OverlayItem & {\n zIndex: number,\n position: number,\n tagPositions: Record,\n}\n\ntype OverlayRegistryValue = {\n itemInformation: Record,\n tagItemCounts: Record,\n activeId: string | null,\n}\n\ntype OverlayRegistryListenerCallback = (value: OverlayRegistryValue) => void\n\nexport class OverlayRegistry {\n private static instance: OverlayRegistry | null = null\n\n static getInstance(): OverlayRegistry {\n if (!OverlayRegistry.instance) {\n OverlayRegistry.instance = new OverlayRegistry()\n }\n return OverlayRegistry.instance\n }\n\n // The frontmost overlay is at the end of the array\n private overlayIds: string[] = []\n private overlayItems: Record = {}\n private listeners = new Set()\n\n register(item: OverlayItem) {\n this.overlayIds = this.overlayIds.filter(id => id !== item.id)\n this.overlayIds.push(item.id)\n this.overlayItems[item.id] = item\n this.notify()\n return () => {\n this.overlayIds = this.overlayIds.filter(id => id !== item.id)\n delete this.overlayItems[item.id]\n this.notify()\n }\n }\n\n update(item: OverlayItem) {\n this.overlayItems[item.id] = item\n this.notify()\n }\n\n addListener(callback: OverlayRegistryListenerCallback) {\n this.listeners.add(callback)\n return () => {\n this.listeners.delete(callback)\n }\n }\n\n private notify() {\n const itemInformation: Record = {}\n const ids = [...this.overlayIds]\n const startZIndex = 100\n const tagCount: Record = {}\n for (let index = ids.length - 1; index >= 0; index--) {\n const id = ids[index]\n const item = this.overlayItems[id]\n itemInformation[id] = {\n ...item,\n position: index,\n tagPositions: {},\n zIndex: startZIndex + index,\n }\n for(const tag of item.tags ?? []) {\n const count = tagCount[tag] ?? 0\n const nextPosition = count\n tagCount[tag] = count + 1\n itemInformation[id].tagPositions[tag] = nextPosition\n }\n }\n for (const callback of this.listeners) {\n callback({ activeId: ids[ids.length - 1] ?? null, itemInformation, tagItemCounts: tagCount })\n }\n }\n}\n\nexport type UseOverlayRegistryProps = Partial & {\n isActive?: boolean,\n /** Tags cannot change on every render, thus make sure they are wrapped in a useMemo or similar */\n tags?: string[],\n}\n\nexport type UseOverlayRegistryResult = {\n isInFront: boolean,\n zIndex?: number,\n position?: number,\n tagPositions?: Record,\n tagItemCounts: Record,\n}\n\nexport const useOverlayRegistry = (props: UseOverlayRegistryProps = {}): UseOverlayRegistryResult => {\n const generatedId = useId()\n const item: OverlayItem = useMemo(() => ({\n id: props.id ?? generatedId,\n tags: props.tags,\n }), [props.id, generatedId, props.tags])\n const [value, setValue] = useState({\n activeId: null,\n itemInformation: {},\n tagItemCounts: {}\n })\n const registry = useMemo(() => OverlayRegistry.getInstance(), [])\n\n useEffect(() => {\n if(!props.isActive) {\n return\n }\n function callback(value: OverlayRegistryValue) {\n setValue(value)\n }\n\n const removeListener = registry.addListener(callback)\n const unregister = registry.register(item)\n return () => {\n removeListener()\n unregister()\n setValue({\n activeId: null,\n itemInformation: {},\n tagItemCounts: {}\n })\n }\n }, [props.isActive, item, registry])\n\n const itemInformation = value.itemInformation[item.id]\n\n return {\n isInFront: value.activeId === item.id,\n zIndex: itemInformation?.zIndex,\n position: itemInformation?.position,\n tagPositions: itemInformation?.tagPositions,\n tagItemCounts: value.tagItemCounts,\n }\n}","'use client'\n\nimport type { RefObject } from 'react'\nimport { useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'\n\nexport type TransitionState = 'opened' | 'closed' | 'opening' | 'closing'\n\nconst reducer = (state: TransitionState, action: 'open' | 'close' | 'finished') : TransitionState => {\n switch (action) {\n case 'open':\n return 'opening'\n case 'close':\n return 'closing'\n case 'finished':{\n if(state === 'opening') {\n return 'opened'\n }\n if(state === 'closing') {\n return 'closed'\n }\n return state\n }\n default:\n return state\n }\n}\n\ntype UseTransitionStateResult = {\n transitionState: TransitionState,\n isVisible: boolean,\n}\n\ntype UseTransitionStateProps = {\n isOpen: boolean,\n initialState?: TransitionState,\n ref: RefObject,\n timeout?: number,\n}\n\nexport const useTransitionState = ({\n isOpen,\n initialState = 'closed',\n ref,\n timeout: initialTimeout = 1000,\n}: UseTransitionStateProps): UseTransitionStateResult => {\n const [state, dispatch] = useReducer(reducer, initialState)\n\n const timer = useRef(undefined)\n const hasAnimation = useRef(false)\n const [timeout] = useState(initialTimeout)\n\n useEffect(() => {\n if (isOpen && (state !== 'opened' && state !== 'opening')) {\n dispatch('open')\n } else if (!isOpen && (state !== 'closed' && state !== 'closing')) {\n dispatch('close')\n }\n }, [isOpen, state])\n\n\n useEffect(() => {\n if (state === 'opening' || state === 'closing') {\n if (timer.current) {\n clearTimeout(timer.current)\n }\n if(timeout > 0) {\n timer.current = setTimeout(() => {\n dispatch('finished')\n }, timeout)\n }\n } else {\n if (timer.current) {\n clearTimeout(timer.current)\n }\n }\n }, [state, timeout])\n\n useLayoutEffect(() => {\n if (state === 'opening' || state === 'closing') {\n let element = ref.current\n if(!element) {\n console.warn('useTransitionState: ref is not set to an element using window instead')\n element = window.document.body\n }\n const animations = element.getAnimations({ subtree: true })\n .filter(animation => animation.effect?.getTiming().duration !== '0s')\n if (animations.length > 0) {\n hasAnimation.current = true\n Promise.all(animations.map(animation => animation.finished))\n .then(() => {\n dispatch('finished')\n })\n .catch(() => {\n dispatch('finished')\n })\n } else {\n dispatch('finished')\n hasAnimation.current = false\n clearTimeout(timer.current)\n }\n }\n }, [ref, state])\n\n const onStart = useCallback(() => {\n hasAnimation.current = true\n }, [])\n\n const onEnd = useCallback(() => {\n dispatch('finished')\n hasAnimation.current = false\n }, [])\n\n useEffect(() => {\n if (ref?.current && (state === 'opening' || state === 'closing')) {\n const element = ref.current\n element.addEventListener('animationstart', onStart)\n element.addEventListener('animationend', onEnd)\n element.addEventListener('transitionstart', onStart)\n element.addEventListener('transitionend', onEnd)\n element.addEventListener('transitioncancel', onEnd)\n return () => {\n element.removeEventListener('animationstart', onStart)\n element.removeEventListener('animationend', onEnd)\n element.removeEventListener('transitionstart', onStart)\n element.removeEventListener('transitionend', onEnd)\n element.removeEventListener('transitioncancel', onEnd)\n }\n }\n }, [state, ref, onStart, onEnd])\n\n return {\n transitionState: state,\n isVisible: state !== 'closed',\n }\n}","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\nimport type { ResolvedTheme } from '@/src/global-contexts/ThemeContext'\nimport type { HightideTranslationLocales } from '@/src/i18n/translations'\nimport type { DeepPartial } from '@/src/utils/typing'\n\nexport type TooltipConfig = {\n appearDelay: number,\n isAnimated: boolean,\n screenPadding: number,\n}\n\nexport type ThemeConfig = {\n initialTheme: ResolvedTheme,\n}\n\nexport type LocalizationConfig = {\n defaultLocale: HightideTranslationLocales,\n defaultTimeZone?: string,\n defaultIs24HourFormat?: boolean,\n}\n\nexport type HightideConfig = {\n tooltip: TooltipConfig,\n theme: ThemeConfig,\n locale: LocalizationConfig,\n}\n\nconst defaultConfig: HightideConfig = {\n tooltip: {\n appearDelay: 0,\n isAnimated: false,\n screenPadding: 1,\n },\n theme: {\n initialTheme: 'light'\n },\n locale: {\n defaultLocale: 'de-DE',\n }\n}\n\nfunction mergeConfig(config: HightideConfig, overwrite: DeepPartial): HightideConfig {\n return {\n locale: {\n ...config.locale,\n ...overwrite?.locale\n },\n theme: {\n ...config.theme,\n ...overwrite.theme,\n },\n tooltip: {\n ...config.tooltip,\n ...overwrite.tooltip,\n }\n }\n}\n\ntype ConfigType = {\n config: HightideConfig,\n setConfig: (configOverwrite: DeepPartial) => void,\n}\n\nexport const HightideConfigContext = createContext(null)\n\nexport type HightideConfigProviderProps = PropsWithChildren & DeepPartial\n\nexport const HightideConfigProvider = ({\n children,\n ...initialOverwrite\n}: HightideConfigProviderProps) => {\n const [config, setConfig] = useState(mergeConfig(defaultConfig, initialOverwrite))\n\n return (\n setConfig(prevState => mergeConfig(prevState, value)),\n }}\n >\n {children}\n \n )\n}\n\nexport const useHightideConfig = () => {\n const context = useContext(HightideConfigContext)\n if (!context) {\n return {\n config: defaultConfig,\n setConfig: () => {\n console.error('useHightideConfig.setConfig is not available without a HightideConfigProvider. Try wrapping your app a HightideConfigProvider.')\n }\n }\n }\n return context\n}","import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface PortalProps extends PropsWithChildren {\n container?: HTMLElement,\n}\n\nexport const Portal = ({ children, container }: PortalProps) => {\n return createPortal(children, container ?? document.body)\n}","import type { HTMLAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport type { UseAnchoredPositionOptions } from '@/src/hooks/useAnchoredPosition'\nimport { useAnchoredPosition as useAnchoredPosition } from '@/src/hooks/useAnchoredPosition'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport type BackgroundOverlayProps = HTMLAttributes\n\nexport interface AnchoredFloatingContainerProps extends HTMLAttributes {\n anchor: RefObject,\n options?: UseAnchoredPositionOptions,\n active?: boolean,\n}\n\nexport const AnchoredFloatingContainer = forwardRef(function FloatingContainer({\n children,\n anchor,\n options = {},\n active = true,\n ...props\n}, forwardRef) {\n const innerRef = useRef(null)\n\n const position = useAnchoredPosition({\n ...options,\n container: innerRef,\n anchor: anchor,\n active,\n })\n\n return (\n \n {children}\n \n )\n})","'use client'\n\nimport type { CSSProperties, RefObject } from 'react'\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MathUtil } from '@/src/utils/math'\nimport { useWindowResizeObserver } from './useWindowResizeObserver'\nimport { useResizeObserver } from './useResizeObserver'\nimport { useScrollObserver } from './useScrollObserver'\n\nexport type FloatingElementAlignment = 'beforeStart' | 'afterStart' | 'center' | 'beforeEnd' | 'afterEnd'\n\ntype RectangleBounds = {\n top: number,\n right: number,\n bottom: number,\n left: number,\n width: number,\n height: number,\n}\n\ntype CalculatePositionOptionsResolved = {\n verticalAlignment: FloatingElementAlignment,\n horizontalAlignment: FloatingElementAlignment,\n screenPadding: number,\n gap: number,\n avoidOverlap: boolean,\n}\n\ntype CalculatePositionOptions = Partial\n\ntype CalculatePositionProps = {\n windowRect: RectangleBounds,\n containerRect: RectangleBounds,\n anchorRect: RectangleBounds,\n options: CalculatePositionOptionsResolved,\n}\n\n\nfunction calculatePosition({\n windowRect,\n containerRect,\n anchorRect,\n options,\n}: CalculatePositionProps): CSSProperties {\n const { verticalAlignment, horizontalAlignment, gap, screenPadding, avoidOverlap } = options\n\n const calculateBasicPosition = (hAlign: FloatingElementAlignment, vAlign: FloatingElementAlignment) => {\n const windowWidth = windowRect.width\n const windowHeight = windowRect.height\n\n const maxWidth = windowWidth - 2 * screenPadding\n const maxHeight = windowHeight - 2 * screenPadding\n\n const width = Math.min(containerRect.width, maxWidth)\n const height = Math.min(containerRect.height, maxHeight)\n\n const anchorCenterX = anchorRect.left + anchorRect.width / 2\n const anchorCenterY = anchorRect.top + anchorRect.height / 2\n\n let left: number\n let top: number\n let translateXPercent: number\n let translateYPercent: number\n\n switch (hAlign) {\n case 'beforeStart':\n left = anchorRect.left\n translateXPercent = -100\n break\n case 'afterStart':\n left = anchorRect.left\n translateXPercent = 0\n break\n case 'center':\n left = anchorCenterX\n translateXPercent = -50\n break\n case 'beforeEnd':\n left = anchorRect.right\n translateXPercent = -100\n break\n case 'afterEnd':\n left = anchorRect.right\n translateXPercent = 0\n break\n }\n\n switch (vAlign) {\n case 'beforeStart':\n top = anchorRect.top\n translateYPercent = -100\n break\n case 'afterStart':\n top = anchorRect.top\n translateYPercent = 0\n break\n case 'center':\n top = anchorCenterY\n translateYPercent = -50\n break\n case 'beforeEnd':\n top = anchorRect.bottom\n translateYPercent = -100\n break\n case 'afterEnd':\n top = anchorRect.bottom\n translateYPercent = 0\n break\n }\n\n if (gap !== 0) {\n if (hAlign === 'afterEnd') {\n left += gap\n } else if (hAlign === 'beforeStart') {\n left -= gap\n }\n\n if (vAlign === 'afterEnd') {\n top += gap\n } else if (vAlign === 'beforeStart') {\n top -= gap\n }\n }\n\n const targetLeft = left + (width * translateXPercent / 100)\n const targetTop = top + (height * translateYPercent / 100)\n\n const clampedLeft = MathUtil.clamp(targetLeft, screenPadding, windowWidth - screenPadding - width)\n const clampedTop = MathUtil.clamp(targetTop, screenPadding, windowHeight - screenPadding - height)\n\n return {\n left,\n top,\n clampedLeft,\n clampedTop,\n width,\n height,\n maxWidth,\n maxHeight,\n }\n }\n\n // Calculate overlap area between two rectangles\n const calculateOverlap = (left: number, top: number, width: number, height: number): number => {\n const floatingRect = {\n left,\n top,\n right: left + width,\n bottom: top + height,\n }\n\n // Calculate overlap area\n const overlapLeft = Math.max(floatingRect.left, anchorRect.left)\n const overlapTop = Math.max(floatingRect.top, anchorRect.top)\n const overlapRight = Math.min(floatingRect.right, anchorRect.right)\n const overlapBottom = Math.min(floatingRect.bottom, anchorRect.bottom)\n\n const overlapWidth = Math.max(0, overlapRight - overlapLeft)\n const overlapHeight = Math.max(0, overlapBottom - overlapTop)\n\n return overlapWidth * overlapHeight\n }\n\n // Get original position\n const originalPos = calculateBasicPosition(horizontalAlignment, verticalAlignment)\n let bestPosition = originalPos\n\n // If avoidOverlap is enabled and we have beforeStart/afterEnd alignments, try swapped alignments\n if (avoidOverlap && (horizontalAlignment === 'beforeStart' || horizontalAlignment === 'afterEnd' || verticalAlignment === 'beforeStart' || verticalAlignment === 'afterEnd')) {\n let bestOverlap = calculateOverlap(originalPos.clampedLeft, originalPos.clampedTop, originalPos.width, originalPos.height)\n\n // Create swapped alignments\n let altHorizontalAlignment = horizontalAlignment\n let altVerticalAlignment = verticalAlignment\n\n if (horizontalAlignment === 'beforeStart') {\n altHorizontalAlignment = 'afterEnd'\n } else if (horizontalAlignment === 'afterEnd') {\n altHorizontalAlignment = 'beforeStart'\n }\n\n if (verticalAlignment === 'beforeStart') {\n altVerticalAlignment = 'afterEnd'\n } else if (verticalAlignment === 'afterEnd') {\n altVerticalAlignment = 'beforeStart'\n }\n\n // Calculate alternative position\n const altPos = calculateBasicPosition(altHorizontalAlignment, altVerticalAlignment)\n const altOverlap = calculateOverlap(altPos.clampedLeft, altPos.clampedTop, altPos.width, altPos.height)\n\n // Use alternative if it has less overlap\n if (altOverlap < bestOverlap) {\n bestPosition = altPos\n bestOverlap = altOverlap\n }\n }\n\n return {\n left: bestPosition.clampedLeft,\n top: bestPosition.clampedTop,\n maxWidth: bestPosition.maxWidth,\n maxHeight: bestPosition.maxHeight,\n transformOrigin: 'top left',\n }\n}\n\nexport type UseAnchoredPositionOptions = CalculatePositionOptions & {\n isPolling?: boolean,\n isReactingToResize?: boolean,\n isReactingToScroll?: boolean,\n pollingInterval?: number,\n}\n\nexport type UseAnchoredPostitionProps = UseAnchoredPositionOptions & {\n container: RefObject,\n anchor: RefObject,\n window?: RefObject,\n active?: boolean,\n}\n\nconst measureSizes = ({\n containerRef,\n anchorRef,\n windowRef,\n}: {\n containerRef?: RefObject,\n anchorRef?: RefObject,\n windowRef?: RefObject,\n}) => {\n const visualViewport = window.visualViewport\n const fallback = visualViewport ? {\n top: 0,\n bottom: visualViewport.height - visualViewport.offsetTop,\n left: 0,\n right: visualViewport.width - visualViewport.offsetLeft,\n width: visualViewport.width - visualViewport.offsetLeft,\n height: visualViewport.height - visualViewport.offsetTop,\n }: {\n top: 0,\n bottom: window.innerHeight,\n left: 0,\n right: window.innerWidth,\n width: window.innerWidth,\n height: window.innerHeight,\n }\n\n return {\n container: containerRef?.current?.getBoundingClientRect(),\n anchor: anchorRef?.current?.getBoundingClientRect(),\n window: windowRef?.current?.getBoundingClientRect() ?? fallback,\n }\n}\n\ntype MeasureSize = ReturnType\n\n// dont check position of container because we are changing it\nconst isSameMeasurment = (a: MeasureSize | null, b: MeasureSize | null) =>\n !!a &&\n !!b &&\n a.container?.width === b.container?.width &&\n a.container?.height === b.container?.height &&\n a.anchor?.top === b.anchor?.top &&\n a.anchor?.left === b.anchor?.left &&\n a.anchor?.right === b.anchor?.right &&\n a.anchor?.bottom === b.anchor?.bottom &&\n a.anchor?.width === b.anchor?.width &&\n a.anchor?.height === b.anchor?.height &&\n a.window?.top === b.window?.top &&\n a.window?.left === b.window?.left &&\n a.window?.right === b.window?.right &&\n a.window?.bottom === b.window?.bottom &&\n a.window?.width === b.window?.width &&\n a.window?.height === b.window?.height\n\nconst isSameOptions = (a: CalculatePositionOptions | null, b: CalculatePositionOptions | null) =>\n !!a &&\n !!b &&\n a.horizontalAlignment === b.horizontalAlignment &&\n a.verticalAlignment === b.verticalAlignment &&\n a.screenPadding === b.screenPadding &&\n a.gap === b.gap &&\n a.avoidOverlap === b.avoidOverlap\n\nexport function useAnchoredPosition({\n active = true,\n window: windowRef,\n anchor: anchorRef,\n container: containerRef,\n isPolling = false,\n isReactingToResize = true,\n isReactingToScroll = false,\n pollingInterval = 100,\n verticalAlignment = 'afterEnd',\n horizontalAlignment = 'afterStart',\n avoidOverlap = false,\n screenPadding = 16,\n gap = 4,\n}: UseAnchoredPostitionProps) {\n const [style, setStyle] = useState()\n const lastSizes = useRef(null)\n const lastOptions = useRef(null)\n\n const options = useMemo(() => ({\n horizontalAlignment,\n verticalAlignment,\n screenPadding,\n gap,\n avoidOverlap,\n }), [horizontalAlignment, verticalAlignment, screenPadding, gap, avoidOverlap])\n\n const calculate = useCallback(() => {\n const newMeasurement = measureSizes({ containerRef, anchorRef, windowRef })\n if (!newMeasurement) return\n if (isSameMeasurment(lastSizes.current, newMeasurement) && isSameOptions(options, lastOptions.current)) return\n lastSizes.current = newMeasurement\n lastOptions.current = options\n\n if (!newMeasurement.container) {\n return\n }\n const containerRect: RectangleBounds = newMeasurement.container\n const windowRect: RectangleBounds = newMeasurement.window\n const anchorRect: RectangleBounds = newMeasurement.anchor ?? newMeasurement.window\n\n if (containerRect.width === 0 || containerRect.height === 0) {\n return\n }\n\n const calculateProps: CalculatePositionProps = {\n windowRect,\n anchorRect,\n containerRect,\n options,\n }\n setStyle(calculatePosition(calculateProps))\n }, [anchorRef, containerRef, options, windowRef])\n\n useLayoutEffect(() => {\n if (!active) {\n setStyle(undefined)\n lastSizes.current = null\n return\n } else {\n calculate()\n }\n }, [active, options, calculate])\n\n useWindowResizeObserver(calculate)\n\n useResizeObserver({ observedElementRef: containerRef, onResize: calculate, isActive: isReactingToResize && active })\n useResizeObserver({ observedElementRef: anchorRef, onResize: calculate, isActive: isReactingToResize && active })\n useResizeObserver({ observedElementRef: windowRef, onResize: calculate, isActive: isReactingToResize && active })\n\n useScrollObserver({ observedElementRef: anchorRef, onScroll: calculate, isActive: isReactingToScroll && active })\n\n useEffect(() => {\n if (!containerRef.current || !active) {\n return\n }\n let timeout: NodeJS.Timeout\n if (isPolling) {\n timeout = setInterval(calculate, pollingInterval)\n }\n return () => {\n if (timeout) {\n clearInterval(timeout)\n }\n }\n }, [active, calculate, containerRef, isPolling, pollingInterval])\n return style\n}\n","export type Range = [number, number]\nexport type UnBoundedRange = [undefined | number, undefined | number]\nexport type DirectionNumber = 1 | -1\n\nexport type LoopingRangeBound = 'maximum' | 'minimum'\n\nexport type LoopingRangeResult = {\n value: number,\n loopedOver: LoopingRangeBound | null,\n}\n\nfunction clamp(value: number, min: number | undefined, max: number | undefined): number {\n if(min !== undefined) value = Math.max(value, min)\n if(max !== undefined) value = Math.min(value, max)\n return value\n}\n\nfunction clamp01(value: number): number {\n return clamp(value, 0, 1)\n}\n\nfunction closestStep(value: number, stepSize: number): number {\n return Math.round(value / stepSize) * stepSize\n}\n\nfunction toStepRange(value: number, stepSize: number, min: number | undefined, max: number | undefined): number {\n const minStep = min !== undefined ? Math.ceil(min / stepSize) * stepSize : undefined\n const maxStep = max !== undefined ? Math.floor(max / stepSize) * stepSize : undefined\n value = closestStep(value, stepSize)\n if(minStep !== undefined) value = Math.max(value, minStep)\n if(maxStep !== undefined) value = Math.min(value, maxStep)\n return value\n}\n\nfunction resolveLoopingRangeValue(\n value: number,\n minimum: number,\n maximum: number\n): LoopingRangeResult {\n const range = maximum - minimum\n\n if (value > maximum) {\n return {\n value: (value - maximum) % range + minimum,\n loopedOver: 'maximum',\n }\n }\n\n if (value < minimum) {\n return {\n value: (value - minimum) % range + minimum,\n loopedOver: 'minimum',\n }\n }\n\n return {\n value,\n loopedOver: null,\n }\n}\n\nexport const MathUtil = {\n clamp,\n clamp01,\n toStepRange,\n closestStep,\n resolveLoopingRangeValue,\n}\n","import { useEffect } from 'react'\n\n/**\n * A hook that wraps the event listener attachment\n *\n * Make sure your callback is stable (doesn't change every render)\n * This can easily be achieved by wrapping it in a useCallback() and using it inside the useResizeCallbackWrapper\n *\n * @param callback Called when the window resizes\n */\nexport const useWindowResizeObserver = (onResize: () => void) => {\n useEffect(() => {\n window.addEventListener('resize', onResize)\n\n return () => {\n window.removeEventListener('resize', onResize)\n }\n }, [onResize])\n}","import type { RefObject } from 'react'\nimport { useLayoutEffect } from 'react'\n\nexport type UseResizeObserverProps = {\n observedElementRef?: RefObject,\n onResize: () => void,\n isActive?: boolean,\n}\n\nexport function useResizeObserver({ observedElementRef, onResize, isActive = true }: UseResizeObserverProps) {\n useLayoutEffect(() => {\n const el = observedElementRef?.current\n if (!el || !isActive) return\n\n const observer = new ResizeObserver(() => {\n onResize()\n })\n\n observer.observe(el)\n\n return () => {\n observer.disconnect()\n }\n }, [observedElementRef, onResize, isActive])\n}\n","'use client'\n\nimport type { RefObject } from 'react'\nimport { useLayoutEffect } from 'react'\n\nfunction getScrollParents(el: HTMLElement): HTMLElement[] {\n const parents: HTMLElement[] = []\n let parent = el.parentElement\n\n while (parent) {\n const { overflow, overflowX, overflowY } = getComputedStyle(parent)\n if (/(auto|scroll|overlay)/.test(overflow + overflowX + overflowY)) {\n parents.push(parent)\n }\n parent = parent.parentElement\n }\n\n // only safe because window\n parents.push(window as unknown as HTMLElement)\n return parents\n}\n\ntype UseScrollObserverProps = {\n observedElementRef?: RefObject,\n onScroll: () => void,\n isActive?: boolean,\n}\n\nexport function useScrollObserver({ observedElementRef, onScroll, isActive = true }: UseScrollObserverProps) {\n useLayoutEffect(() => {\n if (!observedElementRef?.current || !isActive) return\n\n const parents = getScrollParents(observedElementRef.current)\n parents.forEach(p => p.addEventListener('scroll', onScroll, { passive: true }))\n\n return () => {\n parents.forEach(p => p.removeEventListener('scroll', onScroll))\n }\n }, [observedElementRef, onScroll, isActive])\n}","import type { ForwardedRef } from 'react'\n\nfunction assignForwardRef(element: T | null, ref?: ForwardedRef) {\n if(!ref) return\n if(typeof ref === 'function') {\n ref(element)\n } else {\n ref.current = element\n }\n}\n\nfunction assingRefsBuilder(refs: ForwardedRef[]) : (el: T | null) => void {\n return (element) => {\n refs.forEach(ref => {\n assignForwardRef(element, ref)\n })\n }\n}\n\nexport const ReactRefsUtil = {\n assignForwardRef,\n assingRefsBuilder\n}","import type { ReactNode } from 'react'\n\nexport type BagFunction = (bag: B) => V\n\nexport type BagFunctionOrValue = BagFunction | V\n\nexport type BagFunctionOrNode = BagFunction | ReactNode\n\nexport type PropsWithBagFunction = P & { children?: BagFunction }\n\nexport type PropsWithBagFunctionOrChildren = P & { children?: BagFunctionOrNode }\n\n/**\n * Resolves a BagFunction\n *\n * If V is a function this resolver does not work\n * @param bagFunctionOrValue Function or Value\n * @param bag Values for function resolvers\n * @returns The Value or the result of the function\n */\nconst resolve = (bagFunctionOrValue: BagFunctionOrValue, bag: B): V => {\n if (typeof bagFunctionOrValue === 'function') {\n return (bagFunctionOrValue as BagFunction)(bag)\n }\n\n return bagFunctionOrValue\n}\n\nexport const BagFunctionUtil = {\n resolve\n}","import type { PropsWithChildren } from 'react'\n\nexport type VisibilityProps = PropsWithChildren & {\n isVisible?: boolean,\n}\n\nexport function Visibility({ children, isVisible }: VisibilityProps) {\n return (<>{isVisible && children})\n}","import { useEffect, useState } from 'react'\n\ntype OptionsResolved = {\n type?: 'info' | 'error' | 'warning',\n}\n\nconst defaultOptions: OptionsResolved = {\n type: 'warning',\n}\n\ntype Options = Partial\n\nexport const useLogOnce = (\n message: string,\n condition: boolean,\n options?: Options\n) => {\n const [hasLogged, setHasLogged] = useState(false)\n const { type } = { ...defaultOptions, ...options }\n\n useEffect(() => {\n if (!hasLogged && condition) {\n switch (type) {\n case 'info':\n console.info(message)\n break\n case 'error':\n console.error(message)\n break\n case 'warning':\n console.warn(message)\n break\n }\n setHasLogged(true)\n }\n }, [condition, type, hasLogged, message])\n}","import clsx from 'clsx'\nimport { ScrollableList } from '../layout/ScrollableList'\nimport type { ScrollableListProps } from '../layout/ScrollableList'\n\nexport type ChatConversationListProps = Omit\n\nexport const ChatConversationList = ({\n className,\n headerClassName,\n contentClassName,\n footerClassName,\n ...props\n}: ChatConversationListProps) => (\n \n)\n","import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'\nimport clsx from 'clsx'\n\ntype ScrollableListBaseProps = {\n header?: ReactNode,\n footer?: ReactNode,\n footerClassName?: string,\n headerClassName?: string,\n contentClassName?: string,\n}\n\nexport type ScrollableListProps = ScrollableListBaseProps & {\n as?: E,\n} & Omit, keyof ScrollableListBaseProps | 'as'>\n\nexport const ScrollableList = ({\n as,\n header,\n footer,\n footerClassName,\n headerClassName,\n contentClassName,\n className,\n children,\n ...props\n}: ScrollableListProps) => {\n const Component = (as ?? 'div') as ElementType\n\n return (\n \n {header && (\n
\n {header}\n
\n )}\n
\n {children}\n
\n {footer && (\n
\n {footer}\n
\n )}\n \n )\n}\n","import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check, CheckCheck } from 'lucide-react'\nimport type { AvatarWithStatusProps } from '../display-and-visualization/Avatar'\nimport { AvatarWithStatus } from '../display-and-visualization/Avatar'\nimport { PropsUtil } from '@/src/utils/propsUtil'\n\nexport type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'\n\nexport type ChatConversationRowProps = ButtonHTMLAttributes & {\n avatar: AvatarWithStatusProps,\n title: ReactNode,\n timestamp?: ReactNode,\n preview?: ReactNode,\n unreadCount?: number,\n isSelected?: boolean,\n sentIndicator?: ChatConversationSentIndicator,\n}\n\nexport const ChatConversationRow = ({\n avatar,\n title,\n timestamp,\n preview,\n unreadCount,\n isSelected = false,\n sentIndicator,\n ...props\n}: ChatConversationRowProps) => {\n const isUnread = (unreadCount ?? 0) > 0\n const SentIndicatorIcon = sentIndicator === 'sentAndReceived' ? CheckCheck : Check\n\n return (\n \n \n \n \n {title}\n {timestamp && (\n {timestamp}\n )}\n \n \n \n {sentIndicator && (\n \n )}\n \n {preview}\n \n \n {isUnread && (\n {unreadCount}\n )}\n \n \n \n )\n}\n","import type { ElementType, HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react'\nimport { useEffect, useMemo, useState } from 'react'\nimport clsx from 'clsx'\nimport { UserIcon } from 'lucide-react'\nimport { Visibility } from '../layout/Visibility'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | null\n\ntype ImageConfig = {\n avatarUrl: string,\n alt: string,\n}\n\nexport type AvatarImageProps = ImgHTMLAttributes\n\nconst DefaultAvatarImage: ElementType = 'img'\n\nexport type AvatarProps = Omit, 'children'> & {\n image?: ImageConfig,\n name?: string,\n size?: AvatarSize,\n ImageComponent?: ElementType,\n}\n\n/**\n * A component for showing a profile picture\n */\nexport const Avatar = ({\n image: initialImage,\n name,\n size = 'md',\n ImageComponent = DefaultAvatarImage,\n ...props\n}: AvatarProps) => {\n const [hasError, setHasError] = useState(false)\n const [hasLoaded, setHasLoaded] = useState(false)\n const [image, setImage] = useState(initialImage)\n const Image = ImageComponent\n\n const displayName = useMemo(() => {\n const maxLetters = size === 'sm' ? 1 : 2\n return (name ?? '')\n .split(' ')\n .filter((_, index) => index < maxLetters)\n .map(value => value[0])\n .join('')\n .toUpperCase()\n }, [name, size])\n\n const isShowingImage = !!image && (!hasError || !hasLoaded)\n\n useEffect(() => {\n if(initialImage?.avatarUrl !== image?.avatarUrl) {\n setHasError(false)\n setHasLoaded(false)\n }\n setImage(initialImage)\n }, [image?.avatarUrl, initialImage])\n\n return (\n \n \n setHasLoaded(true)}\n onError={() => setHasError(true)}\n data-error={hasError ? '' : undefined}\n data-loaded={hasLoaded ? '' : undefined}\n />\n \n {name ? displayName : ()}\n \n )\n}\n\nexport type AvatarGroupProps = HTMLAttributes & {\n 'avatars': Omit[],\n 'showTotalNumber'?: boolean,\n 'size'?: AvatarSize,\n 'data-name'?: string,\n 'ImageComponent'?: ElementType,\n}\n\n/**\n * A component for showing a group of Avatar's\n */\nexport const AvatarGroup = ({\n avatars,\n showTotalNumber = true,\n size = 'md',\n ImageComponent,\n ...props\n}: AvatarGroupProps) => {\n const maxShownProfiles = 5\n const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)\n const notDisplayedProfiles = avatars.length - maxShownProfiles\n const group = (\n
\n {displayedProfiles.map((avatar, index) => (\n \n ))}\n
\n )\n\n\n return (\n \n {group}\n {showTotalNumber && notDisplayedProfiles > 0 && (\n \n {`+ ${notDisplayedProfiles}`}\n \n )}\n \n )\n}\n\nexport type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'\n\nexport type AvatarWithStatusProps = AvatarProps & {\n status?: AvatarStatus,\n}\n\nexport const AvatarWithStatus = ({\n status = 'unknown',\n className,\n size = 'md',\n ...avatarProps\n}: AvatarWithStatusProps) => {\n return (\n \n \n \n \n )\n}\n\ntype AvatarWithLabelPosition = 'left' | 'right'\n\nexport type AvatarWithLabelProps = AvatarProps & {\n label: ReactNode,\n labelPosition?: AvatarWithLabelPosition,\n}\n\n/**\n * An avatar with a label displayed beside it\n */\nexport const AvatarWithLabel = ({\n label,\n labelPosition = 'left',\n className,\n size = 'md',\n ...avatarProps\n}: AvatarWithLabelProps) => {\n const avatar = \n const labelElement = (\n \n {label}\n \n )\n\n return (\n \n {labelPosition === 'left' ? labelElement : avatar}\n {labelPosition === 'left' ? avatar : labelElement}\n \n )\n}\n","export const equalSizeGroups = (array: T[], groupSize: number): T[][] => {\n if (groupSize <= 0) {\n console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n return [[...array]]\n }\n\n const groups = []\n for (let i = 0; i < array.length; i += groupSize) {\n groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n }\n return groups\n}\n\nexport type RangeOptions = {\n /** Whether the range can be defined empty via end < start without a warning */\n allowEmptyRange: boolean,\n stepSize: number,\n exclusiveStart: boolean,\n exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n allowEmptyRange: false,\n stepSize: 1,\n exclusiveStart: false,\n exclusiveEnd: true,\n}\n\n/**\n * @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n */\nexport const range = (endOrRange: number | [number, number], options?: Partial): number[] => {\n const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n let start = 0\n let end: number\n if (typeof endOrRange === 'number') {\n end = endOrRange\n } else {\n start = endOrRange[0]\n end = endOrRange[1]\n }\n if (!exclusiveEnd) {\n end -= 1\n }\n if (exclusiveStart) {\n start += 1\n }\n\n if (end - 1 < start) {\n if (!allowEmptyRange) {\n console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n }\n return []\n }\n return Array.from({ length: end - start }, (_, index) => index * stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = (list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n return list.reduce((item1, item2) => {\n return firstCloser(item1, item2) ? item1 : item2\n })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = (list: T[], item: T, neighbourDistance: number = 2) => {\n const index = list.indexOf(item)\n const totalItems = neighbourDistance * 2 + 1\n if (list.length < totalItems) {\n console.warn('List is to short')\n return list\n }\n\n if (index === -1) {\n console.error('item not found in list')\n return list.splice(0, totalItems)\n }\n\n let start = index - neighbourDistance\n if (start < 0) {\n start += list.length\n }\n const end = (index + neighbourDistance + 1) % list.length\n\n const result: T[] = []\n let ignoreOnce = list.length === totalItems\n for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n result.push(list[i]!)\n if (end === i && ignoreOnce) {\n ignoreOnce = false\n }\n }\n return result\n}\n\nexport const createLoopingListWithIndex = (list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n if (length < 0) {\n console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n } else if (length === 0) {\n length = list.length\n }\n\n const returnList: [number, T][] = []\n\n if (forwards) {\n for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n returnList.push([i, list[i]!])\n }\n } else {\n for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n returnList.push([i, list[i]!])\n }\n }\n\n return returnList\n}\n\nexport const createLoopingList = (list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\n/**\n * @param list The list to be changed\n * @param move The shifting applied to the array (can be negative)\n */\nconst moveItems = (list: T[], move: number = 0) => {\n const result = []\n let start = move\n if (start < 0) {\n start = list.length - move\n }\n start = start % list.length\n for (let i = 0; i < list.length; i++) {\n result[i] = list[(i + start) % list.length]\n }\n return result\n}\n\nfunction resolveSingleOrArray(value: T | T[]): T[] {\n if (Array.isArray(value)) {\n return value\n } else if (value) {\n return [value]\n }\n return []\n}\n\nexport const ArrayUtil = {\n unique: (list: T[]): T[] => {\n const seen = new Set()\n return list.filter((item) => {\n if (seen.has(item)) {\n return false\n }\n seen.add(item)\n return true\n })\n },\n difference: (list: T[], removeList: T[]): T[] => {\n const remove = new Set(removeList)\n return list.filter((item) => !remove.has(item))\n },\n moveItems,\n resolveSingleOrArray\n}\n","import type React from 'react'\nimport type { SingleOrArray } from './typing'\nimport { ArrayUtil } from './array'\nimport type { FormFieldInteractionStates } from '../components/form/FieldLayout'\nimport type { HTMLAttributes } from 'react'\n\n///\n/// Data Attributes\n///\n\nfunction bool(isActive: boolean): string | undefined {\n return isActive ? '' : undefined\n}\n\ntype InteractionStateDataAttributes = {\n 'data-disabled': string | undefined,\n 'data-invalid': string | undefined,\n 'data-readonly': string | undefined,\n 'data-required': string | undefined,\n}\nfunction interactionStatesData(interactionStates: Partial): Partial {\n return {\n 'data-disabled': bool(!!interactionStates.disabled),\n 'data-invalid': bool(!!interactionStates.invalid),\n 'data-readonly': bool(!!interactionStates.readOnly),\n 'data-required': bool(!!interactionStates.required),\n }\n}\n\nconst dataAttributes = {\n bool,\n interactionStates: interactionStatesData,\n}\n\n///\n/// DOM Event handling\n///\n\ntype MouseEventExtenderProps = {\n fromProps?: React.MouseEventHandler,\n extensions: SingleOrArray>,\n}\n\nfunction mouseEventExtender({\n fromProps,\n extensions\n}: MouseEventExtenderProps): React.MouseEventHandler {\n return (event) => {\n fromProps?.(event)\n ArrayUtil.resolveSingleOrArray(extensions)\n .forEach(element => element(event))\n }\n}\n\ntype KeyoardEventExtenderProps = {\n fromProps: React.KeyboardEventHandler,\n extensions: SingleOrArray>,\n}\n\nfunction keyboardEventExtender({\n fromProps,\n extensions,\n}: KeyoardEventExtenderProps): React.KeyboardEventHandler {\n return (event) => {\n fromProps?.(event)\n ArrayUtil.resolveSingleOrArray(extensions)\n .forEach(element => element(event))\n }\n}\n\nconst extender = {\n mouseEvent: mouseEventExtender,\n keyboardEvent: keyboardEventExtender\n}\n\n///\n/// ARIA & Accessibility\n///\n\nfunction click(onClick: () => void) {\n const keyboardEventHandler: React.KeyboardEventHandler = (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n event.stopPropagation()\n onClick()\n }\n }\n\n return {\n onClick: onClick,\n onKeyDown: keyboardEventHandler,\n }\n}\n\nfunction close(onClose?: () => void): React.KeyboardEventHandler {\n return (event) => {\n if (event.key === 'Escape') {\n event.preventDefault()\n event.stopPropagation()\n onClose?.()\n }\n }\n}\n\ntype NavigateType = {\n left?: (event: React.KeyboardEvent) => void,\n right?: (event: React.KeyboardEvent) => void,\n up?: (event: React.KeyboardEvent) => void,\n down?: (event: React.KeyboardEvent) => void,\n}\nfunction navigate({\n left,\n right,\n up,\n down,\n}: NavigateType): React.KeyboardEventHandler {\n return (event) => {\n switch (event.key) {\n case 'ArrowLeft':\n left(event)\n event.preventDefault()\n event.stopPropagation()\n break\n case 'ArrowRight':\n right(event)\n event.preventDefault()\n event.stopPropagation()\n break\n case 'ArrowUp':\n up(event)\n event.preventDefault()\n event.stopPropagation()\n break\n case 'ArrowDown':\n down(event)\n event.preventDefault()\n event.stopPropagation()\n break\n }\n }\n}\n\nexport function mergeProps>(\n slotProps: T,\n childProps: U\n): T & U {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: any = { ...childProps }\n\n for (const key in slotProps) {\n const slotValue = slotProps[key as keyof T]\n const childValue = childProps[key as keyof U]\n\n if (key === 'className') {\n result.className = [slotValue, childValue].filter(Boolean).join(' ')\n } else if (key === 'style') {\n result.style = { ...(slotValue as React.CSSProperties), ...(childValue as React.CSSProperties) }\n } else if (\n key.startsWith('on') &&\n typeof slotValue === 'function' &&\n typeof childValue === 'function'\n ) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = (...args: any[]) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n (slotValue as Function)(...args);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n (childValue as Function)(...args)\n }\n } else {\n result[key] = childValue ?? slotValue\n }\n }\n\n return result\n}\n\ntype InteractionStateARIAAttributes = Pick, 'aria-disabled' | 'aria-invalid' | 'aria-readonly' | 'aria-required'>\n\nfunction interactionStatesAria(\n interactionStates: Partial,\n props: Partial = {}\n): Partial {\n return {\n 'aria-disabled': props['aria-disabled'] ?? interactionStates.disabled,\n 'aria-invalid': props['aria-invalid'] ?? interactionStates.invalid,\n 'aria-readonly': props['aria-readonly'] ?? interactionStates.readOnly,\n 'aria-required': props['aria-required'] ?? interactionStates.required,\n }\n}\n\nconst aria = {\n close,\n click,\n navigate,\n interactionStates: interactionStatesAria,\n}\n\nexport const PropsUtil = {\n extender,\n dataAttributes,\n aria,\n mergeProps,\n}","import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type ChatDateDividerProps = HTMLAttributes\n\nexport const ChatDateDivider = ({\n children,\n ...props\n}: ChatDateDividerProps) => {\n return (\n
\n {children}\n
\n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { CheckCheck } from 'lucide-react'\n\nexport type ChatMessageDirection = 'incoming' | 'outgoing'\n\nexport type ChatMessageBubbleProps = HTMLAttributes & {\n direction?: ChatMessageDirection,\n timestamp?: ReactNode,\n readReceipt?: ReactNode,\n}\n\nexport const ChatMessageBubble = ({\n direction = 'incoming',\n timestamp,\n readReceipt,\n children,\n ...props\n}: ChatMessageBubbleProps) => {\n return (\n \n
\n {children}\n {timestamp && (\n {timestamp}\n )}\n
\n {readReceipt && (\n \n \n {readReceipt}\n \n )}\n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { ChatMessageDirection } from './ChatMessageBubble'\nimport type { ChipColor } from '../display-and-visualization/Chip'\n\nexport type ChatMessageCardProps = HTMLAttributes & {\n icon?: ReactNode,\n title: ReactNode,\n subtitle?: ReactNode,\n badge?: ReactNode,\n actions?: ReactNode,\n color?: ChipColor,\n direction?: ChatMessageDirection,\n}\n\nexport const ChatMessageCard = ({\n icon,\n title,\n subtitle,\n badge,\n actions,\n color = 'primary',\n direction = 'incoming',\n children,\n ...props\n}: ChatMessageCardProps) => {\n return (\n \n
\n {icon && (\n \n {icon}\n \n )}\n \n {title}\n {subtitle && (\n {subtitle}\n )}\n \n {badge && (\n {badge}\n )}\n
\n {children && (\n
{children}
\n )}\n {actions && (\n
{actions}
\n )}\n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { useCallback, useLayoutEffect, useRef } from 'react'\nimport clsx from 'clsx'\nimport { SendHorizontal } from 'lucide-react'\nimport { IconButton } from '../user-interaction/IconButton'\nimport { useControlledState } from '@/src/hooks/useControlledState'\nimport { useWindowResizeObserver } from '@/src/hooks/useWindowResizeObserver'\n\nconst MAX_INPUT_LINES = 7\n\nexport type ChatMessageComposerProps = Omit, 'onChange'> & {\n value?: string,\n initialValue?: string,\n onValueChange?: (value: string) => void,\n onSend: (value: string) => void,\n placeholder?: string,\n sendLabel?: string,\n disabled?: boolean,\n actions?: ReactNode,\n trailing?: ReactNode,\n}\n\nexport const ChatMessageComposer = ({\n value: controlledValue,\n initialValue,\n onValueChange,\n onSend,\n placeholder,\n sendLabel = 'Send',\n disabled = false,\n actions,\n ...props\n}: ChatMessageComposerProps) => {\n const textareaRef = useRef(null)\n const [value, setValue] = useControlledState({\n value: controlledValue,\n onValueChange,\n defaultValue: initialValue ?? '',\n })\n\n const syncTextareaHeight = useCallback(() => {\n const textarea = textareaRef.current\n if (!textarea) {\n return\n }\n textarea.style.height = '0px'\n const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight)\n const maxHeight = Number.isFinite(lineHeight) ? lineHeight * MAX_INPUT_LINES : textarea.scrollHeight\n textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`\n }, [])\n\n useLayoutEffect(() => {\n syncTextareaHeight()\n }, [value, syncTextareaHeight])\n\n useWindowResizeObserver(syncTextareaHeight)\n\n const send = () => {\n const trimmed = (value ?? '').trim()\n if (!trimmed) {\n return\n }\n onSend(trimmed)\n setValue('')\n }\n\n return (\n
\n {actions && (\n
\n {actions}\n
\n )}\n setValue(event.target.value)}\n onKeyDown={event => {\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault()\n send()\n }\n }}\n />\n \n \n \n
\n )\n}\n","import type React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { resolveSetState } from '../utils/resolveSetState'\nimport { useEventCallbackStabilizer } from './useEventCallbackStabelizer'\nimport { useLogOnce } from './useLogOnce'\n\nexport interface ControlledStateProps {\n /**\n * The controlled value of the state.\n *\n * This is determines whether the state:\n * 1. (value !== undefined) => controlled\n * 2. (value === undefined) => uncontrolled\n *\n * If you need to include undefined as a valid state, you can set isControlled to true to force the component to be controlled.\n */\n value?: T,\n /** The callback whenever a setter changes the value */\n onValueChange?: (value: T) => void,\n /** The default value to use if the component is uncontrolled */\n defaultValue?: T,\n /** Forces the component to be controlled even if value is undefined */\n isControlled?: boolean,\n}\n\nexport const useControlledState = ({\n value: controlledValue,\n onValueChange,\n defaultValue,\n isControlled: isEnforcingControlled\n}: ControlledStateProps) : [T, React.Dispatch>, boolean] => {\n const [internalValue, setInternalValue] = useState(() => defaultValue)\n const [isControlled] = useState(isEnforcingControlled || controlledValue !== undefined)\n\n const onValueChangeStable = useEventCallbackStabilizer(onValueChange)\n\n useLogOnce(\n 'useControlledState: Attempted to change from controlled to uncontrolled or vice versa.'\n + 'For a controlled state: isControlled === true OR value !== undefined'\n + 'For an uncontrolled state: isControlled === false OR value === undefined',\n isControlled !== (isEnforcingControlled || controlledValue !== undefined),\n { type: 'error' }\n )\n\n const lastValue = useRef(isControlled ? controlledValue : internalValue)\n\n useEffect(() => {\n lastValue.current = isControlled ? controlledValue : internalValue\n }, [isControlled, controlledValue, internalValue])\n\n const setState: React.Dispatch> = useCallback((action) => {\n const resolved = resolveSetState(action, lastValue.current)\n if(!isControlled) {\n lastValue.current = resolved\n setInternalValue(resolved)\n }\n onValueChangeStable(resolved)\n }, [onValueChangeStable, isControlled])\n\n const value = isControlled ? controlledValue : internalValue\n\n return [value, setState, isControlled]\n}","import type { SetStateAction } from 'react'\n\nexport function resolveSetState(action: SetStateAction, prev: T): T {\n return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}","import { useCallback, useEffect, useRef } from 'react'\n\nexport function useEventCallbackStabilizer<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends (...args: any[]) => any\n>(\n callback?: T\n): (...args: Parameters) => ReturnType {\n const callbackRef = useRef(callback)\n\n useEffect(() => {\n callbackRef.current = callback\n }, [callback])\n\n return useCallback((...args: Parameters) => {\n return callbackRef.current?.(...args)\n }, [])\n}","import type { HTMLAttributes } from 'react'\nimport { useEffect, useRef } from 'react'\nimport clsx from 'clsx'\n\nexport type ChatMessageListProps = HTMLAttributes & {\n autoScroll?: boolean,\n}\n\nexport const ChatMessageList = ({\n autoScroll = true,\n children,\n ...props\n}: ChatMessageListProps) => {\n const ref = useRef(null)\n\n useEffect(() => {\n if (autoScroll && ref.current) {\n ref.current.scrollTop = ref.current.scrollHeight\n }\n }, [autoScroll, children])\n\n return (\n
\n {children}\n
\n )\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport clsx from 'clsx'\nimport { PropsUtil } from '@/src/utils/propsUtil'\n\nexport type ChatQuickReplyChipProps = ButtonHTMLAttributes & {\n isActive?: boolean,\n}\n\nexport const ChatQuickReplyChip = ({\n isActive = false,\n children,\n ...props\n}: ChatQuickReplyChipProps) => {\n return (\n \n {children}\n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { CheckCheck } from 'lucide-react'\nimport type { ChipColor } from '../display-and-visualization/Chip'\n\nexport type ChatSystemLineProps = HTMLAttributes & {\n icon?: ReactNode,\n color?: ChipColor,\n}\n\nexport const ChatSystemLine = ({\n icon,\n color = 'primary',\n children,\n ...props\n}: ChatSystemLineProps) => {\n return (\n \n \n {icon ?? }\n \n {children}\n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { AvatarWithStatusProps } from '../display-and-visualization/Avatar'\nimport { AvatarWithStatus } from '../display-and-visualization/Avatar'\n\nexport type ChatThreadHeaderProps = HTMLAttributes & {\n avatar?: AvatarWithStatusProps,\n title: ReactNode,\n subtitle?: ReactNode,\n leftActions?: ReactNode,\n rightActions?: ReactNode,\n leadingActionsClassName?: string,\n trailingActionsClassName?: string,\n}\n\nexport const ChatThreadHeader = ({\n avatar,\n title,\n subtitle,\n leftActions,\n rightActions,\n leadingActionsClassName,\n trailingActionsClassName,\n ...props\n}: ChatThreadHeaderProps) => {\n return (\n
\n {leftActions && (\n
\n {leftActions}\n
\n )}\n {avatar && ()}\n \n {title}\n {subtitle && (\n {subtitle}\n )}\n \n {rightActions && (\n
\n {rightActions}\n
\n )}\n
\n )\n}\n","import type { AnchorHTMLAttributes, ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { forwardRef, useId } from 'react'\nimport clsx from 'clsx'\nimport { ChevronRight, ExternalLink } from 'lucide-react'\nimport { Visibility } from '../layout/Visibility'\nimport { PropsUtil } from '@/src/utils/propsUtil'\n\nexport type CardSize = 'sm' | 'md' | 'lg'\n\ntype CardHeaderContentProps = {\n title: ReactNode,\n titleId?: string,\n description?: ReactNode,\n descriptionId?: string,\n leading?: ReactNode,\n trailing?: ReactNode,\n}\n\nfunction CardHeaderContent({\n title,\n titleId,\n description,\n descriptionId,\n leading,\n trailing,\n}: CardHeaderContentProps) {\n return (\n <>\n {leading != null && (\n {leading}\n )}\n
\n {title}\n \n {description}\n \n
\n {trailing != null && (\n {trailing}\n )}\n \n )\n}\n\n//\n// Card\n//\n\nexport type CardProps = Omit, 'title'> & {\n title: ReactNode,\n description?: ReactNode,\n size?: CardSize,\n leading?: ReactNode,\n trailing?: ReactNode,\n}\n\nexport const Card = ({\n title,\n description,\n size = 'md',\n leading,\n trailing,\n children,\n className,\n ...props\n}: CardProps) => {\n return (\n \n
\n \n
\n {children}\n \n )\n}\n\n//\n// ActionCard\n//\n\nexport type ActionCardProps = Omit, 'title'> & {\n title: ReactNode,\n description?: ReactNode,\n size?: CardSize,\n leading?: ReactNode,\n trailing?: ReactNode,\n disabled?: boolean,\n}\n\nexport const ActionCard = forwardRef(function ActionCard({\n title,\n description,\n size = 'md',\n leading,\n trailing,\n disabled = false,\n children,\n className,\n onClick,\n onKeyDown,\n ...props\n}, ref) {\n return (\n {\n if (disabled) {\n return\n }\n onClick?.(event)\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (disabled || event.defaultPrevented) {\n return\n }\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n event.currentTarget.click()\n }\n }}\n data-size={size}\n data-disabled={PropsUtil.dataAttributes.bool(disabled)}\n role={onClick ? 'button' : undefined}\n tabIndex={onClick && !disabled ? 0 : undefined}\n >\n
\n \n
\n {children}\n \n )\n})\n\n\nexport type NavigationCardLinkProps = AnchorHTMLAttributes & {\n href: string,\n}\n\nconst DefaultNavigationCardLink: ElementType = 'a'\n\n//\n// NavigationCard\n//\n\nexport type NavigationCardProps = Omit, 'title'> & {\n title: ReactNode,\n description?: ReactNode,\n size?: CardSize,\n leading?: ReactNode,\n href: string,\n isExternal?: boolean,\n LinkComponent?: ElementType,\n}\n\nexport const NavigationCard = forwardRef(function NavigationCard({\n title,\n description,\n size = 'md',\n leading,\n href,\n isExternal = false,\n LinkComponent = DefaultNavigationCardLink,\n children,\n className,\n ...props\n}, ref) {\n const generatedId = useId()\n const descriptionId = `navigation-card-description-${generatedId}`\n const titleId = `navigation-card-title-${generatedId}`\n\n return (\n \n
\n \n \n {isExternal ? (\n \n ) : (\n \n )}\n \n
\n {children}\n \n )\n})\n","import { useEffect, useRef, useState } from 'react'\nimport type { Curve } from '@/src/utils/curve'\nimport { CurveBuilderUtil } from '@/src/utils/curve'\nimport { MathUtil } from '@/src/utils/math'\n\nexport type UseChangingNumberOptions = {\n start: number,\n end: number,\n animationTime?: number,\n curve?: Curve,\n resetRateAfterUpdate?: boolean,\n}\n\ntype AnimationState = {\n startTimestamp: number,\n}\n\nexport function useChangingNumber({\n start,\n end,\n animationTime = 1000,\n curve = CurveBuilderUtil.easeInEaseOut,\n resetRateAfterUpdate = false,\n}: UseChangingNumberOptions): number {\n const [displayValue, setDisplayValue] = useState(start)\n const animationStateRef = useRef({\n startTimestamp: performance.now(),\n })\n const startRef = useRef(start)\n const endRef = useRef(end)\n const curveRef = useRef(curve)\n const animationTimeRef = useRef(animationTime)\n const resetRateAfterUpdateRef = useRef(resetRateAfterUpdate)\n const previousStartRef = useRef(start)\n const previousEndRef = useRef(end)\n\n startRef.current = start\n endRef.current = end\n curveRef.current = curve\n animationTimeRef.current = animationTime\n resetRateAfterUpdateRef.current = resetRateAfterUpdate\n\n useEffect(() => {\n const startChanged = previousStartRef.current !== start\n const endChanged = previousEndRef.current !== end\n\n if (startChanged) {\n setDisplayValue(start)\n }\n\n if ((startChanged || endChanged) && !resetRateAfterUpdateRef.current) {\n animationStateRef.current.startTimestamp = performance.now()\n }\n\n previousStartRef.current = start\n previousEndRef.current = end\n }, [start, end])\n\n useEffect(() => {\n if (start === end) {\n setDisplayValue(end)\n return\n }\n\n let animationFrame = 0\n\n const tick = (timestamp: number) => {\n const elapsed = timestamp - animationStateRef.current.startTimestamp\n const progress = MathUtil.clamp01(elapsed / animationTimeRef.current)\n const value = startRef.current + curveRef.current(progress) * (endRef.current - startRef.current)\n\n setDisplayValue(value)\n\n if (progress < 1) {\n animationFrame = requestAnimationFrame(tick)\n } else {\n setDisplayValue(endRef.current)\n }\n }\n\n animationFrame = requestAnimationFrame(tick)\n\n return () => {\n cancelAnimationFrame(animationFrame)\n }\n }, [animationTime, curve, end, resetRateAfterUpdate, start])\n\n return displayValue\n}\n","import { MathUtil } from './math'\n\nexport type Curve = (value: number) => number\n\nexport type ExponentialCurveBuilderPropsResolved = {\n basis: number,\n multiplier: number,\n}\n\nexport type ExponentialCurveBuilderProps = Partial\n\nexport type ExponentialRateCurveBuilder = (props: ExponentialCurveBuilderProps) => Curve\n\nexport type CubicBezierCurveBuilder = (x1: number, y1: number, x2: number, y2: number) => Curve\n\nconst ExponentialRateCurveBuilder: ExponentialRateCurveBuilder = ({\n basis = 2,\n multiplier = 1\n}: ExponentialCurveBuilderProps) => {\n if(Number.isNaN(multiplier) || !Number.isFinite(multiplier) || multiplier <= 0) {\n throw new Error(`Invalid muliplier: ${multiplier}`)\n }\n\n return (value) => {\n if(Number.isNaN(value)) {\n return 0\n }\n return multiplier * (basis ** value)\n }\n}\n\nconst cubicBezierGeneric = (\n x1: number,\n y1: number,\n x2: number,\n y2: number\n): { x: Curve, y: Curve } => {\n const cx = 3 * x1\n const bx = 3 * (x2 - x1) - cx\n const ax = 1 - cx - bx\n\n const cy = 3 * y1\n const by = 3 * (y2 - y1) - cy\n const ay = 1 - cy - by\n\n const x = (t: number) => ((ax * t + bx) * t + cx) * t\n const y = (t: number) => ((ay * t + by) * t + cy) * t\n\n return { x, y }\n}\n\nconst CubicBezierCurveBuilder: CubicBezierCurveBuilder = (x1, y1, x2, y2) => {\n const { y } = cubicBezierGeneric(x1, y1, x2, y2)\n return (t) => y(MathUtil.clamp(t, 0, 1))\n}\n\nconst easeInEaseOut: Curve = CubicBezierCurveBuilder(0.65, 0, 0.35, 1)\n\nexport const CurveBuilderUtil = {\n ExponentialRateCurveBuilder,\n CubicBezierCurveBuilder,\n cubicBezierGeneric,\n easeInEaseOut,\n}","import type { ReactNode } from 'react'\nimport { useChangingNumber } from '@/src/hooks/useChangingNumber'\nimport type { Curve } from '@/src/utils/curve'\nimport { CurveBuilderUtil } from '@/src/utils/curve'\n\nexport type ChangingNumberProps = {\n start: number,\n end: number,\n animationTime?: number,\n curve?: Curve,\n resetRateAfterUpdate?: boolean,\n formatValue?: (value: number) => ReactNode,\n}\n\n/**\n * Displays a number animating from start to end along a curve over animationTime\n */\nexport function ChangingNumber({\n start,\n end,\n animationTime = 1000,\n curve = CurveBuilderUtil.easeInEaseOut,\n resetRateAfterUpdate = false,\n formatValue = Math.round,\n}: ChangingNumberProps): ReactNode {\n const value = useChangingNumber({\n start,\n end,\n animationTime,\n curve,\n resetRateAfterUpdate,\n })\n\n return formatValue(value)\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { forwardRef } from 'react'\n\n/**\n * The different sizes for a button\n */\ntype ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null\n\ntype ButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null\n\nconst buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const\n\n/**\n * The allowed colors for the Button\n */\nexport type ButtonColor = typeof buttonColorsList[number] | null\n\nexport const ButtonUtil = {\n colors: buttonColorsList,\n}\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = ButtonHTMLAttributes & {\n /**\n * @default 'medium'\n */\n size?: ButtonSize,\n color?: ButtonColor,\n /**\n * @default 'solid'\n */\n coloringStyle?: ButtonColoringStyle,\n allowClickEventPropagation?: boolean,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nexport const Button = forwardRef(function SolidButton({\n children,\n size = 'md',\n color = 'primary',\n coloringStyle = 'solid',\n disabled,\n allowClickEventPropagation = false,\n ...props\n}, ref) {\n return (\n {\n if(!allowClickEventPropagation) {\n event.stopPropagation()\n }\n props.onClick?.(event)\n }}\n\n data-name={props['data-name'] ?? 'button'}\n data-disabled={disabled ? '': undefined}\n data-size={size ?? undefined}\n data-color={color ?? undefined}\n data-coloringstyle={coloringStyle ?? undefined}\n >\n {children}\n \n )\n})\n","import type { HTMLAttributes } from 'react'\nimport { ButtonUtil } from '@/src/components/user-interaction/Button'\n\ntype ChipSize = 'xs' | 'sm' | 'md' | 'lg' | null\n\ntype ChipColoringStyle = 'solid' | 'tonal' | 'outline' | 'tonal-outline' | null\n\nconst chipColors = ButtonUtil.colors\nexport type ChipColor = typeof chipColors[number]\n\nexport const ChipUtil = {\n colors: chipColors,\n}\n\nexport type ChipProps = HTMLAttributes & {\n color?: ChipColor,\n coloringStyle?: ChipColoringStyle,\n size?: ChipSize,\n}\n\n/**\n * A component for displaying a single chip\n */\nexport const Chip = ({\n children,\n color = 'neutral',\n coloringStyle = 'solid',\n size = 'md',\n ...props\n}: ChipProps) => {\n return (\n \n {children}\n \n )\n}\n\nexport type ChipListProps = HTMLAttributes & {\n list: ChipProps[],\n}\n\n/**\n * A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n ...props\n}: ChipListProps) => {\n return (\n
    \n {list.map((value, index) => (\n
  • \n \n {value.children}\n \n
    • \n ))}\n
\n )\n}\n","import { ChevronDown } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\n\nexport type ExpansionIconProps = HTMLAttributes & {\n isExpanded: boolean,\n disabled?: boolean,\n}\n\nexport const ExpansionIcon = ({\n children,\n isExpanded,\n disabled = false,\n ...props\n}: ExpansionIconProps) => {\n\n return (\n \n {children ? (\n children\n ) : (\n \n )}\n \n )\n}","export type ProgressIndicatorProps = {\n /*\n The amount of progress that has been made\n Value base 0 to 1\n */\n progress: number,\n strokeWidth?: number,\n size?: keyof typeof sizeMapping,\n direction?: 'clockwise' | 'counterclockwise',\n /*\n Rotation of the starting point of the indicator\n default start at 3 o'clock\n Given in degree\n */\n rotation?: number,\n}\n\nconst sizeMapping = { small: 16, medium: 24, big: 48 }\n\n/**\n * A progress indicator\n *\n * Start rotation is 3 o'clock and fills counterclockwise\n *\n * Progress is given from 0 to 1\n */\nexport const ProgressIndicator = ({\n progress,\n strokeWidth = 5,\n size = 'medium',\n direction = 'counterclockwise',\n rotation = 0\n}: ProgressIndicatorProps) => {\n const currentSize = sizeMapping[size]\n const center = currentSize / 2\n const radius = center - strokeWidth / 2\n const arcLength = 2 * Math.PI * radius\n const arcOffset = arcLength * progress\n if (direction === 'clockwise') {\n rotation += 360 * progress\n }\n return (\n \n \n \n \n )\n}\n","import type { MouseEventHandler, PointerEventHandler, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { PropsUtil } from '@/src/utils/propsUtil'\n\nexport type ProcessModelActivityNodeKind = 'activity' | 'terminal'\n\nexport type ProcessModelActivityNodeProps = {\n nodeId: string,\n label: string,\n count: string,\n customIcon: ReactNode,\n kind?: ProcessModelActivityNodeKind,\n bordered?: boolean,\n active?: boolean,\n visited?: boolean,\n className?: string,\n onClick?: MouseEventHandler,\n onPointerEnter?: PointerEventHandler,\n onPointerLeave?: PointerEventHandler,\n}\n\nexport const ProcessModelActivityNode = ({\n nodeId,\n label,\n count,\n customIcon,\n kind = 'activity',\n bordered = true,\n active = false,\n visited = false,\n className,\n onClick,\n onPointerEnter,\n onPointerLeave,\n}: ProcessModelActivityNodeProps) => {\n const interactive = !!onClick\n const rootName = kind === 'terminal' ? 'process-model-terminal-node' : 'process-model-activity-node'\n return (\n {\n onClick?.(event)\n }}\n onPointerEnter={(event) => {\n onPointerEnter?.(event)\n }}\n onPointerLeave={(event) => {\n onPointerLeave?.(event)\n }}\n onKeyDown={(event) => {\n if (!interactive) {\n return\n }\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n event.currentTarget.click()\n }\n }}\n >\n
{customIcon}
\n
\n
{label}
\n
{count}
\n
\n \n )\n}\n","import { useId, useMemo, type ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check, Plus } from 'lucide-react'\nimport { ProcessModelActivityNode } from './ProcessModelActivityNode'\nimport { ProcessModelTerminalNode } from './ProcessModelTerminalNode'\nimport { ProcessModelLayoutUtilities } from './layoutProcessModel'\nimport type {\n ProcessModelGraph,\n ProcessModelGraphActivityNode,\n ProcessModelGraphNode\n} from './types'\n\nexport type ProcessModelCanvasProps = {\n graph: ProcessModelGraph,\n className?: string,\n showNodeBorder?: boolean,\n activeNodeId?: string,\n visitedNodeIds?: ReadonlySet,\n renderActivityIcon?: (node: ProcessModelGraphActivityNode) => ReactNode,\n edgePathIdPrefix?: string,\n edgeReplayHighlight?: { from: string, to: string } | null,\n replayParticle?: { cx: number, cy: number, opacity: number } | null,\n}\n\nfunction defaultRenderActivityIcon(node: ProcessModelGraphActivityNode): ReactNode {\n if (node.activityIcon === 'check') {\n return \n }\n return \n}\n\nfunction isVisited(\n nodeId: string,\n activeNodeId: string | undefined,\n visited: ReadonlySet | undefined\n): boolean {\n if (!visited?.size) {\n return false\n }\n if (nodeId === activeNodeId) {\n return false\n }\n return visited.has(nodeId)\n}\n\nexport const ProcessModelCanvas = ({\n graph,\n className,\n showNodeBorder = true,\n activeNodeId,\n visitedNodeIds,\n renderActivityIcon = defaultRenderActivityIcon,\n edgePathIdPrefix,\n edgeReplayHighlight = null,\n replayParticle = null,\n}: ProcessModelCanvasProps) => {\n const uid = useId().replace(/:/g, '')\n const { positions, canvasW, canvasH } = useMemo(() => ProcessModelLayoutUtilities.computeLayout(graph), [graph])\n const maxW = useMemo(() => ProcessModelLayoutUtilities.maxEdgeWeight(graph.edges), [graph.edges])\n\n const edgeElements = useMemo(() => {\n return graph.edges.map((edge) => {\n const pts = ProcessModelLayoutUtilities.getEdgePoints(positions, edge.from, edge.to, graph.edges)\n if (!pts) {\n return null\n }\n const { opacity, sw, markerTier } = ProcessModelLayoutUtilities.weightToStyle(edge.weight, maxW)\n const lp = pts.labelPt\n const pillW = edge.label.length * 6.8 + 12\n const pillH = 17\n const labelStrong = opacity > 0.7\n const isReplayEdge =\n edgeReplayHighlight != null\n && edge.from === edgeReplayHighlight.from\n && edge.to === edgeReplayHighlight.to\n const pathId = ProcessModelLayoutUtilities.getProcessModelEdgePathDomId(edgePathIdPrefix, edge.from, edge.to)\n const strokeOpacity = isReplayEdge ? 1 : opacity\n const strokeWidth = isReplayEdge ? 3 : sw\n return (\n \n \n {edge.label ? (\n <>\n \n \n {edge.label}\n \n \n ) : null}\n \n )\n })\n }, [graph, positions, maxW, uid, edgePathIdPrefix, edgeReplayHighlight])\n\n const nodeElements = useMemo(() => {\n const visited = visitedNodeIds ?? new Set()\n return graph.nodes.map((node: ProcessModelGraphNode) => {\n const p = positions[node.id]\n if (!p) {\n return null\n }\n const active = node.id === activeNodeId\n const wasVisited = isVisited(node.id, activeNodeId, visited)\n let inner: ReactNode\n if (node.type === 'start' || node.type === 'end') {\n inner = (\n \n )\n } else {\n const activityNode = node as ProcessModelGraphActivityNode\n inner = (\n \n )\n }\n return (\n \n
{inner}
\n \n )\n })\n }, [graph.nodes, positions, activeNodeId, visitedNodeIds, renderActivityIcon, showNodeBorder])\n\n return (\n \n \n \n {(['strong', 'medium', 'faint'] as const).map((tier) => {\n const op = tier === 'strong' ? 1 : tier === 'medium' ? 0.65 : 0.32\n return (\n \n \n \n )\n })}\n \n \n \n \n {edgeElements}\n {nodeElements}\n {replayParticle ? (\n \n ) : null}\n \n \n )\n}\n","import type {\n ProcessModelEdge,\n ProcessModelEdgePointResult,\n ProcessModelEdgeStrokeStyle,\n ProcessModelGraph,\n ProcessModelGraphNode,\n ProcessModelLayoutResult,\n ProcessModelNodePosition\n} from './types'\nimport type { ProcessModelActivityNodeKind } from './ProcessModelActivityNode'\n\nconst NODE_H = 52\nconst COL_GAP = 72\nconst ROW_GAP = 72\n\nconst ACTIVITY_NODE_MIN_WIDTH = 120\n\nconst ACTIVITY_PAD_X = 24\nconst ACTIVITY_ICON_W = 28\nconst ACTIVITY_GAP = 8\nconst ACTIVITY_LABEL_PX_PER_CHAR = 6.9\nconst ACTIVITY_COUNT_PX_PER_CHAR = 6.15\nconst TERMINAL_HEX_W = 34\nconst TERMINAL_GAP = 12\nconst TERMINAL_LABEL_PX_PER_CHAR = 7.5\nconst TERMINAL_COUNT_PX_PER_CHAR = 6.2\nconst ACTIVITY_WIDTH_SAFETY_PX = 14\n\nconst EDGE_LABEL_ALONG_FR = 0.22\nconst EDGE_LABEL_BEZIER_T = 0.2\nconst EDGE_STRAIGHT_PX = 14\n\ntype CubicPt = { x: number, y: number }\n\nfunction stringVisualUnits(s: string): number {\n return [...s].length\n}\n\nfunction terminalCountDisplayLine(rawCount: string): string {\n return `${rawCount} traces`\n}\n\nfunction estimateProcessModelActivityChromeWidth(\n kind: ProcessModelActivityNodeKind,\n label: string,\n countLine: string\n): number {\n const labelPx = kind === 'terminal' ? TERMINAL_LABEL_PX_PER_CHAR : ACTIVITY_LABEL_PX_PER_CHAR\n const countPx = kind === 'terminal' ? TERMINAL_COUNT_PX_PER_CHAR : ACTIVITY_COUNT_PX_PER_CHAR\n const labelW = stringVisualUnits(label) * labelPx\n const countW = stringVisualUnits(countLine) * countPx\n const textW = Math.max(labelW, countW)\n const iconW = kind === 'terminal' ? TERMINAL_HEX_W : ACTIVITY_ICON_W\n const gap = kind === 'terminal' ? TERMINAL_GAP : ACTIVITY_GAP\n const chrome = ACTIVITY_PAD_X + iconW + gap\n const w = chrome + textW + ACTIVITY_WIDTH_SAFETY_PX\n return Math.max(ACTIVITY_NODE_MIN_WIDTH, Math.ceil(w))\n}\n\nfunction estimateProcessModelActivityNodeWidth(label: string, count: string): number {\n return estimateProcessModelActivityChromeWidth('activity', label, count)\n}\n\nfunction cubicBezierPoint(\n x0: number,\n y0: number,\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n x3: number,\n y3: number,\n t: number\n): { x: number, y: number } {\n const u = 1 - t\n const u2 = u * u\n const u3 = u2 * u\n const t2 = t * t\n const t3 = t2 * t\n return {\n x: u3 * x0 + 3 * u2 * t * x1 + 3 * u * t2 * x2 + t3 * x3,\n y: u3 * y0 + 3 * u2 * t * y1 + 3 * u * t2 * y2 + t3 * y3,\n }\n}\n\nfunction lerpPt(a: CubicPt, b: CubicPt, t: number): CubicPt {\n return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }\n}\n\nfunction splitCubicAt(\n p0: CubicPt,\n p1: CubicPt,\n p2: CubicPt,\n p3: CubicPt,\n t: number\n): { left: [CubicPt, CubicPt, CubicPt, CubicPt], right: [CubicPt, CubicPt, CubicPt, CubicPt] } {\n const q0 = lerpPt(p0, p1, t)\n const q1 = lerpPt(p1, p2, t)\n const q2 = lerpPt(p2, p3, t)\n const r0 = lerpPt(q0, q1, t)\n const r1 = lerpPt(q1, q2, t)\n const s = lerpPt(r0, r1, t)\n return {\n left: [p0, q0, r0, s],\n right: [s, r1, q2, p3],\n }\n}\n\nfunction linePathDWithStraightCaps(sx: number, sy: number, ex: number, ey: number, run: number): string {\n const dx = ex - sx\n const dy = ey - sy\n const len = Math.hypot(dx, dy)\n if (len < 1e-9) {\n return `M${sx},${sy}`\n }\n const ux = dx / len\n const uy = dy / len\n const inset = Math.min(run, Math.max(0, (len - 2) / 2))\n if (inset < 0.5) {\n return `M${sx},${sy} L${ex},${ey}`\n }\n return `M${sx + ux * inset},${sy + uy * inset} L${ex - ux * inset},${ey - uy * inset}`\n}\n\nfunction cubicPathDWithEndStraightCap(\n x0: number,\n y0: number,\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n x3: number,\n y3: number,\n runPx: number\n): string {\n const hull =\n Math.hypot(x1 - x0, y1 - y0) + Math.hypot(x2 - x1, y2 - y1) + Math.hypot(x3 - x2, y3 - y2)\n if (hull < runPx * 2 + 6) {\n return `M${x0},${y0} C${x1},${y1} ${x2},${y2} ${x3},${y3}`\n }\n let lo = 0\n let hi = 1\n for (let i = 0; i < 28; i++) {\n const mid = (lo + hi) / 2\n const b = cubicBezierPoint(x0, y0, x1, y1, x2, y2, x3, y3, mid)\n const d = Math.hypot(x3 - b.x, y3 - b.y)\n if (d > runPx) {\n lo = mid\n } else {\n hi = mid\n }\n }\n const t = Math.min(0.9999, Math.max(0.0001, hi))\n const p0: CubicPt = { x: x0, y: y0 }\n const p1: CubicPt = { x: x1, y: y1 }\n const p2: CubicPt = { x: x2, y: y2 }\n const p3: CubicPt = { x: x3, y: y3 }\n const [l0, l1, l2, l3] = splitCubicAt(p0, p1, p2, p3, t).left\n const gap = Math.hypot(x3 - l3.x, y3 - l3.y)\n if (gap < 0.75) {\n return `M${l0.x},${l0.y} C${l1.x},${l1.y} ${l2.x},${l2.y} ${x3},${y3}`\n }\n return `M${l0.x},${l0.y} C${l1.x},${l1.y} ${l2.x},${l2.y} ${l3.x},${l3.y} L${x3},${y3}`\n}\n\nfunction nodeWidth(n: ProcessModelGraphNode): number {\n if (n.type === 'start' || n.type === 'end') {\n return estimateProcessModelActivityChromeWidth(\n 'terminal',\n n.label,\n terminalCountDisplayLine(n.count)\n )\n }\n return estimateProcessModelActivityNodeWidth(n.label, n.count)\n}\n\nfunction computeLayout(graph: ProcessModelGraph): ProcessModelLayoutResult {\n const nodes = graph.nodes\n const layers: Record = {}\n nodes.forEach((n) => {\n const l = n.layer ?? 0\n if (!layers[l]) {\n layers[l] = []\n }\n layers[l].push(n)\n })\n const layerKeys = Object.keys(layers).map(Number).sort((a, b) => a - b)\n layerKeys.forEach((l) => {\n layers[l].sort((a, b) => (a.col ?? 0) - (b.col ?? 0))\n })\n\n const layerTotalWidths = layerKeys.map((l) => {\n const ns = layers[l]\n return ns.reduce((s, n) => s + nodeWidth(n), 0) + Math.max(0, ns.length - 1) * COL_GAP\n })\n const canvasW = Math.max(...layerTotalWidths) + 120\n\n const positions: Record = {}\n let curY = 40\n layerKeys.forEach((l, li) => {\n const ns = layers[l]\n const totalW = layerTotalWidths[li]\n let curX = (canvasW - totalW) / 2\n ns.forEach((n) => {\n const w = nodeWidth(n)\n positions[n.id] = { x: curX, y: curY, w, h: NODE_H, layer: l }\n curX += w + COL_GAP\n })\n curY += NODE_H + ROW_GAP\n })\n const canvasH = curY - ROW_GAP + 40\n\n return { positions, canvasW, canvasH }\n}\n\nfunction getEdgePoints(\n pos: Record,\n fromId: string,\n toId: string,\n allEdges: ProcessModelEdge[]\n): ProcessModelEdgePointResult | null {\n const f = pos[fromId]\n const t = pos[toId]\n if (!f || !t) {\n return null\n }\n\n const fc = { x: f.x + f.w / 2, y: f.y + f.h / 2 }\n const tc = { x: t.x + t.w / 2, y: t.y + t.h / 2 }\n\n const dx = tc.x - fc.x\n\n const sameLayer = f.layer === t.layer\n const isBackEdge = t.layer < f.layer\n const layerSpan = Math.abs(t.layer - f.layer)\n const isSkipEdge = !isBackEdge && layerSpan > 1\n const sameColumn = Math.abs(dx) < 8\n const hasPair = allEdges.some((e) => e.from === toId && e.to === fromId)\n\n let pathD: string\n let labelPt: { x: number, y: number }\n\n function leftArcRoute(): ProcessModelEdgePointResult {\n const minL = Math.min(f.layer, t.layer)\n const maxL = Math.max(f.layer, t.layer)\n let leftmostX = Math.min(f.x, t.x)\n Object.entries(pos).forEach(([nid, p]) => {\n if (p.layer >= minL && p.layer <= maxL && nid !== fromId && nid !== toId) {\n leftmostX = Math.min(leftmostX, p.x)\n }\n })\n const margin = 56 + layerSpan * 8\n const leftX = leftmostX - margin\n const sx = f.x\n const sy = fc.y\n const ex = t.x\n const ey = tc.y\n const labelPt = cubicBezierPoint(sx, sy, leftX, sy, leftX, ey, ex, ey, EDGE_LABEL_BEZIER_T)\n const run = EDGE_STRAIGHT_PX\n const hSign = Math.sign(leftX - sx) || -1\n const hInset = Math.min(run, Math.max(0, Math.abs(leftX - sx) * 0.35))\n const sx2 = sx + hSign * hInset\n const inner = cubicPathDWithEndStraightCap(sx2, sy, leftX, sy, leftX, ey, ex, ey, run)\n const cIdx = inner.indexOf(' C')\n const pathD =\n hInset > 0.25 && cIdx >= 0\n ? `M${sx},${sy} L${sx2},${sy}${inner.slice(cIdx)}`\n : inner\n return {\n pathD,\n labelPt,\n }\n }\n\n if (hasPair) {\n const idxForward = allEdges.findIndex((e) => e.from === fromId && e.to === toId)\n const idxReverse = allEdges.findIndex((e) => e.from === toId && e.to === fromId)\n const isForward = idxForward < idxReverse\n const offsetY = isForward ? -8 : 8\n const sx = dx > 0 ? f.x + f.w : f.x\n const ex = dx > 0 ? t.x : t.x + t.w\n const sy = fc.y + offsetY\n const ey = tc.y + offsetY\n pathD = linePathDWithStraightCaps(sx, sy, ex, ey, EDGE_STRAIGHT_PX)\n labelPt = { x: sx + (ex - sx) * EDGE_LABEL_ALONG_FR, y: sy - 11 }\n } else if (isBackEdge || isSkipEdge) {\n const arc = leftArcRoute()\n pathD = arc.pathD\n labelPt = arc.labelPt\n } else if (sameLayer) {\n const sx = dx > 0 ? f.x + f.w : f.x\n const ex = dx > 0 ? t.x : t.x + t.w\n const sy = fc.y\n const ey = tc.y\n pathD = linePathDWithStraightCaps(sx, sy, ex, ey, EDGE_STRAIGHT_PX)\n labelPt = { x: sx + (ex - sx) * EDGE_LABEL_ALONG_FR, y: sy - 11 }\n } else if (sameColumn) {\n const sx = fc.x\n const sy = f.y + f.h\n const ex = tc.x\n const ey = t.y\n pathD = linePathDWithStraightCaps(sx, sy, ex, ey, EDGE_STRAIGHT_PX)\n const alongY = sy + (ey - sy) * EDGE_LABEL_ALONG_FR\n labelPt = { x: sx + 16, y: alongY }\n } else {\n const sx = fc.x\n const sy = f.y + f.h\n const ex = tc.x\n const ey = t.y\n const span = Math.abs(ey - sy)\n const cp1y = sy + span * 0.45\n const cp2y = ey - span * 0.45\n const run = EDGE_STRAIGHT_PX\n const vSign = Math.sign(cp1y - sy) || 1\n const vInset = Math.min(run, Math.max(0, Math.abs(cp1y - sy) * 0.35))\n const sy2 = sy + vSign * vInset\n const inner = cubicPathDWithEndStraightCap(sx, sy2, sx, cp1y, ex, cp2y, ex, ey, run)\n const cIdx = inner.indexOf(' C')\n pathD =\n vInset > 0.25 && cIdx >= 0\n ? `M${sx},${sy} L${sx},${sy2}${inner.slice(cIdx)}`\n : inner\n labelPt = cubicBezierPoint(sx, sy, sx, cp1y, ex, cp2y, ex, ey, EDGE_LABEL_BEZIER_T)\n const offX = dx > 0 ? 10 : -10\n labelPt = { x: labelPt.x + offX, y: labelPt.y - 5 }\n }\n\n return { pathD, labelPt }\n}\n\nfunction weightToStyle(weight: number, maxWeight: number): ProcessModelEdgeStrokeStyle {\n const ratio = maxWeight > 0 ? weight / maxWeight : 0\n if (ratio > 0.6) {\n return { opacity: 1.0, sw: 2.5, markerTier: 'strong' }\n }\n if (ratio > 0.2) {\n return { opacity: 0.6, sw: 1.8, markerTier: 'medium' }\n }\n return { opacity: 0.28, sw: 1.4, markerTier: 'faint' }\n}\n\nfunction maxEdgeWeight(edges: ProcessModelEdge[]): number {\n if (!edges.length) {\n return 1\n }\n return Math.max(...edges.map((e) => e.weight))\n}\n\nfunction getProcessModelEdgePathDomId(\n pathIdPrefix: string | undefined,\n from: string,\n to: string\n): string {\n if (pathIdPrefix != null && pathIdPrefix !== '') {\n return `ep-${pathIdPrefix}-${from}-${to}`\n }\n return `ep-${from}-${to}`\n}\n\nexport const ProcessModelLayoutUtilities = {\n ACTIVITY_NODE_MIN_WIDTH,\n NODE_H,\n terminalCountDisplayLine,\n estimateProcessModelActivityChromeWidth,\n estimateProcessModelActivityNodeWidth,\n computeLayout,\n getEdgePoints,\n weightToStyle,\n maxEdgeWeight,\n getProcessModelEdgePathDomId,\n}\n","import type { ReactNode } from 'react'\nimport { ProcessModelActivityNode } from './ProcessModelActivityNode'\nimport { ProcessModelLayoutUtilities } from './layoutProcessModel'\nimport type { ProcessModelTerminalKind } from './types'\n\nexport type ProcessModelTerminalNodeProps = {\n nodeId: string,\n variant: ProcessModelTerminalKind,\n label: string,\n count: string,\n bordered?: boolean,\n active?: boolean,\n visited?: boolean,\n className?: string,\n}\n\nfunction TerminalHexIcon({ variant }: { variant: ProcessModelTerminalKind }): ReactNode {\n const isStart = variant === 'start'\n return (\n \n \n \n {isStart ? (\n \n ) : (\n \n )}\n \n )\n}\n\nexport const ProcessModelTerminalNode = ({\n nodeId,\n variant,\n label,\n count,\n bordered = true,\n active = false,\n visited = false,\n className,\n}: ProcessModelTerminalNodeProps) => {\n return (\n }\n bordered={bordered}\n active={active}\n visited={visited}\n className={className}\n />\n )\n}\n","import {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState\n} from 'react'\nimport clsx from 'clsx'\nimport { useHightideTranslation } from '@/src/i18n/useHightideTranslation'\nimport { Button } from '@/src/components/user-interaction/Button'\nimport { Select } from '@/src/components/user-interaction/Select/Select'\nimport { SelectOption } from '@/src/components/user-interaction/Select/SelectOption'\nimport { ProcessModelCanvas } from './ProcessModelCanvas'\nimport { ProcessModelLayoutUtilities } from './layoutProcessModel'\nimport type { ProcessModelGraphWithTraces, ProcessModelTrace } from './types'\nimport { Pause, Play, RotateCcw } from 'lucide-react'\n\nexport type ProcessModelTraceReplayProps = {\n graph: ProcessModelGraphWithTraces,\n className?: string,\n}\n\ntype LogLine = {\n id: string,\n time: string,\n text: string,\n}\n\nconst SPEED_OPTIONS = [\n { value: 1, label: '1×' },\n { value: 1.5, label: '1.5×' },\n { value: 2, label: '2×' },\n { value: 3, label: '3×' },\n] as const\n\nfunction sleep(ms: number, signal: AbortSignal): Promise {\n return new Promise((resolve) => {\n if (signal.aborted) {\n resolve()\n return\n }\n const id = setTimeout(() => {\n resolve()\n }, ms)\n signal.addEventListener('abort', () => {\n clearTimeout(id)\n resolve()\n }, { once: true })\n })\n}\n\nfunction runParticleAlongPath(\n path: SVGPathElement,\n durationMs: number,\n signal: AbortSignal,\n onFrame: (cx: number, cy: number, opacity: number) => void\n): Promise {\n return new Promise((resolve) => {\n if (signal.aborted) {\n resolve()\n return\n }\n const len = path.getTotalLength()\n if (!Number.isFinite(len) || len <= 0) {\n onFrame(0, 0, 0)\n resolve()\n return\n }\n const start = performance.now()\n const tick = (now: number) => {\n if (signal.aborted) {\n onFrame(0, 0, 0)\n resolve()\n return\n }\n const u = Math.min(1, (now - start) / durationMs)\n const pt = path.getPointAtLength(u * len)\n const opacity = u < 0.06 ? u / 0.06 : u > 0.88 ? (1 - u) / 0.12 : 1\n onFrame(pt.x, pt.y, opacity)\n if (u < 1) {\n requestAnimationFrame(tick)\n } else {\n onFrame(0, 0, 0)\n resolve()\n }\n }\n requestAnimationFrame(tick)\n })\n}\n\nexport const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceReplayProps) => {\n const translation = useHightideTranslation()\n const pathPrefix = useId().replace(/:/g, '')\n const hostRef = useRef(null)\n const traceIndexRef = useRef(0)\n const playbackRef = useRef(null)\n const playbackLoopLockRef = useRef(false)\n\n const [speedMult, setSpeedMult] = useState(2)\n const [isPlaying, setIsPlaying] = useState(false)\n const [activeNodeId, setActiveNodeId] = useState()\n const [visitedNodeIds, setVisitedNodeIds] = useState>(new Set())\n const [edgeReplayHighlight, setEdgeReplayHighlight] = useState<{ from: string, to: string } | null>(null)\n const [replayParticle, setReplayParticle] = useState<{ cx: number, cy: number, opacity: number } | null>(null)\n const [logLines, setLogLines] = useState([])\n const [logPlaceholder, setLogPlaceholder] = useState(true)\n\n const getPath = useCallback(\n (from: string, to: string): SVGPathElement | null => {\n const root = hostRef.current\n if (!root) {\n return null\n }\n const svg = root.querySelector('svg.process-model-svg')\n if (!svg) {\n return null\n }\n const id = ProcessModelLayoutUtilities.getProcessModelEdgePathDomId(pathPrefix, from, to)\n return svg.querySelector(`#${CSS.escape(id)}`)\n },\n [pathPrefix]\n )\n\n const addLog = useCallback((text: string) => {\n setLogPlaceholder(false)\n const time = new Date().toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', second: '2-digit' })\n setLogLines((prev) => [\n ...prev,\n { id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, time, text },\n ])\n }, [])\n\n const getLabel = useCallback(\n (id: string) => {\n const n = graph.nodes.find((x) => x.id === id)\n return n ? `${n.label} (${n.count})` : id\n },\n [graph.nodes]\n )\n\n const stopPlayback = useCallback(() => {\n playbackRef.current?.abort()\n playbackRef.current = null\n setIsPlaying(false)\n setReplayParticle(null)\n }, [])\n\n const resetReplay = useCallback(() => {\n stopPlayback()\n traceIndexRef.current = 0\n setActiveNodeId(undefined)\n setVisitedNodeIds(new Set())\n setEdgeReplayHighlight(null)\n setLogLines([])\n setLogPlaceholder(true)\n }, [stopPlayback])\n\n const awaitDoubleRaf = useCallback(() => {\n return new Promise((resolve) => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => resolve())\n })\n })\n }, [])\n\n const runTraceOnce = useCallback(\n async (trace: ProcessModelTrace, signal: AbortSignal) => {\n await awaitDoubleRaf()\n if (signal.aborted) {\n return\n }\n const BASE = 650 / speedMult\n const ns = trace.nodes\n addLog(`▶ ${trace.name}`)\n setVisitedNodeIds(new Set())\n setEdgeReplayHighlight(null)\n setActiveNodeId(ns[0])\n addLog(`↳ ${getLabel(ns[0])}`)\n\n for (let i = 0; i < ns.length - 1; i++) {\n if (signal.aborted) {\n return\n }\n const from = ns[i]\n const to = ns[i + 1]\n const dur = (BASE + Math.random() * 180) / speedMult\n const pathEl = getPath(from, to)\n const particleMs = dur / speedMult\n if (pathEl) {\n await runParticleAlongPath(pathEl, particleMs, signal, (cx, cy, opacity) => {\n if (opacity <= 0) {\n setReplayParticle(null)\n } else {\n setReplayParticle({ cx, cy, opacity })\n }\n })\n } else {\n setReplayParticle(null)\n await sleep(particleMs, signal)\n }\n if (signal.aborted) {\n return\n }\n setVisitedNodeIds((prev) => new Set([...prev, from]))\n setActiveNodeId(to)\n setEdgeReplayHighlight({ from, to })\n addLog(`↳ ${getLabel(to)}`)\n if (i === ns.length - 2) {\n await sleep(500 / speedMult, signal)\n if (signal.aborted) {\n return\n }\n setActiveNodeId(undefined)\n setEdgeReplayHighlight(null)\n }\n }\n },\n [addLog, awaitDoubleRaf, getLabel, getPath, speedMult]\n )\n\n const startPlayback = useCallback(async () => {\n if (!graph.traces.length || playbackLoopLockRef.current) {\n return\n }\n playbackLoopLockRef.current = true\n stopPlayback()\n const ac = new AbortController()\n playbackRef.current = ac\n setIsPlaying(true)\n setLogPlaceholder(false)\n try {\n while (!ac.signal.aborted) {\n const idx = traceIndexRef.current % graph.traces.length\n const trace = graph.traces[idx]\n traceIndexRef.current += 1\n await runTraceOnce(trace, ac.signal)\n if (ac.signal.aborted) {\n break\n }\n const gap = (600 + Math.random() * 300) / speedMult\n await sleep(gap, ac.signal)\n }\n } finally {\n if (playbackRef.current === ac) {\n playbackRef.current = null\n }\n playbackLoopLockRef.current = false\n setIsPlaying(false)\n setReplayParticle(null)\n }\n }, [graph.traces, runTraceOnce, speedMult, stopPlayback])\n\n useEffect(() => {\n resetReplay()\n }, [graph, resetReplay])\n\n useEffect(() => () => {\n playbackRef.current?.abort()\n }, [])\n\n return (\n
\n
\n {\n if (isPlaying) {\n stopPlayback()\n } else {\n void startPlayback()\n }\n }}\n >\n {isPlaying ? : }\n {isPlaying ? translation('pauseTrace') : translation('playTrace')}\n \n \n \n {translation('reset')}\n \n
\n {translation('speed')}\n \n {SPEED_OPTIONS.map((option) => (\n \n ))}\n \n
\n
\n
\n \n
\n
\n
Trace log
\n
\n {logPlaceholder ? (\n
\n Press Play to start trace replay…\n
\n ) : (\n logLines.map((line) => (\n
\n \n {line.time}\n {line.text}\n
\n ))\n )}\n
\n
\n
\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\nimport { useStorage } from '../hooks/useStorage'\nimport { LocalizationUtil } from '../i18n/util'\nimport type { HightideTranslationLocales } from '@/src/i18n/translations'\nimport type { LocalizationConfig } from '@/src/global-contexts/HightideConfigContext'\nimport { useHightideConfig } from '@/src/global-contexts/HightideConfigContext'\nimport { useEventCallbackStabilizer } from '../hooks/useEventCallbackStabelizer'\n\ntype LocaleWithSystem = HightideTranslationLocales | 'system'\n\nexport type LocaleContextValue = {\n locale: HightideTranslationLocales,\n setLocale: Dispatch>,\n timeZone?: string,\n setTimeZone?: (timeZone: string | undefined) => void,\n is24HourFormat?: boolean,\n setIs24HourFormat?: (is24HourFormat: boolean | undefined) => void,\n}\n\nexport const LocaleContext = createContext(null)\n\nexport type LocaleProviderProps = PropsWithChildren & Partial & {\n locale?: LocaleWithSystem,\n onChangedLocale?: (locale: HightideTranslationLocales) => void,\n timeZone?: string,\n onChangedTimeZone?: (timeZone: string | undefined) => void,\n is24HourFormat?: boolean,\n onChangedIs24HourFormat?: (is24HourFormat: boolean) => void,\n}\n\nexport const LocaleProvider = ({\n children,\n locale,\n defaultLocale,\n defaultTimeZone,\n defaultIs24HourFormat,\n timeZone,\n is24HourFormat,\n onChangedLocale,\n onChangedTimeZone,\n onChangedIs24HourFormat,\n}: LocaleProviderProps) => {\n const {\n value: storedLocale,\n setValue: setStoredLocale,\n deleteValue: deleteStoredLocale,\n } = useStorage({ key: 'locale', defaultValue: 'system' })\n const {\n value: storedTimeZone,\n setValue: setStoredTimeZone,\n deleteValue: deleteStoredTimeZone,\n } = useStorage({ key: 'timeZone', defaultValue: null })\n const {\n value: storedIs24HourFormat,\n setValue: setStoredIs24HourFormat,\n deleteValue: deleteStoredIs24HourFormat,\n } = useStorage({ key: 'is24HourFormat', defaultValue: null })\n const { config } = useHightideConfig()\n const [localePreference, setLocalePreference] = useState('system')\n\n const resolvedLocale = useMemo(() => {\n if (locale && locale !== 'system') {\n return locale\n }\n if (storedLocale && storedLocale !== 'system') {\n return storedLocale\n }\n if (localePreference !== 'system') {\n return localePreference\n }\n return config.locale.defaultLocale ?? defaultLocale\n }, [config.locale.defaultLocale, defaultLocale, locale, localePreference, storedLocale])\n\n useEffect(() => {\n if (!locale) return\n if (locale === 'system') {\n deleteStoredLocale()\n } else {\n setStoredLocale(locale)\n }\n }, [locale, deleteStoredLocale, setStoredLocale])\n\n const resolvedTimeZone = useMemo(() => {\n return timeZone ?? storedTimeZone ?? config.locale.defaultTimeZone ?? defaultTimeZone\n }, [timeZone, storedTimeZone, config.locale.defaultTimeZone, defaultTimeZone])\n\n useEffect(() => {\n if (timeZone === undefined) return\n setStoredTimeZone(timeZone)\n }, [timeZone, setStoredTimeZone])\n\n const resolvedIs24HourFormat = useMemo(() => {\n return is24HourFormat ?? storedIs24HourFormat ?? config.locale.defaultIs24HourFormat ?? defaultIs24HourFormat ?? true\n }, [is24HourFormat, storedIs24HourFormat, config.locale.defaultIs24HourFormat, defaultIs24HourFormat])\n\n useEffect(() => {\n if (is24HourFormat === undefined) return\n setStoredIs24HourFormat(is24HourFormat)\n }, [is24HourFormat, setStoredIs24HourFormat])\n\n const onChangeRef = useEventCallbackStabilizer(onChangedLocale)\n\n useEffect(() => {\n onChangeRef?.(resolvedLocale)\n }, [resolvedLocale, onChangeRef])\n\n const onChangeTimeZoneRef = useEventCallbackStabilizer(onChangedTimeZone)\n\n useEffect(() => {\n onChangeTimeZoneRef?.(resolvedTimeZone)\n }, [resolvedTimeZone, onChangeTimeZoneRef])\n\n const onChangeIs24HourFormatRef = useEventCallbackStabilizer(onChangedIs24HourFormat)\n\n useEffect(() => {\n onChangeIs24HourFormatRef?.(resolvedIs24HourFormat)\n }, [resolvedIs24HourFormat, onChangeIs24HourFormatRef])\n\n useEffect(() => {\n const localesToTestAgainst = Object.values(LocalizationUtil.locals)\n\n const detectLanguage = () => {\n const matchingBrowserLanguage = window.navigator.languages\n .map(locale =>\n localesToTestAgainst.find(\n (test) => locale === test || locale.split('-')[0] === LocalizationUtil.localToLanguage(test)\n ))\n .filter((entry): entry is HightideTranslationLocales => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0]\n setLocalePreference(firstMatch)\n }\n detectLanguage()\n\n window.addEventListener('languagechange', detectLanguage)\n return () => {\n window.removeEventListener('languagechange', detectLanguage)\n }\n }, [])\n\n return (\n {\n if (locale !== 'system') {\n console.warn('LocaleProvider: Attempting to change the ' +\n \"locale while setting a fixed locale won't have any effect. \" +\n 'Change the locale provided to the LocaleProvider instead.')\n }\n setStoredLocale(newLocale)\n },\n timeZone: resolvedTimeZone,\n setTimeZone: (newTimeZone) => {\n if (timeZone !== undefined) {\n console.warn('LocaleProvider: Attempting to change the ' +\n \"time zone while setting a fixed time zone won't have any effect. \" +\n 'Change the timeZone provided to the LocaleProvider instead.')\n return\n }\n if (newTimeZone === undefined) {\n deleteStoredTimeZone()\n } else {\n setStoredTimeZone(newTimeZone)\n }\n },\n is24HourFormat: resolvedIs24HourFormat,\n setIs24HourFormat: (newIs24HourFormat) => {\n if (is24HourFormat !== undefined) {\n console.warn('LocaleProvider: Attempting to change the ' +\n \"hour format while setting a fixed hour format won't have any effect. \" +\n 'Change the is24HourFormat provided to the LocaleProvider instead.')\n return\n }\n if (newIs24HourFormat === undefined) {\n deleteStoredIs24HourFormat()\n } else {\n setStoredIs24HourFormat(newIs24HourFormat)\n }\n },\n }}>\n {children}\n \n )\n}\n\nexport const useLocale = () => {\n const context = useContext(LocaleContext)\n if (!context) {\n throw new Error('useLocale must be used within LocaleContext. Try adding a LocaleProvider around your app.')\n }\n return context\n}\n\nexport const useTimeZone = () => {\n const context = useContext(LocaleContext)\n if (!context) {\n throw new Error('useTimeZone must be used within LocaleContext. Try adding a LocaleProvider around your app.')\n }\n return { timeZone: context.timeZone, setTimeZone: context.setTimeZone }\n}\n\nexport const useDateTimeFormat = () => {\n const context = useContext(LocaleContext)\n return {\n is24HourFormat: context?.is24HourFormat ?? true,\n timeZone: context?.timeZone,\n }\n}\n\nexport const useLanguage = () => {\n const context = useContext(LocaleContext)\n if (!context) {\n throw new Error('useLanguage must be used within LocaleContext. Try adding a LocaleProvider around your app.')\n }\n return { language: LocalizationUtil.localToLanguage(context.locale) }\n}\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { StorageListener } from '../utils/StorageListener'\n\ninterface UseStorageProps {\n key: string,\n defaultValue: T,\n storageType?: 'local' | 'session',\n serialize?: (value: T) => string,\n deserialize?: (value: string) => T,\n /** Whether to listen for storage events and update the value automatically. Defaults to true. */\n listen?: boolean,\n}\n\ninterface UseStorageResult {\n value: T,\n setValue: Dispatch>,\n deleteValue: () => void,\n}\n\nexport const useStorage = ({\n key,\n defaultValue,\n storageType = 'local',\n serialize = JSON.stringify,\n deserialize = JSON.parse,\n listen = true\n}: UseStorageProps): UseStorageResult => {\n const lastSerializedRef = useRef(null)\n\n const storageService: Storage | undefined = useMemo(() => {\n if(typeof window === 'undefined') return undefined\n if (storageType === 'local') {\n return window.localStorage\n }\n return window.sessionStorage\n }, [storageType])\n\n const get = useCallback((): T => {\n if (!storageService) {\n return defaultValue\n }\n try {\n const value = storageService.getItem(key)\n if(!value) {\n return defaultValue\n }\n return deserialize(value)\n } catch (error) {\n console.warn('useStorage: Error while reading or deserializing the stored value. Make sure your deserialize function is correct.', error)\n return defaultValue\n }\n }, [storageService, key, deserialize, defaultValue])\n\n const [value, setValue] = useState(get)\n\n useEffect(() => {\n if(!storageService) return\n let serializedValue: string\n try {\n serializedValue = serialize(value)\n } catch (error) {\n console.warn('useStorage: Error while serializing the value. Make sure your serialize function is correct.', error)\n return\n }\n\n if(serializedValue === lastSerializedRef.current) return\n\n lastSerializedRef.current = serializedValue\n try {\n storageService?.setItem(key, serialize(value))\n } catch (error) {\n console.warn('useStorage: Error while writing the value. Make sure your serialize function is correct.', error)\n }\n }, [value, serialize, storageService, key])\n\n const deleteValue = useCallback(() => {\n try {\n storageService?.removeItem(key)\n } catch {\n console.warn('useStorage: Error while deleting the value.')\n }\n setValue(defaultValue)\n }, [storageService, key, setValue, defaultValue])\n\n useEffect(() => {\n if (!listen) return\n if (!storageService) return\n\n const listener = StorageListener.getInstance()\n\n return listener.subscribe(storageService, key, (raw) => {\n if (raw === null) {\n lastSerializedRef.current = null\n setValue(defaultValue)\n return\n }\n\n try {\n lastSerializedRef.current = raw\n setValue(deserialize(raw))\n } catch (error) {\n console.warn('useStorage: deserialization failed', error)\n }\n })\n }, [storageService, key, deserialize, defaultValue, listen])\n\n return { value, setValue, deleteValue }\n}","'use client'\n\nexport type StorageSubscriber = (raw: string | null) => void\n\nexport class StorageListener {\n private static instance: StorageListener | null = null\n\n private localSubscriptions = new Map>()\n private sessionSubscriptions = new Map>()\n private initialized = false\n\n private constructor() {}\n\n static getInstance(): StorageListener {\n if (!this.instance) {\n this.instance = new StorageListener()\n }\n return this.instance\n }\n\n subscribe(storage: Storage, key: string, cb: StorageSubscriber): () => void {\n this.init()\n\n const registry = this.getRegistry(storage)\n let subs = registry.get(key)\n if (!subs) {\n subs = new Set()\n registry.set(key, subs)\n }\n\n subs.add(cb)\n\n return () => {\n subs!.delete(cb)\n if (subs!.size === 0) {\n registry.delete(key)\n }\n }\n }\n\n private init() {\n if (this.initialized || typeof window === 'undefined') return\n this.initialized = true\n\n window.addEventListener('storage', this.handleEvent)\n }\n\n private handleEvent = (event: StorageEvent) => {\n if (!event.key || !event.storageArea) return\n\n const registry = this.getRegistry(event.storageArea)\n const subs = registry.get(event.key)\n if (!subs) return\n\n for (const cb of subs) {\n cb(event.newValue)\n }\n }\n\n private getRegistry(storage: Storage) {\n return storage === window.localStorage\n ? this.localSubscriptions\n : this.sessionSubscriptions\n }\n}\n","// AUTO-GENERATED. DO NOT EDIT.\n/* eslint-disable @stylistic/quote-props */\n/* eslint-disable no-useless-escape */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type { Translation } from '@helpwave/internationalization'\nimport { TranslationGen } from '@helpwave/internationalization'\n\nexport const hightideTranslationLocales = ['de-DE', 'en-US'] as const\n\nexport type HightideTranslationLocales = typeof hightideTranslationLocales[number]\n\nexport type HightideTranslationEntries = {\n 'add': string,\n 'addFilter': string,\n 'addSorting': string,\n 'addTime': string,\n 'after': string,\n 'age': string,\n 'all': string,\n 'apply': string,\n 'back': string,\n 'before': string,\n 'between': string,\n 'cancel': string,\n 'carousel': string,\n 'caseSensitive': string,\n 'change': string,\n 'changeColumnDisplay': string,\n 'changePinning': string,\n 'changeSelection': string,\n 'changeVisibility': string,\n 'chooseLanguage': string,\n 'chooseSlide': string,\n 'chooseTheme': string,\n 'clear': string,\n 'clearValue': string,\n 'click': string,\n 'clickToCopy': string,\n 'clickToSelect': string,\n 'close': string,\n 'closeDialog': string,\n 'columnPicker': string,\n 'columnPickerDescription': string,\n 'columns': string,\n 'confirm': string,\n 'contains': string,\n 'copied': string,\n 'copy': string,\n 'create': string,\n 'date': string,\n 'dayPeriod': string,\n 'decline': string,\n 'decreaseSortingPriority': string,\n 'decreaseValue': string,\n 'delete': string,\n 'discard': string,\n 'discardChanges': string,\n 'done': string,\n 'edit': string,\n 'editFilter': string,\n 'endDate': string,\n 'endsWith': string,\n 'enterText': string,\n 'entriesPerPage': string,\n 'entryDate': string,\n 'equals': string,\n 'error': string,\n 'errorOccurred': string,\n 'exit': string,\n 'fieldRequiredError': string,\n 'filter': string,\n 'filterNonWhitespace': string,\n 'filterNotUndefined': string,\n 'filterOptions': string,\n 'filterUndefined': string,\n 'first': string,\n 'goodToSeeYou': string,\n 'greaterThan': string,\n 'greaterThanOrEqual': string,\n 'hideAllColumns': string,\n 'hideColumn': string,\n 'identifier': string,\n 'increaseSortingPriority': string,\n 'increaseValue': string,\n 'invalidEmail': string,\n 'invalidEmailError': string,\n 'isFalse': string,\n 'isNotUndefined': string,\n 'isTrue': string,\n 'isUndefined': string,\n 'language': string,\n 'last': string,\n 'less': string,\n 'lessThan': string,\n 'lessThanOrEqual': string,\n 'loading': string,\n 'locale': string,\n 'max': string,\n 'maxLengthError': string,\n 'menu': string,\n 'min': string,\n 'minLengthError': string,\n 'more': string,\n 'moveDown': string,\n 'moveUp': string,\n 'name': string,\n 'next': string,\n 'no': string,\n 'noColumn': string,\n 'noData': string,\n 'none': string,\n 'noParameterRequired': string,\n 'notBetween': string,\n 'notContains': string,\n 'notEmpty': string,\n 'notEquals': string,\n 'nothingFound': string,\n 'nResultsFound': (values: { count: number }) => string,\n 'of': string,\n 'onOrAfter': string,\n 'onOrBefore': string,\n 'optional': string,\n 'outOfRangeNumber': (values: { min: number, max: number }) => string,\n 'outOfRangeSelectionItems': (values: { min: number, max: number }) => string,\n 'outOfRangeString': (values: { min: number, max: number }) => string,\n 'parameter': string,\n 'pauseTrace': string,\n 'pinLeft': string,\n 'pinned': string,\n 'pinRight': string,\n 'pinToLeft': string,\n 'pinToRight': string,\n 'playTrace': string,\n 'pleaseWait': string,\n 'previous': string,\n 'pThemes': (values: { count: number }) => string,\n 'rBetween': (values: { value1: string, value2: string }) => string,\n 'rContains': (values: { value: string }) => string,\n 'remove': string,\n 'removeFilter': string,\n 'removeProperty': string,\n 'rEndsWith': (values: { value: string }) => string,\n 'rEquals': (values: { value: string }) => string,\n 'required': string,\n 'reset': string,\n 'rGreaterThan': (values: { value: string }) => string,\n 'rGreaterThanOrEqual': (values: { value: string }) => string,\n 'rLessThan': (values: { value: string }) => string,\n 'rLessThanOrEqual': (values: { value: string }) => string,\n 'rNotBetween': (values: { value1: string, value2: string }) => string,\n 'rNotContains': (values: { value: string }) => string,\n 'rNotEquals': (values: { value: string }) => string,\n 'rSortingOrderAfter': (values: { otherSortings: number }) => string,\n 'rStartsWith': (values: { value: string }) => string,\n 'save': string,\n 'saved': string,\n 'sDateTimeSelect': (values: { datetimeMode: string }) => string,\n 'search': string,\n 'searchResults': string,\n 'select': string,\n 'selection': string,\n 'selectOption': string,\n 'sGender': (values: { gender: string }) => string,\n 'show': string,\n 'showAllColumns': string,\n 'showColumn': string,\n 'showLess': string,\n 'showMore': string,\n 'showSlide': (values: { index: number }) => string,\n 'slide': string,\n 'slideNavigation': string,\n 'slideOf': (values: { index: number, length: number }) => string,\n 'sortAsc': string,\n 'sortDesc': string,\n 'sorting': string,\n 'speed': string,\n 'sSortingState': (values: { sortDirection: string }) => string,\n 'startDate': string,\n 'startsWith': string,\n 'sThemeMode': (values: { theme: string }) => string,\n 'street': string,\n 'submit': string,\n 'success': string,\n 'tag': string,\n 'tags': string,\n 'text': string,\n 'time.ago': string,\n 'time.agoDays': (values: { days: number }) => string,\n 'time.april': string,\n 'time.august': string,\n 'time.century': (values: { count: number }) => string,\n 'time.day': (values: { count: number }) => string,\n 'time.decade': (values: { count: number }) => string,\n 'time.december': string,\n 'time.february': string,\n 'time.hour': (values: { count: number }) => string,\n 'time.in': string,\n 'time.inDays': (values: { days: number }) => string,\n 'time.january': string,\n 'time.july': string,\n 'time.june': string,\n 'time.march': string,\n 'time.may': string,\n 'time.microsecond': (values: { count: number }) => string,\n 'time.millisecond': (values: { count: number }) => string,\n 'time.minute': (values: { count: number }) => string,\n 'time.month': (values: { count: number }) => string,\n 'time.nanosecond': (values: { count: number }) => string,\n 'time.nextMonth': string,\n 'time.november': string,\n 'time.october': string,\n 'time.previousMonth': string,\n 'time.second': (values: { count: number }) => string,\n 'time.september': string,\n 'time.sMonthName': (values: { month: string }) => string,\n 'time.today': string,\n 'time.tomorrow': string,\n 'time.year': (values: { count: number }) => string,\n 'time.yesterday': string,\n 'tooFewSelectionItems': (values: { min: number }) => string,\n 'tooLong': (values: { max: number }) => string,\n 'tooManySelectionItems': (values: { max: number }) => string,\n 'tooShort': (values: { min: number }) => string,\n 'unknown': string,\n 'unpin': string,\n 'unsavedChanges': string,\n 'unsavedChangesSaveQuestion': string,\n 'update': string,\n 'value': string,\n 'welcome': string,\n 'withoutTime': string,\n 'yes': string,\n}\n\nexport const hightideTranslation: Translation> = {\n 'de-DE': {\n 'add': `Hinzufügen`,\n 'addFilter': `Filter hinzufügen`,\n 'addSorting': `Sortierung hinzufügen`,\n 'addTime': `Uhrzeit hinzufügen`,\n 'after': `Nach`,\n 'age': `Alter`,\n 'all': `Alle`,\n 'apply': `Anwenden`,\n 'back': `Zurück`,\n 'before': `Vor`,\n 'between': `Zwischen`,\n 'cancel': `Abbrechen`,\n 'carousel': `Karussell`,\n 'caseSensitive': `Groß-/Klein beachten`,\n 'change': `Ändern`,\n 'changeColumnDisplay': `Spaltenanzeige ändern`,\n 'changePinning': `Anheften ändern`,\n 'changeSelection': `Auswahl ändern`,\n 'changeVisibility': `Sichtbarkeit ändern`,\n 'chooseLanguage': `Wähle deine bevorzugte Sprache`,\n 'chooseSlide': `Wähle die angezeigte Slide aus`,\n 'chooseTheme': `Wähle dein bevorzugtes Farbschema.`,\n 'clear': `Löschen`,\n 'clearValue': `Wert löschen`,\n 'click': `Klicken`,\n 'clickToCopy': `Zum kopieren klicken`,\n 'clickToSelect': `Zum Auswählen drücken`,\n 'close': `Schließen`,\n 'closeDialog': `Dialog schließen`,\n 'columnPicker': `Spaltenauswahl`,\n 'columnPickerDescription': `Spalten neu anordnen und ein- oder ausblenden`,\n 'columns': `Spalten`,\n 'confirm': `Bestätigen`,\n 'contains': `Enthält`,\n 'copied': `Kopiert`,\n 'copy': `Kopieren`,\n 'create': `Erstellen`,\n 'date': `Datum`,\n 'dayPeriod': `AM/PM`,\n 'decline': `Ablehnen`,\n 'decreaseSortingPriority': `Sortierpriorität verringern`,\n 'decreaseValue': `Wert verringern`,\n 'delete': `Löschen`,\n 'discard': `Verwerfen`,\n 'discardChanges': `Änderungen Verwerfen`,\n 'done': `Fertig`,\n 'edit': `Bearbeiten`,\n 'editFilter': `Filter bearbeiten`,\n 'endDate': `Ende`,\n 'endsWith': `Endet mit`,\n 'enterText': `Text hier eingeben`,\n 'entriesPerPage': `Einträge pro Seite`,\n 'entryDate': `Eintragsdatum`,\n 'equals': `Gleich`,\n 'error': `Fehler`,\n 'errorOccurred': `Ein Fehler ist aufgetreten`,\n 'exit': `Beenden`,\n 'fieldRequiredError': `Dieses Feld ist erforderlich.`,\n 'filter': `Filter`,\n 'filterNonWhitespace': `Nicht leer`,\n 'filterNotUndefined': `Definiert`,\n 'filterOptions': `Optionen filtern`,\n 'filterUndefined': `Undefiniert`,\n 'first': `Erste`,\n 'goodToSeeYou': `Schön dich zu sehen`,\n 'greaterThan': `Größer als`,\n 'greaterThanOrEqual': `Größer oder gleich`,\n 'hideAllColumns': `Alle Spalten ausblenden`,\n 'hideColumn': `Spalte ausblenden`,\n 'identifier': `Identifikator`,\n 'increaseSortingPriority': `Sortierpriorität erhöhen`,\n 'increaseValue': `Wert erhöhen`,\n 'invalidEmail': `Die E-Mail ist ungültig.`,\n 'invalidEmailError': `Bitte geben Sie eine gültige E-Mail-Adresse ein.`,\n 'isFalse': `Ist falsch`,\n 'isNotUndefined': `Ist definiert`,\n 'isTrue': `Ist wahr`,\n 'isUndefined': `Ist undefiniert`,\n 'language': `Sprache`,\n 'last': `Letzte`,\n 'less': `Weniger`,\n 'lessThan': `Kleiner als`,\n 'lessThanOrEqual': `Kleiner oder gleich`,\n 'loading': `Lädt`,\n 'locale': `Locale`,\n 'max': `Max`,\n 'maxLengthError': `Maximale Länge überschritten.`,\n 'menu': `Menü`,\n 'min': `Min`,\n 'minLengthError': `Mindestlänge nicht erreicht.`,\n 'more': `Mehr`,\n 'moveDown': `Nach unten`,\n 'moveUp': `Nach oben`,\n 'name': `Name`,\n 'next': `Weiter`,\n 'no': `Nein`,\n 'noColumn': `Keine Spalte`,\n 'noData': `Keine Daten`,\n 'none': `Nichts`,\n 'noParameterRequired': `Kein Parameter erforderlich`,\n 'notBetween': `Nicht zwischen`,\n 'notContains': `Enthält nicht`,\n 'notEmpty': `Das Feld darf nicht leer sein.`,\n 'notEquals': `Nicht gleich`,\n 'nothingFound': `Nichts gefunden`,\n 'nResultsFound': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `${count} Ergebnis gefunden`,\n 'other': `${count} Ergebnisse gefunden`,\n })\n },\n 'of': `von`,\n 'onOrAfter': `Nach oder Gleich`,\n 'onOrBefore': `Vor oder Gleich`,\n 'optional': `Optional`,\n 'outOfRangeNumber': ({ min, max }): string => {\n return `Der Wert muss zwischen ${min} und ${max} liegen.`\n },\n 'outOfRangeSelectionItems': ({ min, max }): string => {\n return `Es müssen zwischen ${min} und ${max} Elemente ausgewählt werden.`\n },\n 'outOfRangeString': ({ min, max }): string => {\n return `Der Wert muss zwischen ${min} und ${max} Zeichen lang sein.`\n },\n 'parameter': `Parameter`,\n 'pauseTrace': `Trace pausieren`,\n 'pinLeft': `Links anheften`,\n 'pinned': `Angeheftet`,\n 'pinRight': `Rechts anheften`,\n 'pinToLeft': `Links anheften`,\n 'pinToRight': `Rechts anheften`,\n 'playTrace': `Trace abspielen`,\n 'pleaseWait': `Bitte warten...`,\n 'previous': `Vorherige`,\n 'pThemes': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Farbschema`,\n 'other': `Farbschemas`,\n })\n },\n 'rBetween': ({ value1, value2 }): string => {\n return `Zwischen ${value1} und ${value2}`\n },\n 'rContains': ({ value }): string => {\n return `Enthält ${value}`\n },\n 'remove': `Entfernen`,\n 'removeFilter': `Filter entfernen`,\n 'removeProperty': `Eigenschaft entfernen`,\n 'rEndsWith': ({ value }): string => {\n return `Endet mit ${value}`\n },\n 'rEquals': ({ value }): string => {\n return `Gleich ${value}`\n },\n 'required': `Erforderlich`,\n 'reset': `Zurücksetzen`,\n 'rGreaterThan': ({ value }): string => {\n return `Größer als ${value}`\n },\n 'rGreaterThanOrEqual': ({ value }): string => {\n return `Größer oder gleich ${value}`\n },\n 'rLessThan': ({ value }): string => {\n return `Kleiner als ${value}`\n },\n 'rLessThanOrEqual': ({ value }): string => {\n return `Kleiner oder gleich ${value}`\n },\n 'rNotBetween': ({ value1, value2 }): string => {\n return `Nicht zwischen ${value1} und ${value2}`\n },\n 'rNotContains': ({ value }): string => {\n return `Enthält nicht ${value}`\n },\n 'rNotEquals': ({ value }): string => {\n return `Nicht gleich ${value}`\n },\n 'rSortingOrderAfter': ({ otherSortings }): string => {\n let _out: string = ''\n _out += `Angewendet `\n _out += TranslationGen.resolvePlural(otherSortings, {\n '=0': `als primäre Sortierung`,\n '=1': `nach einer anderen Sortierung`,\n 'other': `nach ${otherSortings} anderen Sortierungen`,\n })\n return _out\n },\n 'rStartsWith': ({ value }): string => {\n return `Beginnt mit ${value}`\n },\n 'save': `Speichern`,\n 'saved': `Gespeichert`,\n 'sDateTimeSelect': ({ datetimeMode }): string => {\n return TranslationGen.resolveSelect(datetimeMode, {\n 'time': `Zeit auswählen`,\n 'date': `Datum auswählen`,\n 'dateTime': `Datum und Uhrzeit auswählen`,\n })\n },\n 'search': `Suche`,\n 'searchResults': `Suchergebnisse`,\n 'select': `Select`,\n 'selection': `Auswahl`,\n 'selectOption': `Option auswählen`,\n 'sGender': ({ gender }): string => {\n return TranslationGen.resolveSelect(gender, {\n 'male': `Männlich`,\n 'female': `Weiblich`,\n 'other': `Divers`,\n })\n },\n 'show': `Anzeigen`,\n 'showAllColumns': `Alle Spalten einblenden`,\n 'showColumn': `Spalte einblenden`,\n 'showLess': `Weniger anzeigen`,\n 'showMore': `Mehr anzeigen`,\n 'showSlide': ({ index }): string => {\n return `Zeige Slide ${index}`\n },\n 'slide': `Slide`,\n 'slideNavigation': `Slide Navigation`,\n 'slideOf': ({ index, length }): string => {\n return `Slide ${index} von ${length} slides`\n },\n 'sortAsc': `ASC`,\n 'sortDesc': `DESC`,\n 'sorting': `Sortierung`,\n 'speed': `Geschwindigkeit`,\n 'sSortingState': ({ sortDirection }): string => {\n return TranslationGen.resolveSelect(sortDirection, {\n 'asc': `Sortierung (Aktuell Aufsteigend)`,\n 'desc': `Sortierung (Aktuell Absteigend)`,\n 'other': `Sortierung (Aktuell Keine)`,\n })\n },\n 'startDate': `Start`,\n 'startsWith': `Beginnt mit`,\n 'sThemeMode': ({ theme }): string => {\n return TranslationGen.resolveSelect(theme, {\n 'dark': `Dunkel`,\n 'light': `Hell`,\n 'system': `System`,\n })\n },\n 'street': `Straße`,\n 'submit': `Abschicken`,\n 'success': `Erfolg`,\n 'tag': `Tag`,\n 'tags': `Tags`,\n 'text': `Text`,\n 'time.ago': `vor`,\n 'time.agoDays': ({ days }): string => {\n return `var ${days} Tagen`\n },\n 'time.april': `April`,\n 'time.august': `August`,\n 'time.century': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Jahrhundert`,\n 'other': `Jahrhunderte`,\n })\n },\n 'time.day': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Tag`,\n 'other': `Tage`,\n })\n },\n 'time.decade': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Jahrzehnt`,\n 'other': `Jahrzehnte`,\n })\n },\n 'time.december': `December`,\n 'time.february': `Febuar`,\n 'time.hour': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Stunde`,\n 'other': `Stunden`,\n })\n },\n 'time.in': `in`,\n 'time.inDays': ({ days }): string => {\n return `in ${days} Tagen`\n },\n 'time.january': `Januar`,\n 'time.july': `Juli`,\n 'time.june': `Juni`,\n 'time.march': `März`,\n 'time.may': `Mai`,\n 'time.microsecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Mikrosekunde`,\n 'other': `Mikrosekunden`,\n })\n },\n 'time.millisecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Millisekunde`,\n 'other': `Millisekunden`,\n })\n },\n 'time.minute': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Minute`,\n 'other': `Minuten`,\n })\n },\n 'time.month': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Monat`,\n 'other': `Monate`,\n })\n },\n 'time.nanosecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Nanosekunde`,\n 'other': `Nanosekunden`,\n })\n },\n 'time.nextMonth': `Nächster Monat`,\n 'time.november': `November`,\n 'time.october': `October`,\n 'time.previousMonth': `Vorheriger Monat`,\n 'time.second': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Sekunde`,\n 'other': `Sekunden`,\n })\n },\n 'time.september': `September`,\n 'time.sMonthName': ({ month }): string => {\n return TranslationGen.resolveSelect(month, {\n 'january': `Januar`,\n 'february': `Februar`,\n 'march': `März`,\n 'april': `April`,\n 'may': `Mai`,\n 'june': `Juni`,\n 'july': `Juli`,\n 'august': `August`,\n 'september': `September`,\n 'october': `Oktober`,\n 'november': `November`,\n 'december': `Dezember`,\n 'other': `Unbekannter Monat`,\n })\n },\n 'time.today': `Heute`,\n 'time.tomorrow': `Morgen`,\n 'time.year': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Jahr`,\n 'other': `Jahre`,\n })\n },\n 'time.yesterday': `Gestern`,\n 'tooFewSelectionItems': ({ min }): string => {\n return `Es müssen mindestens ${min} Elemente ausgewählt werden.`\n },\n 'tooLong': ({ max }): string => {\n return `Der Wert darf höchstens ${max} Zeichen enthalten.`\n },\n 'tooManySelectionItems': ({ max }): string => {\n return `Es müssen maximal ${max} Elemente ausgewählt werden.`\n },\n 'tooShort': ({ min }): string => {\n return `Der Wert muss mindestens ${min} Zeichen enthalten.`\n },\n 'unknown': `Unbekannt`,\n 'unpin': `Loslösen`,\n 'unsavedChanges': `Ungespeicherte Änderungen`,\n 'unsavedChangesSaveQuestion': `Möchtest du die Änderungen speichern?`,\n 'update': `Update`,\n 'value': `Wert`,\n 'welcome': `Willkommen`,\n 'withoutTime': `Ohne Uhrzeit`,\n 'yes': `Ja`\n },\n 'en-US': {\n 'add': `Add`,\n 'addFilter': `Add filter`,\n 'addSorting': `Add sorting`,\n 'addTime': `Add Time`,\n 'after': `After`,\n 'age': `Age`,\n 'all': `All`,\n 'apply': `Apply`,\n 'back': `Back`,\n 'before': `Before`,\n 'between': `Between`,\n 'cancel': `Cancel`,\n 'carousel': `Carousel`,\n 'caseSensitive': `Case Sensitive`,\n 'change': `Change`,\n 'changeColumnDisplay': `Change column display`,\n 'changePinning': `Change pinning`,\n 'changeSelection': `Change selection`,\n 'changeVisibility': `Change visibility`,\n 'chooseLanguage': `Choose your language`,\n 'chooseSlide': `Choose slide to display`,\n 'chooseTheme': `Choose your preferred color theme.`,\n 'clear': `Clear`,\n 'clearValue': `Clear Value`,\n 'click': `Click`,\n 'clickToCopy': `Click to Copy`,\n 'clickToSelect': `Click to select`,\n 'close': `Close`,\n 'closeDialog': `Close dialog`,\n 'columnPicker': `Column Picker`,\n 'columnPickerDescription': `Reorder and show or hide columns`,\n 'columns': `Columns`,\n 'confirm': `Confirm`,\n 'contains': `Contains`,\n 'copied': `Copied`,\n 'copy': `Copy`,\n 'create': `Create`,\n 'date': `Date`,\n 'dayPeriod': `AM/PM`,\n 'decline': `Decline`,\n 'decreaseSortingPriority': `Decrease sorting priority`,\n 'decreaseValue': `Decrease value`,\n 'delete': `Delete`,\n 'discard': `Discard`,\n 'discardChanges': `Discard Changes`,\n 'done': `Done`,\n 'edit': `Edit`,\n 'editFilter': `Edit filter`,\n 'endDate': `End`,\n 'endsWith': `Ends with`,\n 'enterText': `Enter text here`,\n 'entriesPerPage': `Entries per page`,\n 'entryDate': `Entry Date`,\n 'equals': `Equals`,\n 'error': `Error`,\n 'errorOccurred': `An error occurred`,\n 'exit': `Exit`,\n 'fieldRequiredError': `This field is required.`,\n 'filter': `Filter`,\n 'filterNonWhitespace': `Non-whitespace`,\n 'filterNotUndefined': `Defined`,\n 'filterOptions': `Filter options`,\n 'filterUndefined': `Undefined`,\n 'first': `First`,\n 'goodToSeeYou': `Good to see you`,\n 'greaterThan': `Greater than`,\n 'greaterThanOrEqual': `Greater than or equal`,\n 'hideAllColumns': `Hide all columns`,\n 'hideColumn': `Hide column`,\n 'identifier': `Identifier`,\n 'increaseSortingPriority': `Increase sorting priority`,\n 'increaseValue': `Increase value`,\n 'invalidEmail': `The email is not valid.`,\n 'invalidEmailError': `Please enter a valid email address.`,\n 'isFalse': `Is false`,\n 'isNotUndefined': `Is defined`,\n 'isTrue': `Is true`,\n 'isUndefined': `Is undefined`,\n 'language': `Language`,\n 'last': `Last`,\n 'less': `Less`,\n 'lessThan': `Less than`,\n 'lessThanOrEqual': `Less than or equal`,\n 'loading': `Loading`,\n 'locale': `Locale`,\n 'max': `Max`,\n 'maxLengthError': `Maximum length exceeded.`,\n 'menu': `Menu`,\n 'min': `Min`,\n 'minLengthError': `Minimum length not met.`,\n 'more': `More`,\n 'moveDown': `Move down`,\n 'moveUp': `Move up`,\n 'name': `Name`,\n 'next': `Next`,\n 'no': `No`,\n 'noColumn': `No column`,\n 'noData': `No data`,\n 'none': `None`,\n 'noParameterRequired': `No parameter required`,\n 'notBetween': `Not between`,\n 'notContains': `Not contains`,\n 'notEmpty': `The field cannot be empty.`,\n 'notEquals': `Not equals`,\n 'nothingFound': `Nothing found`,\n 'nResultsFound': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `${count} result found`,\n 'other': `${count} results found`,\n })\n },\n 'of': `of`,\n 'onOrAfter': `After or Equal`,\n 'onOrBefore': `Before or Equal`,\n 'optional': `Optional`,\n 'outOfRangeNumber': ({ min, max }): string => {\n return `The value must be between ${min} and ${max}.`\n },\n 'outOfRangeSelectionItems': ({ min, max }): string => {\n return `Between ${min} and ${max} items must be selected.`\n },\n 'outOfRangeString': ({ min, max }): string => {\n return `The value needs to have between ${min} and ${max} characters.`\n },\n 'parameter': `Parameter`,\n 'pauseTrace': `Pause trace`,\n 'pinLeft': `Pin to left`,\n 'pinned': `Pinned`,\n 'pinRight': `Pin to right`,\n 'pinToLeft': `Pin to left`,\n 'pinToRight': `Pin to right`,\n 'playTrace': `Play trace`,\n 'pleaseWait': `Please wait...`,\n 'previous': `Previous`,\n 'pThemes': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Theme`,\n 'other': `Themes`,\n })\n },\n 'rBetween': ({ value1, value2 }): string => {\n return `Between ${value1} and ${value2}`\n },\n 'rContains': ({ value }): string => {\n return `Contains ${value}`\n },\n 'remove': `Remove`,\n 'removeFilter': `Remove filter`,\n 'removeProperty': `Remove Property`,\n 'rEndsWith': ({ value }): string => {\n return `Ends with ${value}`\n },\n 'rEquals': ({ value }): string => {\n return `Equals ${value}`\n },\n 'required': `Required`,\n 'reset': `Reset`,\n 'rGreaterThan': ({ value }): string => {\n return `Greater than ${value}`\n },\n 'rGreaterThanOrEqual': ({ value }): string => {\n return `Greater than or equal ${value}`\n },\n 'rLessThan': ({ value }): string => {\n return `Less than ${value}`\n },\n 'rLessThanOrEqual': ({ value }): string => {\n return `Less than or equal ${value}`\n },\n 'rNotBetween': ({ value1, value2 }): string => {\n return `Not between ${value1} and ${value2}`\n },\n 'rNotContains': ({ value }): string => {\n return `Not contains ${value}`\n },\n 'rNotEquals': ({ value }): string => {\n return `Not equals ${value}`\n },\n 'rSortingOrderAfter': ({ otherSortings }): string => {\n let _out: string = ''\n _out += `Applied `\n _out += TranslationGen.resolvePlural(otherSortings, {\n '=0': `as the first sorting`,\n '=1': `after ${otherSortings} other sorting`,\n 'other': `after ${otherSortings} other sortings`,\n })\n return _out\n },\n 'rStartsWith': ({ value }): string => {\n return `Starts with ${value}`\n },\n 'save': `Save`,\n 'saved': `Saved`,\n 'sDateTimeSelect': ({ datetimeMode }): string => {\n return TranslationGen.resolveSelect(datetimeMode, {\n 'time': `Select Time`,\n 'date': `Select Date`,\n 'dateTime': `Select Date and Time`,\n })\n },\n 'search': `Search`,\n 'searchResults': `Search results`,\n 'select': `Select`,\n 'selection': `Selection`,\n 'selectOption': `Select an option`,\n 'sGender': ({ gender }): string => {\n return TranslationGen.resolveSelect(gender, {\n 'male': `Male`,\n 'female': `Female`,\n 'other': `Other`,\n })\n },\n 'show': `Show`,\n 'showAllColumns': `Show all columns`,\n 'showColumn': `Show column`,\n 'showLess': `Show less`,\n 'showMore': `Show more`,\n 'showSlide': ({ index }): string => {\n return `Show Slide ${index}`\n },\n 'slide': `Slide`,\n 'slideNavigation': `Slide navigation`,\n 'slideOf': ({ index, length }): string => {\n return `Slide ${index} of ${length} slides`\n },\n 'sortAsc': `ASC`,\n 'sortDesc': `DESC`,\n 'sorting': `Sorting`,\n 'speed': `Speed`,\n 'sSortingState': ({ sortDirection }): string => {\n return TranslationGen.resolveSelect(sortDirection, {\n 'asc': `Sorting (Currently Ascending)`,\n 'desc': `Sorting (Currently Descending)`,\n 'other': `Sorting (Currently None)`,\n })\n },\n 'startDate': `Start`,\n 'startsWith': `Starts with`,\n 'sThemeMode': ({ theme }): string => {\n return TranslationGen.resolveSelect(theme, {\n 'dark': `Dark`,\n 'light': `Light`,\n 'system': `System`,\n })\n },\n 'street': `Street`,\n 'submit': `Submit`,\n 'success': `Success`,\n 'tag': `Tag`,\n 'tags': `Tags`,\n 'text': `Text`,\n 'time.ago': `ago`,\n 'time.agoDays': ({ days }): string => {\n return `days ${days} ago`\n },\n 'time.april': `April`,\n 'time.august': `August`,\n 'time.century': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Century`,\n 'other': `Centuries`,\n })\n },\n 'time.day': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Day`,\n 'other': `Days`,\n })\n },\n 'time.decade': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Decade`,\n 'other': `Decades`,\n })\n },\n 'time.december': `December`,\n 'time.february': `Febuary`,\n 'time.hour': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Hour`,\n 'other': `Hours`,\n })\n },\n 'time.in': `in`,\n 'time.inDays': ({ days }): string => {\n return `in ${days} days`\n },\n 'time.january': `January`,\n 'time.july': `July`,\n 'time.june': `June`,\n 'time.march': `March`,\n 'time.may': `May`,\n 'time.microsecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Microsecond`,\n 'other': `Microseconds`,\n })\n },\n 'time.millisecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Millisecond`,\n 'other': `Milliseconds`,\n })\n },\n 'time.minute': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Minute`,\n 'other': `Minutes`,\n })\n },\n 'time.month': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Month`,\n 'other': `Months`,\n })\n },\n 'time.nanosecond': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Nanosecond`,\n 'other': `Nanoseconds`,\n })\n },\n 'time.nextMonth': `Next month`,\n 'time.november': `November`,\n 'time.october': `October`,\n 'time.previousMonth': `Previous month`,\n 'time.second': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Second`,\n 'other': `Seconds`,\n })\n },\n 'time.september': `September`,\n 'time.sMonthName': ({ month }): string => {\n return TranslationGen.resolveSelect(month, {\n 'january': `January`,\n 'february': `February`,\n 'march': `March`,\n 'april': `April`,\n 'may': `May`,\n 'june': `June`,\n 'july': `July`,\n 'august': `August`,\n 'september': `September`,\n 'october': `October`,\n 'november': `November`,\n 'december': `December`,\n 'other': `Unknown Month`,\n })\n },\n 'time.today': `Today`,\n 'time.tomorrow': `Tomorrow`,\n 'time.year': ({ count }): string => {\n return TranslationGen.resolvePlural(count, {\n '=1': `Year`,\n 'other': `Years`,\n })\n },\n 'time.yesterday': `Yesterday`,\n 'tooFewSelectionItems': ({ min }): string => {\n return `Select at least ${min} items.`\n },\n 'tooLong': ({ max }): string => {\n return `The value requires less than ${max} characters.`\n },\n 'tooManySelectionItems': ({ max }): string => {\n return `Select at most ${max} items.`\n },\n 'tooShort': ({ min }): string => {\n return `The value requires at least ${min} characters.`\n },\n 'unknown': `Unknown`,\n 'unpin': `Unpin`,\n 'unsavedChanges': `Unsaved Changes`,\n 'unsavedChangesSaveQuestion': `Do you want to save your changes?`,\n 'update': `Update`,\n 'value': `Value`,\n 'welcome': `Welcome`,\n 'withoutTime': `Without Time`,\n 'yes': `Yes`\n }\n}\n\n","import type { HightideTranslationLocales } from '@/src/i18n/translations'\nimport { hightideTranslationLocales } from '@/src/i18n/translations'\n\n/**\n * The supported locales' names in their respective language\n */\nconst localsNames: Record = {\n 'en-US': 'English (US)',\n 'de-DE': 'Deutsch',\n}\n\nfunction localeToLanguage(locale: HightideTranslationLocales) {\n return locale.split('-')[0]\n}\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LocalizationUtil = {\n locals: hightideTranslationLocales,\n localToLanguage: localeToLanguage,\n languagesLocalNames: localsNames,\n}\n","import { useLocale } from '@/src/global-contexts/LocaleContext'\nimport type {\n PartialTranslationExtension,\n Translation,\n TranslationEntries\n} from '@helpwave/internationalization'\nimport { combineTranslation, ICUUtil } from '@helpwave/internationalization'\nimport { ArrayUtil } from '@/src/utils/array'\nimport type { SingleOrArray } from '@/src/utils/typing'\nimport type { HightideTranslationEntries, HightideTranslationLocales } from '@/src/i18n/translations'\nimport { hightideTranslation } from '@/src/i18n/translations'\nimport { useMemo } from 'react'\n\n/**\n * Use for translations where you know that all values are ICU strings.\n *\n * This most likely is the case for Translations provided by a backend,\n * for more dynamic and typesafe translation use useTranslation instead\n */\nexport function useICUTranslation>(\n translations: Translation[] | Translation,\n locale: L\n) {\n translations = Array.isArray(translations) ? translations : [translations]\n\n return function translate(\n key: string,\n values?: Record\n ): string {\n try {\n for (let i = 0; i < translations.length; i++) {\n const localizedTranslation = translations[i][locale]\n if (!localizedTranslation) continue\n\n const msg = localizedTranslation[key]\n if (typeof msg === 'string') {\n return ICUUtil.interpret(msg, values)\n }\n }\n console.warn(`useTranslation: No translation for key \"${key}\" found.`)\n } catch (e) {\n console.error(`useTranslation: Error translating key \"${String(key)}\"`, e)\n }\n\n return `{{${String(locale)}:${String(key)}}}`\n }\n}\n\ntype UseHidetideTranslationOverwrites = {\n locale?: HightideTranslationLocales,\n}\n\ntype HidetideTranslationExtension\n = PartialTranslationExtension\n/**\n * A wrapper for the useHightideTranslation to load and specify the translations for the library\n */\nexport function useHightideTranslation(\n extensions?: SingleOrArray>,\n overwrites?: UseHidetideTranslationOverwrites\n) {\n const { locale: inferredLocale } = useLocale()\n const locale = overwrites?.locale ?? inferredLocale\n\n return useMemo(() => combineTranslation([\n ... ArrayUtil.resolveSingleOrArray(extensions),\n hightideTranslation as HidetideTranslationExtension\n ], locale),\n [locale, extensions])\n}\n","import type { ReactNode, JSX, ForwardedRef } from 'react'\nimport { forwardRef } from 'react'\nimport type { SelectRootProps } from './SelectRoot'\nimport { SelectRoot } from './SelectRoot'\nimport type { SelectButtonProps } from './SelectButton'\nimport { SelectButton } from './SelectButton'\nimport type { SelectContentProps } from './SelectContent'\nimport { SelectContent } from './SelectContent'\nimport type { SelectOptionType } from './SelectContext'\n\nexport type SelectProps = SelectRootProps & {\n contentPanelProps?: SelectContentProps,\n buttonProps?: Omit, 'selectedDisplay'> & {\n selectedDisplay?: (value: SelectOptionType | null) => ReactNode,\n } & { [key: string]: unknown },\n};\n\nexport const Select = forwardRef>(function Select(\n { children, contentPanelProps, buttonProps, ...props }: SelectProps,\n ref: ForwardedRef\n) {\n\n return (\n {...props}>\n | null) => {\n if (!buttonProps?.selectedDisplay) return undefined\n return buttonProps.selectedDisplay(value as SelectOptionType)\n }}\n />\n {children}\n \n )\n}) as (props: SelectProps & React.RefAttributes) => JSX.Element\n","import type { ReactNode, RefObject } from 'react'\nimport { useCallback, useEffect, useId, useMemo, useState } from 'react'\nimport { SelectContext } from './SelectContext'\nimport type { SelectContextConfig, SelectContextLayout, SelectOptionType } from './SelectContext'\nimport { useSelect } from '@/src/components/user-interaction/Select/useSelect'\nimport { DOMUtils } from '@/src/utils/dom'\nimport type { FormFieldDataHandling } from '@/src/components/form/FormField'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\nimport type { FormFieldInteractionStates } from '@/src/components/form/FieldLayout'\nimport { PopUpContext } from '@/src/components/layout/popup/PopUpContext'\n\nexport interface SelectIds {\n trigger: string,\n content: string,\n listbox: string,\n searchInput: string,\n}\n\nexport interface SelectRootProps extends Partial>, Partial {\n value?: T | null,\n initialValue?: T | null,\n compareFunction?: (a: T | null, b: T | null) => boolean,\n initialIsOpen?: boolean,\n onClose?: () => void,\n onIsOpenChange?: (isOpen: boolean) => void,\n showSearch?: boolean,\n iconAppearance?: 'left' | 'right' | 'none',\n children: ReactNode,\n}\n\nexport function SelectRoot({\n children,\n value,\n onValueChange,\n onEditComplete,\n initialValue,\n compareFunction,\n initialIsOpen = false,\n onClose,\n onIsOpenChange,\n showSearch = true,\n iconAppearance = 'right',\n invalid = false,\n disabled = false,\n readOnly = false,\n required = false,\n}: SelectRootProps) {\n const [triggerRef, setTriggerRef] = useState | null>(null)\n const [options, setOptions] = useState[]>([])\n const generatedId = useId()\n const [ids, setIds] = useState({\n trigger: 'select-' + generatedId,\n content: 'select-content-' + generatedId,\n listbox: 'select-listbox-' + generatedId,\n searchInput: 'select-search-' + generatedId,\n })\n\n\n const registerOption = useCallback(\n (item: SelectOptionType) => {\n setOptions((prev) => {\n const next = prev.filter((o) => o.value !== item.value)\n next.push(item)\n next.sort((a, b) =>\n DOMUtils.compareDocumentPosition(a.ref.current, b.ref.current))\n return next\n })\n return () =>\n setOptions((prev) => prev.filter((o) => o.value !== item.value))\n },\n []\n )\n\n const registerTrigger = useCallback((ref: RefObject) => {\n setTriggerRef(ref)\n return () => {\n setTriggerRef(null)\n }\n }, [])\n\n const compare = useMemo(() => compareFunction ?? Object.is, [compareFunction])\n\n const idToOptionMap = useMemo(() => {\n return options.reduce((acc, o) => {\n acc[o.id] = o\n return acc\n }, {} as Record>)\n }, [options])\n\n const mappedValueId = useMemo(() => {\n if(value === undefined) return undefined\n return options.find((o) => compare(o.value, value))?.id ?? null\n }, [options, value, compare])\n\n const mappedInitialValueId = useMemo(() => {\n if(initialValue === undefined) return undefined\n return options.find((o) => compare(o.value, initialValue))?.id ?? null\n }, [options, initialValue, compare])\n\n const onValueChangeStable = useEventCallbackStabilizer(onValueChange)\n const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)\n const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)\n\n const onValueChangeWrapper = useCallback((value: string) => {\n const option = idToOptionMap[value]\n if(option === undefined) {\n console.warn(`Attempted to select an option ${value} that is not valid`)\n return\n }\n onValueChangeStable(option.value)\n }, [onValueChangeStable, idToOptionMap])\n\n const onEditCompleteWrapper = useCallback((value: string) => {\n const option = idToOptionMap[value]\n if(option === undefined) {\n console.warn(`Attempted to edit complete an option ${value} that is not valid`)\n return\n }\n onEditCompleteStable(option.value)\n }, [onEditCompleteStable, idToOptionMap])\n\n\n const state = useSelect({\n value: mappedValueId,\n initialValue: mappedInitialValueId,\n onValueChange: onValueChangeWrapper,\n onEditComplete: onEditCompleteWrapper,\n options,\n initialIsOpen,\n onClose,\n onIsOpenChange: onIsOpenChangeStable,\n })\n const { setSearchQuery } = state\n\n useEffect(() => {\n if(showSearch === false) {\n setSearchQuery('')\n }\n }, [showSearch, setSearchQuery])\n\n const config: SelectContextConfig = useMemo(() => ({\n iconAppearance,\n ids,\n setIds,\n }), [iconAppearance, ids, setIds])\n\n const layout: SelectContextLayout = useMemo(() => ({\n triggerRef,\n registerTrigger,\n }), [triggerRef, registerTrigger])\n\n return (\n \n \n {children}\n \n \n )\n}\n","import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'\nimport { createContext, useContext } from 'react'\nimport type { UseSelectFirstHighlightBehavior } from './useSelect'\nimport type { FormFieldInteractionStates } from '../../form/FieldLayout'\n\nexport interface SelectOptionType {\n id: string,\n value: T,\n label?: string,\n display?: ReactNode,\n disabled?: boolean,\n ref: RefObject,\n}\n\nexport interface SelectContextIds {\n trigger: string,\n content: string,\n listbox: string,\n searchInput: string,\n}\n\nexport interface SelectContextState extends FormFieldInteractionStates {\n selectedId: string | null,\n options: ReadonlyArray>,\n highlightedId: string | null,\n isOpen: boolean,\n}\n\nexport interface SelectContextComputedState {\n visibleOptionIds: ReadonlyArray,\n idToOptionMap: Record>,\n}\n\nexport interface SelectContextActions {\n registerOption(option: SelectOptionType): () => void,\n toggleSelection(id: string): void,\n highlightFirst(): void,\n highlightLast(): void,\n highlightNext(): void,\n highlightPrevious(): void,\n highlightItem(id: string): void,\n handleTypeaheadKey(key: string): void,\n setIsOpen(open: boolean, behavior?: UseSelectFirstHighlightBehavior): void,\n toggleIsOpen(behavior?: UseSelectFirstHighlightBehavior): void,\n}\n\nexport interface SelectContextLayout {\n triggerRef: RefObject,\n registerTrigger(element: RefObject): () => void,\n}\n\nexport interface SelectContextSearch {\n hasSearch: boolean,\n searchQuery?: string,\n setSearchQuery(query: string): void,\n}\n\nexport type SelectIconAppearance = 'left' | 'right' | 'none';\n\nexport interface SelectContextConfig {\n iconAppearance: SelectIconAppearance,\n ids: SelectContextIds,\n setIds: Dispatch>,\n}\n\nexport interface SelectContextType extends SelectContextActions, SelectContextState, SelectContextComputedState {\n config: SelectContextConfig,\n layout: SelectContextLayout,\n search: SelectContextSearch,\n}\n\nexport const SelectContext = createContext | null>(null)\n\nexport function useSelectContext(): SelectContextType {\n const ctx = useContext(SelectContext)\n if (!ctx) throw new Error('useSelectContext must be used within SelectRoot')\n return ctx as SelectContextType\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useState\n} from 'react'\nimport { useSingleSelection } from '@/src/hooks/useSingleSelection'\nimport { useListNavigation } from '@/src/hooks/useListNavigation'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\nimport { useSearch } from '@/src/hooks/useSearch'\nimport { useTypeAheadSearch } from '@/src/hooks/useTypeAheadSearch'\n\nexport interface UseSelectOption {\n id: string,\n label?: string,\n disabled?: boolean,\n}\n\nexport interface UseSelectOptions {\n options: ReadonlyArray,\n value?: string | null,\n initialValue?: string | null,\n initialIsOpen?: boolean,\n onValueChange?: (value: string) => void,\n onEditComplete?: (value: string) => void,\n onClose?: () => void,\n onIsOpenChange?: (isOpen: boolean) => void,\n typeAheadResetMs?: number,\n}\n\nexport type UseSelectFirstHighlightBehavior = 'first' | 'last';\n\nexport interface UseSelectState {\n value: string | null,\n highlightedValue: string | undefined,\n isOpen: boolean,\n searchQuery: string,\n options: ReadonlyArray,\n}\n\nexport interface UseSelectComputedState {\n visibleOptionIds: ReadonlyArray,\n}\n\nexport interface UseSelectActions {\n setIsOpen: (isOpen: boolean, behavior?: UseSelectFirstHighlightBehavior) => void,\n toggleOpen: (behavior?: UseSelectFirstHighlightBehavior) => void,\n setSearchQuery: (query: string) => void,\n highlightFirst: () => void,\n highlightLast: () => void,\n highlightNext: () => void,\n highlightPrevious: () => void,\n highlightItem: (value: string) => void,\n selectValue: (value: string) => void,\n handleTypeaheadKey: (key: string) => void,\n}\n\nexport interface UseSelectReturn extends UseSelectState, UseSelectComputedState, UseSelectActions {}\n\nexport function useSelect({\n options,\n value: controlledValue,\n onValueChange,\n onEditComplete,\n initialValue = null,\n onClose,\n onIsOpenChange,\n initialIsOpen = false,\n typeAheadResetMs = 500,\n}: UseSelectOptions): UseSelectReturn {\n const [isOpen, setIsOpen] = useState(initialIsOpen)\n const [searchQuery, setSearchQuery] = useState('')\n\n const onValueChangeStable = useEventCallbackStabilizer(onValueChange)\n const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)\n const onCloseStable = useEventCallbackStabilizer(onClose)\n const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)\n\n const onSelectionChangeWrapper = useCallback((id: string | null) => {\n if(id === null) return\n onValueChangeStable(id)\n onEditCompleteStable(id)\n setIsOpen(false)\n }, [onValueChangeStable, onEditCompleteStable, setIsOpen])\n\n const { selection, selectValue } = useSingleSelection({\n options: options,\n selection: controlledValue,\n onSelectionChange: onSelectionChangeWrapper,\n initialSelection: initialValue,\n })\n\n const { searchResult: visibleOptions } = useSearch({\n items: options,\n searchQuery,\n toTags: useCallback((o: UseSelectOption) => [o.label], []),\n })\n\n const visibleOptionIds = useMemo(() => visibleOptions.map((o) => o.id), [visibleOptions])\n\n const enabledOptions = useMemo(() => visibleOptions.filter((o) => !o.disabled), [visibleOptions])\n\n const {\n highlightedId,\n highlight: listNavHighlight,\n first: listNavFirst,\n last: listNavLast,\n next: listNavNext,\n previous: listNavPrevious,\n } = useListNavigation({\n options: enabledOptions.map((o) => o.id),\n initialValue: selection,\n })\n\n const { addToTypeAhead, reset: typeAheadReset } = useTypeAheadSearch({\n options: enabledOptions,\n resetTimer: typeAheadResetMs,\n toString: (o) => o.label ?? '',\n onResultChange: useCallback((option: UseSelectOption | null) => {\n if (option) listNavHighlight(option.id)\n }, [listNavHighlight]),\n })\n\n useEffect(() => {\n if (!isOpen) typeAheadReset()\n }, [isOpen, typeAheadReset])\n\n const state: UseSelectState = useMemo(() => ({\n value: selection,\n highlightedValue: highlightedId,\n isOpen,\n searchQuery,\n options,\n }), [selection, highlightedId, isOpen, searchQuery, options])\n\n const computedState: UseSelectComputedState = useMemo(() => ({\n visibleOptionIds,\n }), [visibleOptionIds])\n\n const highlightItem = useCallback((value: string) => {\n if (!enabledOptions.some((o) => o.id === value)) return\n listNavHighlight(value)\n }, [enabledOptions, listNavHighlight])\n\n const setIsOpenWrapper = useCallback((isOpen: boolean, behavior?: UseSelectFirstHighlightBehavior) => {\n behavior = behavior ?? 'first'\n if(isOpen) {\n if(selection == null) {\n if(behavior === 'first') {\n listNavFirst()\n } else if (behavior === 'last') {\n listNavLast()\n }\n } else {\n highlightItem(selection)\n }\n } else {\n setSearchQuery('')\n onCloseStable?.()\n }\n setIsOpen(isOpen)\n onIsOpenChangeStable(isOpen)\n }, [setIsOpen, highlightItem, onCloseStable, setSearchQuery, onIsOpenChangeStable, selection, listNavFirst, listNavLast])\n\n const toggleOpenWrapper = useCallback((behavior?: UseSelectFirstHighlightBehavior) => {\n const next = !isOpen\n setIsOpenWrapper(next, behavior)\n }, [isOpen, setIsOpenWrapper])\n\n const actions: UseSelectActions = useMemo(() => ({\n selectValue: (id: string) => selectValue(id),\n setIsOpen: setIsOpenWrapper,\n toggleOpen: toggleOpenWrapper,\n setSearchQuery,\n highlightFirst: listNavFirst,\n highlightLast: listNavLast,\n highlightNext: listNavNext,\n highlightPrevious: listNavPrevious,\n highlightItem,\n handleTypeaheadKey: addToTypeAhead,\n }), [selectValue, setIsOpenWrapper, listNavFirst, listNavLast, listNavNext, listNavPrevious, highlightItem, addToTypeAhead, toggleOpenWrapper])\n\n return useMemo(() => ({\n ...state,\n ...computedState,\n ...actions,\n }), [state, computedState, actions])\n}\n","import { useCallback, useMemo } from 'react'\nimport { useControlledState } from '@/src/hooks/useControlledState'\n\nexport interface SelectionOption {\n id: string,\n disabled?: boolean,\n}\n\nexport interface UseSingleSelectionOptions {\n options: ReadonlyArray,\n selection?: string | null,\n onSelectionChange?: (selection: string | null) => void,\n initialSelection?: string | null,\n isLooping?: boolean,\n}\n\nexport interface SingleSelectionReturn {\n selection: string | null,\n selectedIndex: number | null,\n selectByIndex: (index: number) => void,\n selectValue: (value: string | null) => void,\n selectFirst: () => void,\n selectLast: () => void,\n selectNext: () => void,\n selectPrevious: () => void,\n}\n\nexport function useSingleSelection({\n options: optionsList,\n selection: controlledSelection,\n onSelectionChange,\n initialSelection,\n isLooping = true,\n}: UseSingleSelectionOptions): SingleSelectionReturn {\n const [selection, setSelection] = useControlledState({\n value: controlledSelection,\n onValueChange: onSelectionChange,\n defaultValue: initialSelection,\n })\n\n const selectedIndex = useMemo(() => {\n return optionsList.findIndex((o) => o.id === selection)\n }, [optionsList, selection])\n\n const enabledOptions = useMemo(() => optionsList.filter((o) => !o.disabled), [optionsList])\n\n const changeSelection = useCallback((next: string | null) => {\n const option = enabledOptions.find((o) => o.id === next)\n if(!option && next != null) {\n console.warn(`Attempted to select an option ${next} that is not valid or disabled`)\n return\n }\n setSelection(option?.id ?? null)\n }, [enabledOptions, setSelection])\n\n const selectByIndex = useCallback((index: number) => {\n const option = optionsList[index]\n if(!option || option.disabled || index < 0 || index >= optionsList.length) {\n console.warn(`Attempted to select an index ${index} that is not valid or disabled`)\n return\n }\n setSelection(option.id)\n }, [optionsList, setSelection])\n\n const selectFirst = useCallback(() => {\n if(enabledOptions.length === 0) return\n const first = enabledOptions.find((o) => !o.disabled)\n setSelection(first?.id ?? null)\n }, [enabledOptions, setSelection])\n\n const selectLast = useCallback(() => {\n if(enabledOptions.length === 0) return\n const last = [...enabledOptions].reverse().find((o) => !o.disabled)\n setSelection(last?.id ?? null)\n }, [enabledOptions, setSelection])\n\n const selectNext = useCallback(() => {\n if(enabledOptions.length === 0) return\n let currentIndex = enabledOptions.findIndex((o) => o.id === selection)\n if(currentIndex === -1) currentIndex = 0\n const nextIndex = isLooping ? (currentIndex + 1) % enabledOptions.length : Math.min(currentIndex + 1, enabledOptions.length - 1)\n setSelection(enabledOptions[nextIndex].id)\n }, [enabledOptions, selection, isLooping, setSelection])\n\n const selectPrevious = useCallback(() => {\n if(enabledOptions.length === 0) return\n let currentIndex = enabledOptions.findIndex((o) => o.id === selection)\n if(currentIndex === -1) currentIndex = enabledOptions.length\n const previousIndex = isLooping ? (currentIndex - 1 + enabledOptions.length) % enabledOptions.length : Math.max(currentIndex - 1, 0)\n setSelection(enabledOptions[previousIndex].id)\n }, [enabledOptions, selection, isLooping, setSelection])\n\n return useMemo(() => ({\n selection,\n selectedIndex,\n selectByIndex,\n selectValue: changeSelection,\n selectFirst,\n selectLast,\n selectNext,\n selectPrevious,\n }), [selection, selectedIndex, changeSelection, selectFirst, selectLast, selectNext, selectPrevious, selectByIndex])\n}\n","import { useCallback, useMemo } from 'react'\nimport { useControlledState } from '@/src/hooks/useControlledState'\n\nexport interface ListNavigationReturn {\n highlightedId: string | null,\n highlight: (id: string) => void,\n first: () => void,\n last: () => void,\n next: () => void,\n previous: () => void,\n}\n\nexport interface ListNavigationOptions {\n options: ReadonlyArray,\n value?: string | null,\n onValueChange?: (highlightedId: string | null) => void,\n initialValue?: string | null,\n}\n\nexport function useListNavigation({\n options,\n value,\n onValueChange,\n initialValue,\n}: ListNavigationOptions): ListNavigationReturn {\n const [highlightedId, setHighlightedId] = useControlledState({\n value,\n onValueChange,\n defaultValue: initialValue,\n })\n\n const resolvedHighlightId = useMemo(() => {\n if (options.length === 0) return null\n if (highlightedId != null && options.includes(highlightedId)) {\n return highlightedId\n }\n return options[0] ?? null\n }, [options, highlightedId])\n\n const highlight = useCallback((id: string) => {\n if (!options.includes(id)) return\n setHighlightedId(id)\n }, [options, setHighlightedId])\n\n const next = useCallback(() => {\n if (options.length <= 1 || resolvedHighlightId === null) return\n const idx = options.indexOf(resolvedHighlightId)\n const nextIdx = idx < 0 ? 0 : (idx + 1) % options.length\n setHighlightedId(options[nextIdx])\n }, [options, resolvedHighlightId, setHighlightedId])\n\n const previous = useCallback(() => {\n if (options.length <= 1 || resolvedHighlightId === null) return\n const idx = options.indexOf(resolvedHighlightId)\n const previousIdx =\n idx <= 0\n ? options.length - 1\n : (idx - 1 + options.length) % options.length\n setHighlightedId(options[previousIdx])\n }, [options, resolvedHighlightId, setHighlightedId])\n\n const first = useCallback(() => {\n if (options.length <= 1 || resolvedHighlightId === null) return\n setHighlightedId(options[0])\n }, [options, resolvedHighlightId, setHighlightedId])\n\n const last = useCallback(() => {\n if (options.length <= 1 || resolvedHighlightId === null) return\n setHighlightedId(options[options.length - 1])\n }, [options, resolvedHighlightId, setHighlightedId])\n\n return useMemo((): ListNavigationReturn => ({\n highlightedId: resolvedHighlightId,\n highlight,\n first,\n last,\n next,\n previous,\n }), [resolvedHighlightId, highlight, first, last, next, previous])\n}\n","import { useMemo } from 'react'\nimport { MultiSearchWithMapping } from '@/src/utils/simpleSearch'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\n\nexport interface UseSearchOptions {\n items: ReadonlyArray,\n searchQuery: string,\n toTags?: (value: T) => string[],\n}\n\nexport interface UseSearchReturn {\n searchResult: ReadonlyArray,\n}\n\nfunction defaultToTags(value: T): string[] {\n return [String(value)]\n}\n\nexport function useSearch({\n items,\n searchQuery,\n toTags,\n}: UseSearchOptions): UseSearchReturn {\n const toTagsResolved = toTags ?? defaultToTags\n const toTagsStable = useEventCallbackStabilizer(toTagsResolved)\n\n const searchResult = useMemo(() => {\n const q = searchQuery.trim().toLowerCase()\n if (!q) return items\n return MultiSearchWithMapping(searchQuery, [...items], (item) => toTagsStable(item))\n }, [items, searchQuery, toTagsStable])\n\n return useMemo((): UseSearchReturn => ({\n searchResult,\n }), [searchResult])\n}\n","/**\n * Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n *\n * @param search The list of search strings e.g. `[name, type]`\n *\n * @param objects The list of objects to be searched in\n *\n * @param mapping The mapping of objects to the string properties they fulfil\n *\n * @return The list of objects that match all search strings\n */\nexport const MultiSubjectSearchWithMapping = (search: string[], objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n if(!mappedSearchKeywords) {\n return true\n }\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/**\n * Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n *\n * @param search The search string e.g `name`\n *\n * @param objects The list of objects to be searched in\n *\n * @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n *\n * @return The list of objects that match the search string\n */\nexport const MultiSearchWithMapping = (search: string, objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n if(!mappedSearchKeywords) {\n return true\n }\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/**\n * Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n *\n * @param search The search string e.g `name`\n *\n * @param objects The list of objects to be searched in\n *\n * @param mapping The mapping of objects to a string that is compared to the search\n *\n * @return The list of objects that match the search string\n */\nexport const SimpleSearchWithMapping = (search: string, objects: T[], mapping: (value: T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/**\n * Finds all values matching the search value and returns the list of all matches.\n *\n * @param search The search string e.g `name`\n *\n * @param objects The list of objects to be searched in\n *\n * @return The list of objects that match the search string\n */\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { useCallback, useEffect, useRef } from 'react'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\n\nexport interface UseTypeAheadSearchOptions {\n options: ReadonlyArray,\n resetTimer: number,\n toString?: (value: T) => string,\n onResultChange: (value: T | null) => void,\n}\n\nexport interface UseTypeAheadSearchReturn {\n addToTypeAhead: (str: string) => void,\n reset: () => void,\n}\n\nfunction defaultToString(value: T): string {\n return String(value)\n}\n\nexport function useTypeAheadSearch({\n options,\n resetTimer,\n toString: toStringProp,\n onResultChange,\n}: UseTypeAheadSearchOptions): UseTypeAheadSearchReturn {\n const bufferRef = useRef('')\n const timeoutRef = useRef | null>(null)\n\n const toString = toStringProp ?? defaultToString\n const toStringStable = useEventCallbackStabilizer(toString)\n const onResultChangeStable = useEventCallbackStabilizer(onResultChange)\n\n const reset = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = null\n }\n bufferRef.current = ''\n onResultChangeStable(null)\n }, [onResultChangeStable])\n\n useEffect(() => () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n }, [])\n\n const addToTypeAhead = useCallback((str: string) => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n bufferRef.current += str\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null\n bufferRef.current = ''\n onResultChangeStable(null)\n }, resetTimer)\n\n const buf = bufferRef.current.trim().toLowerCase()\n if (!buf) {\n onResultChangeStable(null)\n return\n }\n const found = options.find((opt) => {\n const s = toStringStable(opt)?.trim().toLowerCase() ?? ''\n return s.startsWith(buf)\n })\n onResultChangeStable(found ?? null)\n }, [options, resetTimer, toStringStable, onResultChangeStable])\n\n return { addToTypeAhead, reset }\n}\n","function compareDocumentPosition(a: Node | null | undefined, b: Node | null | undefined) {\n if (!a && !b) return 0\n if (!a) return 1\n if (!b) return -1\n return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n}\n\nexport const DOMUtils = {\n compareDocumentPosition,\n}","import type { Dispatch, RefObject, SetStateAction } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport type PopUpContextType = {\n isOpen: boolean,\n setIsOpen: Dispatch>,\n popUpId: string,\n triggerId: string,\n triggerRef: RefObject | null,\n setTriggerRef: (ref: RefObject | null) => void,\n}\n\nexport const PopUpContext = createContext(null)\n\nexport function usePopUpContext() {\n const context = useContext(PopUpContext)\n if (!context) {\n throw new Error('usePopUpContext must be used within a ')\n }\n return context\n}\n","import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'\nimport { forwardRef, useEffect, useRef } from 'react'\nimport type { SelectOptionType } from './SelectContext'\nimport { useSelectContext } from './SelectContext'\nimport { useHightideTranslation } from '@/src/i18n/useHightideTranslation'\nimport { ExpansionIcon } from '@/src/components/display-and-visualization/ExpansionIcon'\nimport { SelectOptionDisplayContext } from './SelectOption'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport interface SelectButtonProps extends ComponentPropsWithoutRef<'div'> {\n 'placeholder'?: ReactNode,\n 'disabled'?: boolean,\n 'selectedDisplay'?: (value: SelectOptionType | null) => ReactNode,\n 'hideExpansionIcon'?: boolean,\n 'data-name'?: string,\n}\n\nexport const SelectButton = forwardRef>(\n function SelectButton(\n {\n id,\n placeholder,\n disabled: disabledOverride,\n selectedDisplay,\n hideExpansionIcon = false,\n ...props\n }: SelectButtonProps,\n ref: ForwardedRef\n ) {\n const translation = useHightideTranslation()\n const context = useSelectContext()\n const { config, layout } = context\n const { setIds } = config\n const { registerTrigger } = layout\n\n useEffect(() => {\n if (id) setIds((prev) => ({ ...prev, trigger: id }))\n }, [id, setIds])\n\n const innerRef = useRef(null)\n\n useEffect(() => {\n const unregister = registerTrigger(innerRef)\n return () => unregister()\n }, [registerTrigger])\n\n const disabled = !!disabledOverride || !!context.disabled\n const readOnly = !!context.readOnly\n const invalid = context.invalid\n const hasValue = context.selectedId !== null\n const hasInteractions = !readOnly && !disabled\n const selectedOption = context.selectedId ? (context.idToOptionMap[context.selectedId] ?? null) : null\n\n return (\n {\n if (!hasInteractions) return\n props.onClick?.(event)\n context.toggleIsOpen()\n }}\n onKeyDown={(event) => {\n props.onKeyDown?.(event)\n if (!hasInteractions) return\n switch (event.key) {\n case 'Enter':\n case ' ':\n context.toggleIsOpen()\n event.preventDefault()\n event.stopPropagation()\n break\n case 'ArrowDown':\n context.setIsOpen(true, 'first')\n event.preventDefault()\n event.stopPropagation()\n break\n case 'ArrowUp':\n context.setIsOpen(true, 'last')\n event.preventDefault()\n event.stopPropagation()\n break\n }\n }}\n data-name={props['data-name'] ?? 'select-button'}\n data-value={hasValue ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n data-readonly={readOnly ? '' : undefined}\n data-invalid={invalid ? '' : undefined}\n tabIndex={disabled ? -1 : 0}\n role=\"button\"\n aria-invalid={invalid}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n aria-haspopup=\"dialog\"\n aria-expanded={context.isOpen}\n aria-controls={context.isOpen ? context.config.ids.content : undefined}\n >\n \n {hasValue\n ? selectedDisplay?.(selectedOption) ?? (selectedOption?.display)\n : placeholder ?? translation('clickToSelect')}\n \n {!hideExpansionIcon && }\n \n )\n }\n)\n","import clsx from 'clsx'\nimport { CheckIcon } from 'lucide-react'\nimport type { HTMLAttributes, ReactNode, RefObject } from 'react'\nimport { createContext, forwardRef, useContext, useEffect, useId, useRef } from 'react'\nimport type { SelectIconAppearance } from './SelectContext'\nimport { useSelectContext } from './SelectContext'\n\nexport type SelectOptionDisplayLocation = 'trigger' | 'list';\n\nexport const SelectOptionDisplayContext = createContext(null)\n\nexport function useSelectOptionDisplayLocation(): SelectOptionDisplayLocation {\n const context = useContext(SelectOptionDisplayContext)\n if (!context) {\n throw new Error('useSelectOptionDisplayLocation must be used within a SelectOptionDisplayContext')\n }\n return context\n}\n\nexport interface SelectOptionProps extends HTMLAttributes {\n value: T,\n label: string,\n disabled?: boolean,\n iconAppearance?: SelectIconAppearance,\n}\n\nexport const SelectOption = forwardRef>(function SelectOption({\n children,\n label,\n value,\n disabled = false,\n iconAppearance,\n ...props\n}: SelectOptionProps, ref) {\n const context= useSelectContext()\n const { registerOption } = context\n const itemRef = useRef(null)\n\n const display: ReactNode = children ?? label\n const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance\n\n const generatedId = useId()\n const optionId = props?.id ?? 'select-option-' + generatedId\n\n useEffect(() => {\n return registerOption({\n id: optionId,\n value,\n label,\n display,\n disabled: disabled,\n ref: itemRef as React.RefObject,\n })\n }, [value, label, disabled, registerOption, display, optionId])\n\n const isHighlighted = context.highlightedId === optionId\n const isSelected = context.selectedId === optionId\n const isVisible = context.visibleOptionIds.includes(optionId)\n\n return (\n {\n itemRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as RefObject).current = node\n }}\n id={optionId}\n hidden={!isVisible}\n role=\"option\"\n aria-disabled={disabled}\n aria-selected={isSelected}\n aria-hidden={!isVisible}\n\n data-name=\"select-list-option\"\n data-highlighted={isHighlighted ? '' : undefined}\n data-selected={isSelected ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n data-visible={isVisible ? '' : undefined}\n\n onClick={(event) => {\n if (!disabled) {\n context.toggleSelection(optionId)\n props.onClick?.(event)\n }\n }}\n onMouseEnter={(event) => {\n if (!disabled) {\n context.highlightItem(optionId)\n props.onMouseEnter?.(event)\n }\n }}\n >\n {iconAppearanceResolved === 'left' && context.selectedId !== null && (\n \n )}\n {display}\n {iconAppearanceResolved === 'right' && context.selectedId !== null && (\n \n )}\n \n )\n})\n","import type { ComponentProps, ForwardedRef } from 'react'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport { useSelectContext } from './SelectContext'\nimport clsx from 'clsx'\nimport { useHightideTranslation } from '@/src/i18n/useHightideTranslation'\nimport { PopUp, type PopUpProps } from '@/src/components/layout/popup/PopUp'\nimport { Input } from '@/src/components/user-interaction/input/Input'\nimport { Visibility } from '@/src/components/layout/Visibility'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport interface SelectContentProps extends PopUpProps {\n showSearch?: boolean,\n searchInputProps?: Omit, 'value' | 'onValueChange'>,\n}\n\nexport const SelectContent = forwardRef(function SelectContent({\n id, options, showSearch: showSearchOverride, searchInputProps, ...props\n}: SelectContentProps, ref: ForwardedRef) {\n const translation = useHightideTranslation()\n const innerRef = useRef(null)\n const searchInputRef = useRef(null)\n\n const context = useSelectContext()\n const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context\n const { setIds } = config\n\n useEffect(() => {\n if (id) setIds((prev) => ({ ...prev, content: id }))\n }, [id, setIds])\n\n const showSearch = showSearchOverride ?? context.search.hasSearch\n const listboxAriaLabel = showSearch ? translation('searchResults') : undefined\n\n const keyHandler = useCallback(\n (event: React.KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowDown':\n highlightNext()\n event.preventDefault()\n break\n case 'ArrowUp':\n highlightPrevious()\n event.preventDefault()\n break\n case 'Home':\n event.preventDefault()\n highlightFirst()\n break\n case 'End':\n event.preventDefault()\n highlightLast()\n break\n case 'Enter':\n case ' ':\n if (showSearch && event.key === ' ') return\n if (highlightedId) {\n toggleSelection(highlightedId)\n event.preventDefault()\n }\n break\n default:\n if (!showSearch && !event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1) {\n handleTypeaheadKey(event.key)\n event.preventDefault()\n }\n break\n }\n },\n [showSearch, handleTypeaheadKey, toggleSelection, highlightedId, highlightNext, highlightPrevious, highlightFirst, highlightLast]\n )\n\n return (\n {\n context.setIsOpen(false)\n props.onClose?.()\n }}\n aria-labelledby={context.config.ids.trigger}\n className={clsx('select-content', props.className)}\n >\n {showSearch && (\n \n )}\n \n {props.children}\n \n 0 })}\n >\n {translation('nResultsFound', { count: context.visibleOptionIds.length })}\n \n \n \n \n )\n})\n","import type { RefObject } from 'react'\nimport { forwardRef, useCallback, useContext, useMemo, useRef } from 'react'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\nimport { Portal } from '../../utils/Portal'\nimport type { AnchoredFloatingContainerProps } from '../AnchoredFloatingContainer'\nimport { AnchoredFloatingContainer } from '../AnchoredFloatingContainer'\nimport { Visibility } from '../Visibility'\nimport type { UseFocusTrapProps } from '@/src/hooks/focus/useFocusTrap'\nimport { FocusTrap } from '../../utils/FocusTrap'\nimport type { UseOutsideClickHandlers, UseOutsideClickOptions } from '@/src/hooks/useOutsideClick'\nimport { useOutsideClick } from '@/src/hooks/useOutsideClick'\nimport { PropsUtil } from '@/src/utils/propsUtil'\nimport { usePresenceRef } from '@/src/hooks/usePresenceRef'\nimport { useLogOnce } from '@/src/hooks/useLogOnce'\nimport { PopUpContext } from './PopUpContext'\nimport { useOverlayRegistry } from '@/src/hooks/useOverlayRegistry'\nimport { useScrollObserver } from '@/src/hooks/useScrollObserver'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport interface PopUpProps extends Omit, Partial {\n 'isOpen'?: boolean,\n 'focusTrapOptions'?: Omit,\n 'outsideClickOptions'?: Partial,\n 'onClose'?: () => void,\n 'forceMount'?: boolean,\n 'anchorExcludedFromOutsideClick'?: boolean,\n 'anchor'?: RefObject,\n 'data-name'?: string,\n}\n\nexport const PopUp = forwardRef(function PopUp({\n children,\n isOpen: isOpenOverwrite,\n focusTrapOptions,\n onOutsideClick,\n onClose,\n outsideClickOptions,\n anchor: anchorOverwrite,\n forceMount = false,\n anchorExcludedFromOutsideClick = false,\n ...props\n}, forwardRef) {\n const context = useContext(PopUpContext)\n const isOpen = isOpenOverwrite ?? context?.isOpen ?? false\n const fallbackAnchorRef = useRef(null)\n const anchor = anchorOverwrite ?? context?.triggerRef ?? fallbackAnchorRef\n const id = props.id ?? context?.popUpId\n const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen })\n\n const onCloseStable = useEventCallbackStabilizer(onClose)\n const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick)\n\n const onCloseWrapper = useCallback(() => {\n onCloseStable()\n context?.setIsOpen(false)\n }, [onCloseStable, context])\n\n const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: useMemo(() => ['popup'], []) })\n const isInFront = tagPositions?.['popup'] === 0\n\n const isOutsideClickActive = isOpen && isInFront && (outsideClickOptions?.active ?? true)\n\n useOutsideClick({\n onOutsideClick: useCallback((event: MouseEvent | TouchEvent) => {\n if(event.defaultPrevented) return\n onCloseWrapper()\n onOutsideClickStable(event)\n event.preventDefault()\n }, [onCloseWrapper, onOutsideClickStable]),\n active: isOutsideClickActive,\n refs: [ref, ...(anchorExcludedFromOutsideClick || !anchor ? [] : [anchor]), ...(outsideClickOptions?.refs ?? [])],\n })\n\n useScrollObserver({ observedElementRef: ref, onScroll: onCloseWrapper, isActive: isOpen })\n\n useLogOnce('PopUp: Either provide \"aria-label\" or \"aria-labelledby\"', !props['aria-label'] && !props['aria-labelledby'])\n\n return (\n \n \n \n \n \n \n )\n})\n","'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useRef } from 'react'\nimport { forwardRef } from 'react'\nimport type { UseFocusTrapProps } from '@/src/hooks/focus/useFocusTrap'\nimport { useFocusTrap } from '@/src/hooks/focus/useFocusTrap'\n\nexport interface FocusTrapProps extends PropsWithChildren, UseFocusTrapProps {}\n\nexport const FocusTrap = ({ children, ...props }: FocusTrapProps) => {\n\n useFocusTrap({\n ...props\n })\n\n return children\n}\n\n\nexport interface FocusTrapWrapperProps extends HTMLAttributes, Omit {}\n\n/**\n * A wrapper for the useFocusTrap hook that directly renders it to a div\n */\nexport const FocusTrapWrapper = forwardRef(function FocusTrap({\n active,\n initialFocus,\n ...props\n}, forwardedRef) {\n const innerRef = useRef(null)\n\n useFocusTrap({ container: innerRef, active, initialFocus })\n\n return (\n {\n innerRef.current = node\n\n if (typeof forwardedRef === 'function') {\n forwardedRef(node)\n } else if (forwardedRef) {\n forwardedRef.current = node\n }\n }}\n {...props}\n />\n )\n})","'use client'\n\nimport type { RefObject } from 'react'\nimport { useCallback, useEffect, useId, useRef, useState } from 'react'\n\nconst createFocusGuard = () => {\n const div = document.createElement('div')\n Object.assign(div.style, {\n opacity: '0',\n outline: 'none',\n boxShadow: 'none',\n position: 'fixed',\n pointerEvents: 'none',\n touchAction: 'none',\n })\n div.tabIndex = 0\n div.setAttribute('data-hw-focus-guard', '')\n document.body.appendChild(div)\n return div\n}\n\nfunction getContainedFocusableElements(element: HTMLElement | null) {\n return [...(element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])') ?? [])]\n}\n\ntype ListenerType = {\n id: string,\n pause: () => void,\n unpause: () => void,\n focus: () => void,\n focusLast: () => void,\n container: RefObject,\n initialFocusElement?: RefObject,\n}\n\nclass FocusTrapService {\n // The last entry is always the active one\n private listeners: ListenerType[] = []\n\n public getActive(): ListenerType | undefined {\n if (this.listeners.length === 0) return undefined\n return this.listeners[this.listeners.length - 1]\n }\n\n private focusElement() {\n const active = this.getActive()\n if (!active) return\n const { container, initialFocusElement } = active\n const containerElement = container.current\n // Try in the following order\n // 1. Focus the initial element\n // 2. Focus the first focusable element in the container\n // 3. Focus the container\n if (initialFocusElement?.current) {\n initialFocusElement.current.focus()\n } else if(containerElement) {\n const elements = getContainedFocusableElements(containerElement)\n if (elements && elements.length > 0) {\n const first = elements[0] as HTMLElement\n first.focus()\n } else {\n containerElement.focus()\n }\n }\n }\n\n private onFocusIn = (event: FocusEvent) => {\n const active = this.getActive()\n if (!active || !active.container.current) return\n const { container } = active\n if (container.current && !container.current.contains(event.target as HTMLElement)) {\n this.focusElement()\n }\n }\n\n private removeGuards() {\n document.querySelectorAll('[data-hw-focus-guard]').forEach((node) => node.remove())\n }\n\n private addGuards() {\n document.body.insertAdjacentElement('afterbegin', createFocusGuard())\n document.body.insertAdjacentElement('beforeend', createFocusGuard())\n }\n\n private activate() {\n document.addEventListener('focusin', this.onFocusIn)\n this.addGuards()\n }\n\n private deactivate() {\n document.removeEventListener('focusin', this.onFocusIn)\n this.removeGuards()\n }\n\n register(listener: ListenerType) {\n this.listeners.push(listener)\n if (this.listeners.length === 1) {\n this.activate()\n }\n const active = listener\n this.listeners.forEach((listener) => {\n const { focus, pause } = listener\n if (listener === active) {\n focus()\n } else {\n pause()\n }\n })\n }\n\n unregister(id: string) {\n const index = this.listeners.findIndex(trap => trap.id === id)\n if (index !== -1) {\n const isActive = index === this.listeners.length - 1\n const listener = this.listeners[index]\n this.listeners = this.listeners.filter(listener => listener.id !== id)\n if (isActive) {\n // Deactivate all focus traps\n this.deactivate()\n // Focus last element in previous focus context\n listener.focusLast()\n // Activate and pause remaining focus traps\n const active = this.getActive()\n this.listeners.forEach((listener) => {\n const { pause, unpause } = listener\n if (listener === active) {\n unpause()\n } else {\n pause()\n }\n })\n // Reactivate\n if (this.listeners.length > 0) {\n this.activate()\n }\n }\n } else {\n console.warn(`Unable to unregister id ${id}: not found`)\n }\n }\n}\n\nconst service = new FocusTrapService()\n\nexport type UseFocusTrapProps = {\n container: RefObject,\n active: boolean,\n initialFocus?: RefObject,\n}\n\nexport const useFocusTrap = ({\n container,\n active,\n initialFocus,\n}: UseFocusTrapProps) => {\n const lastFocusRef = useRef(null)\n const [paused, setPaused] = useState(false)\n const id = useId()\n\n const focusElement = useCallback(() => {\n const containerElement = container.current\n // Try in the following order\n // 1. Focus the initial element\n // 2. Focus the first focusable element in the container\n if (initialFocus?.current) {\n initialFocus.current.focus()\n } else if (containerElement) {\n const elements = getContainedFocusableElements(containerElement)\n if (elements && elements.length > 0) {\n const first = elements[0] as HTMLElement\n first.focus()\n } else {\n console.warn('No focusable elements found in the focus trap. Affected element: ', containerElement)\n }\n }\n }, [container, initialFocus])\n\n useEffect(() => {\n if (active) {\n if (!lastFocusRef.current) {\n lastFocusRef.current = document.activeElement as HTMLElement\n }\n\n function pause() {\n setPaused(true)\n }\n\n function unpause() {\n setPaused(false)\n\n if (container.current && !container.current.contains(document.activeElement as HTMLElement)) {\n focusElement()\n }\n }\n\n function focus() {\n focusElement()\n setPaused(false)\n }\n\n function focusLast() {\n lastFocusRef.current?.focus()\n }\n\n service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus })\n return () => {\n service.unregister(id)\n lastFocusRef.current = null\n }\n }\n }, [active, container, focusElement, id, initialFocus])\n\n useEffect(() => {\n const containerElement = container.current\n if (active && !paused && containerElement) {\n function onKeyDown(event: KeyboardEvent) {\n const key = event.key\n const elements = getContainedFocusableElements(containerElement)\n const active = document.activeElement as HTMLElement\n const index = [...elements].findIndex(value => value === active)\n if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) {\n return\n }\n if (key === 'Tab') {\n const next = event.shiftKey ? -1 : 1\n const nextIndex = (index + next + elements.length) % elements.length\n const nextElement = elements[nextIndex] as HTMLElement\n nextElement.focus()\n event.preventDefault()\n }\n }\n\n // Register and unregister the listeners\n containerElement.addEventListener('keydown', onKeyDown)\n return () => {\n containerElement.removeEventListener('keydown', onKeyDown)\n }\n }\n }, [active, paused, container, initialFocus, focusElement])\n}\n","import type { RefObject } from 'react'\nimport { useEffect } from 'react'\n\nexport interface UseOutsideClickOptions {\n refs: RefObject[],\n active?: boolean,\n}\n\nexport interface UseOutsideClickHandlers {\n onOutsideClick: (event: MouseEvent | TouchEvent) => void,\n}\n\nexport interface UseOutsideClickProps extends UseOutsideClickOptions, UseOutsideClickHandlers{}\n\n\nexport const useOutsideClick = ({ refs, onOutsideClick, active = true }: UseOutsideClickProps) => {\n useEffect(() => {\n if (!active) return\n\n const listener = (event: MouseEvent | TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => ref.current && ref.current.contains(event.target as Node))) {\n return\n }\n\n onOutsideClick(event)\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n document.addEventListener('pointerdown', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n document.removeEventListener('pointerdown', listener)\n }\n }, [refs, onOutsideClick, active])\n}\n","import { useCallback, useEffect, useRef, useState } from 'react'\n\n\nexport interface UsePresenceRefProps {\n isOpen?: boolean,\n}\n\nexport const usePresenceRef = ({\n isOpen = true,\n}: UsePresenceRefProps) => {\n const [isPresent, setIsPresent] = useState(false)\n const ref = useRef(null)\n\n const refAssignment = useCallback((node: T | null) => {\n ref.current = node\n setIsPresent(prev => prev || !!node)\n }, [])\n\n\n useEffect(() => {\n if(!isOpen) {\n setIsPresent(false)\n }\n }, [isOpen])\n\n return {\n isPresent,\n ref,\n refAssignment,\n }\n}","import type { InputHTMLAttributes } from 'react'\nimport React, { forwardRef, useRef } from 'react'\nimport type { UseDelayOptionsResolved } from '@/src/hooks/useDelay'\nimport { useDelay } from '@/src/hooks/useDelay'\nimport { useFocusManagement } from '@/src/hooks/focus/useFocusManagement'\nimport type { FormFieldInteractionStates } from '../../form/FieldLayout'\nimport type { FormFieldDataHandling } from '../../form/FormField'\nimport { PropsUtil } from '@/src/utils/propsUtil'\nimport { useControlledState } from '@/src/hooks/useControlledState'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\nexport type EditCompleteOptionsResolved = {\n onBlur: boolean,\n afterDelay: boolean,\n allowEnterComplete?: boolean,\n} & Omit\n\nexport type EditCompleteOptions = Partial\n\nconst defaultEditCompleteOptions: EditCompleteOptionsResolved = {\n allowEnterComplete: false,\n onBlur: true,\n afterDelay: false,\n delay: 2500\n}\n\nexport type InputProps = Omit, 'value'>\n & Partial>\n & Partial\n & {\n 'editCompleteOptions'?: EditCompleteOptions,\n 'initialValue'?: string,\n 'data-name'?: string,\n }\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed must be managed by the parent\n */\nexport const Input = forwardRef(function Input({\n value: controlledValue,\n initialValue,\n invalid = false,\n onValueChange,\n onEditComplete,\n editCompleteOptions,\n ...props\n}, forwardedRef) {\n const [value, setValue] = useControlledState({\n value: controlledValue,\n onValueChange: onValueChange,\n defaultValue: initialValue,\n })\n const {\n onBlur: allowEditCompleteOnBlur,\n afterDelay,\n delay,\n allowEnterComplete\n } = { ...defaultEditCompleteOptions, ...editCompleteOptions }\n\n const {\n restartTimer,\n clearTimer\n } = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly })\n\n const innerRef = useRef(null)\n\n const { focusNext } = useFocusManagement()\n\n return (\n {\n props.onKeyDown?.(event)\n if (!allowEnterComplete) {\n return\n }\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault()\n innerRef.current?.blur()\n onEditComplete?.((event.target as HTMLInputElement).value)\n focusNext()\n }\n }}\n onBlur={event => {\n props.onBlur?.(event)\n if (allowEditCompleteOnBlur) {\n onEditComplete?.(event.target.value)\n clearTimer()\n }\n }}\n onChange={event => {\n props.onChange?.(event)\n const value = event.target.value\n restartTimer(() => {\n innerRef.current?.blur()\n onEditComplete?.(value)\n })\n setValue(value)\n }}\n\n data-name={props['data-name'] ?? 'input'}\n data-value={PropsUtil.dataAttributes.bool(!!value)}\n {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}\n\n {...PropsUtil.aria.interactionStates({ ...props, invalid }, props)}\n />\n )\n})\n","import { useEffect, useState } from 'react'\n\nexport type UseDelayOptionsResolved = {\n delay: number,\n disabled: boolean,\n}\n\nexport type UseDelayOptions = Partial\n\nconst defaultOptions: UseDelayOptionsResolved = {\n delay: 3000,\n disabled: false,\n}\n\nexport function useDelay(options?: UseDelayOptions) {\n const [timer, setTimer] = useState(undefined)\n const { delay, disabled }: UseDelayOptionsResolved = {\n ...defaultOptions,\n ...options\n }\n\n const clearTimer = () => {\n clearTimeout(timer)\n setTimer(undefined)\n }\n\n const restartTimer = (onDelayFinish: () => void) => {\n if(disabled) {\n return\n }\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n onDelayFinish()\n setTimer(undefined)\n }, delay))\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(timer)\n }\n }, [timer])\n\n useEffect(() => {\n if(disabled){\n clearTimeout(timer)\n setTimer(undefined)\n }\n }, [disabled, timer])\n\n return { restartTimer, clearTimer, hasActiveTimer: !!timer }\n}","import { useCallback } from 'react'\n\nexport function useFocusManagement() {\n const getFocusableElements = useCallback((): HTMLElement[] => {\n return Array.from(\n document.querySelectorAll(\n 'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])'\n )\n ).filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement &&\n !el.hasAttribute('disabled') &&\n !el.hasAttribute('hidden') &&\n el.tabIndex !== -1\n )\n }, [])\n\n const getNextFocusElement = useCallback((): HTMLElement | undefined => {\n const elements = getFocusableElements()\n if(elements.length === 0) {\n return undefined\n }\n let nextElement = elements[0]\n if(document.activeElement instanceof HTMLElement) {\n const currentIndex = elements.indexOf(document.activeElement)\n nextElement = elements[(currentIndex + 1) % elements.length]\n }\n return nextElement\n }, [getFocusableElements])\n\n const focusNext = useCallback(() => {\n const nextElement = getNextFocusElement()\n nextElement?.focus()\n }, [getNextFocusElement])\n\n const getPreviousFocusElement = useCallback((): HTMLElement | undefined => {\n const elements = getFocusableElements()\n if(elements.length === 0) {\n return undefined\n }\n let previousElement = elements[0]\n if(document.activeElement instanceof HTMLElement) {\n const currentIndex = elements.indexOf(document.activeElement)\n if(currentIndex === 0) {\n previousElement = elements[elements.length - 1]\n } else {\n previousElement = elements[currentIndex - 1]\n }\n }\n return previousElement\n }, [getFocusableElements])\n\n const focusPrevious = useCallback(() => {\n const previousElement = getPreviousFocusElement()\n if (previousElement) previousElement.focus()\n }, [getPreviousFocusElement])\n\n return {\n getFocusableElements,\n getNextFocusElement,\n getPreviousFocusElement,\n focusNext,\n focusPrevious,\n }\n}","import type { ProcessModelLibraryEntry } from './types'\n\nexport const processModelLibrary: ProcessModelLibraryEntry[] = [\n {\n id: 'patient-flow',\n name: 'Patient Flow',\n description: 'Hospital patient admission to discharge · 1,280 total traces',\n graph: {\n nodes: [\n { id: 'start', label: 'Patient created', count: '1.280', type: 'start', layer: 0, col: 0 },\n { id: 'task-172', label: 'Task added', count: '172', type: 'activity', layer: 1, col: 0 },\n { id: 'assign-1108', label: 'Assign bed', count: '1.108', type: 'activity', layer: 1, col: 1 },\n { id: 'assign-208', label: 'Assign bed', count: '208', type: 'activity', layer: 2, col: 0 },\n { id: 'task-900', label: 'Task added', count: '900', type: 'activity', layer: 2, col: 1 },\n { id: 'task-done', label: 'Task done', count: '900', type: 'activity', layer: 2, col: 2, activityIcon: 'check' },\n { id: 'unassigned', label: 'Unassigned', count: '1.108', type: 'activity', layer: 3, col: 0 },\n { id: 'end', label: 'Patient discharged', count: '1.280', type: 'end', layer: 4, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'assign-1108', label: '1.108', weight: 1108 },\n { from: 'start', to: 'task-172', label: '172', weight: 172 },\n { from: 'assign-1108', to: 'task-900', label: '900', weight: 900 },\n { from: 'assign-1108', to: 'assign-208', label: '208', weight: 208 },\n { from: 'task-172', to: 'assign-208', label: '172', weight: 172 },\n { from: 'task-900', to: 'unassigned', label: '900', weight: 900 },\n { from: 'task-900', to: 'task-done', label: '528', weight: 528 },\n { from: 'task-done', to: 'task-900', label: '528', weight: 528 },\n { from: 'assign-208', to: 'unassigned', label: '208', weight: 208 },\n { from: 'assign-208', to: 'end', label: '172', weight: 172 },\n { from: 'unassigned', to: 'end', label: '1.108', weight: 1108 },\n ],\n traces: [\n { name: 'Main path', nodes: ['start', 'assign-1108', 'task-900', 'unassigned', 'end'] },\n { name: 'Task loop ×1', nodes: ['start', 'assign-1108', 'task-900', 'task-done', 'task-900', 'unassigned', 'end'] },\n { name: 'Task loop ×2', nodes: ['start', 'assign-1108', 'task-900', 'task-done', 'task-900', 'task-done', 'task-900', 'unassigned', 'end'] },\n { name: 'Alt: Task added → Assign 208', nodes: ['start', 'task-172', 'assign-208', 'unassigned', 'end'] },\n { name: 'Alt: Assign bed → Assign 208', nodes: ['start', 'assign-1108', 'assign-208', 'unassigned', 'end'] },\n { name: 'Short: directly discharged', nodes: ['start', 'task-172', 'assign-208', 'end'] },\n { name: 'Short: Assign bed → discharged', nodes: ['start', 'assign-1108', 'assign-208', 'end'] },\n ],\n },\n },\n {\n id: 'order-fulfillment',\n name: 'Order Fulfillment',\n description: 'E-commerce order from placement to delivery · 3,440 traces',\n graph: {\n nodes: [\n { id: 'start', label: 'Order placed', count: '3.440', type: 'start', layer: 0, col: 0 },\n { id: 'payment', label: 'Payment check', count: '3.440', type: 'activity', layer: 1, col: 0 },\n { id: 'fraud', label: 'Fraud review', count: '412', type: 'activity', layer: 2, col: 0 },\n { id: 'pick', label: 'Pick & pack', count: '3.028', type: 'activity', layer: 2, col: 1 },\n { id: 'reject', label: 'Order rejected', count: '89', type: 'activity', layer: 3, col: 0 },\n { id: 'ship', label: 'Shipped', count: '3.351', type: 'activity', layer: 3, col: 1 },\n { id: 'return', label: 'Return initiated', count: '187', type: 'activity', layer: 4, col: 0 },\n { id: 'deliver', label: 'Delivered', count: '3.164', type: 'activity', layer: 4, col: 1 },\n { id: 'end', label: 'Order complete', count: '3.440', type: 'end', layer: 5, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'payment', label: '3.440', weight: 3440 },\n { from: 'payment', to: 'fraud', label: '412', weight: 412 },\n { from: 'payment', to: 'pick', label: '3.028', weight: 3028 },\n { from: 'fraud', to: 'reject', label: '89', weight: 89 },\n { from: 'fraud', to: 'pick', label: '323', weight: 323 },\n { from: 'pick', to: 'ship', label: '3.351', weight: 3351 },\n { from: 'ship', to: 'deliver', label: '3.164', weight: 3164 },\n { from: 'ship', to: 'return', label: '187', weight: 187 },\n { from: 'return', to: 'pick', label: '142', weight: 142 },\n { from: 'deliver', to: 'end', label: '3.164', weight: 3164 },\n { from: 'reject', to: 'end', label: '89', weight: 89 },\n { from: 'return', to: 'end', label: '45', weight: 45 },\n ],\n traces: [\n { name: 'Happy path', nodes: ['start', 'payment', 'pick', 'ship', 'deliver', 'end'] },\n { name: 'Fraud review → cleared', nodes: ['start', 'payment', 'fraud', 'pick', 'ship', 'deliver', 'end'] },\n { name: 'Fraud review → rejected', nodes: ['start', 'payment', 'fraud', 'reject', 'end'] },\n { name: 'Return & reship', nodes: ['start', 'payment', 'pick', 'ship', 'return', 'pick', 'ship', 'deliver', 'end'] },\n { name: 'Return only', nodes: ['start', 'payment', 'pick', 'ship', 'return', 'end'] },\n { name: 'Fraud + return', nodes: ['start', 'payment', 'fraud', 'pick', 'ship', 'return', 'pick', 'ship', 'deliver', 'end'] },\n ],\n },\n },\n {\n id: 'software-deploy',\n name: 'Software Deployment',\n description: 'CI/CD pipeline from commit to production · 892 runs',\n graph: {\n nodes: [\n { id: 'start', label: 'Commit pushed', count: '892', type: 'start', layer: 0, col: 0 },\n { id: 'lint', label: 'Lint & format', count: '892', type: 'activity', layer: 1, col: 0 },\n { id: 'test', label: 'Unit tests', count: '851', type: 'activity', layer: 2, col: 0 },\n { id: 'build', label: 'Build artifact', count: '819', type: 'activity', layer: 3, col: 0 },\n { id: 'staging', label: 'Deploy staging', count: '819', type: 'activity', layer: 4, col: 0 },\n { id: 'e2e', label: 'E2E tests', count: '794', type: 'activity', layer: 5, col: 0 },\n { id: 'approve', label: 'Manual approval', count: '761', type: 'activity', layer: 5, col: 1 },\n { id: 'prod', label: 'Deploy prod', count: '761', type: 'activity', layer: 6, col: 0 },\n { id: 'rollback', label: 'Rollback', count: '58', type: 'activity', layer: 7, col: 0 },\n { id: 'end', label: 'Release complete', count: '892', type: 'end', layer: 8, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'lint', label: '892', weight: 892 },\n { from: 'lint', to: 'test', label: '851', weight: 851 },\n { from: 'lint', to: 'end', label: '41', weight: 41 },\n { from: 'test', to: 'build', label: '819', weight: 819 },\n { from: 'test', to: 'end', label: '32', weight: 32 },\n { from: 'build', to: 'staging', label: '819', weight: 819 },\n { from: 'staging', to: 'e2e', label: '794', weight: 794 },\n { from: 'staging', to: 'approve', label: '25', weight: 25 },\n { from: 'e2e', to: 'approve', label: '761', weight: 761 },\n { from: 'e2e', to: 'end', label: '33', weight: 33 },\n { from: 'approve', to: 'prod', label: '761', weight: 761 },\n { from: 'prod', to: 'rollback', label: '58', weight: 58 },\n { from: 'prod', to: 'end', label: '703', weight: 703 },\n { from: 'rollback', to: 'staging', label: '31', weight: 31 },\n { from: 'rollback', to: 'end', label: '27', weight: 27 },\n ],\n traces: [\n { name: 'Green path', nodes: ['start', 'lint', 'test', 'build', 'staging', 'e2e', 'approve', 'prod', 'end'] },\n { name: 'Lint failure', nodes: ['start', 'lint', 'end'] },\n { name: 'Test failure', nodes: ['start', 'lint', 'test', 'end'] },\n { name: 'E2E failure', nodes: ['start', 'lint', 'test', 'build', 'staging', 'e2e', 'end'] },\n { name: 'Rollback & retry', nodes: ['start', 'lint', 'test', 'build', 'staging', 'e2e', 'approve', 'prod', 'rollback', 'staging', 'e2e', 'approve', 'prod', 'end'] },\n { name: 'Skip E2E (fast track)', nodes: ['start', 'lint', 'test', 'build', 'staging', 'approve', 'prod', 'end'] },\n { name: 'Rollback → abandon', nodes: ['start', 'lint', 'test', 'build', 'staging', 'e2e', 'approve', 'prod', 'rollback', 'end'] },\n ],\n },\n },\n {\n id: 'loan-approval',\n name: 'Loan Approval',\n description: 'Bank loan application process · 5,120 applications',\n graph: {\n nodes: [\n { id: 'start', label: 'Application', count: '5.120', type: 'start', layer: 0, col: 0 },\n { id: 'kyc', label: 'KYC check', count: '5.120', type: 'activity', layer: 1, col: 0 },\n { id: 'credit', label: 'Credit score', count: '4.890', type: 'activity', layer: 2, col: 0 },\n { id: 'manual', label: 'Manual review', count: '1.240', type: 'activity', layer: 3, col: 0 },\n { id: 'auto-ok', label: 'Auto approved', count: '3.650', type: 'activity', layer: 3, col: 1 },\n { id: 'collateral', label: 'Collateral check', count: '890', type: 'activity', layer: 4, col: 0 },\n { id: 'approved', label: 'Loan approved', count: '4.210', type: 'activity', layer: 4, col: 1 },\n { id: 'declined', label: 'Loan declined', count: '910', type: 'activity', layer: 5, col: 0 },\n { id: 'disburse', label: 'Disbursement', count: '4.210', type: 'activity', layer: 5, col: 1 },\n { id: 'end', label: 'Case closed', count: '5.120', type: 'end', layer: 6, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'kyc', label: '5.120', weight: 5120 },\n { from: 'kyc', to: 'credit', label: '4.890', weight: 4890 },\n { from: 'kyc', to: 'declined', label: '230', weight: 230 },\n { from: 'credit', to: 'manual', label: '1.240', weight: 1240 },\n { from: 'credit', to: 'auto-ok', label: '3.650', weight: 3650 },\n { from: 'manual', to: 'collateral', label: '890', weight: 890 },\n { from: 'manual', to: 'approved', label: '350', weight: 350 },\n { from: 'manual', to: 'declined', label: '0', weight: 50 },\n { from: 'auto-ok', to: 'approved', label: '3.650', weight: 3650 },\n { from: 'collateral', to: 'approved', label: '760', weight: 760 },\n { from: 'collateral', to: 'declined', label: '130', weight: 130 },\n { from: 'approved', to: 'disburse', label: '4.210', weight: 4210 },\n { from: 'declined', to: 'end', label: '910', weight: 910 },\n { from: 'disburse', to: 'end', label: '4.210', weight: 4210 },\n ],\n traces: [\n { name: 'Auto-approved fast path', nodes: ['start', 'kyc', 'credit', 'auto-ok', 'approved', 'disburse', 'end'] },\n { name: 'Manual review → approved', nodes: ['start', 'kyc', 'credit', 'manual', 'approved', 'disburse', 'end'] },\n { name: 'Collateral required', nodes: ['start', 'kyc', 'credit', 'manual', 'collateral', 'approved', 'disburse', 'end'] },\n { name: 'Collateral insufficient', nodes: ['start', 'kyc', 'credit', 'manual', 'collateral', 'declined', 'end'] },\n { name: 'KYC failure → declined', nodes: ['start', 'kyc', 'declined', 'end'] },\n { name: 'Manual review → declined', nodes: ['start', 'kyc', 'credit', 'manual', 'declined', 'end'] },\n ],\n },\n },\n {\n id: 'support-ticket',\n name: 'Support Ticket',\n description: 'Customer support ticket lifecycle · 8,750 tickets',\n graph: {\n nodes: [\n { id: 'start', label: 'Ticket opened', count: '8.750', type: 'start', layer: 0, col: 0 },\n { id: 'triage', label: 'Triage', count: '8.750', type: 'activity', layer: 1, col: 0 },\n { id: 'l1', label: 'L1 support', count: '6.300', type: 'activity', layer: 2, col: 0 },\n { id: 'l2', label: 'L2 escalation', count: '2.450', type: 'activity', layer: 2, col: 1 },\n { id: 'resolved', label: 'Resolved', count: '5.890', type: 'activity', layer: 3, col: 0 },\n { id: 'l3', label: 'L3 engineering', count: '1.120', type: 'activity', layer: 3, col: 1 },\n { id: 'reopen', label: 'Reopened', count: '940', type: 'activity', layer: 4, col: 0 },\n { id: 'fix', label: 'Bug fix deployed', count: '870', type: 'activity', layer: 4, col: 1 },\n { id: 'csat', label: 'CSAT survey', count: '7.810', type: 'activity', layer: 5, col: 0 },\n { id: 'end', label: 'Ticket closed', count: '8.750', type: 'end', layer: 6, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'triage', label: '8.750', weight: 8750 },\n { from: 'triage', to: 'l1', label: '6.300', weight: 6300 },\n { from: 'triage', to: 'l2', label: '2.450', weight: 2450 },\n { from: 'l1', to: 'resolved', label: '5.890', weight: 5890 },\n { from: 'l1', to: 'l2', label: '410', weight: 410 },\n { from: 'l2', to: 'resolved', label: '1.740', weight: 1740 },\n { from: 'l2', to: 'l3', label: '1.120', weight: 1120 },\n { from: 'resolved', to: 'reopen', label: '940', weight: 940 },\n { from: 'resolved', to: 'csat', label: '4.950', weight: 4950 },\n { from: 'l3', to: 'fix', label: '870', weight: 870 },\n { from: 'l3', to: 'resolved', label: '250', weight: 250 },\n { from: 'reopen', to: 'l1', label: '580', weight: 580 },\n { from: 'reopen', to: 'l2', label: '360', weight: 360 },\n { from: 'fix', to: 'resolved', label: '870', weight: 870 },\n { from: 'csat', to: 'end', label: '7.810', weight: 7810 },\n { from: 'resolved', to: 'end', label: '2.860', weight: 2860 },\n ],\n traces: [\n { name: 'L1 quick resolve', nodes: ['start', 'triage', 'l1', 'resolved', 'csat', 'end'] },\n { name: 'L2 escalation → resolved', nodes: ['start', 'triage', 'l2', 'resolved', 'csat', 'end'] },\n { name: 'Full escalation to L3', nodes: ['start', 'triage', 'l1', 'l2', 'l3', 'fix', 'resolved', 'csat', 'end'] },\n { name: 'Resolved then reopened', nodes: ['start', 'triage', 'l1', 'resolved', 'reopen', 'l1', 'resolved', 'csat', 'end'] },\n { name: 'L3 → closed no survey', nodes: ['start', 'triage', 'l2', 'l3', 'resolved', 'end'] },\n { name: 'Reopen escalates to L3', nodes: ['start', 'triage', 'l1', 'resolved', 'reopen', 'l2', 'l3', 'fix', 'resolved', 'csat', 'end'] },\n ],\n },\n },\n {\n id: 'recipe',\n name: 'Pizza Order (Restaurant)',\n description: 'Restaurant order from entry to table · 620 orders',\n graph: {\n nodes: [\n { id: 'start', label: 'Guest seated', count: '620', type: 'start', layer: 0, col: 0 },\n { id: 'order', label: 'Order taken', count: '620', type: 'activity', layer: 1, col: 0 },\n { id: 'kitchen', label: 'In kitchen', count: '620', type: 'activity', layer: 2, col: 0 },\n { id: 'modify', label: 'Order modified', count: '88', type: 'activity', layer: 2, col: 1 },\n { id: 'ready', label: 'Food ready', count: '620', type: 'activity', layer: 3, col: 0 },\n { id: 'serve', label: 'Served', count: '620', type: 'activity', layer: 4, col: 0 },\n { id: 'complaint', label: 'Complaint', count: '34', type: 'activity', layer: 5, col: 0 },\n { id: 'bill', label: 'Bill requested', count: '620', type: 'activity', layer: 5, col: 1 },\n { id: 'end', label: 'Guest leaves', count: '620', type: 'end', layer: 6, col: 0 },\n ],\n edges: [\n { from: 'start', to: 'order', label: '620', weight: 620 },\n { from: 'order', to: 'kitchen', label: '620', weight: 620 },\n { from: 'kitchen', to: 'modify', label: '88', weight: 88 },\n { from: 'modify', to: 'kitchen', label: '88', weight: 88 },\n { from: 'kitchen', to: 'ready', label: '620', weight: 620 },\n { from: 'ready', to: 'serve', label: '620', weight: 620 },\n { from: 'serve', to: 'complaint', label: '34', weight: 34 },\n { from: 'serve', to: 'bill', label: '586', weight: 586 },\n { from: 'complaint', to: 'kitchen', label: '24', weight: 24 },\n { from: 'complaint', to: 'bill', label: '10', weight: 10 },\n { from: 'bill', to: 'end', label: '620', weight: 620 },\n ],\n traces: [\n { name: 'Smooth dinner', nodes: ['start', 'order', 'kitchen', 'ready', 'serve', 'bill', 'end'] },\n { name: 'Order modified once', nodes: ['start', 'order', 'kitchen', 'modify', 'kitchen', 'ready', 'serve', 'bill', 'end'] },\n { name: 'Complaint handled', nodes: ['start', 'order', 'kitchen', 'ready', 'serve', 'complaint', 'bill', 'end'] },\n { name: 'Complaint → remake', nodes: ['start', 'order', 'kitchen', 'ready', 'serve', 'complaint', 'kitchen', 'ready', 'serve', 'bill', 'end'] },\n { name: 'Multiple modifications', nodes: ['start', 'order', 'kitchen', 'modify', 'kitchen', 'modify', 'kitchen', 'ready', 'serve', 'bill', 'end'] },\n ],\n },\n },\n]\n\nexport function getProcessModelLibraryEntry(id: string): ProcessModelLibraryEntry | undefined {\n return processModelLibrary.find((e) => e.id === id)\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { useId, useMemo, forwardRef } from 'react'\n\nexport type FormFieldAriaAttributes = Pick, 'aria-labelledby' | 'aria-describedby' | 'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'aria-errormessage' | 'aria-required'>\n\nexport type FormFieldInteractionStates = {\n invalid: boolean,\n disabled: boolean,\n readOnly: boolean,\n required: boolean,\n}\n\nexport type FormFieldLayoutIds = {\n input: string,\n error: string,\n label: string,\n description: string,\n}\n\nexport type FormFieldLayoutBag = {\n interactionStates: FormFieldInteractionStates,\n ariaAttributes: FormFieldAriaAttributes,\n id: string,\n}\n\nexport type FormFieldLayoutProps = Omit, 'children'> & Omit, 'invalid'> & {\n children: (bag: FormFieldLayoutBag) => ReactNode,\n ids?: Partial,\n label?: ReactNode,\n labelProps?: Omit, 'children' | 'id'>,\n invalidDescription?: ReactNode,\n invalidDescriptionProps?: Omit, 'children' | 'id'>,\n description?: ReactNode,\n descriptionProps?: Omit, 'children' | 'id'>,\n showRequiredIndicator?: boolean,\n}\n\nexport const FormFieldLayout = forwardRef(function FormFieldLayout({\n children,\n ids: idOverwrites = {},\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelProps,\n invalidDescription,\n invalidDescriptionProps,\n description,\n descriptionProps,\n showRequiredIndicator = true,\n ...props\n}, ref) {\n const generatedId = useId()\n\n const ids = useMemo(() => ({\n input: idOverwrites.input ?? `form-field-input-${generatedId}`,\n error: idOverwrites.error ?? `form-field-error-${generatedId}`,\n label: idOverwrites.label ?? `form-field-label-${generatedId}`,\n description: idOverwrites.description ?? `form-field-description-${generatedId}`\n }), [generatedId, idOverwrites])\n\n const describedBy: string = [\n description ? ids.description : undefined,\n invalidDescription ? ids.error : undefined,\n ].filter(Boolean).join(' ')\n\n const invalid = !!invalidDescription\n\n const inputAriaAttributes: FormFieldAriaAttributes = useMemo(() => ({\n 'aria-required': required,\n 'aria-describedby': describedBy,\n 'aria-labelledby': label ? ids.label : undefined,\n 'aria-invalid': invalid,\n 'aria-errormessage': invalid ? ids.error : undefined,\n }), [describedBy, ids.error, ids.label, invalid, label, required])\n\n const state: FormFieldInteractionStates = useMemo(() => ({\n disabled,\n invalid,\n readOnly,\n required,\n }), [disabled, invalid, readOnly, required])\n\n const bag: FormFieldLayoutBag = {\n interactionStates: state,\n ariaAttributes: inputAriaAttributes,\n id: ids.input,\n }\n\n return (\n \n {label && (\n \n {label}\n {showRequiredIndicator && required &&
}\n \n )}\n {description && (\n \n {description}\n

\n )}\n {children(bag)}\n {invalid && (\n \n {invalidDescription}\n
\n )}\n \n )\n})\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { createContext, useCallback, useContext, useSyncExternalStore } from 'react'\nimport type { FormStore, FormValue, FormValidationBehaviour } from './FormStore'\nimport type { UseCreateFormResult } from './useCreateForm'\nimport type { FormFieldDataHandling } from './FormField'\n\nexport type FormContextType = UseCreateFormResult\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const FormContext = createContext | null>(null)\n\nexport type FormProviderProps = PropsWithChildren & {\n state: FormContextType,\n}\n\nexport const FormProvider = ({ children, state }: FormProviderProps) => {\n return (\n \n {children}\n \n )\n}\n\nexport function useForm() {\n const ctx = useContext(FormContext)\n if (!ctx) throw new Error('FormContext is only available inside a
')\n return ctx as FormContextType\n}\n\nexport interface UseFormFieldParameter {\n key: keyof T,\n}\n\nexport interface UseFormFieldOptions {\n triggerUpdate?: boolean,\n validationBehaviour?: FormValidationBehaviour,\n}\n\nexport interface UserFormFieldProps extends UseFormFieldParameter, UseFormFieldOptions {}\n\nexport type FormFieldResult = {\n store: FormStore,\n value: T,\n error: ReactNode,\n touched: boolean,\n hasTriedSubmitting: boolean,\n dataProps: FormFieldDataHandling,\n registerRef: (el: HTMLElement | null) => void,\n}\n\nexport function useFormField(key: K, { triggerUpdate = true, validationBehaviour = 'touched' }: UseFormFieldOptions): FormFieldResult | null {\n const context = useContext(FormContext)\n\n const subscribe = useCallback((cb: () => void) => {\n if (!context) return () => { }\n return context.store.subscribe(key, cb)\n }, [context, key])\n\n const subscribeAll = useCallback((cb: () => void) => {\n if (!context) return () => { }\n return context.store.subscribe('ALL', cb)\n }, [context])\n\n const value = useSyncExternalStore(\n subscribe,\n () => context ? context.store.getValue(key) : undefined\n )\n\n const error = useSyncExternalStore(\n subscribe,\n () => context ? context.store.getError(key) : undefined\n )\n\n const touched = useSyncExternalStore(\n subscribe,\n () => context ? context.store.getTouched(key) : undefined\n )\n\n const hasTriedSubmitting = useSyncExternalStore(\n subscribeAll,\n () => context ? context.store.getHasTriedSubmitting() : undefined\n )\n const isShowingErrors =\n validationBehaviour === 'always' ||\n (validationBehaviour === 'touched' && (touched ?? false)) ||\n (validationBehaviour === 'submit' && (hasTriedSubmitting ?? false))\n\n\n const getDataProps = useCallback(() => {\n return {\n value,\n onValueChange: (val: T[K]) => context?.store.setValue(key, val),\n onEditComplete: (val: T[K]) => {\n context?.store.setTouched(key)\n context?.store.setValue(key, val, triggerUpdate)\n }\n }\n }, [context?.store, key, triggerUpdate, value])\n\n\n if (!context) return null\n\n const { registerRef } = context\n\n return {\n store: context.store,\n value,\n error: isShowingErrors ? error : undefined,\n touched: touched ?? false,\n hasTriedSubmitting: hasTriedSubmitting ?? false,\n dataProps: getDataProps(),\n registerRef: registerRef(key),\n }\n}\n\nexport type UseFormObserverProps = {\n formStore?: FormStore,\n}\n\nexport interface FormObserverResult {\n store: FormStore,\n values: T,\n touched: Partial>,\n errors: Partial>,\n hasErrors: boolean,\n hasTriedSubmitting: boolean,\n}\n\nexport function useFormObserver({ formStore }: UseFormObserverProps = {}) : FormObserverResult | null {\n const context = useContext(FormContext)\n const store = formStore ?? context?.store as FormStore\n\n const subscribe = useCallback((cb: () => void) => {\n if (!store) return () => { }\n return store.subscribe('ALL', cb)\n }, [store])\n\n\n const values = useSyncExternalStore(subscribe, () => store ? store.getAllValues() : undefined)\n const errors = useSyncExternalStore(subscribe, () => store ? store.getErrors() : undefined)\n const touched = useSyncExternalStore(subscribe, () => store ? store.getAllTouched() : undefined)\n const hasErrors = useSyncExternalStore(subscribe, () => store ? store.getHasError() : undefined)\n const hasTriedSubmitting = useSyncExternalStore(subscribe, () => store ? store.getHasTriedSubmitting() : undefined)\n\n if (!store) return null\n\n return {\n store,\n values,\n errors,\n touched,\n hasErrors,\n hasTriedSubmitting,\n }\n}\n\nexport interface UseFormObserverKeyProps {\n formStore?: FormStore,\n formKey: K,\n}\n\nexport interface FormObserverKeyResult {\n store: FormStore,\n value: T[K],\n error: ReactNode,\n hasError: boolean,\n touched: boolean,\n}\n\nexport function useFormObserverKey({ formStore, formKey }: UseFormObserverKeyProps): FormObserverKeyResult | null {\n const context = useContext(FormContext)\n const store = formStore ?? context?.store as FormStore\n\n const subscribe = useCallback((cb: () => void) => {\n if (!store) return () => { }\n return store.subscribe(formKey, cb)\n }, [store, formKey])\n\n const value = useSyncExternalStore(subscribe, () => store ? store.getValue(formKey) : undefined)\n const error = useSyncExternalStore(subscribe, () => store ? store.getError(formKey) : undefined)\n const touched = useSyncExternalStore(subscribe, () => store ? store.getTouched(formKey) : undefined)\n\n if (!store) return null\n\n return {\n store,\n value,\n error,\n touched,\n hasError: !!error,\n }\n}","import type { FormFieldAriaAttributes, FormFieldInteractionStates } from './FieldLayout'\nimport { FormFieldLayout, type FormFieldLayoutProps } from './FieldLayout'\nimport { useFormField } from './FormContext'\nimport type { ReactNode } from 'react'\nimport type { FormValue, FormValidationBehaviour } from './FormStore'\n\nexport type FormFieldFocusableElementProps = FormFieldAriaAttributes & {\n id: string,\n ref: (element: HTMLElement | null) => void,\n}\n\nexport type FormFieldBag = {\n dataProps: FormFieldDataHandling,\n focusableElementProps: FormFieldFocusableElementProps,\n interactionStates: FormFieldInteractionStates,\n touched: boolean,\n other: {\n updateValue: (value: T[K]) => void,\n },\n}\n\nexport interface FormFieldProps extends Omit {\n children: (bag: FormFieldBag) => ReactNode,\n name: K,\n triggerUpdateOnEditComplete?: boolean,\n validationBehaviour?: FormValidationBehaviour,\n}\n\nexport type FormFieldDataHandling = {\n value: T,\n onValueChange: (value: T) => void,\n onEditComplete: (value: T) => void,\n}\n\nexport const FormField = ({ children, name, triggerUpdateOnEditComplete, validationBehaviour, ...props }: FormFieldProps) => {\n const formField = useFormField(name, { triggerUpdate: triggerUpdateOnEditComplete, validationBehaviour })\n\n if (!formField) {\n throw new Error(' can only be used inside a FormContext try wrapping your app in a ')\n }\n\n return (\n \n {(formFieldLayoutBag) => children({\n dataProps: formField.dataProps,\n focusableElementProps: {\n id: formFieldLayoutBag.id,\n ...formFieldLayoutBag.ariaAttributes,\n ref: formField.registerRef,\n },\n interactionStates: formFieldLayoutBag.interactionStates,\n touched: formField.touched,\n other: {\n updateValue: (value: T[K]) => formField.store.setValue(name, value, true),\n },\n })}\n \n )\n}","import type { ReactNode } from 'react'\nimport type { FormValue } from './FormStore'\nimport type { FormObserverKeyResult, UseFormObserverKeyProps, UseFormObserverProps } from './FormContext'\nimport { useFormObserver, useFormObserverKey, type FormObserverResult } from './FormContext'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\n\nexport interface FormObserverProps extends UseFormObserverProps {\n children: (bag:FormObserverResult) => ReactNode,\n}\n\nexport const FormObserver = ({ children, formStore }: FormObserverProps) => {\n const formObserver = useFormObserver({ formStore })\n\n if (!formObserver) {\n throw new Error(' can only be used inside a ')\n }\n\n return BagFunctionUtil.resolve(children, formObserver)\n}\n\nexport interface FormObserverKeyProps extends UseFormObserverKeyProps {\n children: (bag:FormObserverKeyResult) => ReactNode,\n}\n\nexport const FormObserverKey = ({ children, formStore, formKey }: FormObserverKeyProps) => {\n const formObserver = useFormObserverKey({ formStore, formKey })\n\n if (!formObserver) {\n throw new Error(' can only be used inside a ')\n }\n\n return BagFunctionUtil.resolve(children, formObserver)\n}","import type { ReactNode } from 'react'\n\nexport type FormValidationBehaviour = 'always' | 'touched' | 'submit'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type FormValue = Record\n\nexport type FormEvent = {\n type: 'onSubmit',\n key: 'ALL',\n hasErrors: boolean,\n values: T,\n errors: Partial>,\n} | {\n type: 'reset',\n key: 'ALL',\n values: T,\n errors: Partial>,\n} | {\n type: 'onTouched',\n key: keyof T,\n value: T[keyof T],\n values: T,\n} | {\n type: 'onUpdate',\n key: 'ALL',\n updatedKeys: (keyof T)[],\n update: Partial,\n values: T,\n hasErrors: boolean,\n errors: Partial>,\n} | {\n type: 'onChange',\n key: keyof T,\n value: T[keyof T],\n values: T,\n} | {\n type: 'onError',\n key: keyof T,\n value: T[keyof T],\n values: T,\n error: ReactNode,\n}\n\nexport type FormEventListener = (event: FormEvent) => void\n\nexport type FormValidator = (value: T[keyof T]) => ReactNode\n\nexport type FormStoreProps = {\n initialValues: T,\n hasTriedSubmitting?: boolean,\n submittingTouchesAll?: boolean,\n validators?: Partial<{ [K in keyof T]: (v: T[K]) => ReactNode }>,\n}\n\nexport class FormStore {\n private values: T\n private initialValues: T\n private validators: Partial<{ [K in keyof T]: FormValidator }>\n\n private hasTriedSubmitting: boolean = false\n private errors: Partial> = {}\n private touched: Partial> = {}\n\n private listeners = new Map>>()\n private submittingTouchesAll: boolean = false\n\n\n constructor({\n initialValues,\n hasTriedSubmitting,\n submittingTouchesAll = true,\n validators = {},\n }: FormStoreProps) {\n this.initialValues = initialValues\n this.values = { ...initialValues }\n\n this.hasTriedSubmitting = hasTriedSubmitting\n this.submittingTouchesAll = submittingTouchesAll\n if(this.submittingTouchesAll && this.hasTriedSubmitting) {\n Object.keys(this.initialValues).forEach(key => {\n this.touched[key as keyof T] = true\n })\n }\n\n this.validators = validators\n this.validateAll()\n }\n\n // Values\n getValue(key: K): T[K] {\n return this.values[key]\n }\n\n getAllValues(): T {\n return this.values\n }\n\n setValue(key: K, value: T[K], triggerUpdate: boolean = false) {\n if (this.values[key] !== value) {\n this.values[key] = value\n\n this.notify({ type: 'onChange', key, value, values: this.values })\n this.validate(key)\n }\n\n if(triggerUpdate) {\n this.notify({\n type: 'onUpdate',\n key: 'ALL',\n updatedKeys: [key],\n update: { [key]: value } as unknown as Partial,\n values: this.values,\n hasErrors: this.getHasError(),\n errors: this.getErrors()\n })\n }\n }\n\n setValues(values: Partial, triggerUpdate: boolean = false) {\n Object.keys(values).forEach(key => this.setValue(key, values[key]))\n\n if(triggerUpdate) {\n this.notify({\n type: 'onUpdate',\n key: 'ALL',\n updatedKeys: Object.keys(values) as (keyof T)[],\n update: values,\n values: this.values,\n hasErrors: this.getHasError(),\n errors: this.getErrors()\n })\n }\n }\n\n // Touched\n getTouched(key: keyof T): boolean {\n return !!this.touched[key]\n }\n\n getAllTouched(): Partial> {\n return this.touched\n }\n\n setTouched(key: keyof T, isTouched: boolean = true) {\n if (this.touched[key] === isTouched) return\n\n this.touched[key] = isTouched\n this.notify({ type: 'onTouched', key, value: this.values[key], values: this.values })\n }\n\n // Error and Validation\n getHasError() : boolean {\n return Object.values(this.errors).some(value => value !== undefined && value !== null)\n }\n\n getErrors(): Partial> {\n return this.errors\n }\n\n getError(key: keyof T): ReactNode {\n return this.errors[key]\n }\n\n private setError(key: keyof T, error: ReactNode) {\n if (this.errors[key] === error) return\n\n if (error === undefined || error === null) {\n delete this.errors[key]\n } else {\n this.errors[key] = error\n }\n\n this.notify({ type: 'onError', key, value: this.values[key], error, values: this.values })\n }\n\n getHasTriedSubmitting(): boolean {\n return this.hasTriedSubmitting\n }\n\n changeValidators(validators: Partial>>) {\n this.validators = { ...this.validators, ...validators }\n this.validateAll()\n }\n\n validate(key: keyof T) {\n const validator = this.validators[key]\n\n if (!validator) {\n this.setError(key, undefined)\n return\n }\n\n const error = validator(this.values[key])\n this.setError(key, error)\n }\n\n validateAll() {\n Object.keys(this.initialValues).forEach(key => {\n this.validate(key)\n })\n }\n\n // Obeserver\n subscribe(key: keyof T | 'ALL', listener: FormEventListener): () => void {\n if (!this.listeners.has(key)) {\n this.listeners.set(key, new Set())\n }\n this.listeners.get(key)!.add(listener)\n\n return () => {\n this.listeners.get(key)?.delete(listener)\n if (this.listeners.get(key)?.size === 0) {\n this.listeners.delete(key)\n }\n }\n }\n\n private notify(event: FormEvent) {\n const key = event.key\n if(key !== 'ALL') {\n this.listeners.get(key)?.forEach((listener) => listener(event))\n }\n this.listeners.get('ALL')?.forEach((listener) => listener(event))\n }\n\n // Form\n submit() {\n this.hasTriedSubmitting = true\n\n if(this.submittingTouchesAll) {\n Object.keys(this.initialValues).forEach((k) => {\n this.touched[k as keyof T] = true\n })\n }\n\n const hasErrors = Object.keys(this.errors).length > 0\n\n this.notify({\n type: 'onSubmit',\n key: 'ALL',\n hasErrors: hasErrors,\n errors: this.errors,\n values: this.values\n })\n }\n\n reset() {\n this.values = { ...this.initialValues }\n this.hasTriedSubmitting = false\n this.touched = {}\n Object.keys(this.initialValues).forEach(key => {\n this.notify({ type: 'onChange', key: key, value: this.values[key], values: this.values })\n })\n this.validateAll()\n this.notify({ type: 'reset', key: 'ALL', values: this.values, errors: this.errors })\n }\n}","import { useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react'\nimport type { FormEvent, FormStoreProps, FormValue } from './FormStore'\nimport { FormStore } from './FormStore'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\n\nexport type UseCreateFormProps = Omit, 'validationBehaviour'> & {\n onFormSubmit: (values: T) => void,\n onFormError?: (values: T, errors: Partial>) => void,\n /**\n * Called when the form values change.\n *\n * E.g. a key press for an input field.\n *\n * For most purposes use {@link onUpdate} instead.\n * @param values The new values of the form.\n */\n onValueChange?: (values: T) => void,\n /**\n * Called when the form values change and the corresponding inputs determined that the user\n * finished editing these fields and the client should make an update against the server.\n *\n * E.g. a user finished editing an input field by pressing enter or blurring the field.\n *\n * @param updatedKeys The keys that were updated.\n * @param update The update that was made.\n */\n onValidUpdate?: (updatedKeys: (keyof T)[], update: Partial) => void,\n /**\n * Called when the form values change and the corresponding inputs determined that the user\n * finished editing these fields and the client should make an update against the server.\n *\n * E.g. a user finished editing an input field by pressing enter or blurring the field.\n *\n * @param updatedKeys The keys that were updated.\n * @param update The update that was made.\n */\n onUpdate?: (updatedKeys: (keyof T)[], update: Partial) => void,\n /* Whether to scroll and focus the first element when submitting with an error or resetting */\n scrollToElements?: boolean,\n scrollOptions?: ScrollIntoViewOptions,\n}\n\nexport type UseCreateFormResult = {\n /**\n * The form store.\n * Do not attempt to read the store directly, use useFormObserver or useFormField instead.\n * Otherwise you will not get the latest values and errors.\n */\n store: FormStore,\n reset: () => void,\n submit: () => void,\n update: (updater: Partial | ((current: T) => Partial), triggerUpdate?: boolean) => void,\n validateAll: () => void,\n registerRef: (key: keyof T) => (el: HTMLElement | null) => void,\n}\n\nexport function useCreateForm({\n onFormSubmit,\n onFormError,\n onValueChange,\n onUpdate,\n onValidUpdate,\n initialValues,\n hasTriedSubmitting,\n validators,\n scrollToElements = true,\n scrollOptions = { behavior: 'smooth', block: 'center' },\n}: UseCreateFormProps) : UseCreateFormResult {\n const onFormSubmitStable = useEventCallbackStabilizer(onFormSubmit)\n const onFormErrorStable = useEventCallbackStabilizer(onFormError)\n const onValueChangeStable = useEventCallbackStabilizer(onValueChange)\n const onUpdateStable = useEventCallbackStabilizer(onUpdate)\n const onValidUpdateStable = useEventCallbackStabilizer(onValidUpdate)\n\n const storeRef = useRef>(\n new FormStore({\n initialValues,\n hasTriedSubmitting,\n validators,\n })\n )\n\n useEffect(() => {\n storeRef.current.changeValidators(validators)\n }, [validators])\n\n const fieldRefs = useRef>>({})\n const registerRef = useCallback((key: keyof T) => {\n return (el: HTMLElement | null) => {\n fieldRefs.current[key] = el\n }\n }, [])\n\n useEffect(() => {\n const handleUpdate = (event: FormEvent) => {\n if (event.type === 'onSubmit') {\n if(event.hasErrors) {\n onFormErrorStable(event.values, event.errors)\n\n if (scrollToElements) {\n const errorInputs = (Object.keys(event.errors) as (keyof T)[])\n .filter((key) => event.errors[key])\n .map((key) => fieldRefs.current[key])\n .filter((el): el is HTMLElement => el !== null && el !== undefined)\n\n if (errorInputs.length > 0) {\n errorInputs.sort((a, b) => {\n const position = a.compareDocumentPosition(b)\n if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1\n if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1\n return 0\n })\n\n errorInputs[0].scrollIntoView(scrollOptions)\n errorInputs[0].focus()\n }\n }\n } else {\n onFormSubmitStable(event.values)\n }\n } else if (event.type === 'reset') {\n if (scrollToElements) {\n const inputs = Object.values(fieldRefs.current).filter(\n (el): el is HTMLElement => el !== null && el !== undefined\n )\n if (inputs.length > 0) {\n inputs.sort((a, b) => {\n const position = a.compareDocumentPosition(b)\n if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1\n if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1\n return 0\n })\n\n inputs[0].scrollIntoView(scrollOptions)\n inputs[0].focus()\n }\n }\n } else if (event.type === 'onChange') {\n onValueChangeStable(storeRef.current.getAllValues())\n } else if (event.type === 'onUpdate') {\n onUpdateStable(event.updatedKeys, event.update)\n if(!event.hasErrors) {\n onValidUpdateStable(event.updatedKeys, event.update)\n }\n }\n }\n\n const unsubscribe = storeRef.current.subscribe('ALL', handleUpdate)\n return () => {\n unsubscribe()\n }\n }, [onFormErrorStable, onFormSubmitStable, onUpdateStable, onValidUpdateStable, onValueChangeStable, scrollOptions, scrollToElements])\n\n\n const callbacks = useMemo(() => ({\n reset: () => storeRef.current.reset(),\n submit: () => storeRef.current.submit(),\n update: (updater: Partial | ((current: T) => Partial), triggerUpdate: boolean = false) => {\n if (typeof updater === 'function') {\n storeRef.current.setValues(updater(storeRef.current.getAllValues()), triggerUpdate)\n } else {\n storeRef.current.setValues(updater, triggerUpdate)\n }\n },\n validateAll: () => storeRef.current.validateAll(),\n }), [])\n\n return {\n store: storeRef.current,\n ...callbacks,\n registerRef\n }\n}","import type { HTMLAttributes, ReactNode } from 'react'\nimport React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport clsx from 'clsx'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createLoopingListWithIndex, range } from '@/src/utils/array'\nimport { useHightideTranslation } from '@/src/i18n/useHightideTranslation'\nimport { useEventCallbackStabilizer } from '@/src/hooks/useEventCallbackStabelizer'\nimport { IconButton } from '../user-interaction/IconButton'\n\n//\n// CarouselContext\n//\ntype CarouselContextType = {\n id: string,\n currentIndex: number,\n slideCount: number,\n isLooping: boolean,\n}\n\nconst CarouselContext = createContext(null)\n\nconst useCarouselContext = () => {\n const context = useContext(CarouselContext)\n if (!context) {\n throw Error('useCarouselContext must be used within CarouselContext')\n }\n return context\n}\n\n//\n// CarouselTab\n//\ntype CarouselTabsProps = {\n onChange: (index: number) => void,\n}\n\nexport default function CarouselTabs({\n onChange,\n}: CarouselTabsProps) {\n const translation = useHightideTranslation()\n const { id, slideCount, currentIndex, isLooping } = useCarouselContext()\n\n const tabRefs = useRef<(HTMLButtonElement | null)[]>([])\n\n const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n let newIndex = index\n if (event.key === 'ArrowRight') {\n newIndex = isLooping ? (index + 1) % slideCount : Math.max(index + 1, slideCount - 1)\n } else if (event.key === 'ArrowLeft') {\n newIndex = isLooping ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0)\n } else {\n return\n }\n event.preventDefault()\n onChange(newIndex)\n tabRefs.current[newIndex]?.focus()\n }\n\n return (\n \n {range(slideCount).map((index) => {\n const isSelected = currentIndex === index\n return (\n {\n tabRefs.current[index] = el\n }}\n onClick={() => onChange(index)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n\n className={clsx(\n 'w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md',\n {\n 'bg-carousel-dot-disabled hover:bg-carousel-dot-active': currentIndex !== index,\n 'bg-carousel-dot-active hover:brightness-90': currentIndex === index,\n }\n )}\n\n type=\"button\"\n role=\"tab\"\n tabIndex={isSelected ? 0 : -1}\n aria-label={translation('showSlide', { index: (index + 1) })}\n aria-selected={isSelected}\n aria-controls={`slide-${index}`}\n aria-disabled={isSelected}\n />\n )\n })}\n \n )\n}\n\n//\n// CarouselSlide\n//\nexport interface CarouselSlideProps extends HTMLAttributes {\n isSelected: boolean,\n index: number,\n}\n\nexport const CarouselSlide = forwardRef(\n function CarouselSlide({\n index,\n isSelected,\n ...props\n }, ref) {\n const translation = useHightideTranslation()\n const { id, slideCount } = useCarouselContext()\n\n return (\n \n )\n }\n)\n\n//\n// Carousel\n//\ntype DragState = {\n dragStartX: number,\n dragOffsetX: number,\n}\n\ntype ItemType = {\n item: ReactNode,\n index: number,\n}\n\nexport type CarouselProps = Omit, 'children'> & {\n children: ReactNode[],\n animationTime?: number,\n isLooping?: boolean,\n isAutoPlaying?: boolean,\n autoLoopingTimeOut?: number,\n autoLoopAnimationTime?: number,\n hintNext?: boolean,\n arrows?: boolean,\n dots?: boolean,\n /**\n * Percentage that is allowed to be scrolled further\n */\n overScrollThreshold?: number,\n blurColor?: string,\n heightClassName?: string,\n slideClassName?: string,\n slideContainerProps?: HTMLAttributes,\n onSlideChanged?: (index: number) => void,\n}\n\nexport const Carousel = ({\n children,\n animationTime = 200,\n isLooping = false,\n isAutoPlaying = false,\n autoLoopingTimeOut = 5000,\n autoLoopAnimationTime = 1000,\n hintNext = false,\n arrows = false,\n dots = true,\n blurColor = 'from-background',\n heightClassName = 'h-96',\n slideClassName = 'w-[70%] desktop:w-1/2',\n slideContainerProps,\n onSlideChanged,\n ...props\n}: CarouselProps) => {\n const translation = useHightideTranslation()\n const onSlideChangedStable = useEventCallbackStabilizer(onSlideChanged)\n const slideRefs = useRef([])\n const [currentIndex, setCurrentIndex] = useState(0)\n const [hasFocus, setHasFocus] = useState(false)\n const [dragState, setDragState] = useState()\n const isPaused = hasFocus\n const carouselContainerRef = useRef(null)\n const [disableClick, setDisableClick] = useState(false)\n\n const timeOut = useRef(undefined)\n\n const length = useMemo(() => children.length, [children])\n const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping\n\n const generatedId = 'carousel' + useId()\n const id = props.id ?? generatedId\n\n // Validation\n if (isAutoPlaying && !isLooping) {\n console.error('When isAutoLooping is true, isLooping should also be true')\n isLooping = true\n }\n autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut) // time between transitions\n animationTime = Math.max(100, animationTime) // in ms, must be > 0\n autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)\n\n useEffect(() => {\n const carousel = carouselContainerRef.current\n\n if (carousel) {\n function onFocus() {\n setHasFocus(true)\n }\n\n function onBlur() {\n setHasFocus(false)\n }\n\n\n carousel?.addEventListener('focusin', onFocus)\n carousel?.addEventListener('focusout', onBlur)\n return () => {\n carousel?.removeEventListener('focusin', onFocus)\n carousel?.removeEventListener('focusin', onFocus)\n }\n }\n }, [])\n\n const getStyleOffset = (index: number) => {\n const baseOffset = -50 + (index - currentIndex) * 100\n return `${baseOffset}%`\n }\n\n const canGoLeft = () => {\n return isLooping || currentIndex !== 0\n }\n\n const canGoRight = useCallback(() => {\n return isLooping || currentIndex !== length - 1\n }, [currentIndex, isLooping, length])\n\n const left = () => {\n if (canGoLeft()) {\n setCurrentIndex((currentIndex + length - 1) % length)\n }\n }\n\n const right = useCallback(() => {\n if (canGoRight()) {\n setCurrentIndex((currentIndex + length + 1) % length)\n }\n }, [canGoRight, currentIndex, length])\n\n useEffect(() => {\n if (!timeOut.current && !isPaused) {\n if (autoLoopingTimeOut > 0) {\n timeOut.current = setTimeout(() => {\n right()\n timeOut.current = undefined\n }, autoLoopingTimeOut)\n } else {\n right()\n }\n }\n if ((isPaused || !!dragState) && timeOut.current) {\n clearTimeout(timeOut.current)\n timeOut.current = undefined\n }\n }, [right, isPaused, autoLoopingTimeOut, dragState])\n\n\n let items: ItemType[] = children.map((item, index) => ({\n index,\n item\n }))\n let before: ItemType[] = []\n let after: ItemType[] = []\n if (isLooping) {\n before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({\n index,\n item\n }))\n after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({\n index,\n item\n }))\n\n items = [...before, ...items, ...after]\n }\n\n const handlePointerDown = (e: React.PointerEvent) => {\n setDragState({\n dragOffsetX: 0,\n dragStartX: e.clientX,\n })\n }\n\n const handlePointerMove = (e: React.PointerEvent) => {\n if (!dragState) return\n setDragState(prevState => {\n if(!prevState) return prevState\n return { dragStartX: prevState.dragStartX, dragOffsetX: e.clientX - prevState.dragStartX }\n })\n }\n\n const handlePointerUp = () => {\n if (!dragState) return\n if (dragState.dragOffsetX > 50) {\n left()\n } else if (dragState.dragOffsetX < -50) {\n right()\n }\n setDragState(undefined)\n }\n\n useEffect(() => {\n setDisableClick(!dragState)\n }, [dragState])\n\n useEffect(() => {\n onSlideChangedStable(currentIndex)\n }, [currentIndex, onSlideChangedStable])\n\n return (\n \n \n \n {hintNext ? (\n \n
\n {items.map(({\n item,\n index\n }, listIndex) => {\n const isInItems = before.length <= listIndex && listIndex < items.length - after.length\n\n return (\n {\n const array = slideRefs.current\n if(!array || !el || !isInItems) return\n array[index] = el\n }}\n key={listIndex}\n index={index}\n isSelected={isInItems && currentIndex === index}\n className={clsx(\n `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,\n slideClassName\n )}\n onClick={() => !disableClick && setCurrentIndex(index)}\n style={{\n translate: `calc(${getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0))} + ${dragState ? dragState.dragOffsetX : 0}px)`,\n transitionDuration: dragState ? '0ms' : ((isAutoPlaying && !isPaused ? autoLoopAnimationTime : animationTime) + 'ms'),\n }}\n >\n {item}\n \n )\n })}\n
\n \n \n \n ) : (\n {\n const array = slideRefs.current\n if(!array || !el) return\n array[currentIndex] = el\n }}\n className={clsx('px-16 h-full')}\n\n tabIndex={0}\n role=\"group\"\n aria-roledescription={translation('slide')}\n aria-label={translation('slideOf', {\n index: (currentIndex + 1),\n length: items.length\n })}\n >\n {children[currentIndex]}\n \n )}\n {arrows && (\n <>\n left()}\n >\n \n \n right()}\n >\n \n \n \n )}\n \n {dots && ()}\n \n \n )\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\n\nexport type DividerInserterProps = Omit, 'children'> & {\n children: ReactNode[],\n divider: (index: number) => ReactNode,\n}\n\n/**\n * A Component for inserting a divider in the middle of each child element\n *\n * undefined elements are removed\n */\nexport const DividerInserter = ({\n children,\n divider,\n ...restProps\n}: DividerInserterProps) => {\n const nodes: ReactNode[] = []\n\n for (let index = 0; index < children.length; index++) {\n const element = children[index]\n if (element !== undefined) {\n nodes.push(element)\n if (index < children.length - 1) {\n nodes.push(divider(index))\n }\n }\n }\n\n return (\n
\n {nodes}\n
\n )\n}\n","import type { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react'\nimport { useEffect, useRef } from 'react'\nimport { useState } from 'react'\nimport { createContext, forwardRef, useCallback, useContext, useId, useMemo } from 'react'\nimport clsx from 'clsx'\nimport { Visibility } from './Visibility'\nimport { ExpansionIcon } from '../display-and-visualization/ExpansionIcon'\nimport { useTransitionState } from '@/src/hooks/useTransitionState'\nimport { useControlledState } from '@/src/hooks/useControlledState'\nimport { ReactRefsUtil } from '@/src/utils/reactRefs'\n\n//\n// Context\n//\ntype ExpandableContextIdsState = {\n root: string,\n header: string,\n content: string,\n}\n\ntype ExpandableContextState = {\n ids: ExpandableContextIdsState,\n setIds: Dispatch>,\n disabled: boolean,\n isExpanded: boolean,\n toggle: () => void,\n setIsExpanded: Dispatch>,\n}\n\nconst ExpandableContext = createContext(null)\n\nfunction useExpandableContext() {\n const context = useContext(ExpandableContext)\n if (!context) {\n throw new Error('Expandable components must be used within an ExpandableRoot')\n }\n return context\n}\n\n//\n// ExpandableRoot\n//\n\nexport type ExpandableRootProps = HTMLAttributes & {\n 'isExpanded'?: boolean,\n 'onExpandedChange'?: (isExpanded: boolean) => void,\n 'isInitialExpanded'?: boolean,\n 'disabled'?: boolean,\n 'allowContainerToggle'?: boolean,\n 'data-name'?: string,\n}\n\nexport const ExpandableRoot = forwardRef(function ExpandableRoot({\n children,\n id: providedId,\n isExpanded: controlledExpanded,\n onExpandedChange,\n isInitialExpanded = false,\n disabled = false,\n allowContainerToggle = false,\n ...props\n}, ref) {\n const generatedId = useId()\n const [ids, setIds] = useState({\n root: providedId ?? `expandable-${generatedId}-root`,\n header: `expandable-${generatedId}-header`,\n content: `expandable-${generatedId}-content`\n })\n const [isExpanded, setIsExpanded] = useControlledState({\n value: controlledExpanded,\n onValueChange: onExpandedChange,\n defaultValue: isInitialExpanded,\n })\n\n const toggle = useCallback(() => {\n if (!disabled) {\n setIsExpanded(!isExpanded)\n }\n }, [disabled, isExpanded, setIsExpanded])\n\n const contextValue = useMemo(() => ({\n isExpanded,\n toggle,\n setIsExpanded,\n ids,\n setIds,\n disabled\n }), [isExpanded, toggle, setIsExpanded, ids, disabled])\n\n return (\n \n {\n props.onClick?.(event)\n if (allowContainerToggle) {\n toggle()\n }\n }}\n data-expanded={isExpanded ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n data-containertoggleable={allowContainerToggle ? '' : undefined}\n >\n {children}\n \n \n )\n})\n\n//\n// ExpandableHeader\n//\n\nexport type ExpandableHeaderProps = HTMLAttributes & {\n 'isUsingDefaultIcon'?: boolean,\n 'data-name'?: string,\n}\n\nexport const ExpandableHeader = forwardRef(function ExpandableHeader({\n children,\n isUsingDefaultIcon = true,\n ...props\n}, ref) {\n const { isExpanded, toggle, ids, setIds, disabled } = useExpandableContext()\n useEffect(() => {\n const id = props.id\n if (id) {\n setIds(prevState => ({ ...prevState, header: id }))\n }\n }, [props.id, setIds])\n\n return (\n {\n event.stopPropagation()\n props.onClick?.(event)\n toggle()\n }}\n data-expanded={isExpanded ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n aria-expanded={isExpanded}\n aria-controls={ids.content}\n aria-disabled={disabled || undefined}\n >\n {children}\n \n \n \n \n )\n})\n\n//\n// ExpandableContent\n//\n\nexport type ExpandableContentProps = HTMLAttributes & {\n 'forceMount'?: boolean,\n 'data-name'?: string,\n}\n\nexport const ExpandableContent = forwardRef(function ExpandableContent({\n children,\n forceMount = false,\n ...props\n}, forwardedRef) {\n const { isExpanded, ids, setIds } = useExpandableContext()\n\n const ref = useRef(null)\n\n useEffect(() => {\n const id = props.id\n if (id) {\n setIds(prevState => ({ ...prevState, content: id }))\n }\n }, [props.id, setIds])\n\n const { transitionState } = useTransitionState({ isOpen: isExpanded, ref })\n\n return (\n \n \n {children}\n \n \n )\n})\n\n\n//\n// Composite\n//\nexport interface ExpandableProps extends ExpandableRootProps {\n trigger: ReactNode,\n triggerProps?: Omit,\n contentProps?: Omit,\n contentExpandedClassName?: string,\n}\n\nexport const Expandable = forwardRef(function Expandable({\n children,\n trigger,\n triggerProps,\n contentProps,\n contentExpandedClassName,\n ...props\n}, ref) {\n return (\n \n \n {trigger}\n \n \n {ctx => (\n \n {children}\n \n )}\n \n \n )\n})","import type { ReactNode } from 'react'\nimport type { ExpandableProps } from './Expandable'\nimport { ExpandableContent, ExpandableHeader, ExpandableRoot } from './Expandable'\n\nexport type FAQItem = Pick & {\n title: string,\n content: ReactNode,\n}\n\nexport type FAQSectionProps = {\n entries: FAQItem[],\n}\n\n// TODO add a descirption\nexport const FAQSection = ({\n entries,\n}: FAQSectionProps) => {\n return (\n
    \n {entries.map(({ title, content, ...restProps }, index) => (\n
  • \n \n \n {title}\n \n \n {content}\n \n \n
    • \n ))}\n
\n )\n}\n","import type {\n UIEvent,\n ReactNode\n} from 'react'\nimport {\n useRef,\n useState,\n useLayoutEffect,\n useMemo,\n useCallback\n} from 'react'\nimport clsx from 'clsx'\nimport { range } from '@/src/utils/array'\nimport { Button } from '../user-interaction/Button'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport { Visibility } from './Visibility'\n\nexport interface InfiniteScrollProps {\n itemCount: number,\n /** How many items to keep in the DOM at once (default: 30) */\n bufferSize?: number,\n /** How many items to add tp the DOM when reaching one end at once (default: 7) */\n stepSize?: number,\n /** Pixels from edge to trigger a fetch/shift (default: 30) */\n scrollThreshold?: number,\n /** Initial index to center on or start at (optional) */\n initialIndex?: number,\n /** Render prop for each item */\n children: (index: number) => ReactNode,\n /** Optional classname for the scroll container */\n className?: string,\n /** Optional style for the container */\n style?: React.CSSProperties,\n}\n\nexport function InfiniteScroll({\n children,\n itemCount,\n bufferSize = 30,\n scrollThreshold = 30,\n stepSize = 7,\n initialIndex = 0,\n className,\n style,\n}: InfiniteScrollProps) {\n if (stepSize > bufferSize) {\n throw new Error('InfiniteScroll: stepSize <= bufferSize must hold')\n }\n if (itemCount < 1) {\n throw new Error('InfiniteScroll: itemCount > 0 must hold')\n }\n const items = useMemo(() => range(itemCount), [itemCount])\n const containerRef = useRef(null)\n const snapshotRef = useRef({ scrollHeight: 0, scrollTop: 0, fromTop: false })\n\n const [windowState, setWindowState] = useState(() => {\n let index = initialIndex\n if (index < 0) {\n index = 0\n }\n\n const halfBuffer = Math.floor(bufferSize / 2)\n const safeStart = Math.max(0, initialIndex - halfBuffer)\n\n return {\n start: safeStart,\n end: Math.min(items.length, safeStart + bufferSize)\n }\n })\n\n const addToStart = useCallback((amount = stepSize) => {\n setWindowState(prev => {\n const newStart = Math.max(0, prev.start - amount)\n const newEnd = Math.min(items.length, newStart + bufferSize)\n return { start: newStart, end: newEnd }\n })\n }, [bufferSize, items.length, stepSize])\n\n const addToEnd = useCallback((amount = stepSize) => {\n setWindowState(prev => {\n const newEnd = Math.min(items.length, prev.end + amount)\n const newStart = Math.max(0, newEnd - bufferSize)\n return { start: newStart, end: newEnd }\n })\n }, [bufferSize, items.length, stepSize])\n\n const handleScroll = (e: UIEvent) => {\n const { scrollTop, scrollHeight, clientHeight } = e.currentTarget\n\n if (scrollTop < scrollThreshold && windowState.start > 0) {\n snapshotRef.current = { scrollHeight, scrollTop, fromTop: true }\n addToStart()\n }\n else if (scrollTop + clientHeight > scrollHeight - scrollThreshold && windowState.end < items.length) {\n snapshotRef.current = { scrollHeight, scrollTop, fromTop: false }\n addToEnd()\n }\n }\n\n useLayoutEffect(() => {\n const container = containerRef.current\n if (!container || !snapshotRef.current.fromTop) return\n\n const heightDifference = container.scrollHeight - snapshotRef.current.scrollHeight\n\n if (heightDifference > 0) {\n container.scrollTop = snapshotRef.current.scrollTop + heightDifference\n }\n snapshotRef.current.fromTop = false\n }, [windowState])\n\n const visibleItems = useMemo(() =>\n items.slice(windowState.start, windowState.end),\n [items, windowState])\n\n const isUsingInfiteScroll = itemCount > bufferSize\n\n return (\n \n 0}>\n \n \n {visibleItems.map((index) => children(index))}\n \n \n \n \n )\n}","type ASTNodeModifierType =\n 'none'\n | 'italic'\n | 'bold'\n | 'underline'\n | 'font-space'\n | 'primary'\n | 'secondary'\n | 'warn'\n | 'positive'\n | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n type: ASTNodeModifierType,\n children: ASTNode[],\n} | {\n type: ASTNodeInserterType,\n} | {\n type: ASTNodeDefaultType,\n text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n node: ASTNode,\n isRoot?: boolean,\n className?: string,\n}\nexport const ASTNodeInterpreter = ({\n node,\n isRoot = false,\n className = '',\n}: ASTNodeInterpreterProps) => {\n switch (node.type) {\n case 'newline':\n return
\n case 'text':\n return isRoot ? {node.text} : node.text\n case 'helpwave':\n return (helpwave)\n case 'none':\n return isRoot ? (\n {node.children.map((value, index) => (\n \n ))}\n ) :\n <>{node.children.map((value, index) => )}\n case 'bold':\n return {node.children.map((value, index) => )}\n case 'italic':\n return {node.children.map((value, index) => )}\n case 'underline':\n return ({node.children.map((value, index) => ())})\n case 'font-space':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n case 'primary':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n case 'secondary':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n case 'warn':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n case 'positive':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n case 'negative':\n return (\n {node.children.map((value, index) => (\n \n ))}\n )\n default:\n return null\n }\n}\n\nconst modifierIdentifierMapping = [\n { id: 'i', name: 'italic' },\n { id: 'b', name: 'bold' },\n { id: 'u', name: 'underline' },\n { id: 'space', name: 'font-space' },\n { id: 'primary', name: 'primary' },\n { id: 'secondary', name: 'secondary' },\n { id: 'warn', name: 'warn' },\n { id: 'positive', name: 'positive' },\n { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n { id: 'helpwave', name: 'helpwave' },\n { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n text: string,\n commandStart: string = '\\\\',\n open: string = '{',\n close: string = '}'\n): ASTNode => {\n let start = text.indexOf(commandStart)\n const children: ASTNode[] = []\n\n // parse the text step by step\n while (text !== '') {\n if (start === -1) {\n children.push({\n type: 'text',\n text\n })\n break\n }\n children.push(parseMarkdown(text.substring(0, start)))\n text = text.substring(start)\n if (text.length <= 1) {\n children.push({\n type: 'text',\n text\n })\n text = ''\n continue\n }\n const simpleReplace = [commandStart, open, close]\n if (simpleReplace.some(value => text[1] === value)) {\n children.push({\n type: 'text',\n text: simpleReplace.find(value => text[1] === value)!\n })\n text = text.substring(2)\n start = text.indexOf(commandStart)\n continue\n }\n const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n if (inserter) {\n children.push({\n type: inserter.name,\n })\n text = text.substring(inserter.id.length + 1)\n start = text.indexOf(commandStart)\n continue\n }\n const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n if (modifier) {\n // check brackets\n if (text[modifier.id.length + 1] !== open) {\n children.push({\n type: 'text',\n text: text.substring(0, modifier.id.length + 1)\n })\n text = text.substring(modifier.id.length + 2)\n start = text.indexOf(commandStart)\n continue\n }\n let closing = -1\n let index = modifier.id.length + 2\n let counter = 1\n let escaping = false\n while (index < text.length) {\n if (text[index] === open && !escaping) {\n counter++\n }\n if (text[index] === close && !escaping) {\n counter--\n if (counter === 0) {\n closing = index\n break\n }\n }\n escaping = text[index] === commandStart\n index++\n }\n\n if (closing !== -1) {\n children.push({\n type: modifier.name,\n children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n })\n text = text.substring(closing + 1)\n start = text.indexOf(commandStart)\n continue\n }\n }\n // nothing could be applied to command start\n children.push({\n type: 'text',\n text: text[0]!\n })\n text = text.substring(1)\n start = text.indexOf(commandStart)\n }\n\n return {\n type: 'none',\n children\n }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n if (node.type === 'text') {\n return !node.text ? undefined : node\n }\n if (astNodeInserterType.some(value => value === node.type)) {\n return node\n }\n\n const currentNode = node as\n { type: ASTNodeModifierType, children: ASTNode[] }\n\n if (currentNode.children.length === 0) {\n return undefined\n }\n\n let children: ASTNode[] = []\n for (let i = 0; i < currentNode.children.length; i++) {\n const child = optimizeTree(currentNode.children[i]!)\n if (!child) {\n continue\n }\n if (child.type === 'none') {\n children.push(...child.children)\n } else {\n children.push(child)\n }\n }\n\n currentNode.children = children\n children = []\n\n for (let i = 0; i < currentNode.children.length; i++) {\n const child = currentNode.children[i]!\n if (child) {\n if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n } else {\n children.push(child)\n }\n }\n }\n currentNode.children = children\n return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n text: string,\n className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n const tree = parseMarkdown(text)\n const optimizedTree = optimizeTree(tree)!\n return \n}\n","import type { CSSProperties, Dispatch, HTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode, RefObject, SetStateAction } from 'react'\nimport { useCallback, useId, useState } from 'react'\nimport { createContext, useContext, useEffect, useRef } from 'react'\nimport clsx from 'clsx'\nimport { PropsUtil } from '@/src/utils/propsUtil'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\nimport { createPortal } from 'react-dom'\nimport { Visibility } from './Visibility'\nimport { useControlledState } from '@/src/hooks/useControlledState'\n\nexport interface TabInfo {\n id: string,\n labelId: string,\n label: ReactNode,\n disabled?: boolean,\n ref: RefObject,\n}\n\nfunction sortByDomOrder(infos: TabInfo[]): TabInfo[] {\n return infos.slice().sort((a, b) => {\n const elA = a.ref.current\n const elB = b.ref.current\n if (!elA && !elB) return 0\n if (!elA) return 1\n if (!elB) return -1\n return (elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING) ? -1 : 1\n })\n}\n\ntype PortalState = {\n id: string,\n ref: RefObject,\n}\n\nexport interface TabContextType {\n tabs: {\n activeId: string | null,\n setActiveId: Dispatch>,\n subscribe: (info: TabInfo) => () => void,\n infos: TabInfo[],\n },\n portal: {\n id: string | null,\n element: HTMLElement | null,\n setPortal: Dispatch>,\n },\n}\n\nconst TabContext = createContext(null)\n\nexport function useTabContext(): TabContextType {\n const context = useContext(TabContext)\n if (!context) throw new Error('useTabContext must be used inside a ')\n return context\n}\n\nexport interface TabSwitcherProps extends PropsWithChildren {\n activeId?: string,\n onActiveIdChange?: (activeId: string | null) => void,\n initialActiveId?: string,\n}\n\n//\n// TabSwitcher\n//\n\n/**\n * The controlling component of several Tabpanels.\n *\n * The uncontrolled mode only works if the Tabpanels do not remount.\n */\nexport function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange, initialActiveId }: TabSwitcherProps) {\n const [activeId, setActiveId] = useControlledState({\n value: controlledActiveId,\n defaultValue: initialActiveId ?? null,\n onValueChange: onActiveIdChange,\n })\n const [tabInfos, setTabInfos] = useState([])\n const [portalState, setPortalState] = useState(null)\n\n const subscribe = useCallback((info: TabInfo) => {\n const id = info.id\n setTabInfos(prevState => {\n const existingIndex = prevState.findIndex(t => t.id === id)\n const infos = existingIndex >= 0\n ? prevState.map((t, i) => (i === existingIndex ? { ...t, ...info } : t))\n : [...prevState, info]\n return sortByDomOrder(infos)\n })\n return () => {\n setTabInfos(prevState => {\n return prevState.filter(t => t.id !== id)\n })\n }\n }, [])\n\n\n useEffect(() => {\n const active = tabInfos.find(value => value.id === activeId)\n if(!active || !active.disabled) return\n const firstEnabled = tabInfos.find(value => !value.disabled)\n if(firstEnabled) {\n setActiveId(firstEnabled.id)\n } else {\n setActiveId(null)\n }\n }, [activeId, setActiveId, tabInfos])\n\n const registerPortal: Dispatch> = useCallback((action) => {\n setPortalState(prev => resolveSetState(action, prev))\n }, [])\n\n const changeActiveId: Dispatch> = useCallback((action) => {\n setActiveId(prev => {\n const next = resolveSetState(action, prev)\n if (next === null) return next\n const info = tabInfos.find(value => value.id === next)\n if (info?.disabled) return prev\n return next\n })\n }, [setActiveId, tabInfos])\n\n const resolvedActiveId = () => {\n const active = tabInfos.find(value => value.id === activeId)\n if(!!active && !active.disabled) return activeId\n const firstEnabled = tabInfos.find(value => !value.disabled)\n if(firstEnabled) return firstEnabled.id\n return tabInfos[0]?.id ?? null\n }\n\n return (\n \n {children}\n \n )\n}\n\n//\n// TabList\n//\ntype TabListProps = HTMLAttributes\n\nexport function TabList({ ...props }: TabListProps) {\n const { tabs } = useTabContext()\n const { infos, activeId, setActiveId: setActive } = tabs\n const refs = useRef>({})\n\n const onKeyDown = (e: KeyboardEvent) => {\n if(!infos) return\n const idx = infos?.findIndex((tab) => tab.id === activeId)\n if (idx === -1) return\n\n const step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0\n if (step === 0) return\n\n let nextIdx = idx\n for (let i = 0; i < infos.length; i++) {\n nextIdx = (nextIdx + step + infos.length) % infos.length\n if (!infos[nextIdx].disabled) break\n }\n if (infos[nextIdx].disabled) return\n\n const nextId = infos[nextIdx].id\n setActive(nextId)\n refs.current[nextId]?.focus()\n }\n\n return (\n \n {infos?.map((tabInfo) => {\n const isDisabled = !!tabInfo.disabled\n const isActive = activeId === tabInfo.id\n return (\n {\n refs.current[tabInfo.id] = el\n }}\n id={tabInfo.labelId}\n\n\n {...(isDisabled ? {} : PropsUtil.aria.click(() => setActive(tabInfo.id)))}\n\n data-name=\"tab-list-item\"\n data-active={PropsUtil.dataAttributes.bool(isActive)}\n data-disabled={PropsUtil.dataAttributes.bool(isDisabled)}\n\n role=\"tab\"\n aria-selected={isActive}\n aria-disabled={isDisabled}\n aria-controls={tabInfo.id}\n tabIndex={isActive && !isDisabled ? 0 : -1}\n >\n {tabInfo.label}\n \n )\n })}\n \n )\n}\n\n\n//\n// TabView\n//\ntype TabViewProps = HTMLAttributes\n\nexport function TabView({ ...props }: TabViewProps) {\n const generated = useId()\n const id = props.id ?? 'tab-view-' + generated\n const { portal } = useTabContext()\n const { setPortal } = portal\n const ref = useRef(null)\n\n useEffect(() => {\n setPortal({ id, ref })\n return () => setPortal(null)\n }, [id, setPortal])\n\n return (\n \n )\n}\n\ntype TabPanelProps = HTMLAttributes & {\n label: string,\n forceMount?: boolean,\n disabled?: boolean,\n initiallyActive?: boolean,\n}\n\n//\n// TabPanel\n//\nexport function TabPanel({ label, forceMount = false, disabled = false, initiallyActive = false, ...props }: TabPanelProps) {\n const { tabs, portal } = useTabContext()\n const { subscribe, activeId, setActiveId } = tabs\n const generatedId = useId()\n const id = props.id ?? 'tab-panel-' + generatedId\n const labelId = 'tab-list-button-' + generatedId\n const ref = useRef(null)\n\n useEffect(() => {\n return subscribe({ id, label, labelId, disabled, ref })\n }, [id, label, labelId, disabled, subscribe])\n\n const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = useState(false)\n useEffect(() => {\n if(!hasAnnouncedIntialliyActive) {\n if(initiallyActive) {\n setActiveId(id)\n }\n setHasAnnouncedIntialliyActive(true)\n }\n }, [hasAnnouncedIntialliyActive, id, initiallyActive, setActiveId])\n\n const isActive = activeId === id\n\n const content = (\n