@lobehub/ui 5.25.0 → 5.27.0

package/es/Image/viewer/useZoomPan.mjs

@@ -0,0 +1,346 @@
+import { anchoredZoom, clampPan, clampScale, computeFit, doubleClickTarget, normalizeRotation, panBounds, rubberBand, wheelZoomFactor } from "./geometry.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { animate, motionValue } from "motion/react";
+//#region src/Image/viewer/useZoomPan.ts
+const WHEEL_CLOSE_THRESHOLD = 100;
+const WHEEL_IDLE_MS = 300;
+const ZOOM_STEP = 1.5;
+const RESET_TRANSITION = {
+	damping: 30,
+	stiffness: 300,
+	type: "spring"
+};
+const CLEAN_EPSILON = .01;
+const useZoomPan = ({ natural, viewport, maxScale, onCloseRequest, isClosing, fillViewport }) => {
+	const [{ scale, x, y, rotate, flipX, flipY }] = useState(() => ({
+		flipX: motionValue(false),
+		flipY: motionValue(false),
+		rotate: motionValue(0),
+		scale: motionValue(1),
+		x: motionValue(0),
+		y: motionValue(0)
+	}));
+	const naturalRef = useRef(natural);
+	const viewportRef = useRef(viewport);
+	const maxScaleRef = useRef(maxScale ?? 8);
+	maxScaleRef.current = maxScale ?? 8;
+	const fillViewportRef = useRef(fillViewport ?? false);
+	fillViewportRef.current = fillViewport ?? false;
+	const onCloseRequestRef = useRef(onCloseRequest);
+	onCloseRequestRef.current = onCloseRequest;
+	const isClosingRef = useRef(isClosing);
+	isClosingRef.current = isClosing;
+	const closeAccumRef = useRef(0);
+	const disarmedRef = useRef(false);
+	const idleTimerRef = useRef(null);
+	const resetCloseTracking = useCallback(() => {
+		if (idleTimerRef.current !== null) {
+			clearTimeout(idleTimerRef.current);
+			idleTimerRef.current = null;
+		}
+		closeAccumRef.current = 0;
+		disarmedRef.current = false;
+	}, []);
+	const closing = useCallback(() => isClosingRef.current?.() ?? false, []);
+	const isCleanState = useCallback(() => Math.abs(scale.get() - 1) < CLEAN_EPSILON && Math.abs(rotate.get()) < CLEAN_EPSILON && !flipX.get() && !flipY.get(), [
+		flipX,
+		flipY,
+		rotate,
+		scale
+	]);
+	const computeDerived = useCallback(() => {
+		const currentScale = scale.get();
+		return {
+			canZoomIn: currentScale < maxScaleRef.current,
+			canZoomOut: currentScale > 1,
+			isClean: isCleanState(),
+			isZoomed: currentScale > 1,
+			rotation: normalizeRotation(rotate.get())
+		};
+	}, [
+		isCleanState,
+		rotate,
+		scale
+	]);
+	const [derived, setDerived] = useState(computeDerived);
+	const syncDerived = useCallback(() => {
+		setDerived((prev) => {
+			const next = computeDerived();
+			if (prev.canZoomIn === next.canZoomIn && prev.canZoomOut === next.canZoomOut && prev.isClean === next.isClean && prev.isZoomed === next.isZoomed && prev.rotation === next.rotation) return prev;
+			return next;
+		});
+	}, [computeDerived]);
+	useEffect(() => {
+		const unsubscribers = [
+			scale,
+			rotate,
+			flipX,
+			flipY
+		].map((value) => value.on("change", syncDerived));
+		syncDerived();
+		return () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+		};
+	}, [
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		syncDerived
+	]);
+	const getFitRect = useCallback(() => computeFit(naturalRef.current, viewportRef.current, normalizeRotation(rotate.get()), fillViewportRef.current), [rotate]);
+	const applyTransform = useCallback((next, fitRect) => {
+		const clamped = clampPan(next, fitRect, viewportRef.current);
+		scale.jump(next.scale);
+		x.jump(clamped.x);
+		y.jump(clamped.y);
+	}, [
+		scale,
+		x,
+		y
+	]);
+	const animateTransform = useCallback((next, fitRect) => {
+		const clamped = clampPan(next, fitRect, viewportRef.current);
+		animate(scale, next.scale, RESET_TRANSITION);
+		animate(x, clamped.x, RESET_TRANSITION);
+		animate(y, clamped.y, RESET_TRANSITION);
+	}, [
+		scale,
+		x,
+		y
+	]);
+	const zoomBy = useCallback((factor) => {
+		if (closing()) return;
+		const currentScale = scale.get();
+		const targetScale = clampScale(currentScale * factor, maxScaleRef.current);
+		const fitRect = getFitRect();
+		const anchor = {
+			x: viewportRef.current.width / 2,
+			y: viewportRef.current.height / 2
+		};
+		const next = anchoredZoom({
+			scale: currentScale,
+			x: x.get(),
+			y: y.get()
+		}, targetScale, anchor, fitRect);
+		animateTransform(next, fitRect);
+	}, [
+		animateTransform,
+		closing,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const zoomIn = useCallback(() => zoomBy(ZOOM_STEP), [zoomBy]);
+	const zoomOut = useCallback(() => zoomBy(1 / ZOOM_STEP), [zoomBy]);
+	const handleDoubleClick = useCallback((point) => {
+		if (closing()) return;
+		const currentScale = scale.get();
+		const fitRect = getFitRect();
+		const target = doubleClickTarget(currentScale, naturalRef.current, fitRect, normalizeRotation(rotate.get()));
+		const targetScale = clampScale(target, maxScaleRef.current);
+		const next = anchoredZoom({
+			scale: currentScale,
+			x: x.get(),
+			y: y.get()
+		}, targetScale, point, fitRect);
+		animateTransform(next, fitRect);
+	}, [
+		animateTransform,
+		closing,
+		getFitRect,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const handleWheel = useCallback((event) => {
+		event.preventDefault?.();
+		if (closing()) return;
+		if (idleTimerRef.current !== null) clearTimeout(idleTimerRef.current);
+		idleTimerRef.current = setTimeout(() => {
+			idleTimerRef.current = null;
+			closeAccumRef.current = 0;
+			disarmedRef.current = false;
+		}, WHEEL_IDLE_MS);
+		const currentScale = scale.get();
+		if (!!(event.ctrlKey || event.metaKey) || currentScale > 1) {
+			disarmedRef.current = true;
+			closeAccumRef.current = 0;
+			const rawTarget = currentScale * wheelZoomFactor(event.deltaY);
+			if (rawTarget <= 1) {
+				animate(scale, 1, RESET_TRANSITION);
+				animate(x, 0, RESET_TRANSITION);
+				animate(y, 0, RESET_TRANSITION);
+				return;
+			}
+			const targetScale = clampScale(rawTarget, maxScaleRef.current);
+			const fitRect = getFitRect();
+			const anchor = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			const next = anchoredZoom({
+				scale: currentScale,
+				x: x.get(),
+				y: y.get()
+			}, targetScale, anchor, fitRect);
+			applyTransform(next, fitRect);
+			return;
+		}
+		if (disarmedRef.current || !isCleanState()) return;
+		closeAccumRef.current += Math.abs(event.deltaY);
+		if (closeAccumRef.current >= WHEEL_CLOSE_THRESHOLD) {
+			closeAccumRef.current = 0;
+			onCloseRequestRef.current?.();
+		}
+	}, [
+		applyTransform,
+		closing,
+		getFitRect,
+		isCleanState,
+		scale,
+		x,
+		y
+	]);
+	const rotateBy = useCallback((delta) => {
+		if (closing()) return;
+		rotate.jump(normalizeRotation(rotate.get() + delta));
+		scale.jump(1);
+		x.jump(0);
+		y.jump(0);
+	}, [
+		closing,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const rotateLeft = useCallback(() => rotateBy(-90), [rotateBy]);
+	const rotateRight = useCallback(() => rotateBy(90), [rotateBy]);
+	const flipHorizontal = useCallback(() => {
+		if (closing()) return;
+		flipX.set(!flipX.get());
+	}, [closing, flipX]);
+	const flipVertical = useCallback(() => {
+		if (closing()) return;
+		flipY.set(!flipY.get());
+	}, [closing, flipY]);
+	const reset = useCallback(() => {
+		if (closing()) return;
+		animate(scale, 1, RESET_TRANSITION);
+		animate(x, 0, RESET_TRANSITION);
+		animate(y, 0, RESET_TRANSITION);
+		animate(rotate, 0, RESET_TRANSITION);
+		flipX.set(false);
+		flipY.set(false);
+	}, [
+		closing,
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const dragBy = useCallback((delta) => {
+		if (closing()) return;
+		const fitRect = getFitRect();
+		const bounds = panBounds({
+			scale: scale.get(),
+			x: 0,
+			y: 0
+		}, fitRect, viewportRef.current);
+		x.set(rubberBand(x.get() + delta.x, bounds.x.min, bounds.x.max));
+		y.set(rubberBand(y.get() + delta.y, bounds.y.min, bounds.y.max));
+	}, [
+		closing,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const dragEnd = useCallback(() => {
+		if (closing()) return;
+		const fitRect = getFitRect();
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, viewportRef.current);
+		animate(x, clamped.x, RESET_TRANSITION);
+		animate(y, clamped.y, RESET_TRANSITION);
+	}, [
+		closing,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const escIntent = useCallback(() => isCleanState() ? "close" : "reset", [isCleanState]);
+	const setViewport = useCallback((next) => {
+		viewportRef.current = next;
+		const fitRect = computeFit(naturalRef.current, next, normalizeRotation(rotate.get()), fillViewportRef.current);
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, next);
+		x.set(clamped.x);
+		y.set(clamped.y);
+	}, [
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const setNatural = useCallback((next) => {
+		naturalRef.current = next;
+		const fitRect = computeFit(next, viewportRef.current, normalizeRotation(rotate.get()), fillViewportRef.current);
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, viewportRef.current);
+		x.set(clamped.x);
+		y.set(clamped.y);
+	}, [
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	return {
+		canZoomIn: derived.canZoomIn,
+		canZoomOut: derived.canZoomOut,
+		dragBy,
+		dragEnd,
+		escIntent,
+		flipHorizontal,
+		flipVertical,
+		flipX,
+		flipY,
+		handleDoubleClick,
+		handleWheel,
+		isClean: derived.isClean,
+		isZoomed: derived.isZoomed,
+		reset,
+		resetCloseTracking,
+		rotate,
+		rotateLeft,
+		rotateRight,
+		rotation: derived.rotation,
+		scale,
+		setNatural,
+		setViewport,
+		x,
+		y,
+		zoomIn,
+		zoomOut
+	};
+};
+//#endregion
+export { useZoomPan };
+
+//# sourceMappingURL=useZoomPan.mjs.map

package/es/Image/viewer/useZoomPan.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomPan.mjs","names":[],"sources":["../../../src/Image/viewer/useZoomPan.ts"],"sourcesContent":["import type { MotionValue } from 'motion/react';\nimport { animate, motionValue } from 'motion/react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { Point, Rect, Rotation, Size, TransformState } from './geometry';\nimport {\n  anchoredZoom,\n  clampPan,\n  clampScale,\n  computeFit,\n  DEFAULT_MAX_SCALE,\n  doubleClickTarget,\n  normalizeRotation,\n  panBounds,\n  rubberBand,\n  wheelZoomFactor,\n} from './geometry';\n\nconst WHEEL_CLOSE_THRESHOLD = 100;\nconst WHEEL_IDLE_MS = 300;\nconst ZOOM_STEP = 1.5;\nconst RESET_TRANSITION = { damping: 30, stiffness: 300, type: 'spring' as const };\nconst CLEAN_EPSILON = 0.01;\n\nexport interface WheelLikeEvent {\n  clientX: number;\n  clientY: number;\n  ctrlKey?: boolean;\n  deltaY: number;\n  metaKey?: boolean;\n  preventDefault?: () => void;\n}\n\nexport interface UseZoomPanOptions {\n  fillViewport?: boolean;\n  isClosing?: () => boolean;\n  maxScale?: number;\n  natural: Size;\n  onCloseRequest?: () => void;\n  viewport: Size;\n}\n\nexport interface UseZoomPanResult {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  dragBy: (delta: Point) => void;\n  dragEnd: () => void;\n  escIntent: () => 'reset' | 'close';\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  flipX: MotionValue<boolean>;\n  flipY: MotionValue<boolean>;\n  handleDoubleClick: (point: Point) => void;\n  handleWheel: (event: WheelLikeEvent) => void;\n  isClean: boolean;\n  isZoomed: boolean;\n  reset: () => void;\n  resetCloseTracking: () => void;\n  rotate: MotionValue<number>;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  setNatural: (natural: Size) => void;\n  setViewport: (viewport: Size) => void;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\ninterface DerivedState {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  isClean: boolean;\n  isZoomed: boolean;\n  rotation: Rotation;\n}\n\nexport const useZoomPan = ({\n  natural,\n  viewport,\n  maxScale,\n  onCloseRequest,\n  isClosing,\n  fillViewport,\n}: UseZoomPanOptions): UseZoomPanResult => {\n  const [{ scale, x, y, rotate, flipX, flipY }] = useState(() => ({\n    flipX: motionValue(false),\n    flipY: motionValue(false),\n    rotate: motionValue(0),\n    scale: motionValue(1),\n    x: motionValue(0),\n    y: motionValue(0),\n  }));\n\n  const naturalRef = useRef(natural);\n  const viewportRef = useRef(viewport);\n  const maxScaleRef = useRef(maxScale ?? DEFAULT_MAX_SCALE);\n  maxScaleRef.current = maxScale ?? DEFAULT_MAX_SCALE;\n  const fillViewportRef = useRef(fillViewport ?? false);\n  fillViewportRef.current = fillViewport ?? false;\n\n  const onCloseRequestRef = useRef(onCloseRequest);\n  onCloseRequestRef.current = onCloseRequest;\n\n  const isClosingRef = useRef(isClosing);\n  isClosingRef.current = isClosing;\n\n  const closeAccumRef = useRef(0);\n  const disarmedRef = useRef(false);\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const resetCloseTracking = useCallback(() => {\n    if (idleTimerRef.current !== null) {\n      clearTimeout(idleTimerRef.current);\n      idleTimerRef.current = null;\n    }\n    closeAccumRef.current = 0;\n    disarmedRef.current = false;\n  }, []);\n\n  // The close FLIP spring animates these same scale/x/y values. Any of\n  // these entry points still firing during the ~300ms close window would\n  // either fight that spring visually or, for wheel/reset specifically,\n  // race escIntent()/isCleanState() into cancelling the close outright.\n  const closing = useCallback(() => isClosingRef.current?.() ?? false, []);\n\n  const isCleanState = useCallback(\n    () =>\n      Math.abs(scale.get() - 1) < CLEAN_EPSILON &&\n      Math.abs(rotate.get()) < CLEAN_EPSILON &&\n      !flipX.get() &&\n      !flipY.get(),\n    [flipX, flipY, rotate, scale],\n  );\n\n  const computeDerived = useCallback((): DerivedState => {\n    const currentScale = scale.get();\n    return {\n      canZoomIn: currentScale < maxScaleRef.current,\n      canZoomOut: currentScale > 1,\n      isClean: isCleanState(),\n      isZoomed: currentScale > 1,\n      rotation: normalizeRotation(rotate.get()),\n    };\n  }, [isCleanState, rotate, scale]);\n\n  const [derived, setDerived] = useState<DerivedState>(computeDerived);\n\n  const syncDerived = useCallback(() => {\n    setDerived((prev) => {\n      const next = computeDerived();\n      if (\n        prev.canZoomIn === next.canZoomIn &&\n        prev.canZoomOut === next.canZoomOut &&\n        prev.isClean === next.isClean &&\n        prev.isZoomed === next.isZoomed &&\n        prev.rotation === next.rotation\n      ) {\n        return prev;\n      }\n      return next;\n    });\n  }, [computeDerived]);\n\n  useEffect(() => {\n    const unsubscribers = [scale, rotate, flipX, flipY].map((value) =>\n      value.on('change', syncDerived),\n    );\n    syncDerived();\n    return () => {\n      for (const unsubscribe of unsubscribers) unsubscribe();\n    };\n  }, [flipX, flipY, rotate, scale, syncDerived]);\n\n  const getFitRect = useCallback(\n    () =>\n      computeFit(\n        naturalRef.current,\n        viewportRef.current,\n        normalizeRotation(rotate.get()),\n        fillViewportRef.current,\n      ),\n    [rotate],\n  );\n\n  const applyTransform = useCallback(\n    (next: TransformState, fitRect: Rect) => {\n      const clamped = clampPan(next, fitRect, viewportRef.current);\n      // .jump(), not .set(): a surviving spring on these same values (e.g. a\n      // dragEnd clamp-back or wheel snap-back still in flight) would otherwise\n      // keep animating toward its own target and silently overwrite this\n      // instant write on its next tick — motion's set() never stops an\n      // active animation, only jump() does.\n      scale.jump(next.scale);\n      x.jump(clamped.x);\n      y.jump(clamped.y);\n    },\n    [scale, x, y],\n  );\n\n  // Wheel/pinch stays on the instant applyTransform for 1:1 gesture tracking;\n  // stepped inputs (toolbar/keyboard zoom, double-click) animate instead.\n  const animateTransform = useCallback(\n    (next: TransformState, fitRect: Rect) => {\n      const clamped = clampPan(next, fitRect, viewportRef.current);\n      animate(scale, next.scale, RESET_TRANSITION);\n      animate(x, clamped.x, RESET_TRANSITION);\n      animate(y, clamped.y, RESET_TRANSITION);\n    },\n    [scale, x, y],\n  );\n\n  const zoomBy = useCallback(\n    (factor: number) => {\n      if (closing()) return;\n      const currentScale = scale.get();\n      const targetScale = clampScale(currentScale * factor, maxScaleRef.current);\n      const fitRect = getFitRect();\n      const anchor: Point = { x: viewportRef.current.width / 2, y: viewportRef.current.height / 2 };\n      const next = anchoredZoom(\n        { scale: currentScale, x: x.get(), y: y.get() },\n        targetScale,\n        anchor,\n        fitRect,\n      );\n      animateTransform(next, fitRect);\n    },\n    [animateTransform, closing, getFitRect, scale, x, y],\n  );\n\n  const zoomIn = useCallback(() => zoomBy(ZOOM_STEP), [zoomBy]);\n  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_STEP), [zoomBy]);\n\n  const handleDoubleClick = useCallback(\n    (point: Point) => {\n      if (closing()) return;\n      const currentScale = scale.get();\n      const fitRect = getFitRect();\n      const target = doubleClickTarget(\n        currentScale,\n        naturalRef.current,\n        fitRect,\n        normalizeRotation(rotate.get()),\n      );\n      const targetScale = clampScale(target, maxScaleRef.current);\n      const next = anchoredZoom(\n        { scale: currentScale, x: x.get(), y: y.get() },\n        targetScale,\n        point,\n        fitRect,\n      );\n      animateTransform(next, fitRect);\n    },\n    [animateTransform, closing, getFitRect, rotate, scale, x, y],\n  );\n\n  const handleWheel = useCallback(\n    (event: WheelLikeEvent) => {\n      event.preventDefault?.();\n      if (closing()) return;\n\n      if (idleTimerRef.current !== null) clearTimeout(idleTimerRef.current);\n      idleTimerRef.current = setTimeout(() => {\n        idleTimerRef.current = null;\n        closeAccumRef.current = 0;\n        disarmedRef.current = false;\n      }, WHEEL_IDLE_MS);\n\n      const currentScale = scale.get();\n      const isPinch = !!(event.ctrlKey || event.metaKey);\n      const zoomed = currentScale > 1;\n\n      if (isPinch || zoomed) {\n        disarmedRef.current = true;\n        closeAccumRef.current = 0;\n\n        const rawTarget = currentScale * wheelZoomFactor(event.deltaY);\n\n        if (rawTarget <= 1) {\n          animate(scale, 1, RESET_TRANSITION);\n          animate(x, 0, RESET_TRANSITION);\n          animate(y, 0, RESET_TRANSITION);\n          return;\n        }\n\n        const targetScale = clampScale(rawTarget, maxScaleRef.current);\n        const fitRect = getFitRect();\n        const anchor: Point = { x: event.clientX, y: event.clientY };\n        const next = anchoredZoom(\n          { scale: currentScale, x: x.get(), y: y.get() },\n          targetScale,\n          anchor,\n          fitRect,\n        );\n        applyTransform(next, fitRect);\n        return;\n      }\n\n      if (disarmedRef.current || !isCleanState()) return;\n\n      closeAccumRef.current += Math.abs(event.deltaY);\n      if (closeAccumRef.current >= WHEEL_CLOSE_THRESHOLD) {\n        closeAccumRef.current = 0;\n        onCloseRequestRef.current?.();\n      }\n    },\n    [applyTransform, closing, getFitRect, isCleanState, scale, x, y],\n  );\n\n  const rotateBy = useCallback(\n    (delta: 90 | -90) => {\n      if (closing()) return;\n      rotate.jump(normalizeRotation(rotate.get() + delta));\n      scale.jump(1);\n      x.jump(0);\n      y.jump(0);\n    },\n    [closing, rotate, scale, x, y],\n  );\n\n  const rotateLeft = useCallback(() => rotateBy(-90), [rotateBy]);\n  const rotateRight = useCallback(() => rotateBy(90), [rotateBy]);\n\n  const flipHorizontal = useCallback(() => {\n    if (closing()) return;\n    flipX.set(!flipX.get());\n  }, [closing, flipX]);\n\n  const flipVertical = useCallback(() => {\n    if (closing()) return;\n    flipY.set(!flipY.get());\n  }, [closing, flipY]);\n\n  const reset = useCallback(() => {\n    if (closing()) return;\n    animate(scale, 1, RESET_TRANSITION);\n    animate(x, 0, RESET_TRANSITION);\n    animate(y, 0, RESET_TRANSITION);\n    animate(rotate, 0, RESET_TRANSITION);\n    flipX.set(false);\n    flipY.set(false);\n  }, [closing, flipX, flipY, rotate, scale, x, y]);\n\n  const dragBy = useCallback(\n    (delta: Point) => {\n      // A pointer can still be down when close starts (e.g. pinch to just\n      // over 1x — inside isClean's epsilon, so Esc/wheel reads 'close' —\n      // while the same gesture is still panning). Gated for consistency\n      // with the other entry points even though .set() here can't cancel\n      // the close spring outright, only cause a self-correcting flicker.\n      if (closing()) return;\n      const fitRect = getFitRect();\n      const bounds = panBounds({ scale: scale.get(), x: 0, y: 0 }, fitRect, viewportRef.current);\n      x.set(rubberBand(x.get() + delta.x, bounds.x.min, bounds.x.max));\n      y.set(rubberBand(y.get() + delta.y, bounds.y.min, bounds.y.max));\n    },\n    [closing, getFitRect, scale, x, y],\n  );\n\n  const dragEnd = useCallback(() => {\n    if (closing()) return;\n    const fitRect = getFitRect();\n    const clamped = clampPan(\n      { scale: scale.get(), x: x.get(), y: y.get() },\n      fitRect,\n      viewportRef.current,\n    );\n    animate(x, clamped.x, RESET_TRANSITION);\n    animate(y, clamped.y, RESET_TRANSITION);\n  }, [closing, getFitRect, scale, x, y]);\n\n  const escIntent = useCallback(\n    (): 'reset' | 'close' => (isCleanState() ? 'close' : 'reset'),\n    [isCleanState],\n  );\n\n  const setViewport = useCallback(\n    (next: Size) => {\n      viewportRef.current = next;\n      const fitRect = computeFit(\n        naturalRef.current,\n        next,\n        normalizeRotation(rotate.get()),\n        fillViewportRef.current,\n      );\n      const clamped = clampPan({ scale: scale.get(), x: x.get(), y: y.get() }, fitRect, next);\n      x.set(clamped.x);\n      y.set(clamped.y);\n    },\n    [rotate, scale, x, y],\n  );\n\n  const setNatural = useCallback(\n    (next: Size) => {\n      naturalRef.current = next;\n      const fitRect = computeFit(\n        next,\n        viewportRef.current,\n        normalizeRotation(rotate.get()),\n        fillViewportRef.current,\n      );\n      const clamped = clampPan(\n        { scale: scale.get(), x: x.get(), y: y.get() },\n        fitRect,\n        viewportRef.current,\n      );\n      x.set(clamped.x);\n      y.set(clamped.y);\n    },\n    [rotate, scale, x, y],\n  );\n\n  return {\n    canZoomIn: derived.canZoomIn,\n    canZoomOut: derived.canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    handleDoubleClick,\n    handleWheel,\n    isClean: derived.isClean,\n    isZoomed: derived.isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation: derived.rotation,\n    scale,\n    setNatural,\n    setViewport,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  };\n};\n\nexport type { Point, Rotation, Size } from './geometry';\n"],"mappings":"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"}

package/es/base-ui/Toast/hostGuard.mjs

@@ -0,0 +1,26 @@
+//#region src/base-ui/Toast/hostGuard.ts
+const hostOrder = [];
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	for (const listener of listeners) listener();
+};
+const registerToastHost = (id) => {
+	hostOrder.push(id);
+	emit();
+	return () => {
+		const index = hostOrder.indexOf(id);
+		if (index !== -1) hostOrder.splice(index, 1);
+		emit();
+	};
+};
+const isActiveToastHost = (id) => hostOrder[0] === id;
+const subscribeToastHost = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+//#endregion
+export { isActiveToastHost, registerToastHost, subscribeToastHost };
+
+//# sourceMappingURL=hostGuard.mjs.map

package/es/base-ui/Toast/hostGuard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hostGuard.mjs","names":[],"sources":["../../../src/base-ui/Toast/hostGuard.ts"],"sourcesContent":["const hostOrder: string[] = [];\nconst listeners = new Set<() => void>();\n\nconst emit = (): void => {\n  for (const listener of listeners) listener();\n};\n\nexport const registerToastHost = (id: string): (() => void) => {\n  hostOrder.push(id);\n  emit();\n  return () => {\n    const index = hostOrder.indexOf(id);\n    if (index !== -1) hostOrder.splice(index, 1);\n    emit();\n  };\n};\n\nexport const isActiveToastHost = (id: string): boolean => hostOrder[0] === id;\n\nexport const subscribeToastHost = (listener: () => void): (() => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nexport const __resetToastHostRegistryForTests = (): void => {\n  hostOrder.length = 0;\n};\n"],"mappings":";AAAA,MAAM,YAAsB,CAAC;AAC7B,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAmB;CACvB,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAa,qBAAqB,OAA6B;CAC7D,UAAU,KAAK,EAAE;CACjB,KAAK;CACL,aAAa;EACX,MAAM,QAAQ,UAAU,QAAQ,EAAE;EAClC,IAAI,UAAU,IAAI,UAAU,OAAO,OAAO,CAAC;EAC3C,KAAK;CACP;AACF;AAEA,MAAa,qBAAqB,OAAwB,UAAU,OAAO;AAE3E,MAAa,sBAAsB,aAAuC;CACxE,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF"}

package/es/base-ui/Toast/imperative.mjs

@@ -3,9 +3,11 @@ import { useIsClient } from "../../hooks/useIsClient.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
 import { acquireLayerZIndex } from "../zIndex/manager.mjs";
 import { ToastContext } from "./context.mjs";
+import { isActiveToastHost, registerToastHost, subscribeToastHost } from "./hostGuard.mjs";
+import { markToastHostNotReady, markToastHostReady, runWhenToastHostReady } from "./pendingQueue.mjs";
 import { viewportVariants } from "./style.mjs";
 import ToastItem from "./Toast.mjs";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useId, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Toast } from "@base-ui/react/toast";
@@ -32,15 +34,19 @@ const toastManagers = {
 	"top-left": Toast.createToastManager(),
 	"top-right": Toast.createToastManager()
 };
-const activeToastIds = {
-	"bottom": /* @__PURE__ */ new Set(),
-	"bottom-left": /* @__PURE__ */ new Set(),
-	"bottom-right": /* @__PURE__ */ new Set(),
-	"top": /* @__PURE__ */ new Set(),
-	"top-left": /* @__PURE__ */ new Set(),
-	"top-right": /* @__PURE__ */ new Set()
+const activeToasts = {
+	"bottom": /* @__PURE__ */ new Map(),
+	"bottom-left": /* @__PURE__ */ new Map(),
+	"bottom-right": /* @__PURE__ */ new Map(),
+	"top": /* @__PURE__ */ new Map(),
+	"top-left": /* @__PURE__ */ new Map(),
+	"top-right": /* @__PURE__ */ new Map()
 };
 const getManager = (position) => toastManagers[position];
+let toastIdCounter = 0;
+const generateToastId = () => `toast-${Date.now().toString(36)}-${(toastIdCounter++).toString(36)}`;
+const findActivePosition = (id) => ALL_POSITIONS.find((pos) => activeToasts[pos].has(id));
+const isFrontMost = (position, id) => Array.from(activeToasts[position].keys()).at(-1) === id;
 const normalizeOptions = (optionsOrMessage, type) => {
 	if (typeof optionsOrMessage === "string") return {
 		description: optionsOrMessage,
@@ -52,43 +58,62 @@ const normalizeOptions = (optionsOrMessage, type) => {
 	};
 };
 const createToastInstance = (id, position) => ({
-	close: () => getManager(position).close(id),
+	close: () => runWhenToastHostReady(() => getManager(position).close(id)),
 	id,
 	update: (options) => {
-		getManager(position).update(id, {
+		runWhenToastHostReady(() => getManager(position).update(id, {
 			data: options,
 			description: options.description,
 			title: options.title
-		});
+		}));
 	}
 });
 const addToast = (options) => {
 	const position = options.placement ?? globalState.position;
 	const manager = getManager(position);
-	const onRemove = options.onRemove;
-	const id = manager.add({
-		data: options,
-		description: options.description,
-		onClose: options.onClose,
-		onRemove: () => {
-			activeToastIds[position].delete(id);
-			onRemove?.();
-		},
-		timeout: options.duration ?? globalState.duration,
-		title: options.title
+	const { id: dedupeId, onClose, onRemove } = options;
+	if (dedupeId) {
+		const prevPosition = findActivePosition(dedupeId);
+		if (prevPosition && !(prevPosition === position && isFrontMost(position, dedupeId))) {
+			activeToasts[prevPosition].get(dedupeId).superseded = true;
+			activeToasts[prevPosition].delete(dedupeId);
+			runWhenToastHostReady(() => getManager(prevPosition).close(dedupeId));
+		}
+	}
+	const id = dedupeId ?? generateToastId();
+	const active = { superseded: false };
+	activeToasts[position].set(id, active);
+	runWhenToastHostReady(() => {
+		manager.add({
+			id,
+			data: options,
+			description: options.description,
+			onClose: () => {
+				if (active.superseded) return;
+				onClose?.();
+			},
+			onRemove: () => {
+				if (active.superseded) return;
+				activeToasts[position].delete(id);
+				onRemove?.();
+			},
+			timeout: options.duration ?? globalState.duration,
+			title: options.title
+		});
 	});
-	activeToastIds[position].add(id);
 	return createToastInstance(id, position);
 };
 const dismissToast = (id) => {
 	if (id) for (const [position, manager] of Object.entries(toastManagers)) {
-		activeToastIds[position].delete(id);
-		manager.close(id);
+		activeToasts[position].delete(id);
+		runWhenToastHostReady(() => manager.close(id));
 	}
 	else for (const [position, manager] of Object.entries(toastManagers)) {
-		const ids = Array.from(activeToastIds[position]);
-		for (const toastId of ids) manager.close(toastId);
-		activeToastIds[position].clear();
+		const ids = Array.from(activeToasts[position].keys());
+		activeToasts[position].clear();
+		runWhenToastHostReady(() => {
+			for (const toastId of ids) manager.close(toastId);
+		});
 	}
 };
 const createSuccessToast = (optionsOrMessage) => {
@@ -169,7 +194,11 @@ const ToastHost = memo(({ root, className, duration = 5e3, limit = 5, position =
 	const isClient = useIsClient();
 	const appElement = useAppElement();
 	const [viewportZIndex, setViewportZIndex] = useState(void 0);
+	const hostId = useId();
+	useEffect(() => registerToastHost(hostId), [hostId]);
+	const isActive = useSyncExternalStore(subscribeToastHost, () => isActiveToastHost(hostId), () => false);
 	useEffect(() => {
+		if (!isActive) return;
 		globalState = {
 			duration,
 			limit,
@@ -180,12 +209,21 @@ const ToastHost = memo(({ root, className, duration = 5e3, limit = 5, position =
 		duration,
 		limit,
 		position,
-		swipeDirection
+		swipeDirection,
+		isActive
 	]);
 	useEffect(() => {
+		if (!isActive) return;
 		setViewportZIndex(acquireLayerZIndex("toast"));
-	}, []);
-	if (!isClient) return null;
+	}, [isActive]);
+	useEffect(() => {
+		if (!isActive || !isClient) return void 0;
+		markToastHostReady();
+		return () => {
+			markToastHostNotReady();
+		};
+	}, [isActive, isClient]);
+	if (!isClient || !isActive) return null;
 	const container = root ?? appElement ?? document.body;
 	return ALL_POSITIONS.map((pos) => /* @__PURE__ */ jsx(ToastContext, {
 		value: {

package/es/base-ui/Toast/imperative.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"imperative.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { acquireLayerZIndex } from '../zIndex';\nimport { ToastContext } from './context';\nimport { viewportVariants } from './style';\nimport ToastItem from './Toast';\nimport {\n  type ToastAPI,\n  type ToastInstance,\n  type ToastOptions,\n  type ToastPosition,\n  type ToastPromiseOptions,\n  type ToastType,\n} from './type';\n\n// All possible positions\nconst ALL_POSITIONS: ToastPosition[] = [\n  'top',\n  'top-left',\n  'top-right',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n];\n\n// Global state management\ninterface ToastState {\n  duration: number;\n  limit: number;\n  position: ToastPosition;\n  swipeDirection: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nlet globalState: ToastState = {\n  duration: 5000,\n  limit: 5,\n  position: 'bottom-right',\n  swipeDirection: ['down', 'right'],\n};\n\n// Toast managers for each position\nconst toastManagers: Record<ToastPosition, ReturnType<typeof BaseToast.createToastManager>> = {\n  'bottom': BaseToast.createToastManager(),\n  'bottom-left': BaseToast.createToastManager(),\n  'bottom-right': BaseToast.createToastManager(),\n  'top': BaseToast.createToastManager(),\n  'top-left': BaseToast.createToastManager(),\n  'top-right': BaseToast.createToastManager(),\n};\n\nconst activeToastIds: Record<ToastPosition, Set<string>> = {\n  'bottom': new Set(),\n  'bottom-left': new Set(),\n  'bottom-right': new Set(),\n  'top': new Set(),\n  'top-left': new Set(),\n  'top-right': new Set(),\n};\n\nconst getManager = (position: ToastPosition) => toastManagers[position];\n\nconst normalizeOptions = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n  type: ToastType,\n): ToastOptions => {\n  if (typeof optionsOrMessage === 'string') {\n    return {\n      description: optionsOrMessage,\n      type,\n    };\n  }\n  return {\n    ...optionsOrMessage,\n    type,\n  };\n};\n\nconst createToastInstance = (id: string, position: ToastPosition): ToastInstance => ({\n  close: () => getManager(position).close(id),\n  id,\n  update: (options) => {\n    getManager(position).update(id, {\n      data: options,\n      description: options.description,\n      title: options.title,\n    });\n  },\n});\n\nconst addToast = (options: ToastOptions): ToastInstance => {\n  const position = options.placement ?? globalState.position;\n  const manager = getManager(position);\n  const onRemove = options.onRemove;\n  const id = manager.add({\n    data: options,\n    description: options.description,\n    onClose: options.onClose,\n    onRemove: () => {\n      activeToastIds[position].delete(id);\n      onRemove?.();\n    },\n    timeout: options.duration ?? globalState.duration,\n    title: options.title,\n  });\n  activeToastIds[position].add(id);\n  return createToastInstance(id, position);\n};\n\nconst dismissToast = (id?: string) => {\n  if (id) {\n    // Try to close from all managers since we don't know which position the toast is in\n    for (const [position, manager] of Object.entries(toastManagers)) {\n      activeToastIds[position as ToastPosition].delete(id);\n      manager.close(id);\n    }\n  } else {\n    // Clear all toasts\n    for (const [position, manager] of Object.entries(toastManagers)) {\n      const ids = Array.from(activeToastIds[position as ToastPosition]);\n      for (const toastId of ids) {\n        manager.close(toastId);\n      }\n      activeToastIds[position as ToastPosition].clear();\n    }\n  }\n};\n\nconst createSuccessToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'success'));\n};\n\nconst createErrorToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'error'));\n};\n\nconst createInfoToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'info'));\n};\n\nconst createWarningToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'warning'));\n};\n\nconst createLoadingToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  const options = normalizeOptions(optionsOrMessage, 'loading');\n  // Loading toasts don't auto-dismiss by default\n  return addToast({ duration: 0, ...options });\n};\n\nasync function promiseToast<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T> {\n  const loadingOptions =\n    typeof options.loading === 'string'\n      ? { description: options.loading }\n      : (options.loading as ToastOptions);\n\n  const loadingToast = addToast({\n    closable: false,\n    duration: 0,\n    type: 'loading',\n    ...loadingOptions,\n  });\n\n  try {\n    const result = await promise;\n\n    loadingToast.close();\n\n    const successOptions = (() => {\n      if (typeof options.success === 'string') {\n        return { description: options.success };\n      }\n      if (typeof options.success === 'function') {\n        return { description: options.success(result) };\n      }\n      return options.success as ToastOptions;\n    })();\n\n    addToast({ type: 'success', ...successOptions });\n\n    return result;\n  } catch (error) {\n    loadingToast.close();\n\n    const errorOptions = (() => {\n      if (typeof options.error === 'string') {\n        return { description: options.error };\n      }\n      if (typeof options.error === 'function') {\n        return { description: options.error(error as Error) };\n      }\n      return options.error as ToastOptions;\n    })();\n\n    addToast({ type: 'error', ...errorOptions });\n\n    throw error;\n  }\n}\n\n// Base toast function\nconst baseToast = (options: ToastOptions): ToastInstance => {\n  return addToast({ type: 'default', ...options });\n};\n\n// Toast API\nexport const toast: ToastAPI = Object.assign(baseToast, {\n  dismiss: dismissToast,\n  error: createErrorToast,\n  info: createInfoToast,\n  loading: createLoadingToast,\n  promise: promiseToast,\n  success: createSuccessToast,\n  warning: createWarningToast,\n});\n\n// Toast List Component\nconst ToastList = memo(() => {\n  const { toasts } = BaseToast.useToastManager();\n  return toasts.map((t) => <ToastItem key={t.id} toast={t} />);\n});\n\nToastList.displayName = 'ToastList';\n\nexport interface ToastHostProps {\n  className?: string;\n  /**\n   * Default duration for toasts\n   * @default 5000\n   */\n  duration?: number;\n  /**\n   * Maximum number of toasts\n   * @default 5\n   */\n  limit?: number;\n  /**\n   * Toast position\n   * @default 'bottom-right'\n   */\n  position?: ToastPosition;\n  /**\n   * Root element for portal\n   */\n  root?: HTMLElement | ShadowRoot | null;\n  /**\n   * Swipe direction to dismiss\n   * @default ['down', 'right']\n   */\n  swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nexport const ToastHost = memo(\n  ({\n    root,\n    className,\n    duration = 5000,\n    limit = 5,\n    position = 'bottom-right',\n    swipeDirection = ['down', 'right'],\n  }: ToastHostProps) => {\n    const isClient = useIsClient();\n    const appElement = useAppElement();\n    const [viewportZIndex, setViewportZIndex] = useState<number | undefined>(undefined);\n\n    useEffect(() => {\n      globalState = {\n        duration,\n        limit,\n        position,\n        swipeDirection,\n      };\n    }, [duration, limit, position, swipeDirection]);\n\n    useEffect(() => {\n      setViewportZIndex(acquireLayerZIndex('toast'));\n    }, []);\n\n    if (!isClient) return null;\n\n    const container = root ?? appElement ?? document.body;\n\n    return ALL_POSITIONS.map((pos) => (\n      <ToastContext key={pos} value={{ position: pos, swipeDirection }}>\n        <BaseToast.Provider limit={limit} timeout={duration} toastManager={getManager(pos)}>\n          <BaseToast.Portal container={container}>\n            <BaseToast.Viewport\n              className={cx(viewportVariants({ position: pos }), className)}\n              style={{ zIndex: viewportZIndex }}\n            >\n              <ToastList />\n            </BaseToast.Viewport>\n          </BaseToast.Portal>\n        </BaseToast.Provider>\n      </ToastContext>\n    ));\n  },\n);\n\nToastHost.displayName = 'ToastHost';\n\n// Hook to use toast manager\nexport const useToast = () => toast;\n"],"mappings":"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"}
+{"version":3,"file":"imperative.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useId, useState, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { acquireLayerZIndex } from '../zIndex';\nimport { ToastContext } from './context';\nimport { isActiveToastHost, registerToastHost, subscribeToastHost } from './hostGuard';\nimport {\n  __resetPendingToastQueueForTests,\n  markToastHostNotReady,\n  markToastHostReady,\n  runWhenToastHostReady,\n} from './pendingQueue';\nimport { viewportVariants } from './style';\nimport ToastItem from './Toast';\nimport {\n  type ToastAPI,\n  type ToastInstance,\n  type ToastOptions,\n  type ToastPosition,\n  type ToastPromiseOptions,\n  type ToastType,\n} from './type';\n\n// All possible positions\nconst ALL_POSITIONS: ToastPosition[] = [\n  'top',\n  'top-left',\n  'top-right',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n];\n\n// Global state management\ninterface ToastState {\n  duration: number;\n  limit: number;\n  position: ToastPosition;\n  swipeDirection: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nlet globalState: ToastState = {\n  duration: 5000,\n  limit: 5,\n  position: 'bottom-right',\n  swipeDirection: ['down', 'right'],\n};\n\n// Toast managers for each position\nconst toastManagers: Record<ToastPosition, ReturnType<typeof BaseToast.createToastManager>> = {\n  'bottom': BaseToast.createToastManager(),\n  'bottom-left': BaseToast.createToastManager(),\n  'bottom-right': BaseToast.createToastManager(),\n  'top': BaseToast.createToastManager(),\n  'top-left': BaseToast.createToastManager(),\n  'top-right': BaseToast.createToastManager(),\n};\n\ninterface ActiveToast {\n  superseded: boolean;\n}\n\nconst activeToasts: Record<ToastPosition, Map<string, ActiveToast>> = {\n  'bottom': new Map(),\n  'bottom-left': new Map(),\n  'bottom-right': new Map(),\n  'top': new Map(),\n  'top-left': new Map(),\n  'top-right': new Map(),\n};\n\nconst getManager = (position: ToastPosition) => toastManagers[position];\n\nlet toastIdCounter = 0;\nconst generateToastId = (): string =>\n  `toast-${Date.now().toString(36)}-${(toastIdCounter++).toString(36)}`;\n\nconst findActivePosition = (id: string) => ALL_POSITIONS.find((pos) => activeToasts[pos].has(id));\n\n// Base UI prepends every new toast, so the last entry we registered is the one\n// currently rendered at the front of the stack.\nconst isFrontMost = (position: ToastPosition, id: string) =>\n  Array.from(activeToasts[position].keys()).at(-1) === id;\n\nconst normalizeOptions = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n  type: ToastType,\n): ToastOptions => {\n  if (typeof optionsOrMessage === 'string') {\n    return {\n      description: optionsOrMessage,\n      type,\n    };\n  }\n  return {\n    ...optionsOrMessage,\n    type,\n  };\n};\n\nconst createToastInstance = (id: string, position: ToastPosition): ToastInstance => ({\n  close: () => runWhenToastHostReady(() => getManager(position).close(id)),\n  id,\n  update: (options) => {\n    runWhenToastHostReady(() =>\n      getManager(position).update(id, {\n        data: options,\n        description: options.description,\n        title: options.title,\n      }),\n    );\n  },\n});\n\n// createToastManager() is a stateless emitter (see @base-ui/react/toast/createToastManager):\n// add/close/update just broadcast to whatever is currently subscribed, and the\n// ToastProvider that owns the real toast state only subscribes from a passive\n// useEffect. Calls made while no host is ready (e.g. mid-handoff between the\n// previously-active ToastHost unmounting and its successor's Provider\n// subscribing) would otherwise be silently dropped, so every manager call is\n// routed through runWhenToastHostReady to queue until a host is listening.\nconst addToast = (options: ToastOptions): ToastInstance => {\n  const position = options.placement ?? globalState.position;\n  const manager = getManager(position);\n  const { id: dedupeId, onClose, onRemove } = options;\n\n  if (dedupeId) {\n    const prevPosition = findActivePosition(dedupeId);\n    // Already the front-most toast: let Base UI upsert it in place so it only\n    // refreshes its content and timer, without replaying the slide-in animation.\n    const shouldPromote =\n      prevPosition && !(prevPosition === position && isFrontMost(position, dedupeId));\n\n    if (shouldPromote) {\n      // Closing marks the toast as `ending`, which makes the following `add`\n      // drop it and prepend a fresh one — Base UI's own upsert keeps the\n      // original slot instead.\n      activeToasts[prevPosition].get(dedupeId)!.superseded = true;\n      activeToasts[prevPosition].delete(dedupeId);\n      runWhenToastHostReady(() => getManager(prevPosition).close(dedupeId));\n    }\n  }\n\n  const id = dedupeId ?? generateToastId();\n  const active: ActiveToast = { superseded: false };\n  activeToasts[position].set(id, active);\n  runWhenToastHostReady(() => {\n    manager.add({\n      id,\n      data: options,\n      description: options.description,\n      onClose: () => {\n        if (active.superseded) return;\n        onClose?.();\n      },\n      onRemove: () => {\n        if (active.superseded) return;\n        activeToasts[position].delete(id);\n        onRemove?.();\n      },\n      timeout: options.duration ?? globalState.duration,\n      title: options.title,\n    });\n  });\n  return createToastInstance(id, position);\n};\n\nconst dismissToast = (id?: string) => {\n  if (id) {\n    // Try to close from all managers since we don't know which position the toast is in\n    for (const [position, manager] of Object.entries(toastManagers)) {\n      activeToasts[position as ToastPosition].delete(id);\n      runWhenToastHostReady(() => manager.close(id));\n    }\n  } else {\n    // Clear all toasts\n    for (const [position, manager] of Object.entries(toastManagers)) {\n      const ids = Array.from(activeToasts[position as ToastPosition].keys());\n      activeToasts[position as ToastPosition].clear();\n      runWhenToastHostReady(() => {\n        for (const toastId of ids) {\n          manager.close(toastId);\n        }\n      });\n    }\n  }\n};\n\nconst createSuccessToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'success'));\n};\n\nconst createErrorToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'error'));\n};\n\nconst createInfoToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'info'));\n};\n\nconst createWarningToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  return addToast(normalizeOptions(optionsOrMessage, 'warning'));\n};\n\nconst createLoadingToast = (\n  optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n  const options = normalizeOptions(optionsOrMessage, 'loading');\n  // Loading toasts don't auto-dismiss by default\n  return addToast({ duration: 0, ...options });\n};\n\nasync function promiseToast<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T> {\n  const loadingOptions =\n    typeof options.loading === 'string'\n      ? { description: options.loading }\n      : (options.loading as ToastOptions);\n\n  const loadingToast = addToast({\n    closable: false,\n    duration: 0,\n    type: 'loading',\n    ...loadingOptions,\n  });\n\n  try {\n    const result = await promise;\n\n    loadingToast.close();\n\n    const successOptions = (() => {\n      if (typeof options.success === 'string') {\n        return { description: options.success };\n      }\n      if (typeof options.success === 'function') {\n        return { description: options.success(result) };\n      }\n      return options.success as ToastOptions;\n    })();\n\n    addToast({ type: 'success', ...successOptions });\n\n    return result;\n  } catch (error) {\n    loadingToast.close();\n\n    const errorOptions = (() => {\n      if (typeof options.error === 'string') {\n        return { description: options.error };\n      }\n      if (typeof options.error === 'function') {\n        return { description: options.error(error as Error) };\n      }\n      return options.error as ToastOptions;\n    })();\n\n    addToast({ type: 'error', ...errorOptions });\n\n    throw error;\n  }\n}\n\n// Base toast function\nconst baseToast = (options: ToastOptions): ToastInstance => {\n  return addToast({ type: 'default', ...options });\n};\n\n// Toast API\nexport const toast: ToastAPI = Object.assign(baseToast, {\n  dismiss: dismissToast,\n  error: createErrorToast,\n  info: createInfoToast,\n  loading: createLoadingToast,\n  promise: promiseToast,\n  success: createSuccessToast,\n  warning: createWarningToast,\n});\n\n// Toast List Component\nconst ToastList = memo(() => {\n  const { toasts } = BaseToast.useToastManager();\n  return toasts.map((t) => <ToastItem key={t.id} toast={t} />);\n});\n\nToastList.displayName = 'ToastList';\n\nexport interface ToastHostProps {\n  className?: string;\n  /**\n   * Default duration for toasts\n   * @default 5000\n   */\n  duration?: number;\n  /**\n   * Maximum number of toasts\n   * @default 5\n   */\n  limit?: number;\n  /**\n   * Toast position\n   * @default 'bottom-right'\n   */\n  position?: ToastPosition;\n  /**\n   * Root element for portal\n   */\n  root?: HTMLElement | ShadowRoot | null;\n  /**\n   * Swipe direction to dismiss\n   * @default ['down', 'right']\n   */\n  swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nexport const ToastHost = memo(\n  ({\n    root,\n    className,\n    duration = 5000,\n    limit = 5,\n    position = 'bottom-right',\n    swipeDirection = ['down', 'right'],\n  }: ToastHostProps) => {\n    const isClient = useIsClient();\n    const appElement = useAppElement();\n    const [viewportZIndex, setViewportZIndex] = useState<number | undefined>(undefined);\n    const hostId = useId();\n\n    useEffect(() => registerToastHost(hostId), [hostId]);\n\n    const isActive = useSyncExternalStore(\n      subscribeToastHost,\n      () => isActiveToastHost(hostId),\n      () => false,\n    );\n\n    useEffect(() => {\n      if (!isActive) return;\n      globalState = {\n        duration,\n        limit,\n        position,\n        swipeDirection,\n      };\n    }, [duration, limit, position, swipeDirection, isActive]);\n\n    useEffect(() => {\n      if (!isActive) return;\n      setViewportZIndex(acquireLayerZIndex('toast'));\n    }, [isActive]);\n\n    useEffect(() => {\n      if (!isActive || !isClient) return undefined;\n      // Runs after the six BaseToast.Provider children below have committed\n      // and subscribed (child effects run before the parent's), so the\n      // managers are guaranteed to have a live listener once this fires.\n      markToastHostReady();\n      return () => {\n        markToastHostNotReady();\n      };\n    }, [isActive, isClient]);\n\n    if (!isClient || !isActive) return null;\n\n    const container = root ?? appElement ?? document.body;\n\n    return ALL_POSITIONS.map((pos) => (\n      <ToastContext key={pos} value={{ position: pos, swipeDirection }}>\n        <BaseToast.Provider limit={limit} timeout={duration} toastManager={getManager(pos)}>\n          <BaseToast.Portal container={container}>\n            <BaseToast.Viewport\n              className={cx(viewportVariants({ position: pos }), className)}\n              style={{ zIndex: viewportZIndex }}\n            >\n              <ToastList />\n            </BaseToast.Viewport>\n          </BaseToast.Portal>\n        </BaseToast.Provider>\n      </ToastContext>\n    ));\n  },\n);\n\nToastHost.displayName = 'ToastHost';\n\n// Hook to use toast manager\nexport const useToast = () => toast;\n\nexport const __resetToastStateForTests = (): void => {\n  globalState = {\n    duration: 5000,\n    limit: 5,\n    position: 'bottom-right',\n    swipeDirection: ['down', 'right'],\n  };\n  for (const position of ALL_POSITIONS) {\n    toastManagers[position] = BaseToast.createToastManager();\n    activeToasts[position].clear();\n  }\n  __resetPendingToastQueueForTests();\n};\n"],"mappings":"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"}