52: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"] 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:T29f3,import * as React from 'react' import { cn } from '@/lib/utils' import { useReducedMotion } from '@/hooks/use-reduced-motion' import { useSlidingIndicator } from '@/hooks/use-sliding-indicator' import { useTravelDirection } from '@/hooks/use-travel-direction' import { useMergedRefs } from '@/lib/merge-refs' import { useRegisterNavReveal } from '@/hooks/use-nav-reset' import { nearestScroller } from '@/hooks/use-stand-in-target' import { ProgressBar } from '@/components/ui/progress-bar' import type { TabBarItem } from '@/components/ui/tab-bar' export interface SidebarTabsProps { items: TabBarItem[] activeId: string | null onSelect: (id: string) => void 'aria-label': string className?: string /** Inline styles for the root element. */ style?: React.CSSProperties } /** * Vertical counterpart to the DS TabBar -- the wide-desktop (xl+) presentation * of the same tab set, rendered into a Layout's left sidebar. The horizontal * TabBar covers the narrower phases; this is shown only once the sidebar * appears (the page hides one or the other via CSS, never both at once). Takes * the same TabBarItem[] so it is a drop-in: the active item gets the nav-style * highlight, its optional icon sits before the label, and its progress shows as * a thin bar pinned to the bottom edge -- the same indicator as the mobile * underline, kept off the label so the accent never hurts text contrast (see * ProgressFill). */ export const SidebarTabs = React.forwardRef(function SidebarTabs( { items, activeId, onSelect, 'aria-label': ariaLabel, className, style }, ref, ) { const listRef = React.useRef(null) const mergedRef = useMergedRefs(listRef, ref) const reduced = useReducedMotion() // The highlight travels down the rail instead of appearing on the new item, // the vertical read of the TabBar underline sliding along the strip. const indicator = useSlidingIndicator(listRef, activeId, { axis: 'y', changeKey: items.map((i) => i.id).join('\n'), }) // Which edge leads depends on the direction of travel, so `.wj-nav-highlight` // names it -- the rail's read of the SegmentedControl pill's stretch. const direction = useTravelDirection(items.findIndex((i) => i.id === activeId)) const activeItem = activeId ? items.find((i) => i.id === activeId) : undefined // The nav's double-tap asks every strip to bring its active tab back into // view. The rail scrolls inside its sidebar pane, so the pane is what the // item has to be inside of; declines when it already is, or when nothing // around the rail scrolls, so the gesture can move on to the page's reset. useRegisterNavReveal(() => { const list = listRef.current if (!list || !activeId) return false const activeBtn = list.querySelector(`[data-tab-id="${activeId}"]`) if (!activeBtn) return false const pane = nearestScroller(list) if (!pane || pane.clientHeight === 0) return false const p = pane.getBoundingClientRect() const b = activeBtn.getBoundingClientRect() if (b.top >= p.top && b.bottom <= p.bottom) return false activeBtn.scrollIntoView({ block: 'center', behavior: reduced ? 'auto' : 'smooth' }) return true }) // Vertical roving-tabindex keyboard model (the horizontal TabBar's Left/Right, // turned 90 degrees): Up/Down move between tabs, Home/End jump to the ends. const handleKeyDown = (e: React.KeyboardEvent) => { if (!items.length) return const current = activeId ? items.findIndex((t) => t.id === activeId) : -1 let next: number | null = null if (e.key === 'ArrowDown') next = current < items.length - 1 ? current + 1 : 0 else if (e.key === 'ArrowUp') next = current > 0 ? current - 1 : items.length - 1 else if (e.key === 'Home') next = 0 else if (e.key === 'End') next = items.length - 1 if (next !== null) { e.preventDefault() const item = items[next] onSelect(item.id) listRef.current?.querySelector(`[data-tab-id="${item.id}"]`)?.focus() } } return (

{indicator && ( {/* The progress bar rides INSIDE the travelling highlight rather than inside the item it belongs to. Rendered per item, it appeared on the destination the instant the selection changed, arriving ahead of the highlight still crossing the rail. */} {activeItem && ( )} )} {items.map((item) => { const isActive = item.id === activeId return ( ) })}

) }) SidebarTabs.displayName = 'SidebarTabs' /** * The active item's indicator -- a thin bar pinned to the bottom of the item, * mirroring the mobile/tablet TabBar underline, over the item's highlight * background. Kept at the bottom (rather than filling the item) so the accent * never sits behind the label, which fails contrast in light mode. The button's * rounded corners clip the bar's bottom ends -- fine for the continuous bars, * but the segment strip is inset to the label's padding instead: the corner * curve would swallow the first (whole) dot, and discrete dots read as broken * when clipped. * - underline 'shimmer' (special / occasional tabs): a dimmed accent line with a * slow full-accent sweep (static under reduced motion); * - 'indeterminate' (free / count streaks): the DS segment-accumulation * indicator -- solid dots on a faint dotted track, every 10 collapsing into a * pill -- driven by the item's `count` (plain dotted line without one); * - a 0..1 number: a full-accent fill spanning that fraction over a faint-accent * (low opacity) track, matching the mobile/tablet TabBar underline; * - no progress concept (plain sections): nothing -- the highlight alone marks * the active item. */ function ProgressFill({ progress, count, underline, }: { progress?: number | 'indeterminate' count?: number underline?: 'wave' | 'shimmer' }) { if (underline === 'shimmer') { return ( ) } if (progress == null) return null if (progress === 'indeterminate') { return ( // inset-x-2 equals the button's rounded-lg corner radius (8px), so the // strip spans the full straight run of the bottom edge -- the first dot // starts exactly where the corner curve ends, without hugging the label // padding (12px read as too much clearance). ) } const pct = Math.round(Math.max(0, Math.min(1, progress)) * 100) return ( {/* Faint-accent track for the unfilled part + full-accent fill on top -- the same treatment as the DS ProgressBar / mobile TabBar underline (the button's rounded corners clip the bar's ends). */} ) } 51:["$","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":[null,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/progress-bar.json","https://whiskeyjack.net/r/tab-bar.json","https://whiskeyjack.net/r/use-nav-reset.json","https://whiskeyjack.net/r/use-reduced-motion.json","https://whiskeyjack.net/r/use-sliding-indicator.json","https://whiskeyjack.net/r/use-stand-in-target.json","https://whiskeyjack.net/r/use-travel-direction.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/sidebar-tabs.tsx","content":"$54","type":"registry:ui","target":"components/ui/sidebar-tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]