50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1d74,"use client"; import { forwardRef, useCallback, useMemo, useRef, useState } from "react"; import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react"; import type { Side, Align } from "../../internals/anchor-position"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useFancyId } from "../../internals/use-id"; import { useSoundCue } from "../../sound/use-sound"; import { PopoverContent } from "./PopoverContent"; import { POPOVER_KEY } from "./types"; import type { PopoverContext } from "./types"; import "./popover.css"; interface PopoverOwnProps { /** * Whether the panel is open. * * The source declares this `$bindable(false)`; React has no two-way * channel, so the component keeps its own copy either way and re-syncs it * whenever the CALLER changes the prop. That is what makes all three * documented call shapes work off one implementation — a caller driving * `open` from its own state, a caller who passes only `onOpenChange`, and * a caller who passes a plain unbound value alongside it. */ open?: boolean; /** Called with the new value whenever the panel opens or closes, however the change happened. */ onOpenChange?: (open: boolean) => void; /** Side of the trigger to place the panel on. */ side?: Side; /** Alignment along the trigger's cross axis. */ align?: Align; /** Gap in pixels between the trigger and the panel. */ offset?: number; /** Whether Escape and an outside click close the panel. */ dismissible?: boolean; /** * The trigger's content. Rendered inside the real ` {/* Rendered unconditionally where the source wraps it in `{#if open}`. The panel now owns its own mount clock (`usePresence`), which is what keeps it on screen for the length of its exit — the job the source's branch-plus-outro did — and hoisting it above the gate is also what lets its `Portal` resolve a container BEFORE the commit that opens the panel, so the entrance leg has a node to attach to. */} {children} ); }); Popover.displayName = "Popover"; 53:T204d,"use client"; import { forwardRef } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { Portal } from "../../internals/Portal"; import { useAnchorPosition } from "../../internals/use-anchor-position"; import { useDismissable } from "../../internals/dismissable"; import { useFocusTrap } from "../../internals/focus-trap"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { anchored, originFor } from "../../internals/motion/anchored"; import { usePresence } from "../../internals/motion/presence"; import { usePopoverContext } from "./types"; export interface PopoverContentProps { /** The panel's content, forwarded straight from `Popover`'s own `children`. */ children?: ReactNode; /** Additional CSS classes, merged onto the panel. */ className?: string; } /** * The portalled, anchored panel. * * No `role` here on purpose. A popover is a disclosure, not a dialog — it * has no title to hang `aria-labelledby` off (the `trigger` node is whatever * the caller passed, not a documented "title"), and `role="dialog"` without * an accessible name is worse than no role at all. Reachability comes from * `useFocusTrap` (moves focus in, and returns it to the trigger the instant * the panel is dismissed) and `useDismissable`, not from a landmark role. * * The source declares `ref = $bindable(null)`, so the panel element arrives * through the ref channel rather than a prop. */ export const PopoverContent = forwardRef( function PopoverContent({ children, className }, forwardedRef) { // `Popover` only ever mounts this component under its own provider, so // the context is always present by the time this runs — there is no // standalone-usage fallback to design for. const ctx = usePopoverContext(); // The NODE, not a ref (convention C-1): the panel is created by // `presence.mounted`, so a `useRef` read inside a `[]`-deps effect // would still be null when the trap, position and dismiss effects fire // and none of them would ever arm — silently. const [panel, setPanelNode] = useElementRef(); // The placement as ACTUALLY resolved — the requested side and align // until `computePosition` flips or clamps it away from a viewport edge. // Seeded with the REQUESTED values by the hook itself rather than a // hardcoded "bottom"/"center", so a panel that never flips reads the // right growth origin without depending on whether the first placement // has run yet, and the common case never shows a one-frame origin jump. // // `resolvedAlign` differs from the requested alignment whenever // clamping slid the panel along the cross axis — near a viewport edge // the requested corner is no longer the one touching the anchor, and an // entrance grown from it would expand from the far corner instead. // // DECLARED BEFORE `useFocusTrap`, and that order is load-bearing: both // arm in layout effects in the commit the panel node lands in, and // layout effects run in hook-declaration order. Positioning first means // the trap's `.focus()` lands on a panel that already has coordinates. // The other way round it would focus a `position: static` node sitting // at the end of `document.body`, and the browser would scroll the page // down to it — a jump that survives the switch to `position: fixed` one // effect later. The source gets this from its action order // (`use:anchorPosition` before `use:focusTrap`). const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, { anchor: () => ctx.triggerRef, side: ctx.side, align: ctx.align, offset: ctx.offset, }); // Returns the two functions the source hands out through `onActivate` // (divergence D-3): the eager return, and the re-arm. Two module-level // `let`s, two handler functions and an `onActivate` closure collapse to // this one line. const trap = useFocusTrap(panel, { returnFocus: true }); const presence = usePresence(ctx.open, { // The two halves of the focus handshake, at the two moments the // source puts them: `onintrostart` → rearm, `onoutrostart` → // returnFocusNow. // // `returnFocusNow` at the dismiss instant is the whole point: // waiting for the trap's own `destroy()` would strand a keyboard // user on `` for the whole length of the fade, because the // panel is marked `inert` the instant the exit starts. // // `rearm` is the other half. A popover reopened DURING its fade // reverses the exit instead of remounting, so the trap is never // re-created: without this the panel would come back interactive // with focus left on the trigger behind it, Tab walking the page // rather than the panel, and the eager return already spent for the // life of the instance. onEnterStart: () => trap.rearm(), onExitStart: () => trap.returnFocusNow(), }); // `active: ctx.open` — a plain boolean where the source needed a getter // (divergence D-6). The layer stays ON the stack for its whole exit and // stops being TOP of it the instant `open` flips, so a second Escape // during the fade is neither answered again nor swallowed on its way to // whatever sits underneath. useDismissable(panel, { onDismiss: ctx.close, escape: ctx.dismissible, outsideClick: ctx.dismissible, exclude: () => [ctx.triggerRef], active: ctx.open, // Never modal: keep focus only through the press that dismisses (focus is // back on the trigger). A non-dismissible popover leaves outside presses // alone, so the page keeps text selection and blur while it holds focus. keepFocus: ctx.dismissible, }); // Convention C-2: composed ABOVE the conditional below. Calling this // inside the JSX branch would be a conditional hook and would throw the // first time `mounted` flips. // // ONE bidirectional transition, never a split in/out pair: the // in-flight counterpart's current position is passed into the fresh // leg, so a panel reopened mid-exit continues from where it is instead // of snapping to invisible first. `entering` is what tells it which way // it is going, and the params are read at the instant each leg starts. const panelRef = useComposedRefs( setPanelNode, forwardedRef, presence.register(anchored, (entering) => ({ side: resolvedSide, entering })) ); const classes = cn( "ft-popover-content flex w-max flex-col gap-[6px] rounded-[10px] border border-border bg-popover px-[14px] py-[12px] text-[12px] text-popover-foreground shadow-lg outline-none", className ); // The `Portal` stays ABOVE the mounted gate, and the gate wraps its // CHILDREN. `usePortalTarget` resolves its container in a layout // effect, so a `Portal` that first mounts in the same commit as the // panel would render null on that pass — `usePresence` would then find // no registered leg and the entrance would be silently skipped. // // No portal-before-focus-trap ordering ceremony (divergence D-10): // `createPortal` commits children into the container before any effect // runs and refs populate before layout effects, so the node the trap // focuses is always connected. // // `data-state` is an ordinary attribute (divergence D-2) carrying // `surfaceState`'s TWO values — never `"opening"` (convention C-5). // `inert` is not written by hand either: `usePresence` sets it on every // registered node for the whole exit, which is what keeps a fading // panel from being clicked or tabbed into on its way out. // // `data-align` publishes the REQUESTED alignment, exactly as the source // does; only the transform origin follows the resolved one. return ( {presence.mounted ? (

