solid-baseui 0.1.0-alpha.0

package/dist/lib/server/preview-card/index.js

@@ -0,0 +1,797 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { d as imperativeAction } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { a as isElement } from "../dom-Crg_2R-j.js";
+import { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
+import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, r as FloatingRootStore, t as PopupStore } from "../PopupStore-DEs3FAEe.js";
+import { t as createFocusInteraction } from "../createFocusInteraction-EIS0QOel.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
+import { a as triggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
+import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { Dynamic, escape, memo, mergeProps } from "@solidjs/web";
+import { $REFRESH, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/internals/overlay/inlineRect.ts
+function createRect(left, top, right, bottom) {
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function copyRect(rect) {
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function getLineRects(rects) {
+	const lines = [];
+	let previous;
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const source of Array.from(rects).sort((first, second) => first.top - second.top)) {
+		const rect = copyRect(source);
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+		if (!previous || rect.top - previous.top > previous.height / 2) lines.push(rect);
+		else {
+			const line = lines[lines.length - 1];
+			line.left = Math.min(line.left, rect.left);
+			line.right = Math.max(line.right, rect.right);
+			line.bottom = Math.max(line.bottom, rect.bottom);
+			line.width = line.right - line.left;
+			line.height = line.bottom - line.top;
+		}
+		previous = rect;
+	}
+	return {
+		lines,
+		fallback: createRect(left, top, right, bottom)
+	};
+}
+function findLineIndex(lines, x, y) {
+	return lines.findIndex((line) => x > line.left - 2 && x < line.right + 2 && y > line.top - 2 && y < line.bottom + 2);
+}
+function getInlineRectCoords(element, clientX, clientY) {
+	const { lines } = getLineRects(element.getClientRects());
+	if (lines.length < 2) return;
+	const lineIndex = findLineIndex(lines, clientX, clientY);
+	return {
+		x: clientX,
+		y: clientY,
+		lineIndex: lineIndex === -1 ? void 0 : lineIndex,
+		element
+	};
+}
+function getInlineReferenceRect(reference, placement, coords) {
+	const { lines, fallback } = getLineRects(reference.getClientRects());
+	if (lines.length < 2) return null;
+	if (coords?.lineIndex != null && lines[coords.lineIndex]) {
+		const line = lines[coords.lineIndex];
+		return createRect(line.left, line.top, line.right, line.bottom);
+	}
+	if (coords) {
+		const lineIndex = findLineIndex(lines, coords.x, coords.y);
+		if (lineIndex !== -1) {
+			const line = lines[lineIndex];
+			return createRect(line.left, line.top, line.right, line.bottom);
+		}
+	}
+	if (lines.length === 2 && lines[0].left > lines[1].right && coords) return fallback;
+	const side = placement[0];
+	if (side === "t" || side === "b") {
+		const first = lines[0];
+		const last = lines[lines.length - 1];
+		const target = side === "t" ? first : last;
+		return createRect(target.left, first.top, target.right, last.bottom);
+	}
+	const leftSide = side === "l";
+	let left = lines[0].left;
+	let right = lines[0].right;
+	let edge = leftSide ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+	let firstTarget = lines[0];
+	let lastTarget = lines[0];
+	for (const line of lines) {
+		left = Math.min(left, line.left);
+		right = Math.max(right, line.right);
+		const nextEdge = leftSide ? line.left : line.right;
+		if (leftSide && nextEdge < edge || !leftSide && nextEdge > edge) {
+			edge = nextEdge;
+			firstTarget = line;
+			lastTarget = line;
+		} else if (nextEdge === edge) lastTarget = line;
+	}
+	return createRect(left, firstTarget.top, right, lastTarget.bottom);
+}
+function getContextElement(reference) {
+	return "contextElement" in reference && reference.contextElement ? reference.contextElement : isElement(reference) ? reference : void 0;
+}
+function createInlineRect() {
+	const [coords, setCoords] = createSignal();
+	const update = (element, clientX, clientY) => {
+		const next = getInlineRectCoords(element, clientX, clientY);
+		setCoords(next);
+		return next;
+	};
+	return {
+		coords,
+		clear: () => setCoords(void 0),
+		update,
+		middleware: {
+			name: "inline",
+			async fn(state) {
+				const reference = state.elements.reference;
+				if (typeof reference.getClientRects !== "function") return {};
+				const contextElement = getContextElement(reference);
+				const captured = coords();
+				const current = captured?.element === reference || captured?.element === contextElement ? captured : void 0;
+				const rect = getInlineReferenceRect(reference, state.placement, current);
+				if (!rect || !state.platform.getElementRects) return {};
+				const rects = await state.platform.getElementRects({
+					reference: {
+						contextElement,
+						getBoundingClientRect: () => rect
+					},
+					floating: state.elements.floating,
+					strategy: state.strategy
+				});
+				const currentRect = state.rects.reference;
+				if (currentRect.x === rects.reference.x && currentRect.y === rects.reference.y && currentRect.width === rects.reference.width && currentRect.height === rects.reference.height) return {};
+				return { reset: { rects } };
+			}
+		}
+	};
+}
+//#endregion
+//#region src/preview-card/store/PreviewCardStore.ts
+var PreviewCardStore = class extends PopupStore {
+	inlineRect = createInlineRect();
+	constructor(options) {
+		super(options);
+		this.tree = options.tree;
+		this.set("closeDelay", 300);
+	}
+	tree;
+	floatingElement() {
+		const state = this.track();
+		return state.positionerElement ?? state.popupElement;
+	}
+	transitionStatus() {
+		return this.track().transitionStatus;
+	}
+	setOpen(open, details) {
+		const event = details.event;
+		if (open && details.reason === "trigger-hover" && details.trigger && "clientX" in event && "clientY" in event && this.inlineRect.coords()?.element !== details.trigger) this.inlineRect.update(details.trigger, event.clientX, event.clientY);
+		return super.setOpen(open, details);
+	}
+};
+var DetachedPreviewCardStore = class extends DetachedPopupStore {
+	inlineRect = createInlineRect();
+	tree = new FloatingTreeStore();
+	constructor() {
+		super();
+		this.context.floatingRoot = new FloatingRootStore({
+			triggerElements: this.context.triggerElements,
+			onOpenChange: () => void 0
+		});
+	}
+	floatingElement() {
+		return null;
+	}
+	transitionStatus() {}
+};
+//#endregion
+//#region src/preview-card/root/PreviewCardRootContext.ts
+var MISSING_CONTEXT$2 = Symbol("PreviewCardRootContext");
+var PreviewCardRootContext = createContext(MISSING_CONTEXT$2);
+function usePreviewCardRootContext(optional = false) {
+	const context = useContext(PreviewCardRootContext);
+	if (context === MISSING_CONTEXT$2) {
+		if (optional) return;
+		throw new Error("Base UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within <PreviewCard.Root>.");
+	}
+	return context;
+}
+//#endregion
+//#region src/preview-card/root/PreviewCardRoot.tsx
+/** Groups all parts of the preview card without rendering an element. */
+function PreviewCardRoot(props) {
+	const parentTree = useFloatingTree();
+	const parentNodeId = useFloatingParentNodeId();
+	const tree = parentTree ?? new FloatingTreeStore();
+	const nodeId = createUniqueId();
+	const floatingId = createUniqueId();
+	const controlledOpen = untrack(() => props.open !== void 0);
+	const controlledTriggerId = untrack(() => props.triggerId !== void 0);
+	const store = new PreviewCardStore({
+		controlledOpen: () => controlledOpen ? props.open : void 0,
+		controlledTriggerId: () => controlledTriggerId ? props.triggerId : void 0,
+		floatingId,
+		nested: parentNodeId !== null,
+		nodeId,
+		onOpenChange: () => props.onOpenChange,
+		onOpenChangeComplete: () => props.onOpenChangeComplete,
+		tree
+	});
+	store.update({
+		open: controlledOpen ? Boolean(untrack(() => props.open)) : Boolean(untrack(() => props.defaultOpen)),
+		activeTriggerId: untrack(() => props.defaultTriggerId ?? null)
+	});
+	const payload = store.access((state) => state.payload);
+	const node = createFloatingNode({
+		tree,
+		id: nodeId,
+		parentId: parentNodeId,
+		context: () => store.context.floatingRoot
+	});
+	const presence = createPopupPresence(store, () => store.track().popupElement, { onUnmount: store.inlineRect.clear });
+	const context = {
+		store,
+		tree,
+		presence
+	};
+	store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: true });
+	attachPopupHandle(() => props.handle, store);
+	const dismiss = createDismiss({
+		context: store.context.floatingRoot,
+		tree: () => tree
+	});
+	store.setInteractionProps({
+		activeTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		inactiveTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		popupProps: { onKeyDown: dismiss.onKeyDown }
+	});
+	createEffect(() => ({
+		open: store.open(),
+		activeTriggerId: store.activeTriggerId()
+	}), (state) => {
+		untrack(() => store.reconcileTriggers());
+		if (state.open && state.activeTriggerId == null && store.state.payload !== void 0) store.set("payload", void 0);
+	});
+	const actions = {
+		unmount: presence.forceUnmount,
+		close() {
+			store.setOpen(false, createChangeEventDetails(imperativeAction));
+		}
+	};
+	createEffect(() => props.actionsRef, (ref) => {
+		ref?.(actions);
+	});
+	function PreviewCardRootContent() {
+		const child = createMemo(() => props.children);
+		const initialChild = untrack(child);
+		let content = initialChild;
+		if (typeof initialChild === "function") content = initialChild.name === "bound read" && Object.prototype.hasOwnProperty.call(initialChild, $REFRESH) ? memo(() => {
+			return escape(child());
+		}) : untrack(() => initialChild({ payload }));
+		return content;
+	}
+	onCleanup(() => store.clearInteractionProps());
+	return PreviewCardRootContext({
+		value: context,
+		get children() {
+			return FloatingTreeContext({
+				value: tree,
+				get children() {
+					return FloatingParentNodeContext({
+						get value() {
+							return node.id ?? null;
+						},
+						get children() {
+							return PreviewCardRootContent({});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/preview-card/trigger/PreviewCardTrigger.tsx
+/** A link that opens the preview card after a hover or focus delay. */
+function PreviewCardTrigger(props) {
+	const root = usePreviewCardRootContext(true);
+	const internalProps = props;
+	if (!root && !untrack(() => internalProps.handle)) throw new Error("Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.");
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const delay = createMemo(() => internalProps.delay ?? 600);
+	const closeDelay = createMemo(() => internalProps.closeDelay ?? 300);
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const handleStore = createPopupHandleStore(() => internalProps.handle);
+	const store = createMemo(() => handleStore() ?? root?.store);
+	const open = createMemo(() => {
+		const current = store();
+		return Boolean(current?.open() && current.activeTriggerId() === id());
+	});
+	const state = createMemo(() => ({ open: open() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "closeDelay", "delay", "handle", "id", "onBlur", "onFocus", "onKeyDown", "onMouseEnter", "onMouseMove", "onPointerLeave", "payload", "ref", "style");
+	let focusHandlers;
+	createTriggerRegistration(store, id, element, () => ({
+		payload: internalProps.payload,
+		closeDelay: closeDelay()
+	}));
+	function handleFocus(event) {
+		store()?.inlineRect.clear();
+		focusHandlers?.onFocus(event);
+	}
+	function handleBlur(event) {
+		focusHandlers?.onBlur(event);
+	}
+	function handlePointerLeave() {
+		focusHandlers?.onPointerLeave();
+	}
+	function updateInlineRect(event) {
+		if (!open()) store()?.inlineRect.update(event.currentTarget, event.clientX, event.clientY);
+	}
+	function handleKeyDown(event) {
+		const current = store();
+		const handler = current?.state[current.activeTriggerId() === id() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown;
+		if (typeof handler === "function") handler(event);
+	}
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
+	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => handlePointerLeave);
+	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => updateInlineRect);
+	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => updateInlineRect);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	return [Show({
+		keyed: true,
+		get when() {
+			return store();
+		},
+		children: (current) => PreviewCardTriggerInteractions({
+			store: current,
+			id,
+			element,
+			delay,
+			closeDelay,
+			setFocusHandlers: (handlers) => focusHandlers = handlers
+		})
+	}), Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "a";
+		},
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onBlur,
+		onFocus,
+		onKeyDown,
+		onMouseEnter,
+		onMouseMove,
+		onPointerLeave
+	}, stateAttributes, others))];
+}
+function PreviewCardTriggerInteractions(props) {
+	const store = untrack(() => props.store);
+	const id = untrack(() => props.id);
+	const element = untrack(() => props.element);
+	const delay = untrack(() => props.delay);
+	const closeDelay = untrack(() => props.closeDelay);
+	const setFocusHandlers = untrack(() => props.setFocusHandlers);
+	setFocusHandlers(createFocusInteraction({
+		context: store.context.floatingRoot,
+		delay
+	}));
+	onCleanup(() => setFocusHandlers(void 0));
+	createHoverInteraction({
+		context: store.context.floatingRoot,
+		reference: element,
+		floating: () => store.isTriggerActive(id()) ? store.floatingElement() : null,
+		tree: () => store.tree,
+		delay: () => ({
+			open: delay(),
+			close: closeDelay()
+		}),
+		handleClose: () => safePolygon(),
+		mouseOnly: () => true
+	});
+	return null;
+}
+//#endregion
+//#region src/preview-card/portal/PreviewCardPortalContext.ts
+var MISSING_CONTEXT$1 = Symbol("PreviewCardPortalContext");
+var PreviewCardPortalContext = createContext(MISSING_CONTEXT$1);
+function usePreviewCardPortalContext() {
+	const context = useContext(PreviewCardPortalContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: <PreviewCard.Portal> is missing.");
+	return context;
+}
+//#endregion
+//#region src/preview-card/portal/PreviewCardPortal.tsx
+/** Moves the preview card layer into a portal appended to the document body by default. */
+function PreviewCardPortal(props) {
+	const context = usePreviewCardRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
+	const shouldRender = createMemo(() => context.presence.mounted() || keepMounted());
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const portalContext = { keepMounted };
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return PreviewCardPortalContext({
+				value: portalContext,
+				get children() {
+					return PopupPortal(mergeProps({
+						get as() {
+							return props.as;
+						},
+						get container() {
+							return internalProps.container;
+						},
+						lite: true,
+						ref: (element) => {
+							if (internalProps.ref) setRef(internalProps.ref, element);
+						},
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						}
+					}, others, { get children() {
+						return props.children;
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/preview-card/utils/mergePreviewCardStyles.ts
+function mergePreviewCardStyles(internal, external) {
+	if (typeof external === "string") {
+		const serialized = Object.entries(internal).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${String(value)}`).join(";");
+		return serialized ? `${serialized};${external}` : external;
+	}
+	return {
+		...internal,
+		...external || void 0
+	};
+}
+//#endregion
+//#region src/preview-card/utils/stateAttributesMapping.ts
+var previewCardPopupStateMapping = popupStateMapping;
+var previewCardPopupTransitionStateMapping = popupTransitionStateMapping;
+var previewCardViewportStateMapping = { activationDirection: (value) => value ? { "data-activation-direction": value } : null };
+//#endregion
+//#region src/preview-card/positioner/PreviewCardPositionerContext.ts
+var MISSING_CONTEXT = Symbol("PreviewCardPositionerContext");
+var PreviewCardPositionerContext = createContext(MISSING_CONTEXT);
+function usePreviewCardPositionerContext() {
+	const context = useContext(PreviewCardPositionerContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: <PreviewCard.Positioner> is missing.");
+	return context;
+}
+//#endregion
+//#region src/preview-card/positioner/PreviewCardPositioner.tsx
+/** Positions the popup against the active trigger or a custom anchor. */
+function PreviewCardPositioner(props) {
+	const context = usePreviewCardRootContext();
+	usePreviewCardPortalContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const reference = createMemo(() => {
+		const anchor = internalProps.anchor;
+		if (typeof anchor === "function") return anchor();
+		if (anchor && "current" in anchor) return anchor.current;
+		return anchor ?? context.store.context.floatingRoot.referenceElement();
+	});
+	const positioning = createAnchorPositioning({
+		reference,
+		floating: () => context.store.track().positionerElement,
+		mounted: context.presence.mounted,
+		direction,
+		positionMethod: () => internalProps.positionMethod ?? "absolute",
+		side: () => internalProps.side ?? "bottom",
+		align: () => internalProps.align ?? "center",
+		sideOffset: () => internalProps.sideOffset ?? 0,
+		alignOffset: () => internalProps.alignOffset ?? 0,
+		collisionBoundary: () => internalProps.collisionBoundary ?? "clipping-ancestors",
+		collisionPadding: () => internalProps.collisionPadding ?? 5,
+		collisionAvoidance: () => internalProps.collisionAvoidance ?? {
+			side: "flip",
+			align: "flip",
+			fallbackAxisSide: "end"
+		},
+		sticky: () => internalProps.sticky ?? false,
+		arrowPadding: () => internalProps.arrowPadding ?? 5,
+		disableAnchorTracking: () => internalProps.disableAnchorTracking ?? false,
+		inlineMiddleware: () => context.store.inlineRect.middleware,
+		adaptiveOriginMiddleware: () => context.store.track().adaptiveOriginMiddleware
+	});
+	const initialPositioning = createInitialPositioning(() => context.store.open(), () => positioning.state().isPositioned);
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioning.renderedSide(),
+		align: positioning.renderedAlign(),
+		anchorHidden: positioning.anchorHidden(),
+		instant: context.store.track().instantType ?? (initialPositioning() ? "initial" : void 0)
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePreviewCardStyles({
+		...positioning.styles(),
+		"pointer-events": context.store.open() ? void 0 : "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupStateMapping));
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	let positionerElement = null;
+	createEffect(() => positioning.state().placement, (placement) => {
+		context.store.context.floatingRoot.context.data.placement = placement;
+	});
+	onCleanup(() => {
+		delete context.store.context.floatingRoot.context.data.placement;
+		if (context.store.state.positionerElement === positionerElement) context.store.setPositionerElement(null);
+	});
+	return PreviewCardPositionerContext({
+		value: positioning,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => {
+					positionerElement = element;
+					context.store.setPositionerElement(element);
+				}), internalProps.ref],
+				role: "presentation",
+				get hidden() {
+					return !context.presence.mounted();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/preview-card/popup/PreviewCardPopup.tsx
+/** A container for the preview card contents. */
+function PreviewCardPopup(props) {
+	const context = usePreviewCardRootContext();
+	const positioner = usePreviewCardPositionerContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		instant: context.store.track().instantType,
+		transitionStatus: context.store.track().transitionStatus
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupTransitionStateMapping));
+	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+		const handler = context.store.state.popupProps.onKeyDown;
+		if (typeof handler === "function") handler(event);
+	});
+	let popupElement = null;
+	onCleanup(() => {
+		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			popupElement = element;
+			context.store.setPopupElement(element);
+		}), internalProps.ref],
+		tabIndex: -1,
+		"data-base-ui-focusable": "",
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onKeyDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/preview-card/arrow/PreviewCardArrow.tsx
+/** Displays an element positioned against the preview card anchor. */
+function PreviewCardArrow(props) {
+	const context = usePreviewCardRootContext();
+	const positioner = usePreviewCardPositionerContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		uncentered: positioner.arrowUncentered()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePreviewCardStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	let arrowElement = null;
+	onCleanup(() => {
+		if (arrowElement) positioner.setArrowElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			arrowElement = element;
+			positioner.setArrowElement(element);
+		}), internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/preview-card/backdrop/PreviewCardBackdrop.tsx
+/** A presentational overlay displayed beneath the popup. */
+function PreviewCardBackdrop(props) {
+	const context = usePreviewCardRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		transitionStatus: context.store.track().transitionStatus
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePreviewCardStyles({
+		"pointer-events": "none",
+		"user-select": "none",
+		"-webkit-user-select": "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupTransitionStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		role: "presentation",
+		get hidden() {
+			return !context.presence.mounted();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/preview-card/viewport/PreviewCardViewport.tsx
+/** Displays content transitions when the active trigger changes. */
+function PreviewCardViewport(props) {
+	const context = usePreviewCardRootContext();
+	const positioner = usePreviewCardPositionerContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [viewportState, setViewportState] = createSignal({
+		activationDirection: void 0,
+		transitioning: false
+	}, { ownedWrite: true });
+	const state = createMemo(() => ({
+		...viewportState(),
+		instant: context.store.track().instantType
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardViewportStateMapping));
+	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return PopupViewport({
+			get store() {
+				return context.store;
+			},
+			get side() {
+				return positioner.renderedSide();
+			},
+			get direction() {
+				return direction();
+			},
+			onStateChange: setViewportState,
+			get children() {
+				return props.children;
+			}
+		});
+	} }));
+}
+//#endregion
+//#region src/preview-card/store/PreviewCardHandle.ts
+/** Imperatively controls a Preview Card and connects detached triggers to its Root. */
+var PreviewCardHandle = class extends BasePopupHandle {
+	constructor() {
+		super("PreviewCard", true, new DetachedPreviewCardStore());
+	}
+	open(triggerId) {
+		this.openByTrigger(triggerId);
+	}
+	close() {
+		this.closePopup();
+	}
+	get isOpen() {
+		return this.attachedStore?.open() ?? false;
+	}
+};
+function createPreviewCardHandle() {
+	return new PreviewCardHandle();
+}
+//#endregion
+//#region src/preview-card/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => PreviewCardArrow,
+	Backdrop: () => PreviewCardBackdrop,
+	Handle: () => PreviewCardHandle,
+	Popup: () => PreviewCardPopup,
+	Portal: () => PreviewCardPortal,
+	Positioner: () => PreviewCardPositioner,
+	Root: () => PreviewCardRoot,
+	Trigger: () => PreviewCardTrigger,
+	Viewport: () => PreviewCardViewport,
+	createHandle: () => createPreviewCardHandle
+});
+//#endregion
+export { index_parts_exports as PreviewCard };