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:T41ab,/* oxlint-disable jsx-a11y/prefer-tag-over-role -- a custom ARIA listbox; a native select cannot filter, create, or draw the tree. */ "use client"; import { ArrowDown01Icon, ArrowLeft01Icon, GitBranchIcon, PlusSignIcon, Search01Icon, SquareLock01Icon, Tick02Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useEffect, useRef, useState } from "react"; import type { ComponentProps, FormEvent, KeyboardEvent } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export interface Branch { id: string; name: string; /** The project's default branch. */ default?: boolean; /** A protected branch. */ protected?: boolean; /** The parent branch's id; drives the drawn hierarchy. */ parent?: string; } interface TreeNode { branch: Branch; depth: number; } /* ───────────────────────────────────────────────────────── * GEOMETRY * * The list draws a real branch graph, not indent guides: * a branch sits in the lane of its depth, and a curved edge * runs from its parent's node into it. Tuned tight for the * 32px popover rows. While searching, the list flattens to * one lane and drops the edges. * ───────────────────────────────────────────────────────── */ const ROW_H = 32; const LANE_W = 18; const PAD_X = 12; const DOT_R = 3; const CORNER = 8; const laneX = (depth: number) => PAD_X + depth * LANE_W; const rowY = (row: number) => row * ROW_H + ROW_H / 2; /** Depth-first flatten, assigning each branch a depth lane. */ const buildTree = (branches: Branch[]): TreeNode[] => { const ids = new Set(branches.map((branch) => branch.id)); const parentOf = (branch: Branch) => branch.parent && ids.has(branch.parent) ? branch.parent : undefined; const childrenOf = (id?: string) => branches.filter((branch) => parentOf(branch) === id); const nodes: TreeNode[] = []; const walk = (branch: Branch, depth: number) => { nodes.push({ branch, depth }); for (const kid of childrenOf(branch.id)) { walk(kid, depth + 1); } }; for (const root of childrenOf()) { walk(root, 0); } return nodes; }; const edgePath = (px: number, py: number, cx: number, cy: number) => `M ${px} ${py} V ${cy - CORNER} Q ${px} ${cy} ${px + CORNER} ${cy} H ${cx}`; const Graph = ({ nodes, byId, selectedId, drawEdges, width, height, }: { nodes: TreeNode[]; byId: Map; selectedId?: string; drawEdges: boolean; width: number; height: number; }) => ( ); const BranchBadge = ({ children }: { children: string }) => ( {children} ); const BranchOption = ({ node, selected, highlighted, canBranch, onSelect, onBranchFrom, onHighlight, }: { node: TreeNode; selected: boolean; highlighted: boolean; canBranch: boolean; onSelect: () => void; onBranchFrom: () => void; onHighlight: () => void; }) => ( ); const normalize = (value: string) => value.trim().toLowerCase(); export type BranchPickerProps = Omit< ComponentProps<"button">, "value" | "defaultValue" | "onChange" > & { /** The branches to choose from. */ branches: Branch[]; /** Selected branch id (controlled). */ value?: string; /** Initial selected branch id (uncontrolled). */ defaultValue?: string; /** Notified when a branch is chosen. */ onValueChange?: (id: string) => void; /** Create a branch off `fromId`. Hides the per-branch affordance when omitted. */ onCreateBranch?: (name: string, fromId: string) => void; /** Trigger text when nothing is selected. */ placeholder?: string; }; export const BranchPicker = ({ branches, value, defaultValue, onValueChange, onCreateBranch, placeholder = "Select branch", className, ...props }: BranchPickerProps) => { const [internal, setInternal] = useState(defaultValue); const [open, setOpen] = useState(false); const [query, setQuery] = useState(""); const [highlight, setHighlight] = useState(0); const [createFrom, setCreateFrom] = useState(); const [newName, setNewName] = useState(""); const inputRef = useRef(null); const createRef = useRef(null); const selectedId = value ?? internal; const selected = branches.find((branch) => branch.id === selectedId); const searching = query.trim().length > 0; const nodes: TreeNode[] = searching ? branches .filter((branch) => normalize(branch.name).includes(normalize(query))) .map((branch) => ({ branch, depth: 0 })) : buildTree(branches); const byId = new Map( nodes.map((node, index) => [ node.branch.id, { depth: node.depth, row: index }, ]) ); const maxDepth = Math.max(0, ...nodes.map((node) => node.depth)); const gutterWidth = laneX(maxDepth) + DOT_R + 6; useEffect(() => { if (!open) { return; } const id = window.setTimeout(() => inputRef.current?.focus(), 0); return () => window.clearTimeout(id); }, [open]); useEffect(() => { if (!createFrom) { return; } const id = window.setTimeout(() => createRef.current?.focus(), 0); return () => window.clearTimeout(id); }, [createFrom]); const handleOpenChange = (next: boolean) => { setOpen(next); if (next) { setQuery(""); setHighlight(0); setCreateFrom(undefined); setNewName(""); } }; const choose = (id: string) => { if (value === undefined) { setInternal(id); } onValueChange?.(id); setOpen(false); }; const submitCreate = (event: FormEvent) => { event.preventDefault(); if (createFrom && newName.trim()) { onCreateBranch?.(newName.trim(), createFrom.id); setOpen(false); } }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); setHighlight((current) => Math.min(current + 1, nodes.length - 1)); } else if (event.key === "ArrowUp") { event.preventDefault(); setHighlight((current) => Math.max(current - 1, 0)); } else if (event.key === "Enter") { const node = nodes[highlight]; if (node) { event.preventDefault(); choose(node.branch.id); } } }; return ( ); }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/button.json","https://ui.neon.com/r/input.json","https://ui.neon.com/r/popover.json","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/tooltip.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/branch-picker/branch-picker.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]