4e: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"] 4f: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"] 50:T2d31,"use client"; import { GitBranchIcon, SquareLock01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useState } from "react"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /** Compute lifecycle, mirrored from ComputeStatus. Drives the node color. */ export type ComputeState = "active" | "idle" | "scaling" | "suspended"; export interface Branch { id: string; name: string; /** The project's default branch: its node wears a primary ring. */ default?: boolean; /** A protected branch: shows a lock. */ protected?: boolean; /** The parent branch's id; the edge is drawn from it. */ parent?: string; /** Compute state, painted onto the node dot. */ state?: ComputeState; /** ISO timestamp of the branch's last update, shown as relative time. */ updatedAt?: string; } interface TreeNode { branch: Branch; depth: number; row: number; } /* ───────────────────────────────────────────────────────── * GEOMETRY * * The graph is a real node-link drawing, not indent guides. * Rows stack at a fixed height; a branch sits in the lane of * its depth. Each child's edge leaves its parent's lane, * runs down, and curves (a fixed-radius quarter turn) into * the child's node. Node color is the compute state; the * default branch and the selected branch wear a ring. * ───────────────────────────────────────────────────────── */ const ROW_H = 46; const LANE_W = 22; const PAD_X = 18; const DOT_R = 3.5; const CORNER = 12; const laneX = (depth: number) => PAD_X + depth * LANE_W; const rowY = (row: number) => row * ROW_H + ROW_H / 2; /** Staggered entrance: edges draw, nodes pop, rows fade, top to bottom. */ const STAGGER = 0.06; const DRAW = 0.45; const POP = 0.32; const BRANCH_TREE_STYLES = ` @keyframes neon-bt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes neon-bt-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } @keyframes neon-bt-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [data-slot="branch-tree"] * { animation: none !important; } } `; /** Depth-first flatten, assigning each branch a row and a depth lane. */ const buildNodes = (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, row: nodes.length }); for (const kid of childrenOf(branch.id)) { walk(kid, depth + 1); } }; for (const root of childrenOf()) { walk(root, 0); } return nodes; }; const DOT_STATE: Record = { active: "fill-[var(--status-active)] neon-status-breathe", idle: "fill-[var(--status-active)]", scaling: "fill-[var(--status-scaling)] neon-status-breathe", suspended: "fill-[var(--status-sleeping)]", }; /** Ring stroke matched to the dot color, so the selection halo reads as the node. */ const RING_STATE: Record = { active: "stroke-[var(--status-active)]", idle: "stroke-[var(--status-active)]", scaling: "stroke-[var(--status-scaling)]", suspended: "stroke-[var(--status-sleeping)]", }; const MINUTE = 60_000; const HOUR = 60 * MINUTE; const DAY = 24 * HOUR; const relativeTime = (iso?: string): string | null => { if (!iso) { return null; } const diff = Date.now() - new Date(iso).getTime(); if (diff < MINUTE) { return "just now"; } if (diff < HOUR) { return `${Math.round(diff / MINUTE)}m ago`; } if (diff < DAY) { return `${Math.round(diff / HOUR)}h ago`; } return `${Math.round(diff / DAY)}d ago`; }; const edgePath = (parent: TreeNode, child: TreeNode) => { const px = laneX(parent.depth); const py = rowY(parent.row); const cx = laneX(child.depth); const cy = rowY(child.row); return `M ${px} ${py} V ${cy - CORNER} Q ${px} ${cy} ${px + CORNER} ${cy} H ${cx}`; }; const Graph = ({ nodes, byId, selectedId, width, height, }: { nodes: TreeNode[]; byId: Map; selectedId?: string; width: number; height: number; }) => ( ); const Fence = () => ( ); const BranchRow = ({ node, selected, onSelect, }: { node: TreeNode; selected: boolean; onSelect: () => void; }) => { const time = relativeTime(node.branch.updatedAt); return ( ); }; export type BranchTreeProps = Omit< ComponentProps<"div">, "onSelect" | "value" | "defaultValue" > & { /** The branches to draw. Each references its parent by id. */ branches: Branch[]; /** Selected branch id (controlled). */ value?: string; /** Initial selected branch id (uncontrolled). */ defaultValue?: string; /** Notified when a branch node is chosen. */ onValueChange?: (id: string) => void; }; export const BranchTree = ({ branches, value, defaultValue, onValueChange, className, ...props }: BranchTreeProps) => { const [internal, setInternal] = useState(defaultValue); const selectedId = value ?? internal; const nodes = buildNodes(branches); const byId = new Map(nodes.map((node) => [node.branch.id, node])); const maxDepth = Math.max(0, ...nodes.map((node) => node.depth)); const selectedNode = selectedId ? byId.get(selectedId) : undefined; const gutterWidth = laneX(maxDepth) + DOT_R + 6; const treeHeight = nodes.length * ROW_H; const choose = (id: string) => { if (value === undefined) { setInternal(id); } onValueChange?.(id); }; return (

Branches {branches.length}

{selectedNode ? (

); }; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/branch-tree/branch-tree.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]