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:T47d0,"use client"; import { useRef, useState, useCallback, useEffect, useLayoutEffect, createContext, useContext, forwardRef, Children, cloneElement, isValidElement, type ComponentPropsWithoutRef, } from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { motion, AnimatePresence } from "framer-motion"; import type { IconComponent } from "@/lib/icon-context"; import { cn } from "@/lib/utils"; import { spring } from "@/lib/springs"; import { fontWeights } from "@/lib/font-weight"; import { useShape } from "@/lib/shape-context"; import { SizeProvider, useSize, type SizeVariant } from "@/lib/size-context"; import { useSurface } from "@/lib/surface-context"; import { surfaceClasses } from "@/lib/surface-classes"; import { useFluidHover } from "@/hooks/use-fluid-hover"; /* ─────────────────────── Contexts ─────────────────────── */ interface TabsValueOrderContextValue { valueOrder: string[]; setValueOrder: (order: string[]) => void; selectedValue: string | undefined; } const TabsValueOrderContext = createContext(null); interface TabsListContextValue { registerTab: (index: number, value: string, el: HTMLElement | null) => void; hoveredIndex: number | null; selectedValue: string | undefined; /** Optimistically set selectedIdx so the indicator moves immediately on click. */ setOptimisticIdx: (index: number) => void; } const TabsListContext = createContext(null); function useTabsList() { const ctx = useContext(TabsListContext); if (!ctx) throw new Error("TabItem must be used within a TabsList"); return ctx; } /* ─────────────────────── Tabs (Root) ─────────────────────── */ interface TabsProps extends Omit< ComponentPropsWithoutRef, "onValueChange" | "onSelect" > { /** Controlled value (takes precedence over selectedIndex). */ value?: string; /** Called when the active tab changes. */ onValueChange?: (value: string) => void; /** Index-based controlled alternative. */ selectedIndex?: number; /** Called with the new index when the active tab changes. */ onSelect?: (index: number) => void; /** Pins the segmented control to one step of the size ladder (default 36px * outer, compact 28px — see /docs/sizes). Omitted, it follows the * surrounding SizeProvider. */ size?: SizeVariant; } const Tabs = forwardRef( ( { value, onValueChange, selectedIndex, onSelect, defaultValue, size, children, ...props }, ref ) => { const [valueOrder, setValueOrder] = useState([]); const [uncontrolledValue, setUncontrolledValue] = useState( defaultValue ); const updateValueOrder = useCallback((order: string[]) => { setValueOrder((current) => { if ( current.length === order.length && current.every((value, index) => value === order[index]) ) { return current; } return order; }); }, []); // Resolve value: explicit value > selectedIndex lookup > uncontrolled state. // Uncontrolled with no defaultValue falls back to the first tab so the // FF layer's selectedValue matches what the primitive shows. const resolvedValue = value ?? (selectedIndex != null ? valueOrder[selectedIndex] : uncontrolledValue ?? valueOrder[0]); const handleValueChange = useCallback( (newValue: string) => { if (value === undefined && selectedIndex == null) { setUncontrolledValue(newValue); } onValueChange?.(newValue); if (onSelect) { const idx = valueOrder.indexOf(newValue); if (idx !== -1) onSelect(idx); } }, [onValueChange, onSelect, valueOrder, value, selectedIndex] ); const root = ( {/* Always controlled: feeding the primitive an undefined-then-defined value flips it from uncontrolled to controlled, which Radix warns about in dev. valueOrder is empty on the first commit, so fall back to an empty-string sentinel — TabsList's layout effect populates valueOrder pre-paint, so the corrected value lands before anything is visible. */} {children} ); // A size prop pins the whole compound (list + items) to one ladder step. return size ? {root} : root; } ); Tabs.displayName = "Tabs"; /* ─────────────────────── TabsList ─────────────────────── */ type TabsListProps = ComponentPropsWithoutRef; const TabsList = forwardRef( ({ children, className, ...props }, ref) => { const containerRef = useRef(null); const isMouseInside = useRef(false); const shape = useShape(); const sizeClasses = useSize(); const substrate = useSurface(); // Active pill lifts 3 levels above substrate (1 above the muted track + 2 for pop). // On the page (substrate 1) this lands on surface 4 — matches the original design. // Inside a dialog (substrate 5) it lifts to surface 8 instead of staying at 4. const indicatorLevel = Math.min(substrate + 3, 8); const valueOrderCtx = useContext(TabsValueOrderContext); const [optimisticIdx, setOptimisticIdx] = useState(null); // Derive value order from children synchronously const values = Children.toArray(children) .filter(isValidElement) .map((child) => (child.props as { value?: string }).value) .filter((v): v is string => typeof v === "string"); const valueOrderKey = values.join(","); const setValueOrder = valueOrderCtx?.setValueOrder; // Report value order up to Tabs root useLayoutEffect(() => { setValueOrder?.(values); }, [setValueOrder, valueOrderKey]); // Fluid hover const { activeIndex: hoveredIndex, setActiveIndex: setHoveredIndex, itemRects, handlers, registerItem, measureItems, } = useFluidHover(containerRef, { axis: "x" }); // Register items: bridge from (index, value, el) → registerItem(index, el) const registerTab = useCallback( (index: number, _value: string, el: HTMLElement | null) => { registerItem(index, el); }, [registerItem] ); // Measure on children change (resizes are covered by useFluidHover's // own container ResizeObserver) useEffect(() => { measureItems(); }, [measureItems, children]); // Track mouse inside const handleMouseMove = useCallback( (e: React.MouseEvent) => { isMouseInside.current = true; handlers.onMouseMove(e); }, [handlers] ); const handleMouseLeave = useCallback(() => { isMouseInside.current = false; handlers.onMouseLeave(); }, [handlers]); // Focus ring const [focusedIndex, setFocusedIndex] = useState(null); const selectedValue = valueOrderCtx?.selectedValue; const selectedIdx = selectedValue !== undefined ? values.indexOf(selectedValue) : -1; useEffect(() => { setOptimisticIdx(selectedIdx >= 0 ? selectedIdx : null); }, [selectedIdx]); const activeSelectedIdx = optimisticIdx; const selectedRect = activeSelectedIdx !== null ? itemRects[activeSelectedIdx] : null; const hoverRect = hoveredIndex !== null ? itemRects[hoveredIndex] : null; const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null; const isHoveringSelected = hoveredIndex === activeSelectedIdx; const isHovering = hoveredIndex !== null && !isHoveringSelected; // Auto-assign _index to children. // Skip plain DOM elements — injecting _index into e.g. a

// triggers React's unknown-prop warning. const indexedChildren = Children.map(children, (child, i) => { if (isValidElement(child) && typeof child.type !== "string") { return cloneElement(child, { _index: i } as Record); } return child; }); return ( { ( containerRef as React.MutableRefObject ).current = node; if (typeof ref === "function") ref(node); else if (ref) ( ref as React.MutableRefObject ).current = node; }} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} onFocus={(e) => { const trigger = (e.target as HTMLElement).closest('[role="tab"]'); if (!trigger) return; const indexAttr = trigger.getAttribute("data-fluid-hover-index"); if (indexAttr != null) { const idx = Number(indexAttr); setHoveredIndex(idx); setFocusedIndex( (e.target as HTMLElement).matches(":focus-visible") ? idx : null ); } }} onBlur={(e) => { if (containerRef.current?.contains(e.relatedTarget as Node)) return; setFocusedIndex(null); if (isMouseInside.current) return; setHoveredIndex(null); }} className={cn( // segmentPad + segmentItem add up to the ladder's control height // (36px default, 28px compact) so the segmented control's outer // box lines up with buttons, selects, and inputs beside it. "relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className )} {...props} > {/* Active segment indicator */} {selectedRect && ( )} {/* Hover indicator */} {hoverRect && !isHoveringSelected && selectedRect && ( )} {/* Focus ring */} {focusRect && ( )} {indexedChildren} ); } ); TabsList.displayName = "TabsList"; /* ─────────────────────── TabItem ─────────────────────── */ interface TabItemProps extends ComponentPropsWithoutRef { /** Unique value for this tab. */ value: string; /** Optional leading icon. */ icon?: IconComponent; /** Text label. */ label: string; /** @internal Auto-assigned by TabsList. */ _index?: number; } const TabItem = forwardRef( ({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => { const internalRef = useRef(null); const sizeClasses = useSize(); const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList(); useEffect(() => { registerTab(_index, value, internalRef.current); return () => registerTab(_index, value, null); }, [_index, value, registerTab]); const isSelected = selectedValue === value; const isActive = hoveredIndex === _index || isSelected; return ( { setOptimisticIdx(_index); onClick?.(e); }} ref={(node) => { ( internalRef as React.MutableRefObject ).current = node; if (typeof ref === "function") ref(node); else if (ref) ( ref as React.MutableRefObject ).current = node; }} value={value} data-fluid-hover-index={_index} className={cn( // Fixed height (not py) so the text-box trim below doesn't shrink // the tab — browsers without text-box support render identically. "relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className )} {...props} > {Icon && ( )} {/* Both stacked spans carry the text-box trim so the invisible bold sizer and the visible label keep identical boxes. */} {label} ); } ); TabItem.displayName = "TabItem"; /* ─────────────────────── TabPanel ─────────────────────── */ interface TabPanelProps extends ComponentPropsWithoutRef { /** Must match a TabItem value. */ value: string; } const TabPanel = forwardRef( ({ className, ...props }, ref) => { return ( ); } ); TabPanel.displayName = "TabPanel"; /* ─────────────────────── Exports ─────────────────────── */ export { Tabs, TabsList, TabItem, TabPanel }; export type { TabsProps, TabsListProps, TabItemProps, TabPanelProps }; 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","@radix-ui/react-tabs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tabs","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":"@radix-ui/react-tabs"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/springs.json","https://www.fluidfunctionalism.com/r/font-weight.json","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/icon-context.json","https://www.fluidfunctionalism.com/r/use-fluid-hover.json","https://www.fluidfunctionalism.com/r/size-context.json","https://www.fluidfunctionalism.com/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/radix/tabs.tsx","content":"$52","type":"registry:ui","target":"components/ui/tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]