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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T4296,"use client"; import { useRef, useState, useCallback, useEffect, createContext, useContext, forwardRef, type ReactNode, type HTMLAttributes, } 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 { useFluidHover } from "@/hooks/use-fluid-hover"; interface TabsSubtleContextValue { registerTab: (index: number, element: HTMLElement | null) => void; hoveredIndex: number | null; selectedIndex: number; idPrefix: string | undefined; activeLabel: boolean; } const TabsSubtleContext = createContext(null); function useTabsSubtle() { const ctx = useContext(TabsSubtleContext); if (!ctx) throw new Error("useTabsSubtle must be used within a TabsSubtle"); return ctx; } interface TabsSubtleProps extends Omit, "onSelect"> { children: ReactNode; selectedIndex: number; onSelect: (index: number) => void; idPrefix?: string; /** When true, only the selected tab shows its text label. Requires icons on tabs. */ activeLabel?: boolean; /** Pins the tabs to one step of the size ladder (default 36px, compact * 28px — see /docs/sizes). Omitted, they follow the surrounding * SizeProvider. */ size?: SizeVariant; } const TabsSubtle = forwardRef( ({ children, selectedIndex, onSelect, idPrefix, activeLabel = false, size, className, ...props }, ref) => { const containerRef = useRef(null); const isMouseInside = useRef(false); const shape = useShape(); const { activeIndex: hoveredIndex, setActiveIndex: setHoveredIndex, itemRects: tabRects, handlers, registerItem, measureItems: measureTabs, } = useFluidHover(containerRef, { axis: "x" }); // Track tab elements locally so we can observe their individual resizes const tabElementsRef = useRef(new Map()); const registerTab = useCallback( (index: number, element: HTMLElement | null) => { registerItem(index, element); if (element) { tabElementsRef.current.set(index, element); } else { tabElementsRef.current.delete(index); } }, [registerItem] ); useEffect(() => { measureTabs(); }, [measureTabs, children]); // Observe individual tab buttons for resize (label expand/collapse in activeLabel mode) useEffect(() => { const elements = tabElementsRef.current; if (elements.size === 0) return; const ro = new ResizeObserver(() => measureTabs()); elements.forEach((el) => ro.observe(el)); return () => ro.disconnect(); }, [measureTabs, children]); // Wrap handlers to track isMouseInside const handleMouseMove = useCallback( (e: React.MouseEvent) => { isMouseInside.current = true; handlers.onMouseMove(e); }, [handlers] ); const handleMouseLeave = useCallback(() => { isMouseInside.current = false; handlers.onMouseLeave(); }, [handlers]); const [focusedIndex, setFocusedIndex] = useState(null); const selectedRect = tabRects[selectedIndex]; const hoverRect = hoveredIndex !== null ? tabRects[hoveredIndex] : null; const focusRect = focusedIndex !== null ? tabRects[focusedIndex] : null; const isHoveringSelected = hoveredIndex === selectedIndex; const isHovering = hoveredIndex !== null && !isHoveringSelected; const root = ( {/* Root is merged into List via `asChild` so a single

is emitted. Radix owns role="tablist", roving tabindex, and Arrow/Home/End keyboard navigation. Radix tab values are strings, so the numeric selectedIndex is mapped through String()/Number(). `activationMode="manual"` keeps manual activation: arrows move focus, Enter/Space selects. */} onSelect(Number(value))} activationMode="manual" > { containerRef.current = node; if (typeof ref === "function") ref(node); else if (ref) (ref as React.MutableRefObject).current = node; }} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} onFocus={(e: React.FocusEvent) => { const indexAttr = (e.target as HTMLElement) .closest("[data-fluid-hover-index]") ?.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: React.FocusEvent) => { if (containerRef.current?.contains(e.relatedTarget as Node)) return; setFocusedIndex(null); if (isMouseInside.current) return; setHoveredIndex(null); }} className={cn( // -mx-1 px-1 / -my-1 py-1 give the 2px-outset focus ring room // to draw without being clipped by overflow-x-auto. The // max-width allows for the negative margins: fit-content // parents size against the margin box (8px narrower than the // border box), so a plain max-w-full would clamp the list 8px // too small and clip the first/last tab's ring. "relative flex items-center select-none overflow-x-auto max-w-[calc(100%_+_8px)] scrollbar-hide -mx-1 px-1 -my-1 py-1", className )} {...props} > {/* Selected pill */} {selectedRect && ( )} {/* Hover pill */} {hoverRect && !isHoveringSelected && selectedRect && ( )} {/* Focus ring */} {focusRect && ( )} {children} ); // A size prop pins every tab to one ladder step. return size ? {root} : root; } ); TabsSubtle.displayName = "TabsSubtle"; interface TabsSubtleItemProps extends HTMLAttributes { icon?: IconComponent; label: string; index: number; } const TabsSubtleItem = forwardRef( ({ icon: Icon, label, index, className, ...props }, ref) => { const internalRef = useRef(null); // The collapsing label animates to a MEASURED layout width, not "auto": // framer resolves an "auto" target from the element's *visual* // (transformed) size, so under a scaled ancestor (e.g. /demo's card) the // spring overshoots to scale-x the real width and snaps when "auto" // lands. offsetWidth and ResizeObserver are transform-immune — same // setup as the accordions' height animation. const [labelWidth, setLabelWidth] = useState(null); const labelRoRef = useRef(null); const measureLabel = useCallback((el: HTMLSpanElement | null) => { labelRoRef.current?.disconnect(); labelRoRef.current = null; if (!el) return; const update = () => setLabelWidth(el.offsetWidth); update(); labelRoRef.current = new ResizeObserver(update); labelRoRef.current.observe(el); }, []); const shape = useShape(); const sizeClasses = useSize(); const { registerTab, hoveredIndex, selectedIndex, idPrefix, activeLabel } = useTabsSubtle(); useEffect(() => { registerTab(index, internalRef.current); return () => registerTab(index, null); }, [index, registerTab]); const isSelected = selectedIndex === index; const isActive = hoveredIndex === index || isSelected; const collapseLabel = activeLabel && !!Icon; const showLabel = !collapseLabel || isSelected; const labelContent = ( // Both stacked spans carry the text-box trim so the invisible bold // sizer and the visible label keep identical boxes. {label} ); return ( // Radix Trigger renders a native