4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T44b4,"use client"; // karaui.kamisama-v0.my.id/components/blocks/dashboard-shell import { LogOut, Menu, PanelLeftClose, PanelLeftOpen, Search, Settings, User } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useId, useRef, useState, } from "react"; import { Breadcrumb, type BreadcrumbDataItem } from "@/components/motion/breadcrumb"; import { Drawer } from "@/components/motion/drawer"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/motion/dropdown-menu"; import { KbdCombo } from "@/components/motion/kbd"; import { Tooltip } from "@/components/motion/tooltip"; import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface DashboardNavItem { id: string; label: string; icon: ReactNode; /** Small count or text after the label (a dot when collapsed). */ badge?: ReactNode; } export interface DashboardNavGroup { id: string; label?: string; items: DashboardNavItem[]; } export interface DashboardUserMenuItem { id: string; label: string; icon?: ReactNode; destructive?: boolean; onSelect?: () => void; } export interface DashboardShellProps { nav: DashboardNavGroup[]; /** Controlled active nav id. */ active?: string; defaultActive?: string; onActiveChange?: (id: string) => void; /** Controlled desktop collapse (icons only). */ collapsed?: boolean; defaultCollapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; brand: { name: string; logo?: ReactNode }; user: { name: string; email?: string; avatar?: string }; /** Avatar menu rows. Defaults to Profile, Settings and Sign out. */ userMenu?: DashboardUserMenuItem[]; searchPlaceholder?: string; /** Fires on Enter in the search field. */ onSearch?: (query: string) => void; /** Also focus search on Mod+K anywhere on the page (default: only while focus is inside the shell). */ globalShortcut?: boolean; breadcrumbs?: BreadcrumbDataItem[]; title?: ReactNode; description?: ReactNode; /** Page-header actions (buttons). */ actions?: ReactNode; children?: ReactNode; className?: string; } function useControllable( value: T | undefined, defaultValue: T, onChange: ((next: T) => void) | undefined, ) { const [internal, setInternal] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : internal; const set = useCallback( (next: T) => { if (!controlled) setInternal(next); onChange?.(next); }, [controlled, onChange], ); return [current, set] as const; } const isShortcut = (e: { key: string; metaKey: boolean; ctrlKey: boolean }) => (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k"; const DEFAULT_MENU: DashboardUserMenuItem[] = [ { id: "profile", label: "Profile", icon: }, { id: "settings", label: "Settings", icon: }, { id: "sign-out", label: "Sign out", icon: , destructive: true }, ]; /** * Container-sized app shell: a sidebar that collapses to icons (labels fade, * tooltips take over, the active pill glides between rows), a top bar with a * Mod+K search field and avatar menu, and a content slot with breadcrumbs, * title and actions that cross-fades per page. Below `md` the sidebar moves * into a Drawer behind a menu button. Fills its parent's box, unlike the * viewport-height `AnimatedSidebar` primitives. */ export function DashboardShell({ nav, active: activeProp, defaultActive, onActiveChange, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, brand, user, userMenu = DEFAULT_MENU, searchPlaceholder = "Search…", onSearch, globalShortcut = false, breadcrumbs, title, description, actions, children, className, }: DashboardShellProps) { const reduce = useReducedMotion(); const baseId = useId(); const [active, setActive] = useControllable( activeProp, defaultActive ?? nav[0]?.items[0]?.id ?? "", onActiveChange, ); const [collapsed, setCollapsed] = useControllable( collapsedProp, defaultCollapsed, onCollapsedChange, ); const [drawerOpen, setDrawerOpen] = useState(false); const [query, setQuery] = useState(""); const searchRef = useRef(null); useEffect(() => { if (!globalShortcut) return; const onKey = (e: globalThis.KeyboardEvent) => { if (!isShortcut(e)) return; e.preventDefault(); searchRef.current?.focus(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [globalShortcut]); const onShellKey = (e: KeyboardEvent) => { if (globalShortcut || !isShortcut(e)) return; e.preventDefault(); searchRef.current?.focus(); }; const pick = (id: string) => { setActive(id); setDrawerOpen(false); }; const initials = user.name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((p) => p[0]?.toUpperCase()) .join(""); return ( // biome-ignore lint/a11y/noStaticElementInteractions: scoped Mod+K shortcut; every control inside is a real element.

{/* Desktop sidebar. Width is animated on purpose: collapsing is a layout change — the content column has to reflow into the freed space. */}

{brand.logo ?? brand.name.slice(0, 1)} {brand.name}

{/* Mobile drawer */}

{brand.logo ?? brand.name.slice(0, 1)} {brand.name}

{/* Top bar */}

Search setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") onSearch?.(query); if (e.key === "Escape") e.currentTarget.blur(); }} placeholder={searchPlaceholder} className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden" />

{user.name} {user.email ? ( {user.email} ) : null} {userMenu.map((item, i) => ( 0} /> ))}

{/* Content */}