{children}

) : null} ); } ); PopoverContent.displayName = "PopoverContent"; 54:Tc63,"use client"; /** * The contract between the `Popover` root and its portalled content panel, * and the React context that carries it. * * The source publishes this contract under a `unique symbol` context key; * React's own context object plays that role here, so the exported name is * kept and the value is a `React.Context` object rather than a symbol — the * same substitution the menu family makes for `MENU_KEY`: * * ```tsx * const popover = useContext(POPOVER_KEY); * ``` */ import { createContext, useContext } from "react"; import type { Side, Align } from "../../internals/anchor-position"; /** * The contract between the `Popover` root and its portalled content panel. * * The root owns everything that decides *whether* and *where* the panel * renders — the open flag, the trigger element to anchor against, and the * positioning/dismiss knobs the caller passed in. The content panel only * ever reads this; it never sets `open` itself (it closes through `close()`, * which routes back through the root so `onOpenChange` still fires). */ export interface PopoverContext { /** The panel's own id — also what the trigger's `aria-controls` points at. */ readonly contentId: string; /** Side of the trigger to place the panel on. */ readonly side: Side; /** Alignment along the trigger's cross axis. */ readonly align: Align; /** Gap in pixels between the trigger and the panel. */ readonly offset: number; /** Whether Escape and an outside click are allowed to close the panel. */ readonly dismissible: boolean; /** The real trigger button, once mounted — what the panel anchors against. */ readonly triggerRef: HTMLElement | null; /** * Whether the panel is open. Read by the panel's own presence clock to * tell an entrance from a departure, and by `useDismissable`'s `active` * gate, so a panel that is already fading stops answering Escape and * stops counting as the top layer. * * A plain boolean where the source needed a getter (divergence D-6): * React re-renders the still-mounted exiting panel normally, so every * reader sees the current value without a getter having to defeat an * inert-effect scheduler. * * The panel still never *writes* this: it closes through `close()`, which * routes back through the root so `onOpenChange` fires exactly once. */ readonly open: boolean; /** Closes the panel, going through the root's own `open` state so `onOpenChange` fires. */ close(): void; } export const POPOVER_KEY = createContext(undefined); POPOVER_KEY.displayName = "PopoverContext"; /** * Reads the enclosing `Popover`'s context. * * `Popover` only ever mounts `PopoverContent` under its own provider, so * there is no standalone-usage fallback to design for — the same assumption * the source's own content component makes about its root. Internal: not * exported from `index.ts`. */ export function usePopoverContext(): PopoverContext { const value = useContext(POPOVER_KEY); if (value === undefined) { throw new Error( "PopoverContext is missing: this component must be rendered inside its provider." ); } return value; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/popover/Popover.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/popover/Popover.tsx"},{"path":"react/src/components/popover/PopoverContent.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/popover/PopoverContent.tsx"},{"path":"react/src/components/popover/index.ts","content":"\"use client\";\n\nexport { Popover } from \"./Popover\";\nexport type { PopoverProps } from \"./Popover\";\nexport { PopoverContent } from \"./PopoverContent\";\nexport type { PopoverContentProps } from \"./PopoverContent\";\n\n// The context key, kept because the source's own `index.ts` exports it (as a\n// `unique symbol` there, as the React context object here) — the public\n// escape hatch for a consumer composing their own panel content.\nexport { POPOVER_KEY } from \"./types\";\nexport type { PopoverContext } from \"./types\";\n","type":"registry:ui","target":"@ui/fancy/components/popover/index.ts"},{"path":"react/src/components/popover/popover.css","content":"/*\n * Colocated port of `Popover`'s `