@bettercms-ai/kit 1.0.0 → 2.0.0

package/dist/ui/overlay.js

@@ -0,0 +1,697 @@
+import { cn } from "../lib/cn.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import { MODAL_LAYER, TooltipLayer, TooltipRoot } from "./tooltip-root.js";
+import { IconButton, TooltipScope } from "./button.js";
+import { useShortcutHints } from "./shortcut-hint.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronRight, IconX } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { Dialog } from "@base-ui/react/dialog";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { PreviewCard } from "@base-ui/react/preview-card";
+import { Separator } from "@base-ui/react/separator";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/ui/overlay.tsx
+var layer = { [MODAL_LAYER]: "" };
+var FLOATING_LAYER = "[data-floating-layer]";
+function keepOpen(details, anchor) {
+	const target = details.event?.target;
+	const keep = details.reason === "escape-key" && details.event.defaultPrevented || details.reason === "outside-press" && target instanceof Element && (!!target.closest("[data-floating-layer]") || !!anchor?.contains(target));
+	if (keep) details.cancel();
+	return keep;
+}
+function guard(onOpenChange, anchor) {
+	return (open, details) => {
+		if (!open && keepOpen(details, anchor?.())) return;
+		onOpenChange?.(open, details);
+	};
+}
+var TooltipProvider = Tooltip$1.Provider;
+function Tooltip({ content, children, side = "top", shortcut, delay = 350, disabled }) {
+	const hints = useShortcutHints();
+	if (disabled || !content) return /* @__PURE__ */ jsx(TooltipScope.Provider, {
+		value: true,
+		children
+	});
+	return /* @__PURE__ */ jsx(TooltipScope.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+			delay,
+			render: children
+		}), /* @__PURE__ */ jsxs(TooltipLayer, {
+			side,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+				children: content
+			}), shortcut && hints ? /* @__PURE__ */ jsx("kbd", {
+				"data-hint": "shortcuts",
+				className: "mt-px shrink-0 rounded-kit-sm bg-kit-ink-active px-1 font-kit-sans text-kit-2xs",
+				children: shortcut
+			}) : null]
+		})] })
+	});
+}
+var AnchorContext = React.createContext(null);
+function Popover({ onOpenChange, ...props }) {
+	const anchor = React.useRef(null);
+	return /* @__PURE__ */ jsx(AnchorContext.Provider, {
+		value: anchor,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, {
+			...props,
+			onOpenChange: guard(onOpenChange, () => anchor.current)
+		})
+	});
+}
+var PopoverTrigger = Popover$1.Trigger;
+var PopoverClose = Popover$1.Close;
+/** Positions the popover against this element instead of the trigger; presses on it count as inside. */
+function PopoverAnchor({ render, ...props }) {
+	const anchor = React.useContext(AnchorContext);
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx("div", {}),
+		ref: anchor ?? void 0,
+		props
+	});
+}
+function PopoverContent({ className, align = "start", side, sideOffset = 6, keepFocus, onMouseDown, collisionBoundary, collisionPadding = 12, collisionAvoidance, ...props }) {
+	const anchor = React.useContext(AnchorContext);
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		side,
+		sideOffset,
+		collisionBoundary,
+		collisionPadding,
+		collisionAvoidance,
+		anchor: anchor?.current ? anchor : void 0,
+		className: "z-[var(--kit-z-menu,80)]",
+		...KIT_SCOPE,
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			initialFocus: keepFocus ? false : void 0,
+			finalFocus: keepFocus ? false : void 0,
+			onMouseDown: (e) => {
+				onMouseDown?.(e);
+				if (keepFocus && !e.target.closest("input, textarea, select, [contenteditable=true]")) e.preventDefault();
+			},
+			className: cn("glass w-72 rounded-kit-xl border p-3 text-kit-fg outline-none data-[open]:animate-kit-pop-in", className),
+			...props
+		})
+	}) });
+}
+var HoverCard = PreviewCard.Root;
+var HoverCardTrigger = PreviewCard.Trigger;
+function HoverCardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+		sideOffset: 8,
+		collisionPadding: 12,
+		className: "z-[var(--kit-z-menu,80)]",
+		...KIT_SCOPE,
+		children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+			className: cn("glass w-72 rounded-kit-xl border p-3 data-[open]:animate-kit-pop-in", className),
+			...props
+		})
+	}) });
+}
+/** Arrowing past the last item stays put (loopFocus false), like V2's Radix menus. */
+function Menu({ onOpenChange, loopFocus = false, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Root, {
+		loopFocus,
+		...props,
+		onOpenChange: guard(onOpenChange)
+	});
+}
+var MenuTrigger = Menu$1.Trigger;
+var MenuGroup = Menu$1.Group;
+var MenuSub = Menu$1.SubmenuRoot;
+var MenuRadioGroup = Menu$1.RadioGroup;
+function MenuContent({ className, align = "start", side, sideOffset = 6, positionerClassName, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+		align,
+		side,
+		sideOffset,
+		collisionPadding: 12,
+		className: cn("z-[var(--kit-z-menu,80)]", positionerClassName),
+		...KIT_SCOPE,
+		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+			...layer,
+			className: cn("glass max-h-[var(--available-height)] min-w-48 overflow-y-auto overflow-x-hidden rounded-kit-lg border p-1 text-kit-fg outline-none data-[open]:animate-kit-pop-in", className),
+			...props
+		})
+	}) });
+}
+var itemCls = "relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm text-kit-fg outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-kit-fg-2";
+function MenuItem({ className, icon, shortcut, danger, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.Item, {
+		className: cn(itemCls, danger && "text-kit-danger-fg data-[highlighted]:bg-kit-danger-soft [&>svg]:text-kit-danger-fg", className),
+		...props,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}),
+			shortcut ? /* @__PURE__ */ jsx("span", {
+				className: "text-kit-xs text-kit-fg-3",
+				children: shortcut
+			}) : null
+		]
+	});
+}
+/** Checking an item closes the menu, like V2's Radix items (pass closeOnClick={false} to keep it open). */
+function MenuCheckItem({ className, children, closeOnClick = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
+		className: cn(itemCls, "pr-8", className),
+		closeOnClick,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+			className: "absolute right-2",
+			children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4" })
+		})]
+	});
+}
+function MenuRadioItem({ className, children, closeOnClick = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
+		className: cn(itemCls, "pr-8", className),
+		closeOnClick,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
+			className: "absolute right-2",
+			children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4" })
+		})]
+	});
+}
+function MenuSubTrigger({ className, icon, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
+		className: cn(itemCls, "data-[popup-open]:bg-kit-hover", className),
+		...props,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1",
+				children
+			}),
+			/* @__PURE__ */ jsx(IconChevronRight, { className: "size-3.5 text-kit-fg-3" })
+		]
+	});
+}
+function MenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+		sideOffset: 6,
+		collisionPadding: 12,
+		className: "z-[calc(var(--kit-z-menu,80)_+_1)]",
+		...KIT_SCOPE,
+		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+			className: cn("glass min-w-44 rounded-kit-lg border p-1 data-[open]:animate-kit-pop-in", className),
+			...props
+		})
+	}) });
+}
+function MenuLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("px-2 pb-1 pt-1.5 text-kit-xs font-medium text-kit-fg-3", className),
+		...props
+	});
+}
+function MenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx(Separator, { className: cn("-mx-1 my-1 h-px bg-kit-line", className) });
+}
+var recent = [];
+if (typeof document !== "undefined") document.addEventListener("focusin", (e) => {
+	recent.unshift(e.target);
+	recent.length = Math.min(recent.length, 4);
+}, true);
+function useFocusReturn(finalFocus) {
+	const ret = React.useRef(null);
+	const popup = React.useRef(null);
+	return {
+		ref: React.useCallback((el) => {
+			if (el === popup.current) return;
+			popup.current = el;
+			if (!el) return;
+			const active = document.activeElement;
+			const outside = (n) => !!n && n !== document.body && !el.contains(n);
+			ret.current = outside(active) ? active : recent.find(outside) ?? null;
+		}, []),
+		finalFocus: finalFocus ?? (() => {
+			const t = ret.current;
+			return t && t.isConnected ? t : true;
+		})
+	};
+}
+/** One stable callback ref for both refs, so React does not detach and re-attach them on every render. */
+function useMergedRef(a, b) {
+	return React.useCallback((el) => {
+		for (const r of [a, b]) if (typeof r === "function") r(el);
+		else if (r) r.current = el;
+	}, [a, b]);
+}
+function Modal({ onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		...props,
+		onOpenChange: guard(onOpenChange)
+	});
+}
+var ModalTrigger = Dialog.Trigger;
+var ModalClose = Dialog.Close;
+var sizes = {
+	sm: "max-w-[400px]",
+	md: "max-w-[480px]",
+	lg: "max-w-[640px]",
+	xl: "max-w-[800px]",
+	full: "max-w-[min(1280px,calc(100vw-48px))] h-[min(860px,calc(100vh-48px))]"
+};
+function ModalContent({ className, size = "md", children, hideClose, finalFocus, ref, ...props }) {
+	const focusReturn = useFocusReturn(finalFocus);
+	const merged = useMergedRef(ref, focusReturn.ref);
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		...KIT_SCOPE,
+		className: "fixed inset-0 z-[var(--kit-z-modal,60)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+	}), /* @__PURE__ */ jsx("div", {
+		...KIT_SCOPE,
+		className: "pointer-events-none fixed inset-0 z-[calc(var(--kit-z-modal,60)_+_1)] flex items-center justify-center p-4 sm:p-6",
+		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...layer,
+			className: cn("pointer-events-auto relative flex max-h-[calc(100vh-32px)] w-full flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none data-[open]:animate-kit-pop-in", sizes[size], className),
+			...props,
+			ref: merged,
+			finalFocus: focusReturn.finalFocus,
+			children: [children, hideClose ? null : /* @__PURE__ */ jsx(Dialog.Close, {
+				render: /* @__PURE__ */ jsx(IconButton, {
+					label: "Close",
+					size: "sm",
+					className: "absolute right-3 top-3 z-10"
+				}),
+				children: /* @__PURE__ */ jsx(IconX, {})
+			})]
+		})
+	})] });
+}
+function ModalHeader({ title, description, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex shrink-0 items-start gap-2.5 px-5 pb-1 pt-5 pr-12", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Title, {
+					className: "text-kit-md font-semibold tracking-[-0.01em] text-kit-fg",
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx(Dialog.Description, {
+					className: "mt-1 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : /* @__PURE__ */ jsx(Dialog.Description, {
+					className: "sr-only",
+					children: typeof title === "string" ? title : "Dialog"
+				}),
+				children
+			]
+		})
+	});
+}
+function ModalBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto px-5 pb-5 pt-4", className),
+		...props
+	});
+}
+function ModalFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex shrink-0 items-center justify-end gap-2 border-t border-kit-editor-tray-line bg-tray px-5 py-3", className),
+		...props
+	});
+}
+var flowWidths = {
+	md: "sm:max-w-[480px]",
+	lg: "sm:max-w-[640px]",
+	xl: "sm:max-w-[800px]",
+	"2xl": "sm:max-w-[960px]"
+};
+function FlowModal({ open, onOpenChange, size = "lg", height = "fixed", locked, children, className }) {
+	const h = height === "fixed" ? "sm:h-auto sm:max-h-[min(640px,calc(100dvh-48px))]" : height === "tall" ? "sm:h-auto sm:max-h-[min(760px,calc(100dvh-48px))]" : "sm:h-auto sm:max-h-[calc(100dvh-48px)]";
+	const popup = React.useRef(null);
+	const focusReturn = useFocusReturn();
+	const merged = useMergedRef(popup, focusReturn.ref);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		disablePointerDismissal: locked,
+		onOpenChange: guard((v, details) => {
+			if (!v && locked) return details.cancel();
+			onOpenChange(v);
+		}),
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			...KIT_SCOPE,
+			className: "fixed inset-0 z-[var(--kit-z-modal,60)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+		}), /* @__PURE__ */ jsx("div", {
+			...KIT_SCOPE,
+			className: "pointer-events-none fixed inset-0 z-[calc(var(--kit-z-modal,60)_+_1)] flex items-end justify-center sm:items-center sm:p-6",
+			children: /* @__PURE__ */ jsx(Dialog.Popup, {
+				...layer,
+				ref: merged,
+				tabIndex: -1,
+				initialFocus: popup,
+				finalFocus: focusReturn.finalFocus,
+				className: cn("pointer-events-auto relative flex h-dvh w-full flex-col overflow-hidden bg-kit-surface text-kit-fg shadow-kit-xl outline-none", "max-sm:data-[open]:animate-kit-slide-up", "sm:rounded-kit-xl sm:border sm:border-kit-line sm:data-[open]:animate-kit-pop-in", flowWidths[size], h, className),
+				children
+			})
+		})] })
+	});
+}
+function FlowClose({ disabled }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		disabled,
+		render: /* @__PURE__ */ jsx(IconButton, {
+			label: "Close",
+			size: "sm",
+			className: "shrink-0",
+			disabled
+		}),
+		children: /* @__PURE__ */ jsx(IconX, {})
+	});
+}
+function FlowHeader({ title, description, icon, status, right, children, className, closeDisabled }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative shrink-0 border-b border-kit-line px-5 pb-3 pt-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			"data-icon": icon ? "" : void 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+					children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "text-kit-md font-semibold tracking-[-0.01em] text-kit-fg",
+						children: title
+					}), status]
+				}), description ? /* @__PURE__ */ jsx(Dialog.Description, {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : /* @__PURE__ */ jsx(Dialog.Description, {
+					className: "sr-only",
+					children: typeof title === "string" ? title : "Dialog"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [right, /* @__PURE__ */ jsx(FlowClose, { disabled: closeDisabled })]
+			})]
+		}), children]
+	});
+}
+/** Status chip used in flow headers ("Ready to publish" with a green dot). */
+function HeaderStatus({ tone = "success", children, pulse }) {
+	const dot = {
+		success: "bg-kit-success",
+		warning: "bg-kit-warning",
+		danger: "bg-kit-danger",
+		info: "bg-kit-info",
+		accent: "bg-kit-accent",
+		neutral: "bg-kit-fg-4"
+	}[tone];
+	const fg = {
+		success: "text-kit-success-fg",
+		warning: "text-kit-warning-fg",
+		danger: "text-kit-danger-fg",
+		info: "text-kit-info-fg",
+		accent: "text-kit-accent-fg",
+		neutral: "text-kit-fg-2"
+	}[tone];
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex h-6 items-center gap-1.5 rounded-full border border-kit-line bg-kit-subtle px-2 text-kit-xs font-medium", fg),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative inline-flex size-1.5",
+			children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-60", dot) }) : null, /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-1.5 rounded-full", dot) })]
+		}), children]
+	});
+}
+function FlowBody({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 sm:px-5", className),
+		children
+	});
+}
+function FlowFooter({ left, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex shrink-0 flex-wrap items-center gap-2 border-t border-kit-editor-tray-line bg-tray px-4 py-3 pb-[max(12px,env(safe-area-inset-bottom))] sm:px-5", className),
+		children: [left ? /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate text-kit-sm text-kit-fg-3 max-sm:basis-full",
+			children: left
+		}) : /* @__PURE__ */ jsx("div", { className: "flex-1" }), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center justify-end gap-2 max-sm:w-full",
+			children
+		})]
+	});
+}
+/** Small uppercase-free section label used inside flow bodies. */
+function FlowLabel({ children, right, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mb-2 flex items-center justify-between gap-2", className),
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-kit-sm font-medium text-kit-fg-2",
+			children
+		}), right]
+	});
+}
+/** Radio-like option row (Figma "Publish scope" / "When" rows). */
+function OptionRow({ selected, onSelect, title, description, right, disabled, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-kit-lg border bg-kit-surface transition-[border-color,box-shadow,background-color] duration-150", selected ? "border-kit-line-strong bg-kit-selected" : "border-kit-line hover:border-kit-line-strong hover:bg-kit-subtle-2", disabled && "pointer-events-none opacity-50", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onSelect,
+			"aria-pressed": selected,
+			disabled,
+			className: "flex w-full items-center gap-3 px-3 py-2.5 text-left",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn("flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors", selected ? "border-kit-inverse bg-kit-inverse" : "border-kit-line-strong bg-kit-surface"),
+					children: selected ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-kit-surface" }) : null
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block text-kit-sm font-medium text-kit-fg",
+						children: title
+					}), description ? /* @__PURE__ */ jsx("span", {
+						className: "block text-kit-sm text-kit-fg-2",
+						children: description
+					}) : null]
+				}),
+				right
+			]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: selected && children ? /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1
+				},
+				exit: {
+					height: 0,
+					opacity: 0
+				},
+				transition: {
+					duration: .2,
+					ease: [
+						.22,
+						1,
+						.36,
+						1
+					]
+				},
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "px-3 pb-3 pl-[40px]",
+					children
+				})
+			}) : null
+		})]
+	});
+}
+/** Progressive disclosure: advanced choices tucked behind "More options" (CPO D6). */
+function MoreOptions({ children, label = "More options", summary, defaultOpen = false, className }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen((o) => !o),
+			className: "group flex w-full min-w-0 items-center gap-2 whitespace-nowrap rounded-kit-md py-1 text-left text-kit-sm font-medium text-kit-fg-2 hover:text-kit-fg",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn("flex size-5 items-center justify-center rounded-kit-md border border-kit-line bg-kit-surface text-kit-fg-3 transition-transform duration-200", open && "rotate-90"),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 16 16",
+						className: "size-3",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: 1.75,
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M6 4l4 4-4 4",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				}),
+				label,
+				summary && !open ? /* @__PURE__ */ jsx("span", {
+					className: "ml-1 truncate text-kit-xs font-normal text-kit-fg-3",
+					children: summary
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: open ? /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1
+				},
+				exit: {
+					height: 0,
+					opacity: 0
+				},
+				transition: {
+					duration: .22,
+					ease: [
+						.22,
+						1,
+						.36,
+						1
+					]
+				},
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-3",
+					children
+				})
+			}) : null
+		})]
+	});
+}
+/** A sheet is a dialog that slides in from an edge: open it with Sheet (= Modal) and its trigger. */
+var Sheet = Modal;
+var SheetTrigger = Dialog.Trigger;
+var SheetClose = Dialog.Close;
+var sheetBase = "fixed inset-y-0 z-[calc(var(--kit-z-sheet,55)_+_1)] flex flex-col bg-kit-surface-raised shadow-kit-xl outline-none transition-transform border-kit-floating-line";
+var sheetSides = {
+	right: "right-0 border-l border-kit-line data-[open]:animate-[kit-sheet-in-r_260ms_var(--kit-ease-out-soft)]",
+	left: "left-0 border-r border-kit-line data-[open]:animate-[kit-sheet-in-l_260ms_var(--kit-ease-out-soft)]",
+	bottom: "inset-x-0 inset-y-auto bottom-0 h-[52%] overflow-hidden rounded-t-kit-2xl border-t border-kit-line data-[open]:animate-[kit-sheet-in-b_300ms_cubic-bezier(0.32,0.72,0,1)]"
+};
+/** How far a bottom sheet's grabber must be pulled down before letting go closes it (V2 editor.tsx). */
+var SHEET_SWIPE_CLOSE_PX = 80;
+/**
+* A bottom sheet's grabber as a drag handle (V2 TabletSheet / CommentsSheet drag="y"): pulled down past
+* SHEET_SWIPE_CLOSE_PX it closes the sheet, short of it the sheet eases back. The sheet follows the finger through a
+* transform written straight to the element (no re-render per move). Not a tab stop: Esc is the keyboard's way out.
+*/
+function SheetGrabber({ sheet }) {
+	const close = React.useRef(null);
+	const drag = React.useRef(null);
+	const settle = (el) => {
+		const reduce = document.documentElement.hasAttribute("data-reduce-motion") || !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		el.style.transition = reduce ? "none" : "transform 200ms cubic-bezier(0.32, 0.72, 0, 1)";
+		el.style.transform = "";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 justify-center pt-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "button",
+			tabIndex: -1,
+			"aria-label": "Drag down to close",
+			"data-sheet-handle": "",
+			className: "hit-area [--hit-size:24px] flex h-6 w-16 cursor-grab touch-none items-start justify-center active:cursor-grabbing",
+			onClick: (e) => {
+				if (e.currentTarget.dataset.dragged !== void 0) delete e.currentTarget.dataset.dragged;
+				else close.current?.click();
+			},
+			onPointerDown: (e) => {
+				if (e.button !== 0) return;
+				drag.current = {
+					id: e.pointerId,
+					y: e.clientY,
+					dy: 0
+				};
+				e.currentTarget.setPointerCapture?.(e.pointerId);
+				if (sheet.current) sheet.current.style.transition = "none";
+			},
+			onPointerMove: (e) => {
+				const d = drag.current;
+				if (!d || d.id !== e.pointerId || !sheet.current) return;
+				d.dy = Math.max(0, e.clientY - d.y);
+				sheet.current.style.transform = `translateY(${d.dy}px)`;
+			},
+			onPointerUp: (e) => {
+				const d = drag.current;
+				drag.current = null;
+				if (!d || d.id !== e.pointerId) return;
+				if (d.dy > SHEET_SWIPE_CLOSE_PX) close.current?.click();
+				else if (sheet.current) settle(sheet.current);
+				if (d.dy > 4) e.currentTarget.dataset.dragged = "";
+			},
+			onPointerCancel: () => {
+				drag.current = null;
+				if (sheet.current) settle(sheet.current);
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				"data-sheet-grabber": true,
+				className: "h-1 w-10 rounded-full bg-kit-line-strong"
+			})
+		}), /* @__PURE__ */ jsx(Dialog.Close, {
+			ref: close,
+			hidden: true,
+			tabIndex: -1,
+			"aria-hidden": true
+		})]
+	});
+}
+function SheetContent({ className, side = "right", children, width = 440, label = "Panel", noScrim = false, finalFocus, ref, style, backdropClassName, keepMounted = false, ...props }) {
+	const focusReturn = useFocusReturn(finalFocus);
+	const popup = React.useRef(null);
+	const merged = useMergedRef(useMergedRef(ref, focusReturn.ref), popup);
+	const bottom = side === "bottom";
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		keepMounted,
+		children: [noScrim ? null : /* @__PURE__ */ jsx(Dialog.Backdrop, {
+			...KIT_SCOPE,
+			className: cn("fixed inset-0 z-[var(--kit-z-sheet,55)] bg-kit-overlay data-[open]:animate-kit-fade-in", backdropClassName)
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...KIT_SCOPE,
+			...layer,
+			style: bottom ? style : {
+				width: `min(${width}px, 100vw)`,
+				...style
+			},
+			className: cn(sheetBase, sheetSides[side], className),
+			...props,
+			ref: merged,
+			finalFocus: focusReturn.finalFocus,
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Title, {
+					className: "sr-only",
+					children: label
+				}),
+				/* @__PURE__ */ jsx(Dialog.Description, {
+					className: "sr-only",
+					children: bottom ? "Bottom panel" : "Side panel"
+				}),
+				bottom ? /* @__PURE__ */ jsx(SheetGrabber, { sheet: popup }) : null,
+				children
+			]
+		})]
+	});
+}
+//#endregion
+export { FLOATING_LAYER, FlowBody, FlowClose, FlowFooter, FlowHeader, FlowLabel, FlowModal, HeaderStatus, HoverCard, HoverCardContent, HoverCardTrigger, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, MoreOptions, OptionRow, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Sheet, SheetClose, SheetContent, SheetTrigger, Tooltip, TooltipProvider, useFocusReturn };
+
+//# sourceMappingURL=overlay.js.map