{breadcrumbs || title || actions ? (

{breadcrumbs ? : null} {title ?

{title}

: null} {description ? (

{description}

) : null}

{actions ?

{actions}

: null}

) : null} {children}

); } function MenuRow({ item, separatorBefore, }: { item: DashboardUserMenuItem; separatorBefore?: boolean; }) { return ( <> {separatorBefore ? : null} item.onSelect?.()} > {item.label} ); } function FadeLabel({ show, children, className, }: { show: boolean; children: ReactNode; className?: string; }) { return ( {show ? ( {children} ) : null} ); } function NavList({ nav, active, collapsed, layoutGroup, onPick, }: { nav: DashboardNavGroup[]; active: string; collapsed: boolean; layoutGroup: string; onPick: (id: string) => void; }) { const reduce = useReducedMotion(); return (

{nav.map((group) => (

{group.label ? (

{group.label} {collapsed ? ( ) : null}

) : null}

{collapsed ? ( {row} ) : ( row )}

))}

); } 52:T3705,"use client"; import { ChevronRight, Ellipsis } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { useEffect, useId, useRef, useState, type ComponentProps, type ComponentPropsWithoutRef, type KeyboardEvent, type ReactElement, type ReactNode, } from "react"; import { EASE_OUT_CSS, SPRING_LAYOUT, SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------ */ /* Composable primitives */ /* ------------------------------------------------------------------------ */ export type BreadcrumbDataItem = { label: ReactNode; href?: string; icon?: ReactNode; /** Render the link through your router, e.g. `(p) => `. */ render?: (props: BreadcrumbLinkRenderProps) => ReactElement; }; type BreadcrumbNavProps = ComponentPropsWithoutRef<"nav">; export type BreadcrumbProps = BreadcrumbNavProps & { /** Data-driven mode. Omit to compose `BreadcrumbList` children yourself. */ items?: BreadcrumbDataItem[]; /** Collapse middle items into "…" when there are more than this many. */ maxItems?: number; /** "expand" reveals hidden items inline; "menu" lists them in a dropdown. */ collapse?: "expand" | "menu"; separator?: ReactNode; }; export function Breadcrumb({ items, maxItems = 4, collapse = "expand", separator, className, children, ...props }: BreadcrumbProps) { return ( ); } export function BreadcrumbList({ className, ...props }: ComponentPropsWithoutRef<"ol">) { return (

; } export type BreadcrumbLinkRenderProps = { href: string; className: string; children: ReactNode; }; export type BreadcrumbLinkProps = Omit, "href" | "children"> & { href: string; children: ReactNode; /** Swap the `` for a router link: `render={(p) => }`. */ render?: (props: BreadcrumbLinkRenderProps) => ReactElement; }; const linkClass = "group/crumb relative inline-flex min-w-0 items-center gap-1.5 rounded-sm text-muted-foreground outline-none transition-colors duration-200 hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"; function LinkContent({ children }: { children: ReactNode }) { return ( <> {children} {/* Underline slides in from the left and leaves to the right: the origin flips on hover, so scaleX grows and shrinks in the travel direction. */} ); } export function BreadcrumbLink({ href, render, className, children, ...props }: BreadcrumbLinkProps) { const merged = cn(linkClass, className); if (render) { return render({ href, className: merged, children: {children} }); } return ( {children} ); } export function BreadcrumbPage({ className, ...props }: ComponentPropsWithoutRef<"span">) { return ( ); } export function BreadcrumbSeparator({ className, children, ...props }: ComponentPropsWithoutRef<"li">) { return (
svg]:size-3.5", className)} {...props} > {children ?? }

{item.icon}

{item.label}

{content}

(null); const focusRevealed = useRef(false); const indexed = items.map((item, index) => ({ item, index })); const shouldCollapse = !expanded && items.length > Math.max(maxItems, 2); const tail = Math.max(1, maxItems - 2); const hidden = shouldCollapse ? indexed.slice(1, items.length - tail) : []; const entries: Entry[] = shouldCollapse ? [ { kind: "item", ...indexed[0] }, { kind: "ellipsis", hidden }, ...indexed.slice(items.length - tail).map((e) => ({ kind: "item" as const, ...e })), ] : indexed.map((e) => ({ kind: "item" as const, ...e })); // The "…" button unmounts on expand; hand focus to the first revealed link // so keyboard users are not dropped back on . useEffect(() => { if (expanded && focusRevealed.current) { focusRevealed.current = false; firstRevealed.current?.querySelector("a,[tabindex]")?.focus(); } }, [expanded]); const layoutTransition = reduce ? { duration: 0 } : SPRING_LAYOUT; return ( {/* relative: popLayout takes exiting crumbs out of flow, absolutely. */} {entries.flatMap((entry, i) => { const key = entry.kind === "item" ? `item-${entry.index}` : "ellipsis"; const last = entry.kind === "item" && entry.index === items.length - 1; const isFirstRevealed = expanded && entry.kind === "item" && entry.index === 1; // Flat keyed

s (no Fragment) so AnimatePresence tracks each // separator and crumb on its own and plays their exits. const nodes: ReactElement[] = []; if (i > 0) { nodes.push( , ); } nodes.push( {entry.kind === "item" ? ( ) : collapse === "menu" ? ( , ); return nodes; })} ); } function CollapsedMenu({ hidden }: { hidden: { item: BreadcrumbDataItem; index: number }[] }) { const reduce = useReducedMotion(); const [open, setOpen] = useState(false); const menuId = useId(); const rootRef = useRef(null); const triggerRef = useRef(null); const listRef = useRef(null); useEffect(() => { if (!open) return; const onPointer = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); }; document.addEventListener("pointerdown", onPointer); listRef.current?.querySelector("a")?.focus(); return () => document.removeEventListener("pointerdown", onPointer); }, [open]); const close = (refocus: boolean) => { setOpen(false); if (refocus) triggerRef.current?.focus(); }; const onKeyDown = (event: KeyboardEvent) => { if (!open) return; const links = Array.from(listRef.current?.querySelectorAll("a") ?? []); const at = links.indexOf(document.activeElement as HTMLElement); if (event.key === "Escape") { event.preventDefault(); close(true); } else if (event.key === "ArrowDown") { event.preventDefault(); links[(at + 1) % links.length]?.focus(); } else if (event.key === "ArrowUp") { event.preventDefault(); links[(at - 1 + links.length) % links.length]?.focus(); } else if (event.key === "Tab") { setOpen(false); } }; return ( // biome-ignore lint/a11y/noStaticElementInteractions: delegates Escape/arrow keys for the popup's links

setOpen((o) => !o)} className={cn(open && "bg-muted text-foreground")} /> {open ? (

{item.href ? ( (item.render ?? defaultMenuLink)({ href: item.href, className: "flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted focus-visible:text-foreground [&_svg]:size-3.5", children: ( <> {item.icon ? {item.icon} : null} {item.label} ), }) ) : ( {item.label} )}

) : null}

); } function defaultMenuLink({ href, className, children }: BreadcrumbLinkRenderProps) { return ( {children} ); } 53:Tab1,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, type ReactNode } from "react"; import { EASE_OUT, SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface DrawerProps { open: boolean; onOpenChange: (open: boolean) => void; side?: "left" | "right"; children: ReactNode; /** Class for the panel surface. */ className?: string; /** Class for the backdrop. */ backdropClassName?: string; ariaLabel?: string; /** Close when the backdrop is clicked. Default true. */ dismissable?: boolean; } export function Drawer({ open, onOpenChange, side = "right", children, className, backdropClassName, ariaLabel, dismissable = true, }: DrawerProps) { const reduce = useReducedMotion(); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onOpenChange(false); }; window.addEventListener("keydown", onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; }; }, [open, onOpenChange]); const offscreen = side === "right" ? "100%" : "-100%"; return ( {open ? (

dismissable && onOpenChange(false)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25, ease: EASE_OUT }} className={cn( "absolute inset-0 h-full w-full cursor-default bg-black/40 backdrop-blur-sm", backdropClassName, )} />

) : null} ); } 54:T8935,"use client"; import { Check, ChevronRight } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { cloneElement, createContext, isValidElement, type MutableRefObject, type ReactElement, type FocusEvent as ReactFocusEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactNode, type PointerEvent as ReactPointerEvent, type Ref, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { type PlacementAlign, type PlacementSide, resolvePlacement, } from "@/components/motion/anchored-placement"; import { usePopoverPortalPosition } from "@/components/motion/popover-position"; import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL } from "@/lib/ease"; import { useDismiss } from "@/lib/hooks/use-dismiss"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Levels */ /* -------------------------------------------------------------------------- */ /** Where focus lands when a panel opens. */ type FocusIntent = "first" | "last" | "content" | "none"; // Hovering a sub trigger waits this long before opening, so a pointer just // passing over the row on its way down the list doesn't flash a submenu. const SUB_OPEN_DELAY = 100; // Leaving the sub trigger (or hovering a sibling) closes the submenu only // after this grace, so a diagonal move toward the submenu that clips a // neighbouring row doesn't snap it shut. const SUB_CLOSE_DELAY = 220; const TYPEAHEAD_RESET = 500; /** * One open panel: the root menu or a submenu. Items, the active-row * highlight and keyboard navigation all read the nearest level, so a submenu * is the same machinery one step down. */ interface MenuLevel { /** Shared by every panel and the trigger of one menu tree (dismissal scope). */ rootId: string; /** Scope for this panel's layoutId highlight. */ levelId: string; open: boolean; isSub: boolean; triggerId: string; contentId: string; triggerRef: MutableRefObject; contentRef: MutableRefObject; focusIntent: MutableRefObject; activeId: string | null; setActiveId: (id: string | null) => void; /** Id of the child submenu currently open from this panel. */ openSub: string | null; setOpenSub: (id: string | null) => void; scheduleSubClose: () => void; cancelSubClose: () => void; /** Close this panel only (root: the whole menu). */ close: (restoreFocus: boolean) => void; /** Close the whole menu tree. */ closeAll: (restoreFocus: boolean) => void; /** Open the root menu (used by the trigger). */ openRoot: () => void; reduce: boolean; } const MenuLevelContext = createContext(null); function useMenuLevel(component: string) { const level = useContext(MenuLevelContext); if (!level) throw new Error(`${component} must be used within `); return level; } /** Per-panel state shared by the root and every submenu. */ function useLevelCore(open: boolean) { const [activeId, setActiveId] = useState(null); const [openSub, setOpenSubState] = useState(null); const subCloseTimer = useRef | null>(null); const cancelSubClose = useCallback(() => { if (subCloseTimer.current) clearTimeout(subCloseTimer.current); subCloseTimer.current = null; }, []); const setOpenSub = useCallback( (id: string | null) => { cancelSubClose(); setOpenSubState(id); }, [cancelSubClose], ); const scheduleSubClose = useCallback(() => { cancelSubClose(); subCloseTimer.current = setTimeout(() => { subCloseTimer.current = null; setOpenSubState(null); }, SUB_CLOSE_DELAY); }, [cancelSubClose]); // Reset the highlight when the panel opens, not when it closes: removing // the layoutId highlight while the panel is still animating out leaves // motion waiting on it forever, so the closed panel never unmounts. useEffect(() => { if (open) { setActiveId(null); return; } cancelSubClose(); setOpenSubState(null); }, [open, cancelSubClose]); useEffect(() => cancelSubClose, [cancelSubClose]); return useMemo( () => ({ activeId, setActiveId, openSub, setOpenSub, scheduleSubClose, cancelSubClose, }), [activeId, openSub, setOpenSub, scheduleSubClose, cancelSubClose], ); } function getItems(container: HTMLElement | null) { if (!container) return []; return Array.from( container.querySelectorAll( '[data-dropdown-menu-item]:not([data-disabled="true"])', ), ); } function focusByIntent(container: HTMLElement | null, intent: FocusIntent) { if (!container || intent === "none") return; const items = getItems(container); const target = intent === "first" ? items[0] : intent === "last" ? items[items.length - 1] : container; (target ?? container).focus({ preventScroll: true }); } function assignRef(ref: Ref | undefined, value: T | null) { if (typeof ref === "function") ref(value); else if (ref) (ref as MutableRefObject).current = value; } /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export interface DropdownMenuProps { children: ReactNode; /** Controlled open state. */ open?: boolean; /** Uncontrolled initial open state. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; className?: string; } /** * Composable dropdown menu following the WAI-ARIA menu button pattern. The * panel scales out of the trigger side, an active-row highlight glides * between items, and submenus open on hover intent or ArrowRight. */ export function DropdownMenu({ children, open: controlledOpen, defaultOpen = false, onOpenChange, className, }: DropdownMenuProps) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const controlled = controlledOpen !== undefined; const open = controlled ? controlledOpen : internalOpen; const baseId = useId(); const triggerRef = useRef(null); const contentRef = useRef(null); const focusIntent = useRef("content"); const reduce = useReducedMotion() ?? false; const core = useLevelCore(open); const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const closeAll = useCallback( (restoreFocus: boolean) => { setOpen(false); if (restoreFocus) triggerRef.current?.focus({ preventScroll: true }); }, [setOpen], ); const dismiss = useCallback(() => setOpen(false), [setOpen]); const openRoot = useCallback(() => setOpen(true), [setOpen]); const insideTree = useCallback( (target: Element) => Boolean(target.closest(`[data-dropdown-menu="${baseId}"]`)), [baseId], ); // Escape is handled by the focused panel, which knows whether it is a // submenu (close one level) or the root (close and refocus the trigger). useDismiss(open, dismiss, null, { escape: false, ignore: insideTree }); // Focus moves into the panel on open: the first/last item for keyboard // opens, the panel itself for pointer opens so arrows work immediately. useEffect(() => { if (!open) return; const frame = requestAnimationFrame(() => focusByIntent(contentRef.current, focusIntent.current), ); return () => cancelAnimationFrame(frame); }, [open]); const level = useMemo( () => ({ rootId: baseId, levelId: `${baseId}-root`, open, isSub: false, triggerId: `${baseId}-trigger`, contentId: `${baseId}-content`, triggerRef, contentRef, focusIntent, ...core, close: closeAll, closeAll, openRoot, reduce, }), [baseId, open, core, closeAll, openRoot, reduce], ); return (

