Sidebars · shadcn radix-luma Sidebar prototype

Every version is a variant the official Sidebar component ships; rows, group labels, sub-lists and the footer use the official metrics at a 14px root (row 31.5 / sub row 28 / radius 10.5 / icon 16). D (shipped) drops the page to the deep tone and floats all three columns as cards. B makes the rails the same borderless white raised card as the input box (--bg-input + shadow-raised, 7px gutter, 14px corners); A keeps the current deeper cream + hairline shell and only swaps the row metrics; C floats the centre column and sinks the rails. Switch theme and ring to compare.

--bg-input raised surface (input box / bubbles / pills / rails in B and D) --bg-primary page --bg-secondary deep tone (rails in A and C, page in D)

Element	Official Luma metrics (14px root)	Before	Replaced
Nav row	`SidebarMenuButton` h-9 = 31.5px, px-3 = 10.5, gap-2 = 7, rounded-xl = 10.5, icon 16; active = `bg-sidebar-accent` + font-medium	30px, 6px 8px, gap 12, 10px, icon 20, active only tints	the constants in `nav-classes.ts` (sidebar rows leave the global `.ui-list-item`)
Group label	`SidebarGroupLabel` h-8 = 28, text-xs 12px, font-medium, foreground 70%	14px / 400 / secondary 80%, pt 15 pb 6	`section-header.tsx`
Sessions under a project	`SidebarMenuSub` + `SubButton`: 1px guide on the left, h-7 = 24.5 (drawn at 28 to fit the status marker), 13px	`.projectKids` draws its own guide, 30px, 13px	`sidebar.module.css` + `sessions-list.tsx`
User footer	`SidebarFooter` + `SidebarMenuButton size="lg"` h-14 = 49	64px custom trigger with a top rule	`user-menu-footer.*`
Shell	`variant="floating"`: p-2 = 7 gutter, rounded-2xl = 14, shadow-sm; the official ring-1 is dropped, as on the input box	bg-secondary + 1px hairline	the roots of `sidebar.tsx` / `right-sidebar.tsx` + the .sidebar rules in `base.css`
Collapsed	`collapsible="icon"`: 3rem = 42px rail plus gutters = 58px, rows become size-8 squares, labels hide	49px rail, `.sidebar.collapsed` cascade	`--rail-collapsed-w`; the cascade stays and the shell adds `data-collapsible`
Resize	the official `SidebarRail` only toggles, it does not resize	`use-resizable-rail.ts` 16px invisible handle	kept, mounted on the official shell