@lessly/ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -652,6 +652,8 @@ declare function ConfirmDialog({ open, onOpenChange, trigger, title, description
 
 interface UserMenuUser {
     name: string;
+    /** Second line of the row. The shipped rail shows the org name here. */
+    subtitle?: string;
     email?: string;
     avatarUrl?: string;
 }
@@ -822,10 +824,22 @@ declare function SidebarNav({ items, collapsed, basePath, LinkComponent, isItemA
 
 interface AppSidebarProps {
     items: NavItem[];
+    /** Expanded-slot mark/wordmark, rendered when `header` is absent. Also the collapsed-rail
+     *  fallback when `logoCollapsed` isn't given — see `logoCollapsed`. */
     logo?: React$1.ReactNode;
+    /** Collapsed-rail identity — a small mark, shown overlaid by the pin on hover/focus when
+     *  `collapsible`. A collapsible rail should supply this (or `logo`): `header` is expanded-only
+     *  and is never read while collapsed, so without a mark the collapsed rail shows just the pin. */
     logoCollapsed?: React$1.ReactNode;
+    /** Identity slot above the rail — e.g. a <SidebarProductHeader/>. Falls back to `logo`.
+     *  Expanded-only: rendering it in the 52px collapsed rail would overflow, so the collapsed
+     *  branch never reads it — supply `logoCollapsed` (or `logo`) for that state instead. */
     header?: React$1.ReactNode;
+    /** Account slot below the rail — e.g. a <UserMenu/>. Its divider renders only with it. */
     footer?: React$1.ReactNode;
+    /** Render the built-in collapse pin. Off by default: the shipped rail has none.
+     *  `collapsed` is still honoured without it, for consumers driving collapse themselves. */
+    collapsible?: boolean;
     collapsed?: boolean;
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
@@ -834,7 +848,38 @@ interface AppSidebarProps {
     isItemActive?: (item: NavItem, pathname: string) => boolean;
     className?: string;
 }
-declare function AppSidebar({ items, logo, logoCollapsed, header, footer, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React$1.JSX.Element;
+declare function AppSidebar({ items, logo, logoCollapsed, header, footer, collapsible, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React$1.JSX.Element;
+
+interface SidebarProductHeaderOwnProps {
+    /** Product name. Rendered at 13/600, truncated. */
+    name: string;
+    /** Leading mark, rendered in a fixed 28px box (the shipped tile). */
+    icon?: React$1.ReactNode;
+    /** Right-aligned adornment. Defaults to the 14px ChevronsUpDown of the shipped header;
+     *  pass `null` for none. */
+    trailing?: React$1.ReactNode;
+    className?: string;
+}
+/** Render the single child element instead of a button — e.g. a MenuPopup trigger.
+ *  The header composes its content from props, so the child's own children are replaced. */
+type SidebarProductHeaderProps = SidebarProductHeaderOwnProps & Omit<React$1.ComponentPropsWithoutRef<'button'>, 'children' | 'name'> & ({
+    asChild: true;
+    children: React$1.ReactElement;
+} | {
+    asChild?: false;
+    children?: never;
+});
+/** Identity row for the sidebar header slot: product tile + name, opening the product menu.
+ *
+ *  Deliberately inert on hover — no background, no transition — unlike the rail rows below
+ *  it. `rounded-xl` is not dead weight despite nothing tinting the box: this declares no
+ *  focus-visible ring, so the UA default ring is the only focus affordance, and that ring
+ *  follows border-radius.
+ *
+ *  Pair with `AppSidebar`'s `header` slot: the slot's 12px sides plus this trigger's own 6px
+ *  land the tile at 18px, while the trigger's box stays flush with the rail rows at 12px —
+ *  which anchors a `MenuPopup` at left:12 with the default sideOffset, no alignOffset. */
+declare const SidebarProductHeader: React$1.ForwardRefExoticComponent<SidebarProductHeaderProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface AppShellProps {
     /** The sidebar, typically an <AppSidebar/>. Rendered in the desktop rail and,
@@ -941,24 +986,48 @@ interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     glyph?: React$1.ReactNode;
     /** Override the default status label (e.g. "Token expired" for `error`). */
     statusLabel?: string;
-    /** How many products hold a segment of this connection. */
+    /**
+     * How many products hold a segment of this connection. `undefined` renders the
+     * "Not granted to any product yet" default — pass it ONLY on a surface where
+     * that claim is true and knowable (the org roster); on a product surface pass
+     * neither `grantedCount` nor a footer `action` to render no footer at all.
+     */
     grantedCount?: number;
-    /** Footer action — typically a <Button> ("Manage", "Reconnect", "Connect"). */
+    /**
+     * Footer action — typically a <Button> ("Manage", "Reconnect", "Connect").
+     * Flat mode: a disconnected card shows it in the header. Collapsible mode: the
+     * header is a disclosure trigger (nesting a button would be invalid), so the
+     * action always renders in the expanded footer instead.
+     */
     action?: React$1.ReactNode;
     /**
      * Blast-radius disclosure. Some providers (GitHub, ClickUp) grant all-or-nothing
-     * access to the whole external org — there is no per-repo/per-space permission, so
-     * a product's segment is enforced by Lessly's gateway, not the provider. When set,
-     * a warning notice is shown, e.g. "Full org access — all repositories."
+     * access to the whole external org — there is no per-repo/per-space permission,
+     * and the vended credential genuinely reaches the whole external org. Copy passed
+     * here must state that blast radius honestly (e.g. "Full org access — any product
+     * granted this connection can reach every repository"); do NOT claim the segment
+     * is enforced by Lessly — for these providers it is not.
      */
     access?: React$1.ReactNode;
     /**
-     * Drawer content rendered below the card body — the org surface's accordion
-     * drawer in the integration prototype (the per-product grants roster, inline
-     * requests, "+ Grant to a product"). The caller owns expand/collapse: pass
-     * children only while open. Omitted = the flat card, unchanged.
+     * Drawer content rendered below the card body — the per-product grants roster,
+     * inline requests, "+ Grant to a product". Flat mode: the caller owns visibility,
+     * pass children only while open (unchanged behavior). Collapsible mode: pass
+     * children unconditionally — the card shows them while expanded.
      */
     children?: React$1.ReactNode;
+    /**
+     * Disclosure mode: the header row toggles the card open/closed; the footer and
+     * drawer render only while open. The `access` blast-radius notice stays visible
+     * even while collapsed — it is a safety disclosure, not a detail. Collapsed by
+     * default.
+     */
+    collapsible?: boolean;
+    /** Uncontrolled initial state (collapsible mode). Default: false (collapsed). */
+    defaultOpen?: boolean;
+    /** Controlled open state (collapsible mode); pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const ConnectionCard: React$1.ForwardRefExoticComponent<ConnectionCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -986,4 +1055,4 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
 }
 declare const RequestRow: React$1.ForwardRefExoticComponent<RequestRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, segmentChipVariants, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, segmentChipVariants, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };

package/dist/index.js

@@ -11,7 +11,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -2618,8 +2618,9 @@ function initialsOf(name) {
   if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
   return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
-function UserMenu({ user, items, collapsed = false, align = "end" }) {
-  const avatar = /* @__PURE__ */ jsxs25(Avatar, { className: collapsed ? "size-9" : "size-8", children: [
+function UserMenu({ user, items, collapsed = false, align = "start" }) {
+  const secondLine = user.subtitle ?? user.email;
+  const avatar = /* @__PURE__ */ jsxs25(Avatar, { className: collapsed ? "size-9" : "size-7", children: [
     user.avatarUrl && /* @__PURE__ */ jsx52(AvatarImage, { src: user.avatarUrl, alt: user.name }),
     /* @__PURE__ */ jsx52(AvatarFallback, { className: "text-xs", children: initialsOf(user.name) })
   ] });
@@ -2635,14 +2636,14 @@ function UserMenu({ user, items, collapsed = false, align = "end" }) {
     "button",
     {
       type: "button",
-      className: "flex w-full items-center gap-2.5 rounded-xl px-2.5 py-1.5 text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+      className: "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-[5px] text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: [
         avatar,
-        /* @__PURE__ */ jsxs25("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx52("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
-          user.email && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs text-text-tertiary", children: user.email })
+        /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx52("span", { className: "truncate text-sm leading-[normal] font-medium text-text-primary", children: user.name }),
+          secondLine && /* @__PURE__ */ jsx52("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: secondLine })
         ] }),
-        /* @__PURE__ */ jsx52(ChevronsUpDown, { className: "size-4 shrink-0 text-icon-secondary", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx52(ChevronsUpDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
       ]
     }
   );
@@ -2661,7 +2662,7 @@ function UserMenu({ user, items, collapsed = false, align = "end" }) {
         children: [
           /* @__PURE__ */ jsxs25(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
             /* @__PURE__ */ jsx52("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
-            user.email && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: user.email })
+            secondLine && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: secondLine })
           ] }),
           /* @__PURE__ */ jsx52(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
           items.map((item, i) => {
@@ -2938,8 +2939,8 @@ function SidebarNav({
     "nav",
     {
       className: cn(
-        "flex flex-col gap-0.5",
-        collapsed ? "items-center px-1" : "px-3",
+        "flex flex-col gap-2",
+        collapsed && "items-center",
         className
       ),
       children: items.map((item) => {
@@ -2964,13 +2965,27 @@ function SidebarNav({
 
 // src/components/app-sidebar.tsx
 import { PanelLeft } from "lucide-react";
-import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+function Divider({ collapsed, testId, className }) {
+  return /* @__PURE__ */ jsx59(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn(
+        "h-px shrink-0 bg-border-subtle",
+        collapsed ? "ml-[6px] w-[40px]" : "ml-[14px] w-[220px]",
+        className
+      )
+    }
+  );
+}
 function AppSidebar({
   items,
   logo,
   logoCollapsed,
   header,
   footer,
+  collapsible = false,
   collapsed: controlled,
   defaultCollapsed,
   onCollapsedChange,
@@ -2984,18 +2999,49 @@ function AppSidebar({
     defaultCollapsed,
     onCollapsedChange
   });
+  const pin = collapsible ? /* @__PURE__ */ jsx59(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      "aria-expanded": !collapsed,
+      className: "flex size-6 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+      children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs29(
     "aside",
     {
       "data-collapsed": collapsed,
       className: cn(
-        "flex h-full flex-col overflow-hidden rounded-2xl border border-border-subtle bg-bg-surface transition-[width] duration-200 ease-in-out",
-        collapsed ? "w-[52px]" : "w-[220px]",
+        "flex h-full shrink-0 flex-col overflow-hidden transition-[width] duration-200 ease-in-out",
+        collapsed ? "w-[52px]" : "w-[248px]",
         className
       ),
       children: [
-        collapsed ? /* @__PURE__ */ jsx59("div", { className: "flex justify-center border-b border-border-subtle p-2", children: header ?? /* @__PURE__ */ jsxs29("div", { className: "group relative flex size-8 items-center justify-center", children: [
-          /* @__PURE__ */ jsx59("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
+        /* @__PURE__ */ jsx59("div", { className: cn("flex items-center gap-2", collapsed ? "justify-center px-1 pt-2" : "px-3 pt-[13px]"), children: collapsed ? collapsible ? logoCollapsed ?? logo ? (
+          /* The collapsed rail (52px) can't fit the logo mark beside the pin side by side —
+             so the pin overlays the mark instead, revealed on hover/focus, same as pre-flat-rail. */
+          /* @__PURE__ */ jsxs29("div", { className: "group relative flex size-8 items-center justify-center", children: [
+            /* @__PURE__ */ jsx59("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
+            /* @__PURE__ */ jsx59(
+              "button",
+              {
+                type: "button",
+                onClick: toggle,
+                "aria-label": "Expand sidebar",
+                "aria-expanded": false,
+                className: "absolute inset-0 flex items-center justify-center rounded-md text-text-secondary opacity-0 transition-opacity hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-border-focus group-hover:opacity-100 group-focus-within:opacity-100",
+                children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ) : (
+          /* No mark to hide behind (no `logoCollapsed`/`logo` given — `header` doesn't
+             count, it's expanded-only). Hover-revealing the pin over nothing would leave
+             an invisible 32px box as the only way back to expanded, so render it plain
+             and fully visible instead. */
           /* @__PURE__ */ jsx59(
             "button",
             {
@@ -3003,80 +3049,107 @@ function AppSidebar({
               onClick: toggle,
               "aria-label": "Expand sidebar",
               "aria-expanded": false,
-              className: "absolute inset-0 flex items-center justify-center rounded-md text-text-secondary opacity-0 transition-opacity hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-border-focus group-hover:opacity-100 group-focus-within:opacity-100",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
               children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
             }
           )
-        ] }) }) : /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-border-subtle p-3", children: [
+        ) : logoCollapsed ?? logo : /* @__PURE__ */ jsxs29(Fragment3, { children: [
           header ?? logo,
-          /* @__PURE__ */ jsx59(
-            "button",
-            {
-              type: "button",
-              onClick: toggle,
-              "aria-label": "Collapse sidebar",
-              "aria-expanded": true,
-              className: "flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-              children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx59("div", { className: "flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2", children: /* @__PURE__ */ jsx59(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive }) }),
-        footer && /* @__PURE__ */ jsx59("div", { className: cn("border-t border-border-subtle", collapsed ? "px-1 py-2" : "px-3 py-3"), children: footer })
+          pin
+        ] }) }),
+        /* @__PURE__ */ jsx59(Divider, { collapsed, testId: "sidebar-divider-header", className: "mt-3" }),
+        /* @__PURE__ */ jsx59(
+          "div",
+          {
+            "data-testid": "sidebar-scroll",
+            className: cn(
+              "min-h-0 flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2",
+              collapsed ? "px-1" : "px-3"
+            ),
+            children: /* @__PURE__ */ jsx59(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive })
+          }
+        ),
+        footer && /* @__PURE__ */ jsxs29(Fragment3, { children: [
+          /* @__PURE__ */ jsx59(Divider, { collapsed, testId: "sidebar-divider-account" }),
+          /* @__PURE__ */ jsx59("div", { className: cn("py-2", collapsed ? "px-1" : "px-3"), children: footer })
+        ] })
       ]
     }
   );
 }
 
-// src/components/app-shell.tsx
+// src/components/sidebar-product-header.tsx
 import * as React50 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
+var SidebarProductHeader = React50.forwardRef(
+  function SidebarProductHeader2({ name, icon, trailing, asChild = false, className, children, ...props }, ref) {
+    const adornment = trailing === void 0 ? /* @__PURE__ */ jsx60(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
+    const content = /* @__PURE__ */ jsxs30(Fragment4, { children: [
+      icon && /* @__PURE__ */ jsx60("span", { className: "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsx60("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary", children: name }),
+      adornment && /* @__PURE__ */ jsx60("span", { className: "flex shrink-0 items-center", children: adornment })
+    ] });
+    const classes = cn("flex w-full items-center gap-2.5 rounded-xl px-1.5 py-0 text-left", className);
+    if (asChild) {
+      const child = React50.Children.only(children);
+      return /* @__PURE__ */ jsx60(Slot5, { ref, className: classes, ...props, children: React50.cloneElement(child, void 0, content) });
+    }
+    return /* @__PURE__ */ jsx60("button", { ref, type: "button", className: classes, ...props, children: content });
+  }
+);
+SidebarProductHeader.displayName = "SidebarProductHeader";
+
+// src/components/app-shell.tsx
+import * as React51 from "react";
 import { Menu as Menu2 } from "lucide-react";
 import { useLocation as useLocation2 } from "react-router";
-import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
-  return React50.isValidElement(sidebar) ? React50.cloneElement(sidebar, { collapsed: false }) : sidebar;
+  return React51.isValidElement(sidebar) ? React51.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
 function AppShell({ sidebar, topBar, children, className }) {
   const { pathname } = useLocation2();
-  const [mobileOpen, setMobileOpen] = React50.useState(false);
-  React50.useEffect(() => {
+  const [mobileOpen, setMobileOpen] = React51.useState(false);
+  React51.useEffect(() => {
     setMobileOpen(false);
   }, [pathname]);
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx60(TooltipProvider, { children: /* @__PURE__ */ jsxs30("div", { className: cn("flex min-h-screen flex-col bg-bg-sunken", className), children: [
-      /* @__PURE__ */ jsxs30("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
-        /* @__PURE__ */ jsxs30(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
-          /* @__PURE__ */ jsx60(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx60(Menu2, { className: "size-5" }) }) }),
-          /* @__PURE__ */ jsxs30(SheetContent, { side: "left", className: "w-[240px] bg-bg-surface p-0", children: [
-            /* @__PURE__ */ jsx60(SheetTitle, { className: "sr-only", children: "Navigation" }),
-            /* @__PURE__ */ jsx60(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
+    return /* @__PURE__ */ jsx61(TooltipProvider, { children: /* @__PURE__ */ jsxs31("div", { className: cn("flex min-h-screen flex-col bg-bg-surface", className), children: [
+      /* @__PURE__ */ jsxs31("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
+        /* @__PURE__ */ jsxs31(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+          /* @__PURE__ */ jsx61(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx61(Menu2, { className: "size-5" }) }) }),
+          /* @__PURE__ */ jsxs31(SheetContent, { side: "left", className: "w-[248px] bg-bg-surface p-0", children: [
+            /* @__PURE__ */ jsx61(SheetTitle, { className: "sr-only", children: "Navigation" }),
+            /* @__PURE__ */ jsx61(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
             expandedSidebar(sidebar)
           ] })
         ] }),
-        /* @__PURE__ */ jsx60("div", { className: "flex items-center gap-2", children: topBar })
+        /* @__PURE__ */ jsx61("div", { className: "flex items-center gap-2", children: topBar })
       ] }),
-      /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ jsx61("main", { className: "flex-1 overflow-auto", children })
     ] }) });
   }
-  return /* @__PURE__ */ jsx60(TooltipProvider, { children: /* @__PURE__ */ jsxs30("div", { className: cn("flex min-h-screen gap-2 bg-bg-sunken p-4", className), children: [
-    /* @__PURE__ */ jsx60("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border-subtle bg-bg-surface", children: [
-      /* @__PURE__ */ jsx60("div", { className: "flex min-h-[52px] shrink-0 items-center justify-end gap-2 border-b border-border-subtle px-5", children: topBar }),
-      /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-auto px-7 py-8", children })
+  return /* @__PURE__ */ jsx61(TooltipProvider, { children: /* @__PURE__ */ jsxs31("div", { className: cn("flex min-h-screen gap-3 bg-bg-surface p-4", className), children: [
+    /* @__PURE__ */ jsx61("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
+    /* @__PURE__ */ jsxs31("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+      topBar && /* @__PURE__ */ jsx61("div", { className: "flex shrink-0 items-center justify-end gap-2", children: topBar }),
+      /* @__PURE__ */ jsx61("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] }) });
 }
 var AuthenticatedLayout = AppShell;
 
 // src/components/grid.tsx
-import * as React51 from "react";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var Grid = React51.forwardRef(
+import * as React52 from "react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Grid = React52.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
-    const Comp = asChild ? Slot5 : "div";
-    return /* @__PURE__ */ jsx61(
+    const Comp = asChild ? Slot6 : "div";
+    return /* @__PURE__ */ jsx62(
       Comp,
       {
         ref,
@@ -3094,9 +3167,9 @@ var Grid = React51.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/col.tsx
-import * as React52 from "react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import * as React53 from "react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var TIER_MAX = { base: 4, md: 8, xl: 12 };
 var SPAN = {
   base: { 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" },
@@ -3216,22 +3289,22 @@ function responsiveClasses(span, offset) {
   }
   return cn(...spanClasses, ...startClasses);
 }
-var Col = React52.forwardRef(
+var Col = React53.forwardRef(
   ({ span, offset, asChild = false, className, ...props }, ref) => {
-    const Comp = asChild ? Slot6 : "div";
-    return /* @__PURE__ */ jsx62(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
+    const Comp = asChild ? Slot7 : "div";
+    return /* @__PURE__ */ jsx63(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
   }
 );
 Col.displayName = "Col";
 
 // src/components/grid-overlay.tsx
-import * as React53 from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import * as React54 from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
-var GridOverlay = React53.forwardRef(
+var GridOverlay = React54.forwardRef(
   ({ columns, baseline = false, className, style, ...props }, ref) => {
     const count = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx64(
       "div",
       {
         ref,
@@ -3248,7 +3321,7 @@ var GridOverlay = React53.forwardRef(
           ...style
         },
         ...props,
-        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx63("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
+        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx64("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
       }
     );
   }
@@ -3256,10 +3329,10 @@ var GridOverlay = React53.forwardRef(
 GridOverlay.displayName = "GridOverlay";
 
 // src/components/segment-chip.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import { cva as cva9 } from "class-variance-authority";
 import { Link2 as Link22, KeyRound, Clock, Plus } from "lucide-react";
-import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
 var segmentChipVariants = cva9(
   "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium leading-tight",
   {
@@ -3280,11 +3353,11 @@ var kindIcons = {
   pending: Clock,
   available: Plus
 };
-var SegmentChip = React54.forwardRef(
+var SegmentChip = React55.forwardRef(
   ({ kind, resource, icon, hideIcon = false, className, ...props }, ref) => {
     const Icon = icon ?? kindIcons[kind ?? "granted"];
-    return /* @__PURE__ */ jsxs31("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
-      !hideIcon && /* @__PURE__ */ jsx64(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
+    return /* @__PURE__ */ jsxs32("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx65(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
       resource
     ] });
   }
@@ -3292,9 +3365,9 @@ var SegmentChip = React54.forwardRef(
 SegmentChip.displayName = "SegmentChip";
 
 // src/components/connection-card.tsx
-import * as React55 from "react";
-import { AlertTriangle } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React56 from "react";
+import { AlertTriangle, ChevronDown as ChevronDown4 } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
 var authLabels = { app: "App", oauth: "OAuth", token: "token" };
 var statusMeta = {
   connected: { label: "Connected", badge: "success", dot: "success" },
@@ -3304,85 +3377,155 @@ var statusMeta = {
 function monogram(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var ConnectionCard = React55.forwardRef(
-  ({ name, scope, auth, status, glyph, statusLabel, grantedCount, action, access, children, className, ...props }, ref) => {
+var ConnectionCard = React56.forwardRef(
+  ({
+    name,
+    scope,
+    auth,
+    status,
+    glyph,
+    statusLabel,
+    grantedCount,
+    action,
+    access,
+    children,
+    collapsible = false,
+    defaultOpen,
+    open,
+    onOpenChange,
+    className,
+    ...props
+  }, ref) => {
     const meta = statusMeta[status];
     const connected = status !== "disconnected";
-    return /* @__PURE__ */ jsxs32(Card, { ref, className: cn(status === "disconnected" && "border-dashed border-border-default", className), ...props, children: [
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 p-4", children: [
-        /* @__PURE__ */ jsx65(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
-            children: glyph ?? monogram(name)
-          }
-        ),
-        /* @__PURE__ */ jsxs32("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx65("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-          /* @__PURE__ */ jsxs32("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
-            /* @__PURE__ */ jsx65(Badge, { variant: "secondary", children: scope }),
-            /* @__PURE__ */ jsx65(Badge, { variant: "secondary", children: authLabels[auth] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx65("div", { className: "ml-auto shrink-0", children: connected ? /* @__PURE__ */ jsxs32(Badge, { variant: meta.badge, className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx65(StatusDot, { status: meta.dot, size: "sm" }),
-          statusLabel ?? meta.label
-        ] }) : action })
-      ] }),
-      access && /* @__PURE__ */ jsxs32(
-        "div",
+    const glyphBox = /* @__PURE__ */ jsx66(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+        children: glyph ?? monogram(name)
+      }
+    );
+    const identity = /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx66("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+      /* @__PURE__ */ jsxs33("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: scope }),
+        /* @__PURE__ */ jsx66(Badge, { variant: "secondary", children: authLabels[auth] })
+      ] })
+    ] });
+    const statusBadge = /* @__PURE__ */ jsxs33(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+      /* @__PURE__ */ jsx66(StatusDot, { status: meta.dot, size: "sm" }),
+      statusLabel ?? meta.label
+    ] });
+    const accessNote = access ? /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        role: "note",
+        className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
+        children: [
+          /* @__PURE__ */ jsx66(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx66("span", { children: access })
+        ]
+      }
+    ) : null;
+    const footerAction = collapsible ? action : connected && action;
+    const footer = grantedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx66("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs33(Fragment5, { children: [
+        "Granted to ",
+        /* @__PURE__ */ jsx66("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+        " ",
+        grantedCount === 1 ? "product" : "products"
+      ] }) : /* @__PURE__ */ jsx66("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
+      footerAction
+    ] }) : null;
+    const drawer = children ? /* @__PURE__ */ jsx66("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
+    if (!collapsible) {
+      return /* @__PURE__ */ jsxs33(
+        Card,
         {
-          role: "note",
-          className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
+          ref,
+          className: cn(status === "disconnected" && "border-dashed border-border-default", className),
+          ...props,
           children: [
-            /* @__PURE__ */ jsx65(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx65("span", { children: access })
+            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 p-4", children: [
+              glyphBox,
+              identity,
+              /* @__PURE__ */ jsx66("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
+            ] }),
+            accessNote,
+            footer,
+            drawer
           ]
         }
-      ),
-      (grantedCount !== void 0 || connected && action) && /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
-        /* @__PURE__ */ jsx65("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs32(Fragment3, { children: [
-          "Granted to ",
-          /* @__PURE__ */ jsx65("span", { className: "font-semibold text-text-primary", children: grantedCount }),
-          " ",
-          grantedCount === 1 ? "product" : "products"
-        ] }) : /* @__PURE__ */ jsx65("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
-        connected && action
-      ] }),
-      children && /* @__PURE__ */ jsx65("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children })
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsx66(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs33(
+      Card,
+      {
+        ref,
+        className: cn(status === "disconnected" && "border-dashed border-border-default", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx66(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs33(
+            "button",
+            {
+              type: "button",
+              className: "group flex w-full cursor-pointer items-center gap-3 rounded-[inherit] p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+              children: [
+                glyphBox,
+                identity,
+                /* @__PURE__ */ jsxs33("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                  statusBadge,
+                  /* @__PURE__ */ jsx66(
+                    ChevronDown4,
+                    {
+                      "aria-hidden": "true",
+                      className: "size-4 shrink-0 text-text-tertiary transition-transform group-data-[state=open]:rotate-180"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }),
+          accessNote,
+          /* @__PURE__ */ jsxs33(CollapsibleContent2, { children: [
+            footer,
+            drawer
+          ] })
+        ]
+      }
+    ) });
   }
 );
 ConnectionCard.displayName = "ConnectionCard";
 
 // src/components/request-row.tsx
-import * as React56 from "react";
-import { Fragment as Fragment4, jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
+import * as React57 from "react";
+import { Fragment as Fragment6, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
 function monogram2(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var RequestRow = React56.forwardRef(
+var RequestRow = React57.forwardRef(
   ({ surface, name, state: state2, glyph, subtitle, grantedResource, onApprove, onDeny, onRequest, action, className, ...props }, ref) => {
     let controls = action;
     if (controls === void 0) {
       if (surface === "org" && state2 === "pending") {
-        controls = /* @__PURE__ */ jsxs33(Fragment4, { children: [
-          /* @__PURE__ */ jsx66(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
-          /* @__PURE__ */ jsx66(Button, { size: "sm", onClick: onApprove, children: "Approve" })
+        controls = /* @__PURE__ */ jsxs34(Fragment6, { children: [
+          /* @__PURE__ */ jsx67(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
+          /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: onApprove, children: "Approve" })
         ] });
       } else if (state2 === "available") {
-        controls = /* @__PURE__ */ jsx66(Button, { size: "sm", onClick: onRequest, children: "Request" });
+        controls = /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: onRequest, children: "Request" });
       } else if (state2 === "pending") {
-        controls = /* @__PURE__ */ jsxs33(Badge, { variant: "secondary", className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx66(StatusDot, { status: "neutral", size: "sm" }),
+        controls = /* @__PURE__ */ jsxs34(Badge, { variant: "secondary", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx67(StatusDot, { status: "neutral", size: "sm" }),
           "Pending"
         ] });
       } else if (state2 === "granted") {
-        controls = /* @__PURE__ */ jsx66(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
+        controls = /* @__PURE__ */ jsx67(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
       }
     }
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         ref,
@@ -3392,7 +3535,7 @@ var RequestRow = React56.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(
             "div",
             {
               "aria-hidden": "true",
@@ -3400,11 +3543,11 @@ var RequestRow = React56.forwardRef(
               children: glyph ?? monogram2(name)
             }
           ),
-          /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx66("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-            subtitle && /* @__PURE__ */ jsx66("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
+          /* @__PURE__ */ jsxs34("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx67("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+            subtitle && /* @__PURE__ */ jsx67("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx66("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
+          /* @__PURE__ */ jsx67("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
         ]
       }
     );
@@ -3610,6 +3753,7 @@ export {
   SheetTrigger,
   SidebarNav,
   SidebarNavLink,
+  SidebarProductHeader,
   Skeleton,
   Slider,
   StatCard,

package/dist/styles.css

@@ -11,13 +11,13 @@
  */
 
 :root {
-  --bg-primary: #0e1015;
+  --bg-primary: #191b24;
   --bg-secondary: #12141b;
-  --bg-surface: #191b24;
-  --bg-elevated: #1f222d;
-  --bg-sunken: #08090c;
+  --bg-surface: #1f222d;
+  --bg-elevated: #252936;
+  --bg-sunken: #0e1015;
   --bg-brand: #06297d;
-  --bg-brand-subtle: #0e204c;
+  --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
   --bg-brand-bright: #165ff2;
   --bg-brand-bright-hover: #3d7af4;
@@ -33,7 +33,7 @@
   --bg-rose-subtle: #1a090b;
   --text-primary: #eeeff0;
   --text-secondary: #a5a9b5;
-  --text-tertiary: #8a91a7;
+  --text-tertiary: #8a93a8;
   --text-disabled: #60687f;
   --text-inverse: #0e1015;
   --text-on-brand: #f6f7f7;
@@ -57,7 +57,7 @@
   --icon-success: #2eda76;
   --icon-warning: #efb042;
   --icon-danger: #f06a6a;
-  --border-subtle: #30343f;
+  --border-subtle: #2a2e3b;
   --border-default: #60687f;
   --border-strong: #737c95;
   --border-brand: #165ff2;
@@ -69,7 +69,7 @@
   --field-bg-hover: #12141b;
   --field-bg-focus: #0e1015;
   --field-bg-valid: #191b24;
-  --field-border: #30343f;
+  --field-border: #2a2e3b;
   --field-border-hover: #393d4b;
   --field-border-focus: #165ff2;
   --field-border-filled: #393d4b;
@@ -271,12 +271,12 @@
 }
 
 .light {
-  --bg-primary: #eeeff0;
-  --bg-secondary: #e1e2e4;
-  --bg-surface: #f6f7f7;
-  --bg-elevated: #ffffff;
-  --bg-sunken: #cfd1d7;
-  --bg-brand-subtle: #eaeef4;
+  --bg-primary: #f6f7f7;
+  --bg-secondary: #eeeff0;
+  --bg-surface: #f2f3f4;
+  --bg-elevated: #edeef0;
+  --bg-sunken: #e1e2e4;
+  --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
   --bg-success-subtle: #ebf3ef;
@@ -291,7 +291,7 @@
   --text-tertiary: #535a6e;
   --text-disabled: #737c95;
   --text-inverse: #f6f7f7;
-  --text-brand: #0940b8;
+  --text-brand: #0b4cd5;
   --text-success: #13703c;
   --text-warning: #7a5409;
   --text-danger: #94120e;
@@ -303,7 +303,7 @@
   --icon-primary: #252936;
   --icon-secondary: #535a6e;
   --icon-disabled: #8a91a7;
-  --icon-brand: #0940b8;
+  --icon-brand: #165ff2;
   --icon-success: #13703c;
   --icon-warning: #7a5409;
   --icon-danger: #94120e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -57,7 +57,7 @@
     }
   },
   "dependencies": {
-    "@lessly/tokens": "^0.1.0",
+    "@lessly/tokens": "^0.2.0",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-aspect-ratio": "^1.1.11",