{children}

); } /* -------------------------------------------------------------------------- */ /* Trigger */ /* -------------------------------------------------------------------------- */ type TriggerChildProps = React.HTMLAttributes & { ref?: Ref; [key: `data-${string}`]: string | undefined; }; export interface DropdownMenuTriggerProps { /** A single element, normally a ` ); } function Shortcut({ children }: { children: ReactNode }) { return ( ); } export interface DropdownMenuItemProps { children: ReactNode; /** Leading icon (sized to 16px). */ icon?: ReactNode; /** Trailing shortcut hint, e.g. "⌘K" or a `KbdCombo`. Decorative. */ shortcut?: ReactNode; variant?: ItemVariant; disabled?: boolean; /** Indent to line up with checkbox/radio rows. */ inset?: boolean; /** Text used by typeahead when children aren't plain text. */ textValue?: string; /** Call `event.preventDefault()` to keep the menu open. */ onSelect?: (event: ReactMouseEvent) => void; /** Default true. */ closeOnSelect?: boolean; className?: string; } export function DropdownMenuItem({ children, icon, shortcut, onSelect, closeOnSelect = true, ...props }: DropdownMenuItemProps) { return ( {icon} {children} {shortcut ? {shortcut} : null} ); } function Indicator({ checked, kind, reduce, }: { checked: boolean; kind: "check" | "dot"; reduce: boolean; }) { return ( ); } export interface DropdownMenuCheckboxItemProps extends Omit { checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; } /** A toggle row. Stays open on select by default so several can be flipped. */ export function DropdownMenuCheckboxItem({ children, checked: controlledChecked, defaultChecked = false, onCheckedChange, shortcut, closeOnSelect = false, ...props }: DropdownMenuCheckboxItemProps) { const level = useMenuLevel("DropdownMenuCheckboxItem"); const [internal, setInternal] = useState(defaultChecked); const checked = controlledChecked ?? internal; return ( { if (controlledChecked === undefined) setInternal(!checked); onCheckedChange?.(!checked); }} > {children} {shortcut ? {shortcut} : null} ); } interface RadioGroupContextValue { value: string | undefined; select: (value: string) => void; } const RadioGroupContext = createContext(null); export interface DropdownMenuRadioGroupProps { children: ReactNode; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Accessible name for the group. */ ariaLabel?: string; className?: string; } export function DropdownMenuRadioGroup({ children, value: controlledValue, defaultValue, onValueChange, ariaLabel, className, }: DropdownMenuRadioGroupProps) { const [internal, setInternal] = useState(defaultValue); const value = controlledValue ?? internal; const ctx = useMemo( () => ({ value, select: (next) => { if (controlledValue === undefined) setInternal(next); onValueChange?.(next); }, }), [value, controlledValue, onValueChange], ); return (

{children}

); } export interface DropdownMenuRadioItemProps extends Omit { value: string; } export function DropdownMenuRadioItem({ children, value, shortcut, closeOnSelect = false, ...props }: DropdownMenuRadioItemProps) { const level = useMenuLevel("DropdownMenuRadioItem"); const group = useContext(RadioGroupContext); if (!group) { throw new Error( "DropdownMenuRadioItem must be used within ", ); } const checked = group.value === value; return ( group.select(value)} > {children} {shortcut ? {shortcut} : null} ); } export interface DropdownMenuLabelProps { children: ReactNode; inset?: boolean; className?: string; } export function DropdownMenuLabel({ children, inset = false, className, }: DropdownMenuLabelProps) { return (

{children}

); } export interface DropdownMenuGroupProps { children: ReactNode; ariaLabel?: string; className?: string; } export function DropdownMenuGroup({ children, ariaLabel, className, }: DropdownMenuGroupProps) { return (

{children}

); } export function DropdownMenuSeparator({ className }: { className?: string }) { return

; } /* -------------------------------------------------------------------------- */ /* Submenus */ /* -------------------------------------------------------------------------- */ interface SubContextValue { level: MenuLevel; parent: MenuLevel; triggerItemId: string; openTimer: MutableRefObject | null>; openWith: (intent: FocusIntent) => void; } const SubContext = createContext(null); function useSub(component: string) { const sub = useContext(SubContext); if (!sub) throw new Error(`${component} must be used within `); return sub; } export interface DropdownMenuSubProps { children: ReactNode; } /** A nested menu opened from a `DropdownMenuSubTrigger` row. */ export function DropdownMenuSub({ children }: DropdownMenuSubProps) { const parent = useMenuLevel("DropdownMenuSub"); const subId = useId(); const open = parent.open && parent.openSub === subId; const triggerRef = useRef(null); const contentRef = useRef(null); const focusIntent = useRef("none"); const openTimer = useRef | null>(null); const core = useLevelCore(open); const triggerItemId = `${subId}-trigger`; useEffect( () => () => { if (openTimer.current) clearTimeout(openTimer.current); }, [], ); // Open submenus take focus only when asked to (keyboard); a hover open // leaves it on the trigger row. useEffect(() => { if (!open) return; const frame = requestAnimationFrame(() => focusByIntent(contentRef.current, focusIntent.current), ); return () => cancelAnimationFrame(frame); }, [open]); const { setOpenSub } = parent; const close = useCallback( (restoreFocus: boolean) => { setOpenSub(null); if (restoreFocus) triggerRef.current?.focus({ preventScroll: true }); }, [setOpenSub], ); const openWith = useCallback( (intent: FocusIntent) => { if (openTimer.current) clearTimeout(openTimer.current); openTimer.current = null; focusIntent.current = intent; if (open) focusByIntent(contentRef.current, intent); else setOpenSub(subId); }, [open, setOpenSub, subId], ); const level = useMemo( () => ({ rootId: parent.rootId, levelId: `${subId}-level`, open, isSub: true, triggerId: triggerItemId, contentId: `${subId}-content`, triggerRef, contentRef, focusIntent, ...core, close, closeAll: parent.closeAll, openRoot: parent.openRoot, reduce: parent.reduce, }), [ parent.rootId, parent.closeAll, parent.openRoot, parent.reduce, subId, open, triggerItemId, core, close, ], ); const ctx = useMemo( () => ({ level, parent, triggerItemId, openTimer, openWith }), [level, parent, triggerItemId, openWith], ); return {children}; } export interface DropdownMenuSubTriggerProps { children: ReactNode; icon?: ReactNode; disabled?: boolean; inset?: boolean; textValue?: string; className?: string; } export function DropdownMenuSubTrigger({ children, icon, ...props }: DropdownMenuSubTriggerProps) { const { level, parent, triggerItemId, openTimer, openWith } = useSub( "DropdownMenuSubTrigger", ); const clearOpenTimer = () => { if (openTimer.current) clearTimeout(openTimer.current); openTimer.current = null; }; return ( openWith(event.detail === 0 ? "first" : "none")} extraProps={{ ref: (node: HTMLButtonElement | null) => { level.triggerRef.current = node; }, "aria-haspopup": "menu", "aria-expanded": level.open, "aria-controls": level.open ? level.contentId : undefined, "data-state": level.open ? "open" : "closed", onPointerEnter: (event) => { if (event.pointerType === "touch" || props.disabled) return; parent.cancelSubClose(); if (level.open) return; clearOpenTimer(); openTimer.current = setTimeout(() => { openTimer.current = null; openWith("none"); }, SUB_OPEN_DELAY); }, onPointerLeave: (event) => { if (event.pointerType === "touch") return; clearOpenTimer(); parent.scheduleSubClose(); }, onKeyDown: (event) => { if (event.key === "ArrowRight") { event.preventDefault(); openWith("first"); } }, }} > {icon} {children} ); } export interface DropdownMenuSubContentProps { children: ReactNode; /** Preferred side; flips when the viewport lacks room. Default "right". */ side?: "right" | "left"; /** Gap from the parent panel, in px. Default 8. */ sideOffset?: number; /** Shift so the first row lines up with the trigger row. Default -7. */ alignOffset?: number; ariaLabel?: string; className?: string; } export function DropdownMenuSubContent({ children, side = "right", sideOffset = 8, alignOffset = -7, ariaLabel, className, }: DropdownMenuSubContentProps) { const { level, parent, triggerItemId } = useSub("DropdownMenuSubContent"); const { cancelSubClose, setActiveId } = parent; // While the pointer or focus is in the submenu, its trigger row keeps the // parent's highlight and the pending close is called off. const onPanelEnter = useCallback(() => { cancelSubClose(); setActiveId(triggerItemId); }, [cancelSubClose, setActiveId, triggerItemId]); return ( {children} ); } 55:T2834,"use client"; import { motion, useReducedMotion } from "motion/react"; import { Fragment, type ReactNode, useEffect, useState } from "react"; import { SPRING_PRESS } from "@/lib/ease"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Platform */ /* -------------------------------------------------------------------------- */ function detectApple() { const nav = navigator as Navigator & { userAgentData?: { platform?: string }; }; const platform = nav.userAgentData?.platform ?? nav.platform ?? ""; return /mac|iphone|ipad|ipod/i.test(platform); } /** * True on Apple platforms. Always `true` on the server and the first client * render (so markup matches), then corrected after mount — `Mod` therefore * renders ⌘ first and swaps to Ctrl on other platforms. */ export function useIsApple() { const [apple, setApple] = useState(true); useEffect(() => setApple(detectApple()), []); return apple; } type KeyLabel = { glyph: string; name: string }; /** Display glyph + spoken name for a key token like "mod", "shift", "k". */ export function keyLabel(key: string, apple: boolean): KeyLabel { const k = key.toLowerCase(); switch (k) { case "mod": return apple ? { glyph: "⌘", name: "Command" } : { glyph: "Ctrl", name: "Control" }; case "cmd": case "command": case "meta": return apple ? { glyph: "⌘", name: "Command" } : { glyph: "Win", name: "Windows" }; case "ctrl": case "control": return apple ? { glyph: "⌃", name: "Control" } : { glyph: "Ctrl", name: "Control" }; case "shift": return apple ? { glyph: "⇧", name: "Shift" } : { glyph: "Shift", name: "Shift" }; case "alt": case "option": return apple ? { glyph: "⌥", name: "Option" } : { glyph: "Alt", name: "Alt" }; case "enter": case "return": return { glyph: "↵", name: "Enter" }; case "esc": case "escape": return { glyph: "Esc", name: "Escape" }; case "backspace": return { glyph: "⌫", name: "Backspace" }; case "delete": return { glyph: "⌦", name: "Delete" }; case "tab": return { glyph: "⇥", name: "Tab" }; case "space": return { glyph: "Space", name: "Space" }; case "up": case "arrowup": return { glyph: "↑", name: "Up arrow" }; case "down": case "arrowdown": return { glyph: "↓", name: "Down arrow" }; case "left": case "arrowleft": return { glyph: "←", name: "Left arrow" }; case "right": case "arrowright": return { glyph: "→", name: "Right arrow" }; default: return key.length === 1 ? { glyph: key.toUpperCase(), name: key.toUpperCase() } : { glyph: key, name: key }; } } /* -------------------------------------------------------------------------- */ /* Key listening */ /* -------------------------------------------------------------------------- */ /** Does this keyboard event's key correspond to the token? */ function eventMatches(token: string, event: KeyboardEvent, apple: boolean) { const k = token.toLowerCase(); const key = event.key.toLowerCase(); switch (k) { case "mod": return key === (apple ? "meta" : "control"); case "cmd": case "command": case "meta": return key === "meta"; case "ctrl": case "control": return key === "control"; case "alt": case "option": return key === "alt"; case "esc": return key === "escape"; case "return": return key === "enter"; case "space": return event.code === "Space"; case "up": case "down": case "left": case "right": return key === `arrow${k}`; default: // Letters and digits by physical key, so Shift/Option variants // ("P" with Shift, "π" with Option) still match. if (/^[a-z]$/.test(k)) return event.code === `Key${k.toUpperCase()}`; if (/^[0-9]$/.test(k)) return event.code === `Digit${k}`; return key === k; } } const MODIFIERS = new Set(["meta", "control", "shift", "alt"]); /** * Tracks which of `keys` are physically held. Listens on window without * preventing default, so it never steals the shortcut from the page. */ export function useKeysPressed(keys: string[], enabled = true) { const apple = useIsApple(); const [held, setHeld] = useState(() => keys.map(() => false)); const signature = keys.join("+"); useEffect(() => { const tokens = signature.split("+"); setHeld(tokens.map(() => false)); if (!enabled) return; const down = new Set(); const sync = () => setHeld(tokens.map((_, i) => down.has(i))); const onDown = (event: KeyboardEvent) => { let changed = false; tokens.forEach((token, i) => { if (!down.has(i) && eventMatches(token, event, apple)) { down.add(i); changed = true; } }); if (changed) sync(); }; const onUp = (event: KeyboardEvent) => { // macOS swallows keyup for other keys while ⌘ is held, so releasing a // modifier releases everything. if (MODIFIERS.has(event.key.toLowerCase()) && apple) { down.clear(); sync(); return; } let changed = false; tokens.forEach((token, i) => { if (down.has(i) && eventMatches(token, event, apple)) { down.delete(i); changed = true; } }); if (changed) sync(); }; const reset = () => { down.clear(); sync(); }; window.addEventListener("keydown", onDown); window.addEventListener("keyup", onUp); window.addEventListener("blur", reset); return () => { window.removeEventListener("keydown", onDown); window.removeEventListener("keyup", onUp); window.removeEventListener("blur", reset); }; }, [signature, enabled, apple]); return held; } /* -------------------------------------------------------------------------- */ /* Kbd */ /* -------------------------------------------------------------------------- */ type KbdSize = "sm" | "md"; const SIZE: Record = { sm: "h-5 min-w-5 px-1 text-[11px] rounded-[5px] border-b-[2px]", md: "h-6 min-w-6 px-1.5 text-xs rounded-md border-b-[3px]", }; // How far the key drops when pressed, in px — matches the thicker bottom edge // so the cap visibly sinks into its base. const DIP: Record = { sm: 1.5, md: 2 }; export interface KbdProps { /** A key token ("mod", "shift", "k", "enter"…) or any custom content. */ children: ReactNode; size?: KbdSize; /** Show the key pressed (spring dip). */ pressed?: boolean; /** Dip when the real key is held. Needs `children` to be a key token string. */ listen?: boolean; className?: string; } /** * A single keyboard key. String children are treated as key tokens, so * `mod` renders ⌘ on Apple platforms and Ctrl elsewhere. */ export function Kbd({ children, size = "md", pressed = false, listen = false, className, }: KbdProps) { const apple = useIsApple(); const token = typeof children === "string" ? children : null; const [held] = useKeysPressed(token ? [token] : [], listen && token !== null); const label = token ? keyLabel(token, apple) : null; return ( {label ? label.glyph : children} ); } function KeyCap({ children, size, pressed, title, className, }: { children: ReactNode; size: KbdSize; pressed: boolean; title?: string; className?: string; }) { const reduce = useReducedMotion() ?? false; return ( {children} ); } export interface KbdComboProps { /** Key tokens, e.g. ["mod", "shift", "p"]. */ keys: string[]; size?: KbdSize; /** Show every key pressed. */ pressed?: boolean; /** Dip each key while the real key is held. */ listen?: boolean; /** Text between keys. Default none on Apple, "+" elsewhere. */ separator?: ReactNode; className?: string; } /** * A key combination: one chip per key, platform-aware, with a spoken label * ("Command + Shift + P") for assistive tech. */ export function KbdCombo({ keys, size = "md", pressed = false, listen = false, separator, className, }: KbdComboProps) { const apple = useIsApple(); const held = useKeysPressed(keys, listen); const labels = keys.map((key) => keyLabel(key, apple)); const sep = separator === undefined ? (apple ? null : "+") : separator; return ( {labels.map((l) => l.name).join(" + ")} {labels.map((label, i) => ( {i > 0 && sep !== null ? ( {sep} ) : null} {label.glyph} ))} ); } 56:T2551,"use client"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { cloneElement, isValidElement, type PointerEvent, type ReactElement, type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { EASE_OUT } from "@/lib/ease"; import { useDismiss } from "@/lib/hooks/use-dismiss"; import { useHoverGesture } from "@/lib/hooks/use-hover-gesture"; import { useTapGesture } from "@/lib/hooks/use-tap-gesture"; import { cn } from "@/lib/utils"; type Side = "top" | "right" | "bottom" | "left"; export interface TooltipProps { content: ReactNode; children: ReactElement; side?: Side; /** Delay before showing (ms). Default 120. */ delay?: number; className?: string; /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */ wrapperClassName?: string; } // Gap between trigger and tooltip, in px. const GAP = 8; // Centering transform for the fixed-positioned anchor point, per side. const anchorTransform: Record = { top: "translate(-50%, -100%)", bottom: "translate(-50%, 0)", left: "translate(-100%, -50%)", right: "translate(0, -50%)", }; const transformOrigin: Record = { top: "center bottom", bottom: "center top", left: "right center", right: "left center", }; // Offset is in the direction *away* from the trigger — content originates near // the trigger and rises into resting position. const offsetFrom: Record = { top: { y: 8 }, bottom: { y: -8 }, left: { x: 8 }, right: { x: -8 }, }; function buildVariants(side: Side): Variants { const o = offsetFrom[side]; return { initial: { opacity: 0, scale: 0.9, filter: "blur(5px)", x: o.x ?? 0, y: o.y ?? 0, }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", x: 0, y: 0, transition: { type: "spring", stiffness: 380, damping: 30, mass: 0.7, opacity: { duration: 0.14, ease: EASE_OUT }, filter: { duration: 0.18, ease: EASE_OUT }, }, }, exit: { opacity: 0, scale: 0.94, filter: "blur(3px)", x: (o.x ?? 0) * 0.6, y: (o.y ?? 0) * 0.6, transition: { duration: 0.12, ease: EASE_OUT }, }, }; } const REDUCED_VARIANTS: Variants = { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.14, ease: EASE_OUT } }, exit: { opacity: 0, transition: { duration: 0.1, ease: EASE_OUT } }, }; // Once any tooltip has just closed, neighbouring tooltips open without the // initial delay — moving along a toolbar feels instant after the first one. const WARM_WINDOW_MS = 300; let lastHiddenAt = 0; export function Tooltip({ content, children, side = "top", delay = 120, className, wrapperClassName, }: TooltipProps) { const [open, setOpen] = useState(false); const [coords, setCoords] = useState<{ top: number; left: number } | null>( null, ); const id = useId(); const timer = useRef | null>(null); const anchorRef = useRef(null); const hover = useHoverGesture(); const reduce = useReducedMotion(); // Anchor point in viewport coords, on the edge of the trigger facing `side`. // Position:fixed means these viewport coords place the tooltip directly, so // it escapes every ancestor's stacking context and overflow. const place = useCallback(() => { const el = anchorRef.current; if (!el) return; const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const point: Record = { top: { top: r.top - GAP, left: cx }, bottom: { top: r.bottom + GAP, left: cx }, left: { top: cy, left: r.left - GAP }, right: { top: cy, left: r.right + GAP }, }; setCoords(point[side]); }, [side]); const show = useCallback(() => { if (timer.current) clearTimeout(timer.current); const warm = Date.now() - lastHiddenAt < WARM_WINDOW_MS; timer.current = setTimeout( () => { place(); setOpen(true); }, warm ? 0 : delay, ); }, [delay, place]); const hide = useCallback(() => { if (timer.current) { clearTimeout(timer.current); timer.current = null; } if (open) lastHiddenAt = Date.now(); setOpen(false); }, [open]); // A finger never hovers, and Safari does not focus a button on tap either, so // the label is only reachable if the tap itself opens the tooltip. A click // carries no pointerType, so the pointerdown that preceded it is what says // whether this was a tap; keyboard activation arrives with no pointerdown at // all, and focus has already shown the label there. const tap = useTapGesture(); const toggleOnTap = useCallback(() => { const gesture = tap.take(); if (!gesture || gesture.pointerType === "mouse") return; if (gesture.state) { hide(); return; } if (timer.current) clearTimeout(timer.current); place(); setOpen(true); }, [hide, place, tap]); // ...and closed again by the next tap that lands somewhere else. The label // covers nothing interactive, so that tap passes through to what it hit. useDismiss(open, hide, anchorRef); // Keep the tooltip pinned to the trigger while it's open and the page scrolls // or resizes (fixed coords are viewport-relative). useEffect(() => { if (!open) return; const onMove = () => place(); window.addEventListener("scroll", onMove, true); window.addEventListener("resize", onMove); return () => { window.removeEventListener("scroll", onMove, true); window.removeEventListener("resize", onMove); }; }, [open, place]); const variants = useMemo( () => (reduce ? REDUCED_VARIANTS : buildVariants(side)), [reduce, side], ); if (!isValidElement(children)) return children; // The label describes the trigger, so it has to name the trigger itself. // Everything else the tooltip needs is read off the anchor below instead of // cloned on: a handler written onto the child is the child's handler as far // as that child can tell, and a component that owns its activation — // hard-wiring onClick and spreading the rest of its props over it, as // ThemeToggle does — then runs the tooltip's instead of its own. Composing // with `props.onClick` cannot save it either, because a component element's // props hold nothing the component does internally. const trigger = cloneElement(children as ReactElement>, { "aria-describedby": id, }); return ( <> {/* biome-ignore lint/a11y/noStaticElementInteractions: the anchor is not a control — it observes the trigger it wraps. Every event listed reaches it on its own (pointerdown/click/keydown/pointercancel bubble, focus and blur arrive as focusin/focusout, and enter/leave are derived from pointerover/pointerout along a path the anchor is on), so the trigger keeps every handler it came with. */} { if (hover.enter(event)) show(); }} onPointerLeave={(event: PointerEvent) => { if (hover.leave(event)) hide(); }} onFocus={show} onBlur={hide} onPointerDown={(event: PointerEvent) => tap.start(event, open)} // A gesture the platform took away sends no click, and a key press // starts an activation that never had a pointer behind it. Either way // the record has to go, or the next click reads a finger that has long // since lifted. onPointerCancel={tap.drop} onKeyDown={tap.drop} onClick={toggleOnTap} > {trigger} {typeof document !== "undefined" ? createPortal( {open && coords ? ( ) : null} , document.body, ) : null} ); } 57:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 58:Ted5,import type { PortalLayout } from "@/components/motion/popover-position"; export type PlacementSide = "top" | "right" | "bottom" | "left"; export type PlacementAlign = "start" | "center" | "end"; export interface PlacementOptions { side: PlacementSide; align: PlacementAlign; /** Gap between trigger and panel along the side axis, in px. */ sideOffset?: number; /** Shift along the align axis, in px. */ alignOffset?: number; /** Minimum distance kept from the viewport edges, in px. */ padding?: number; } export interface Placement { left: number; top: number; /** The side actually used — differs from the requested one after a flip. */ side: PlacementSide; /** Trigger-facing point of the panel, as a CSS transform-origin (px). */ origin: string; } const OPPOSITE: Record = { top: "bottom", bottom: "top", left: "right", right: "left", }; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), Math.max(min, max)); } /** * Places a portalled panel against its trigger in viewport coordinates * (pair with `usePopoverPortalPosition`). Flips to the opposite side when the * requested one lacks room and the other has more, then clamps the panel into * the viewport on both axes. The returned origin is the trigger's center * projected onto the panel's facing edge, so a scale entrance grows out of the * trigger even after a flip or a clamp. */ export function resolvePlacement( layout: PortalLayout, { side: requested, align, sideOffset = 6, alignOffset = 0, padding = 8, }: PlacementOptions, ): Placement { const { trigger, content } = layout; const vw = window.innerWidth; const vh = window.innerHeight; const space: Record = { top: trigger.top - sideOffset - padding, bottom: vh - (trigger.top + trigger.height) - sideOffset - padding, left: trigger.left - sideOffset - padding, right: vw - (trigger.left + trigger.width) - sideOffset - padding, }; const vertical = requested === "top" || requested === "bottom"; const need = vertical ? content.height : content.width; const opposite = OPPOSITE[requested]; const side = space[requested] < need && space[opposite] > space[requested] ? opposite : requested; let left: number; let top: number; if (vertical) { top = side === "bottom" ? trigger.top + trigger.height + sideOffset : trigger.top - content.height - sideOffset; left = align === "start" ? trigger.left : align === "end" ? trigger.left + trigger.width - content.width : trigger.left + trigger.width / 2 - content.width / 2; left = clamp(left + alignOffset, padding, vw - content.width - padding); top = clamp(top, padding, vh - content.height - padding); } else { left = side === "right" ? trigger.left + trigger.width + sideOffset : trigger.left - content.width - sideOffset; top = align === "start" ? trigger.top : align === "end" ? trigger.top + trigger.height - content.height : trigger.top + trigger.height / 2 - content.height / 2; top = clamp(top + alignOffset, padding, vh - content.height - padding); left = clamp(left, padding, vw - content.width - padding); } const cx = clamp(trigger.left + trigger.width / 2 - left, 0, content.width); const cy = clamp(trigger.top + trigger.height / 2 - top, 0, content.height); const origin = side === "bottom" ? `${cx}px 0px` : side === "top" ? `${cx}px ${content.height}px` : side === "right" ? `0px ${cy}px` : `${content.width}px ${cy}px`; return { left, top, side, origin }; } 59:T8af,"use client"; import { type MutableRefObject, useCallback, useLayoutEffect, useState, } from "react"; export type PortalLayout = { trigger: { left: number; top: number; width: number; height: number; }; content: { width: number; height: number; }; }; function sameLayout(a: PortalLayout | null, b: PortalLayout) { return ( a?.trigger.left === b.trigger.left && a.trigger.top === b.trigger.top && a.trigger.width === b.trigger.width && a.trigger.height === b.trigger.height && a.content.width === b.content.width && a.content.height === b.content.height ); } /** Measures a trigger and portalled panel in viewport coordinates. */ export function usePopoverPortalPosition< TriggerElement extends HTMLElement, ContentElement extends HTMLElement, >( triggerRef: MutableRefObject, contentRef: MutableRefObject, active: boolean, ) { const [layout, setLayout] = useState(null); const update = useCallback(() => { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) return; const rect = trigger.getBoundingClientRect(); const next: PortalLayout = { trigger: { left: rect.left, top: rect.top, width: rect.width, height: rect.height, }, content: { width: content.offsetWidth, height: content.offsetHeight, }, }; setLayout((current) => (sameLayout(current, next) ? current : next)); }, [contentRef, triggerRef]); useLayoutEffect(() => { update(); if (!active) return; const trigger = triggerRef.current; const content = contentRef.current; const observer = new ResizeObserver(update); if (trigger) observer.observe(trigger); if (content) observer.observe(content); window.addEventListener("scroll", update, true); window.addEventListener("resize", update); return () => { observer.disconnect(); window.removeEventListener("scroll", update, true); window.removeEventListener("resize", update); }; }, [active, contentRef, triggerRef, update]); return layout; } 5a:T126c,"use client"; import { type RefObject, useEffect } from "react"; /** * What the dismissing gesture does to the control it landed on. * * `"pass-through"` is the platform norm (native popover light-dismiss): the * tap closes the overlay *and* activates whatever was under it. Use * `"consume"` where the open overlay sits over or beside controls that would * be costly to trigger by accident — the dismissal then swallows the * activation too, so the gesture only closes. */ export type DismissBehavior = "pass-through" | "consume"; export interface DismissOptions { /** Default `"pass-through"`. */ behavior?: DismissBehavior; /** Dismiss on Escape as well. Default true. */ escape?: boolean; /** Return true for an outside target that should *not* dismiss. Must be stable. */ ignore?: (target: Element) => boolean; } /** * What every currently open dismiss scope counts as inside itself. A consumed * dismissal reads this to tell a stray gesture from one that belongs to an * overlay in front of it: overlays have no shared z-order to consult, but the * one the gesture landed in has said as much by registering it. */ const openScopes = new Set<(target: Element) => boolean>(); function claimedByAnotherScope( self: (target: Element) => boolean, target: Element, ) { for (const scope of openScopes) { if (scope !== self && scope(target)) return true; } return false; } // preventDefault on pointerdown does not suppress the click that follows, so // consuming a gesture means swallowing that click itself. The swallower // deliberately outlives the effect that installed it — the dismissal it // belongs to has already unmounted or re-rendered by the time the click lands. // It releases on that click, or on the next gesture if the pointer is dragged // away and no click ever arrives, so it can never eat a later one. A keydown // releases it too: a gesture that ends with neither a click nor a cancel would // otherwise leave it armed, and the click Enter synthesizes on some focused // control is not the one this dismissal was owed. function consumeActivation(source: Event) { const swallow = (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); release(); }; const restart = (event: Event) => { if (event !== source) release(); }; const release = () => { window.removeEventListener("click", swallow, true); window.removeEventListener("pointerdown", restart, true); window.removeEventListener("pointercancel", restart, true); window.removeEventListener("keydown", release, true); }; window.addEventListener("click", swallow, true); window.addEventListener("pointerdown", restart, true); window.addEventListener("pointercancel", restart, true); window.addEventListener("keydown", release, true); } /** * Close an open overlay on Escape or a pointerdown outside `ref`. Pass `null` * for `ref` when what counts as inside isn't one element, and say so with * `ignore` instead. * * The pointerdown listener is capture-phase: a bubble-phase one is blinded by * any handler in between that stops propagation, and an overlay cannot know * what it is layered over. `onDismiss` and `ignore` must be stable (wrap in * useCallback) so the listeners aren't re-bound every render while open. */ export function useDismiss( open: boolean, onDismiss: () => void, ref: RefObject | null, { behavior = "pass-through", escape: dismissOnEscape = true, ignore, }: DismissOptions = {}, ) { useEffect(() => { if (!open) return; const inside = (target: Element) => Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target)); const onKey = (event: KeyboardEvent) => { if (dismissOnEscape && event.key === "Escape") onDismiss(); }; const onPointer = (event: PointerEvent) => { const target = event.target as Element | null; if (!target || inside(target)) return; // Outside this overlay, but inside one that is also open: the gesture is // that overlay's to answer, and swallowing its click from behind would // cost the user the control they actually aimed at. if (behavior === "consume" && !claimedByAnotherScope(inside, target)) { consumeActivation(event); } onDismiss(); }; openScopes.add(inside); window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onPointer, true); return () => { openScopes.delete(inside); window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onPointer, true); }; }, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]); } 5b:T8a7,"use client"; import { useMemo, useRef } from "react"; import { isHoveringPointer } from "@/lib/touch"; interface BoundaryEvent { pointerId: number; pointerType: string; buttons: number; } export interface HoverGesture { /** True when this enter starts a hover: the pointer arrived resting, not pressing. */ enter: (event: BoundaryEvent) => boolean; /** True when this leave ends a hover that entered as one. */ leave: (event: BoundaryEvent) => boolean; } /** * Pairs a surface's enter with its leave, per pointer. * * `isHoveringPointer` answers the question the *enter* asks — is this pointer * resting on the surface or pressing it — and both boundary cases go wrong if * the leave is asked the same question again: * * - A pen with no hover never rests. It arrives in contact, taps, and the spec * then requires its boundary events after `pointerup`, so the leave carries * `buttons: 0` and reads as a mouse gliding off. Hover teardown then undid * the tap — the panel the pen had just opened closed under it. * - A mouse pressed on the surface and dragged off leaves with `buttons: 1`. * Skipping teardown there strands the surface open: the release happens * outside, and no second leave ever comes. * * So the state a hover holds is released by the pointer that took it, whatever * the buttons say at the boundary, and a pointer that arrived in contact never * took it in the first place. Contact is the exception tracked here, not * hover: a leave from a pointer this surface never saw enter — mounted under * the cursor, say — still counts, since the alternative is state with no way * out. */ export function useHoverGesture(): HoverGesture { const contact = useRef(new Set()); return useMemo( () => ({ enter: (event) => { if (isHoveringPointer(event)) { contact.current.delete(event.pointerId); return true; } contact.current.add(event.pointerId); return false; }, leave: (event) => { const arrivedInContact = contact.current.delete(event.pointerId); return !arrivedInContact && event.pointerType !== "touch"; }, }), [], ); } 5c:T98e,"use client"; import { useMemo, useRef } from "react"; /** What a pointerdown recorded, read back by the click that ends its gesture. */ export interface TapRecord { /** Which input started the gesture. */ pointerType: string; /** What the surface was showing when it started. */ state: S; } export interface TapGesture { /** Record the gesture a pointerdown starts, with the state it starts in. */ start: (event: { pointerType: string }, state: S) => void; /** Read the record and clear it. `null` when no pointer is behind this click. */ take: () => TapRecord | null; /** Drop the record: this gesture will never spend it on a click. */ drop: () => void; } /** * The pointer gesture behind a click, recorded where the click cannot report * it. A `click` carries no `pointerType` in the engines that matter, so the * `pointerdown` before it is the only thing that says which input activated * the control — and whether one did at all, since keyboard activation * synthesizes a click with no pointer behind it. * * State goes in with the record because a click reports that no better: a * browser that focuses a control on contact can open the very panel the tap * was meant to open, and reading "is it open" at click time then undoes it. * What the gesture started against is what it acts on. * * The record is spent by one click and dropped by everything else, because a * record that outlives its gesture is worse than none: * * - A scroll or an OS gesture takes the touch away — `pointercancel`, no click * ever — and the finger would sit in the record until some later click. * - That later click is often `Enter` on a keyboard, which arrives with no * pointerdown of its own and would inherit the abandoned finger. A keydown * is the start of a keyboard activation and never part of a tap, so it drops * the record too. * * Both ends have to be wired by the surface: `drop` on `onPointerCancel` and * on `onKeyDown`. */ export function useTapGesture(): TapGesture { const record = useRef | null>(null); return useMemo( () => ({ start: (event, state) => { record.current = { pointerType: event.pointerType, state }; }, take: () => { const spent = record.current; record.current = null; return spent; }, drop: () => { record.current = null; }, }), [], ); } 5d:T1668,// Shared touch primitives. iOS and iPadOS run their own gestures on top of the // page — the long-press selection callout and the selection it drags in with // it — and they win: once the platform claims a touch it cancels ours // mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own // their gesture have to opt out. // // What the two classes below cover, precisely: // - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only: // it is not a property other engines have, so it is inert everywhere else. // - `user-select: none` stops the long-press selection on every engine, // Android included, and stops a drag from painting a selection under the // cursor. It is inherited, so it reaches every descendant — which is why the // two classes differ only in whether they apply it unconditionally. // What neither covers: // - Chrome for Android's long-press menu on a link or an image. No CSS // suppresses it; a gesture surface that wraps one needs its own // `onContextMenu` with `preventDefault()`. // - The native drag of an `` or `` descendant. `-webkit-user-drag` is // not inherited and plain divs and buttons are not drag sources, so setting // it on the surface does nothing — the child itself needs `draggable={false}`. /** * Classes for a surface that *is* the control: a thumb, a drum, a stage, a * handle, a hold button. Selection is suppressed on every input, because a * drag that highlights the control's own label is wrong on a mouse too. * Compose with `touch-none` when the surface also owns the scroll axis — leave * it off when the page must still scroll from there. */ export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]"; /** * The same opt-out for a gesture surface that wraps content the consumer owns: * a scroller, a context-menu trigger, a sheet header, a list row. Selection is * suppressed only where the platform runs its own press gestures — a coarse * pointer — so a mouse user can still select and copy that content. If the * gesture itself would paint a selection under the cursor, add `select-none` * for the duration of the gesture rather than reaching for * `TOUCH_GESTURE_CLASS`. * * `pointer: coarse` describes the *primary* pointer and nothing else, so a * hybrid machine reads it wrong in both directions: a tablet with a mouse * plugged in keeps touch as primary and loses mouse selection, and a laptop * with a touchscreen keeps the mouse as primary and leaves selection live * under a finger. No media query can answer per interaction — the query is * about the device, and the question is about the gesture in progress. The * default stays here because it is right on the machines that are one thing or * the other, and losing a selection is a nuisance; where the miss costs a * *gesture* instead, the surface pairs it with `holdSelection` on the press. */ export const TOUCH_GESTURE_CONTENT_CLASS = "[-webkit-touch-callout:none] pointer-coarse:select-none"; /** * Suppress selection on `element` for as long as a gesture is running on it, * whatever the primary pointer of the machine happens to be. Returns the * release. Inline, so it wins over the class above and is gone again the * moment the gesture ends. * * For the press gestures a native selection would otherwise steal — a * long-press that opens a menu. Elsewhere prefer the classes: a surface that * takes selection away for the whole session is a surface whose text nobody * can copy. */ export function holdSelection(element: HTMLElement) { element.style.setProperty("user-select", "none"); element.style.setProperty("-webkit-user-select", "none"); return () => { element.style.removeProperty("user-select"); element.style.removeProperty("-webkit-user-select"); }; } /** * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer * is already gone by the time the handler runs — routine on iOS, where the * system can claim the touch first — and an uncaught throw takes the rest of * the handler, the gesture included, down with it. Touch pointers carry * implicit capture anyway, so losing it is never fatal. */ export function capturePointer(element: Element, pointerId: number) { try { element.setPointerCapture(pointerId); } catch { // Pointer is no longer active — implicit capture still applies on touch. } } /** Release a capture taken with `capturePointer`, ignoring a stale pointer. */ export function releasePointer(element: Element, pointerId: number) { try { if (element.hasPointerCapture(pointerId)) { element.releasePointerCapture(pointerId); } } catch { // Capture was already dropped by the browser. } } /** * Whether this event came from a pointer that is *hovering*: not a touch, and * not currently pressed. Which input the user is holding right now is not * something a device capability can answer — a touchscreen laptop hovers and * taps, and iPadOS reports a fine hovering pointer for a finger — so both * paths stay live and each handler branches on the event it was given. * * A pen resting on the glass is making contact, not hovering: `buttons` is the * tell, and it sends a pen tap down the same route a finger takes. * * This answers what an *enter* asks. A leave is the other half of a pair and * has to be read against the enter that started it — `useHoverGesture` in * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it * rather than asking this question twice. */ export const isHoveringPointer = (event: { pointerType: string; buttons: number; }) => event.pointerType !== "touch" && event.buttons === 0; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/dashboard-shell.tsx","content":"$51","type":"registry:component","target":"@components/motion/dashboard-shell.tsx"},{"path":"components/motion/breadcrumb.tsx","content":"$52","type":"registry:component","target":"@components/motion/breadcrumb.tsx"},{"path":"components/motion/drawer.tsx","content":"$53","type":"registry:component","target":"@components/motion/drawer.tsx"},{"path":"components/motion/dropdown-menu.tsx","content":"$54","type":"registry:component","target":"@components/motion/dropdown-menu.tsx"},{"path":"components/motion/kbd.tsx","content":"$55","type":"registry:component","target":"@components/motion/kbd.tsx"},{"path":"components/motion/tooltip.tsx","content":"$56","type":"registry:component","target":"@components/motion/tooltip.tsx"},{"path":"lib/ease.ts","content":"$57","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/anchored-placement.ts","content":"$58","type":"registry:component","target":"@components/motion/anchored-placement.ts"},{"path":"components/motion/popover-position.ts","content":"$59","type":"registry:component","target":"@components/motion/popover-position.ts"},{"path":"lib/hooks/use-dismiss.ts","content":"$5a","type":"registry:hook","target":"@lib/hooks/use-dismiss.ts"},{"path":"lib/hooks/use-hover-gesture.ts","content":"$5b","type":"registry:hook","target":"@lib/hooks/use-hover-gesture.ts"},{"path":"lib/hooks/use-tap-gesture.ts","content":"$5c","type":"registry:hook","target":"@lib/hooks/use-tap-gesture.ts"},{"path":"lib/touch.ts","content":"$5d","type":"registry:lib","target":"@lib/touch.ts"}],"className":"h-[70svh] min-h-80"}]]}]