51: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"] 52: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"] 53:T1d83,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Camera, FileText, ImageIcon, MapPin, Mic, Plus } from "lucide-react"; export interface BranchedMenuItem { label: string; icon?: ReactNode; } export interface BranchedMenuProps { /** Sub-actions that sprout at the ends of the branches. */ items?: BranchedMenuItem[]; /** Branch length in px. */ radius?: number; /** Fan angle in degrees across which the branches spread. */ spread?: number; /** Branch stroke color. */ color?: string; /** Accessible name of the trigger. */ label?: string; /** Called with the chosen item and its index; the menu then collapses. */ onSelect?: (item: BranchedMenuItem, index: number) => void; className?: string; } const defaultItems: BranchedMenuItem[] = [ { label: "Photo", icon: }, { label: "Gallery", icon: }, { label: "Note", icon: }, { label: "Voice", icon: }, { label: "Place", icon: }, ]; const PAD = 40; export function BranchedMenu({ items = defaultItems, radius = 130, spread = 150, color = "#a3e635", label = "Create", onSelect, className, }: BranchedMenuProps) { const [open, setOpen] = useState(false); const trigger = useRef(null); const refs = useRef<(HTMLButtonElement | null)[]>([]); const menuId = useId(); const w = radius * 2 + PAD * 2; const h = radius + PAD * 2; const ox = w / 2; const oy = h - PAD; const n = items.length; const nodes = items.map((item, i) => { const a = ((-90 - spread / 2 + (n > 1 ? (i * spread) / (n - 1) : spread / 2)) * Math.PI) / 180; const ex = ox + Math.cos(a) * radius; const ey = oy + Math.sin(a) * radius; // Grow straight up out of the trunk first, then bend out toward the leaf. const d = `M${ox} ${oy - 22}C${ox} ${oy - radius * 0.55} ${ex - (ex - ox) * 0.3} ${ey + (oy - ey) * 0.22} ${ex} ${ey}`; return { item, ex, ey, d }; }); useEffect(() => { if (open) refs.current[0]?.focus(); }, [open]); const close = (refocus: boolean) => { setOpen(false); if (refocus) trigger.current?.focus(); }; const onMenuKey = (e: KeyboardEvent) => { const i = refs.current.findIndex((el) => el === document.activeElement); const move = (to: number) => { e.preventDefault(); refs.current[(to + n) % n]?.focus(); }; if (e.key === "Escape") { e.preventDefault(); close(true); } else if (e.key === "ArrowRight" || e.key === "ArrowDown") move(i + 1); else if (e.key === "ArrowLeft" || e.key === "ArrowUp") move(i - 1); else if (e.key === "Home") move(0); else if (e.key === "End") move(n - 1); }; return (

{ if (open && !e.currentTarget.contains(e.relatedTarget as Node | null)) setOpen(false); }} > {open && ( )} setOpen((o) => !o)} onKeyDown={(e) => { if (e.key === "Escape" && open) close(true); }} whileTap={{ scaleX: 1.14, scaleY: 0.86 }} animate={{ scale: open ? 0.92 : 1 }} transition={{ type: "spring", stiffness: 500, damping: 18 }} className="absolute grid size-12 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/.35),0_10px_28px_-10px_var(--primary)] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background" style={{ left: ox, top: oy }} >

); } 50:["$","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","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/branched-menu.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]