@lessly/ui 0.9.0 → 0.11.0

package/dist/index.d.ts

@@ -885,6 +885,43 @@ type SidebarProductHeaderProps = SidebarProductHeaderOwnProps & Omit<React$1.Com
  *  which anchors a `MenuPopup` at left:12 with the default sideOffset, no alignOffset. */
 declare const SidebarProductHeader: React$1.ForwardRefExoticComponent<SidebarProductHeaderProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+/** A slot's native attributes plus an explicit `data-*` index, so an object literal like
+ *  `{ 'data-testid': 'drill-back' }` passes excess-property checking — plain
+ *  `React.HTMLAttributes` does not declare `data-*` as a named property. */
+type SidebarBackHeaderSlotProps = React$1.HTMLAttributes<HTMLElement> & {
+    [attr: `data-${string}`]: string | number | boolean | undefined;
+};
+interface SidebarBackHeaderProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Title text/node beside the arrow. In single mode it is also the row's accessible name. */
+    title: React$1.ReactNode;
+    /** Back action — the arrow in split mode, the whole row in single mode. */
+    onBack: () => void;
+    /** Title action. Its presence switches the row into split mode (arrow + title are two
+     *  separate controls). Omit it for single mode (the whole row is one back button). */
+    onTitleClick?: () => void;
+    /** Accessible name for the back control in split mode. Defaults to `"Back"`. Unused in
+     *  single mode, where the row's accessible name is the title text. */
+    backLabel?: string;
+    /** Attributes for the arrow control — the arrow `<button>` in split mode, the arrow-plate
+     *  `<span>` in single mode. Lets a consumer attach e.g. `data-testid`. */
+    arrowProps?: SidebarBackHeaderSlotProps;
+    /** Attributes for the title control — the title `<button>` in split mode, the title
+     *  `<span>` in single mode. */
+    titleProps?: SidebarBackHeaderSlotProps;
+}
+/** Accessible sidebar back-header (`← Title`) reproducing `lessly-workspace` DrillPanel's
+ *  back-row one-to-one, with a flexible action model:
+ *
+ *  - **Split mode** (`onTitleClick` given): two native buttons — arrow (`onBack`) and title
+ *    (`onTitleClick`).
+ *  - **Single mode** (`onTitleClick` omitted): the whole row is one native button (`onBack`).
+ *
+ *  The row adds NO horizontal padding of its own — the parent pane owns horizontal inset. */
+declare function SidebarBackHeader({ title, onBack, onTitleClick, backLabel, arrowProps, titleProps, className, ...rowProps }: SidebarBackHeaderProps): React$1.JSX.Element;
+declare namespace SidebarBackHeader {
+    var displayName: string;
+}
+
 interface AppShellProps {
     /** The sidebar, typically an <AppSidebar/>. Rendered in the desktop rail and,
      *  on mobile, inside a Sheet (force-expanded via cloneElement collapsed=false). */
@@ -1057,8 +1094,8 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
 }
 declare const RequestRow: React$1.ForwardRefExoticComponent<RequestRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface FeedbackWidgetLabels {
-    /** Floating trigger button + its aria-label. */
+interface FeedbackButtonLabels {
+    /** Inline trigger button label + its aria-label. */
     trigger: string;
     /** Heading shown above the form. */
     title: string;
@@ -1073,9 +1110,9 @@ interface FeedbackWidgetLabels {
     /** Message shown after a failed submit. */
     error: string;
 }
-interface FeedbackWidgetProps {
+interface FeedbackButtonProps {
     /**
-     * Called with the entered feedback when the form is submitted. The widget is
+     * Called with the entered feedback when the form is submitted. The button is
      * presentational: it knows nothing about APIs, auth, or routing — the parent
      * decides what to do with the data. Rejecting shows the error state.
      */
@@ -1084,10 +1121,10 @@ interface FeedbackWidgetProps {
         details: string;
     }) => Promise<void>;
     /** Override any of the default copy. */
-    labels?: Partial<FeedbackWidgetLabels>;
-    /** Merged onto the fixed positioning wrapper (e.g. to reposition the button). */
+    labels?: Partial<FeedbackButtonLabels>;
+    /** Merged onto the inline trigger button (e.g. to align it with neighbouring top-bar controls). */
     className?: string;
 }
-declare function FeedbackWidget({ onSubmit, labels, className }: FeedbackWidgetProps): React$1.JSX.Element;
+declare function FeedbackButton({ onSubmit, labels, className }: FeedbackButtonProps): React$1.JSX.Element;
 
-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, FeedbackWidget, type FeedbackWidgetLabels, type FeedbackWidgetProps, 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 };
+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, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, 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, SidebarBackHeader, type SidebarBackHeaderProps, 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

@@ -3108,11 +3108,72 @@ var SidebarProductHeader = React50.forwardRef(
 );
 SidebarProductHeader.displayName = "SidebarProductHeader";
 
+// src/components/sidebar-back-header.tsx
+import { ArrowLeft as ArrowLeft2 } from "lucide-react";
+import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+var focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+var arrowPlate = "flex size-5 items-center justify-center rounded-md transition-colors hover:bg-[color-mix(in_srgb,var(--text-primary)_12%,transparent)] hover:text-text-primary";
+var arrowBox = "flex shrink-0 cursor-pointer items-center rounded-xl py-2 pr-0 pl-2.5 text-text-secondary";
+var titleBox = "min-w-0 flex-1 cursor-pointer truncate rounded-xl py-2 pr-2.5 pl-[14px] text-left text-sm font-semibold text-text-primary";
+var Arrow = () => /* @__PURE__ */ jsx61(ArrowLeft2, { size: 16, "aria-hidden": "true" });
+function SidebarBackHeader({
+  title,
+  onBack,
+  onTitleClick,
+  backLabel = "Back",
+  arrowProps,
+  titleProps,
+  className,
+  ...rowProps
+}) {
+  const { className: arrowClassName, ...arrowRest } = arrowProps ?? {};
+  const { className: titleClassName, ...titleRest } = titleProps ?? {};
+  if (!onTitleClick) {
+    return /* @__PURE__ */ jsxs31(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: cn("flex items-center rounded-xl", focusRing, className),
+        ...rowProps,
+        children: [
+          /* @__PURE__ */ jsx61("span", { className: arrowBox, children: /* @__PURE__ */ jsx61("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx61(Arrow, {}) }) }),
+          /* @__PURE__ */ jsx61("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center", className), ...rowProps, children: [
+    /* @__PURE__ */ jsx61(
+      "button",
+      {
+        type: "button",
+        "aria-label": backLabel,
+        onClick: onBack,
+        className: cn(arrowBox, focusRing, arrowClassName),
+        ...arrowRest,
+        children: /* @__PURE__ */ jsx61("span", { className: arrowPlate, children: /* @__PURE__ */ jsx61(Arrow, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsx61(
+      "button",
+      {
+        type: "button",
+        onClick: onTitleClick,
+        className: cn(titleBox, focusRing, titleClassName),
+        ...titleRest,
+        children: title
+      }
+    )
+  ] });
+}
+SidebarBackHeader.displayName = "SidebarBackHeader";
+
 // 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 jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
   return React51.isValidElement(sidebar) ? React51.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
@@ -3124,26 +3185,26 @@ function AppShell({ sidebar, topBar, children, className }) {
   }, [pathname]);
   const isMobile = useIsMobile();
   if (isMobile) {
-    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" }),
+    return /* @__PURE__ */ jsx62(TooltipProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("flex min-h-screen flex-col bg-bg-surface", className), children: [
+      /* @__PURE__ */ jsxs32("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
+        /* @__PURE__ */ jsxs32(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+          /* @__PURE__ */ jsx62(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx62(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx62(Menu2, { className: "size-5" }) }) }),
+          /* @__PURE__ */ jsxs32(SheetContent, { side: "left", className: "w-[248px] bg-bg-surface p-0", children: [
+            /* @__PURE__ */ jsx62(SheetTitle, { className: "sr-only", children: "Navigation" }),
+            /* @__PURE__ */ jsx62(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
             expandedSidebar(sidebar)
           ] })
         ] }),
-        /* @__PURE__ */ jsx61("div", { className: "flex items-center gap-2", children: topBar })
+        /* @__PURE__ */ jsx62("div", { className: "flex items-center gap-2", children: topBar })
       ] }),
-      /* @__PURE__ */ jsx61("main", { className: "flex-1 overflow-auto", children })
+      /* @__PURE__ */ jsx62("main", { className: "flex-1 overflow-auto", 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 })
+  return /* @__PURE__ */ jsx62(TooltipProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("flex min-h-screen gap-3 bg-bg-surface p-4", className), children: [
+    /* @__PURE__ */ jsx62("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
+    /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+      topBar && /* @__PURE__ */ jsx62("div", { className: "flex shrink-0 items-center justify-end gap-2", children: topBar }),
+      /* @__PURE__ */ jsx62("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] }) });
 }
@@ -3152,11 +3213,11 @@ var AuthenticatedLayout = AppShell;
 // src/components/grid.tsx
 import * as React52 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var Grid = React52.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot6 : "div";
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       Comp,
       {
         ref,
@@ -3176,7 +3237,7 @@ Grid.displayName = "Grid";
 // src/components/col.tsx
 import * as React53 from "react";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } 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" },
@@ -3299,19 +3360,19 @@ function responsiveClasses(span, offset) {
 var Col = React53.forwardRef(
   ({ span, offset, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot7 : "div";
-    return /* @__PURE__ */ jsx63(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
+    return /* @__PURE__ */ jsx64(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
   }
 );
 Col.displayName = "Col";
 
 // src/components/grid-overlay.tsx
 import * as React54 from "react";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
 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__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       "div",
       {
         ref,
@@ -3328,7 +3389,7 @@ var GridOverlay = React54.forwardRef(
           ...style
         },
         ...props,
-        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx64("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
+        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx65("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
       }
     );
   }
@@ -3339,7 +3400,7 @@ GridOverlay.displayName = "GridOverlay";
 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 jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs33 } 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",
   {
@@ -3363,8 +3424,8 @@ var kindIcons = {
 var SegmentChip = React55.forwardRef(
   ({ kind, resource, icon, hideIcon = false, className, ...props }, ref) => {
     const Icon = icon ?? kindIcons[kind ?? "granted"];
-    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" }),
+    return /* @__PURE__ */ jsxs33("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx66(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
       resource
     ] });
   }
@@ -3374,7 +3435,7 @@ SegmentChip.displayName = "SegmentChip";
 // src/components/connection-card.tsx
 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";
+import { Fragment as Fragment5, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
 var authLabels = { app: "App", oauth: "OAuth", token: "token" };
 var statusMeta = {
   connected: { label: "Connected", badge: "success", dot: "success" },
@@ -3405,7 +3466,7 @@ var ConnectionCard = React56.forwardRef(
   }, ref) => {
     const meta = statusMeta[status];
     const connected = status !== "disconnected";
-    const glyphBox = /* @__PURE__ */ jsx66(
+    const glyphBox = /* @__PURE__ */ jsx67(
       "div",
       {
         "aria-hidden": "true",
@@ -3413,51 +3474,51 @@ var ConnectionCard = React56.forwardRef(
         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 identity = /* @__PURE__ */ jsxs34("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx67("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+      /* @__PURE__ */ jsxs34("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx67(Badge, { variant: "secondary", children: scope }),
+        /* @__PURE__ */ jsx67(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" }),
+    const statusBadge = /* @__PURE__ */ jsxs34(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+      /* @__PURE__ */ jsx67(StatusDot, { status: meta.dot, size: "sm" }),
       statusLabel ?? meta.label
     ] });
-    const accessNote = access ? /* @__PURE__ */ jsxs33(
+    const accessNote = access ? /* @__PURE__ */ jsxs34(
       "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 })
+          /* @__PURE__ */ jsx67(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx67("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: [
+    const footer = grantedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx67("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs34(Fragment5, { children: [
         "Granted to ",
-        /* @__PURE__ */ jsx66("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+        /* @__PURE__ */ jsx67("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" }) }),
+      ] }) : /* @__PURE__ */ jsx67("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;
+    const drawer = children ? /* @__PURE__ */ jsx67("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
     if (!collapsible) {
-      return /* @__PURE__ */ jsxs33(
+      return /* @__PURE__ */ jsxs34(
         Card,
         {
           ref,
           className: cn(status === "disconnected" && "border-dashed border-border-default", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 p-4", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3 p-4", children: [
               glyphBox,
               identity,
-              /* @__PURE__ */ jsx66("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
+              /* @__PURE__ */ jsx67("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
             ] }),
             accessNote,
             footer,
@@ -3466,7 +3527,7 @@ var ConnectionCard = React56.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx66(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsx67(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs34(
       Card,
       {
         ref,
@@ -3477,7 +3538,7 @@ var ConnectionCard = React56.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx66(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsx67(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs34(
             "button",
             {
               type: "button",
@@ -3485,9 +3546,9 @@ var ConnectionCard = React56.forwardRef(
               children: [
                 glyphBox,
                 identity,
-                /* @__PURE__ */ jsxs33("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsxs34("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
                   statusBadge,
-                  /* @__PURE__ */ jsx66(
+                  /* @__PURE__ */ jsx67(
                     ChevronDown4,
                     {
                       "aria-hidden": "true",
@@ -3498,7 +3559,7 @@ var ConnectionCard = React56.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs33(CollapsibleContent2, { children: [
+          /* @__PURE__ */ jsxs34(CollapsibleContent2, { children: [
             accessNote,
             footer,
             drawer
@@ -3512,7 +3573,7 @@ ConnectionCard.displayName = "ConnectionCard";
 
 // src/components/request-row.tsx
 import * as React57 from "react";
-import { Fragment as Fragment6, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx68, jsxs as jsxs35 } 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("");
 }
@@ -3521,22 +3582,22 @@ var RequestRow = React57.forwardRef(
     let controls = action;
     if (controls === void 0) {
       if (surface === "org" && state2 === "pending") {
-        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" })
+        controls = /* @__PURE__ */ jsxs35(Fragment6, { children: [
+          /* @__PURE__ */ jsx68(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
+          /* @__PURE__ */ jsx68(Button, { size: "sm", onClick: onApprove, children: "Approve" })
         ] });
       } else if (state2 === "available") {
-        controls = /* @__PURE__ */ jsx67(Button, { size: "sm", onClick: onRequest, children: "Request" });
+        controls = /* @__PURE__ */ jsx68(Button, { size: "sm", onClick: onRequest, children: "Request" });
       } else if (state2 === "pending") {
-        controls = /* @__PURE__ */ jsxs34(Badge, { variant: "secondary", className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx67(StatusDot, { status: "neutral", size: "sm" }),
+        controls = /* @__PURE__ */ jsxs35(Badge, { variant: "secondary", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx68(StatusDot, { status: "neutral", size: "sm" }),
           "Pending"
         ] });
       } else if (state2 === "granted") {
-        controls = /* @__PURE__ */ jsx67(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
+        controls = /* @__PURE__ */ jsx68(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
       }
     }
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -3546,7 +3607,7 @@ var RequestRow = React57.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68(
             "div",
             {
               "aria-hidden": "true",
@@ -3554,11 +3615,11 @@ var RequestRow = React57.forwardRef(
               children: glyph ?? monogram2(name)
             }
           ),
-          /* @__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__ */ jsxs35("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx68("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+            subtitle && /* @__PURE__ */ jsx68("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx67("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
+          /* @__PURE__ */ jsx68("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
         ]
       }
     );
@@ -3566,10 +3627,10 @@ var RequestRow = React57.forwardRef(
 );
 RequestRow.displayName = "RequestRow";
 
-// src/components/feedback-widget.tsx
+// src/components/feedback-button.tsx
 import * as React58 from "react";
 import { MessageSquare, Loader2 as Loader22, CheckCircle2 } from "lucide-react";
-import { jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
 var TITLE_MAX = 256;
 var DETAILS_MAX = 65536;
 var DEFAULT_LABELS = {
@@ -3581,7 +3642,7 @@ var DEFAULT_LABELS = {
   success: "Thanks! Your feedback was sent.",
   error: "Couldn't send feedback. Please try again."
 };
-function FeedbackWidget({ onSubmit, labels, className }) {
+function FeedbackButton({ onSubmit, labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
   const uid = React58.useId();
   const titleId = `${uid}-title`;
@@ -3616,20 +3677,20 @@ function FeedbackWidget({ onSubmit, labels, className }) {
       setStatus("error");
     }
   };
-  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ jsx68("div", { className: cn("fixed bottom-4 right-4 z-50", className), children: /* @__PURE__ */ jsx68(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(Button, { "aria-label": l.trigger, children: [
-      /* @__PURE__ */ jsx68(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs36(Popover, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx69(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
+      /* @__PURE__ */ jsx69(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
       l.trigger
-    ] }) }) }),
-    /* @__PURE__ */ jsx68(PopoverContent, { align: "end", side: "top", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
-      /* @__PURE__ */ jsx68(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx68("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
-      /* @__PURE__ */ jsx68(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
-    ] }) : /* @__PURE__ */ jsxs35("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx68("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx68(Label2, { htmlFor: titleId, children: l.titleField }),
-        /* @__PURE__ */ jsx68(
+    ] }) }),
+    /* @__PURE__ */ jsx69(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx69(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx69("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
+      /* @__PURE__ */ jsx69(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
+    ] }) : /* @__PURE__ */ jsxs36("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx69("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx69(Label2, { htmlFor: titleId, children: l.titleField }),
+        /* @__PURE__ */ jsx69(
           Input,
           {
             id: titleId,
@@ -3640,16 +3701,16 @@ function FeedbackWidget({ onSubmit, labels, className }) {
             "aria-describedby": titleTooLong ? titleErrId : void 0
           }
         ),
-        titleTooLong && /* @__PURE__ */ jsxs35("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
+        titleTooLong && /* @__PURE__ */ jsxs36("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
           l.titleField,
           " must be ",
           TITLE_MAX,
           " characters or fewer."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx68(Label2, { htmlFor: detailsId, children: l.detailsField }),
-        /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx69(Label2, { htmlFor: detailsId, children: l.detailsField }),
+        /* @__PURE__ */ jsx69(
           Textarea,
           {
             id: detailsId,
@@ -3660,16 +3721,16 @@ function FeedbackWidget({ onSubmit, labels, className }) {
             "aria-describedby": detailsTooLong ? detailsErrId : void 0
           }
         ),
-        detailsTooLong && /* @__PURE__ */ jsxs35("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
+        detailsTooLong && /* @__PURE__ */ jsxs36("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
           l.detailsField,
           " must be ",
           DETAILS_MAX,
           " characters or fewer."
         ] })
       ] }),
-      status === "error" && /* @__PURE__ */ jsx68(InlineError, { children: l.error }),
-      /* @__PURE__ */ jsxs35(Button, { type: "submit", disabled: !valid || submitting, children: [
-        submitting && /* @__PURE__ */ jsx68(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+      status === "error" && /* @__PURE__ */ jsx69(InlineError, { children: l.error }),
+      /* @__PURE__ */ jsxs36(Button, { type: "submit", disabled: !valid || submitting, children: [
+        submitting && /* @__PURE__ */ jsx69(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
         l.submit
       ] })
     ] }) })
@@ -3794,7 +3855,7 @@ export {
   EmptyState,
   ExtensionIcon,
   ExtensionLink,
-  FeedbackWidget,
+  FeedbackButton,
   Form,
   FormControl,
   FormDescription,
@@ -3873,6 +3934,7 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  SidebarBackHeader,
   SidebarNav,
   SidebarNavLink,
   SidebarProductHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",