50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4543,"use client"; import { Toast as ToastPrimitive } from "@base-ui/react/toast"; import { Alert02Icon, AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import type { IconSvgElement } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import { useLayoutEffect, useRef, useState } from "react"; import type { ComponentProps, ReactNode } from "react"; import { Button } from "@/components/primitives/button"; import { Spinner } from "@/components/primitives/spinner"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, layers, lineHeights, media, motion, presses, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; const toast = ToastPrimitive.createToastManager(); // Base UI measures the stack and swipe; these turn its variables into motion. const gap = space.sm; const peek = space.sm; const height = "var(--toast-frontmost-height, var(--toast-height))"; const scale = `max(0, 1 - var(--toast-index) * ${motion.stackScale})`; const offsetY = `calc(var(--toast-offset-y) * -1 - var(--toast-index) * ${gap} + var(--toast-swipe-movement-y))`; const swipeX = "var(--toast-swipe-movement-x)"; const swipeY = "var(--toast-swipe-movement-y)"; const textIn = stylex.keyframes({ from: { filter: `blur(${motion.crossfadeTextBlur})`, opacity: 0 }, }); const textOut = stylex.keyframes({ to: { filter: `blur(${motion.crossfadeTextBlur})`, opacity: 0 }, }); const layoutAnimation = { // The Web Animations API takes bare milliseconds; the token carries `ms`. duration: Number(durations.layout.slice(0, -"ms".length)), easing: easings.layout, }; // `error`, not `danger`: Base UI's `toast.promise` sets it. const statuses = ["error", "info", "success", "warning"] as const; const toastTypes = [...statuses, "loading"] as const; type ToastType = (typeof toastTypes)[number]; const icons = { error: AlertCircleIcon, info: InformationCircleIcon, success: CheckmarkCircle02Icon, warning: Alert02Icon, } satisfies Record<(typeof statuses)[number], IconSvgElement>; function isToastType(type: string | undefined): type is ToastType { return toastTypes.some((name) => name === type); } const styles = stylex.create({ viewport: { bottom: space.md, insetInlineEnd: space.md, position: "fixed", width: { default: `calc(100vw - 2 * ${space.md})`, [media.sm]: sizes.toast, }, zIndex: layers.toast, }, toast: { borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, color: colors.textPrimary, cursor: "default", height: { default: height, ":is([data-expanded])": "var(--toast-height)", }, insetBlockEnd: 0, insetInlineEnd: 0, opacity: { default: 1, ":is([data-limited], [data-starting-style], [data-ending-style])": 0, }, position: "absolute", transform: { default: `translateX(${swipeX}) translateY(calc(${swipeY} - var(--toast-index) * ${peek} - (1 - ${scale}) * ${height})) scale(${scale})`, ":is([data-expanded])": `translateX(${swipeX}) translateY(${offsetY})`, // Two attributes, so these outrank the expanded position above. ":is([data-starting-style]):not([data-swipe-direction])": "translateY(100%)", ":is([data-ending-style]):not([data-swipe-direction])": "translateY(100%)", ":is([data-ending-style][data-swipe-direction='down'])": `translateY(calc(${swipeY} + 150%))`, ":is([data-ending-style][data-swipe-direction='right'])": `translateX(calc(${swipeX} + 150%)) translateY(${offsetY})`, }, transformOrigin: "bottom center", transitionDuration: { default: durations.move, ":is([data-ending-style])": durations.popoverExit, }, transitionProperty: { default: "opacity, height, transform", // The toast follows the finger with no lag. ":is([data-swiping])": "opacity, height", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.out, userSelect: "none", width: "100%", zIndex: "calc(1000 - var(--toast-index))", // The surface is its own layer, so a content change can grow it without // resizing the toast, which Base UI is measuring. "::before": { backgroundColor: colors.raised, borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, boxShadow: shadows.lg, content: "''", insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, position: "absolute", zIndex: -1, }, // Bridges the gap between toasts, so moving across it keeps the stack expanded. "::after": { content: "''", height: `calc(${gap} + 1px)`, insetBlockStart: "100%", insetInlineEnd: 0, insetInlineStart: 0, position: "absolute", }, }, content: { alignItems: "flex-start", display: "flex", gap: space.sm, opacity: { default: 1, ":is([data-behind]):not([data-expanded])": 0, }, paddingBlock: space.sm, paddingInlineEnd: space.sm, paddingInlineStart: { default: space.md, ":has(> [data-slot='toast-icon'])": space.sm, }, transitionDuration: durations.move, transitionProperty: "opacity", transitionTimingFunction: easings.out, }, icon: { color: colors.textSecondary, flexShrink: 0, height: sizes.icon, // Centers the icon on the title's first line. marginBlockStart: `calc((${lineHeights.textSm} - ${sizes.icon}) / 2)`, position: "relative", width: sizes.icon, }, // Every icon stays mounted, so a type change cross-fades instead of swapping. layer: { // Flex, so the SVG doesn't sit on a text baseline a pixel low. display: "flex", filter: `blur(${motion.crossfadeBlur})`, insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, opacity: 0, position: "absolute", transform: `scale(${motion.crossfadeScale})`, transitionDuration: durations.crossfade, transitionProperty: { default: "opacity, transform, filter", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.crossfade, }, shown: { filter: "blur(0)", opacity: 1, transform: "scale(1)", }, error: { color: colors.dangerText }, info: { color: colors.infoText }, success: { color: colors.successText }, warning: { color: colors.warningText }, // The text and its action share a row while both fit, and the action drops under the text // when its label is too long, so it never pushes the close button out. main: { alignItems: "center", columnGap: space.sm, display: "flex", flex: 1, flexWrap: "wrap", minWidth: 0, rowGap: space.xs, }, body: { display: "flex", flexBasis: sizes.menu, flexDirection: "column", flexGrow: 1, gap: space.xxxs, minWidth: 0, position: "relative", }, // Blur bridges the two texts, so they read as one changing instead of two overlapping. entering: { animationDuration: durations.crossfade, animationName: textIn, animationTimingFunction: easings.out, }, leaving: { animationDuration: durations.popover, animationFillMode: "forwards", animationName: textOut, animationTimingFunction: easings.out, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, pointerEvents: "none", position: "absolute", }, title: { fontWeight: fontWeights.medium, overflowWrap: "anywhere", textWrap: "balance", }, description: { color: colors.textSecondary, overflowWrap: "anywhere", textWrap: "pretty", }, action: { maxWidth: "100%", }, close: { alignItems: "center", // Pulled past the content padding into the corner, `space.xxs` from both edges. marginBlockStart: `calc(${space.xxs} - ${space.sm})`, marginInlineEnd: `calc(${space.xxs} - ${space.sm})`, backgroundColor: { default: "transparent", [media.hover]: { default: "transparent", ":hover": colors.fillSubtle }, ":active": colors.fillSubtle, }, borderStartStartRadius: radii.sm, borderStartEndRadius: radii.sm, borderEndStartRadius: radii.sm, borderEndEndRadius: radii.sm, borderBlockStyle: "none", borderInlineStyle: "none", color: { default: colors.textMuted, [media.hover]: { default: colors.textMuted, ":hover": colors.textPrimary, }, ":active": colors.textPrimary, }, cursor: "pointer", display: "flex", flexShrink: 0, height: sizes.controlXxs, justifyContent: "center", paddingBlock: 0, paddingInlineEnd: 0, paddingInlineStart: 0, position: "relative", touchAction: "manipulation", transform: { default: null, ":active": presses.icon }, transitionDuration: `${durations.press}, ${durations.hover}, ${durations.hover}`, transitionProperty: "transform, background-color, color", transitionTimingFunction: `${easings.out}, ease, ease`, WebkitTapHighlightColor: "transparent", width: sizes.controlXxs, "::before": { content: "''", insetBlockEnd: `calc((${sizes.controlXxs} - ${sizes.hitArea}) / 2)`, insetBlockStart: `calc((${sizes.controlXxs} - ${sizes.hitArea}) / 2)`, insetInlineEnd: `calc((${sizes.controlXxs} - ${sizes.hitArea}) / 2)`, insetInlineStart: `calc((${sizes.controlXxs} - ${sizes.hitArea}) / 2)`, position: "absolute", }, }, }); function ToastProvider(props: ToastPrimitive.Provider.Props) { return ; } function ToastPortal({ sx, ...props }: Styled) { return ( ); } function ToastViewport({ sx, ...props }: Styled) { return ( ); } function Toast({ sx, ...props }: Styled) { return ( ); } function ToastContent({ sx, ...props }: Styled) { return ( ); } // Hue only on the icon: the shape and title still say it without color. const tones = { error: styles.error, info: styles.info, success: styles.success, warning: styles.warning, } satisfies Record<(typeof statuses)[number], stylex.StyleXStyles>; function ToastIcon({ sx, type, ...props }: Styled> & { type: ToastType }) { return ( {statuses.map((name) => ( ))} ); } function ToastBody({ sx, ...props }: Styled>) { return (

); } function ToastTitle({ sx, ...props }: Styled) { return ( ); } function ToastDescription({ sx, ...props }: Styled) { return ( ); } // The styles ride on the Button: it applies its own last, over anything Base UI merges in. function ToastAction({ sx, ...props }: Omit, "render">) { return ( } {...props} /> ); } function ToastClose({ children, sx, ...props }: Styled) { return ( {children ?? ( )} ); } interface Snapshot { description: ReactNode; key: number; title: ReactNode; } function snapshot(item: ToastPrimitive.Root.ToastObject): Snapshot { return { description: item.description, key: item.updateKey ?? 0, title: item.title, }; } // Base UI re-measures the toast whenever its content resizes, reading any // height animation mid-flight. So the toast takes its new height at once, and // only the surface and content, which it never measures, travel from the old one. function useHeightMorph(natural: number | undefined) { const root = useRef(null); const content = useRef(null); const measured = useRef(natural); useLayoutEffect(() => { const from = measured.current; measured.current = natural; if ( !root.current || !content.current || from === undefined || natural === undefined || from === natural || // Collapsed toasts behind take the front one's height; only one showing its own animates. root.current.offsetHeight !== natural || matchMedia("(prefers-reduced-motion: reduce)").matches ) { return; } // Bottom-anchored, so the old top edge sits `grown` px lower. const grown = natural - from; root.current.animate([{ top: `${grown}px` }, { top: "0px" }], { ...layoutAnimation, pseudoElement: "::before", }); content.current.animate( [ { clipPath: `inset(0 0 ${Math.max(grown, 0)}px 0)`, transform: `translateY(${grown}px)`, }, { clipPath: "inset(0 0 0 0)", transform: "none" }, ], layoutAnimation ); }, [natural]); return [root, content] as const; } function ToastItem({ item }: { item: ToastPrimitive.Root.ToastObject }) { const [rootRef, contentRef] = useHeightMorph(item.height); // The old text stays on screen, fading out, under the new text fading in. const [seen, setSeen] = useState(() => snapshot(item)); const [previous, setPrevious] = useState(null); if ((item.updateKey ?? 0) !== seen.key) { setPrevious(seen); setSeen(snapshot(item)); } return ( {isToastType(item.type) && }

{previous && ( { setPrevious(null); }} {...stylex.props(styles.body, styles.leaving)} > {previous.title} {previous.description === undefined ? null : ( {previous.description} )} )}

); } function ToastList() { const { toasts } = ToastPrimitive.useToastManager(); return toasts.map((item) => ); } function Toaster({ children, sx, toastManager = toast, ...props }: ToastPrimitive.Provider.Props & { sx?: Sx }) { return ( {children} ); } const { useToastManager } = ToastPrimitive; export { Toast, ToastAction, ToastBody, ToastClose, ToastContent, ToastDescription, Toaster, ToastIcon, ToastPortal, ToastProvider, ToastTitle, ToastViewport, toast, toastTypes, useToastManager, }; export type { ToastType }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/button.json","https://constella.aayush.cv/r/spinner.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/toast.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]