@lessly/ui 0.4.1 → 0.6.0

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,77 +3049,290 @@ 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 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 ? Slot6 : "div";
+    return /* @__PURE__ */ jsx62(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "grid grid-cols-4 md:grid-cols-8 xl:grid-cols-12",
+          "gap-gutter px-grid-sm md:px-grid-md xl:px-grid-xl",
+          !fluid && "mx-auto max-w-container",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+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";
+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" },
+  md: {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+    5: "md:col-span-5",
+    6: "md:col-span-6",
+    7: "md:col-span-7",
+    8: "md:col-span-8"
+  },
+  xl: {
+    1: "xl:col-span-1",
+    2: "xl:col-span-2",
+    3: "xl:col-span-3",
+    4: "xl:col-span-4",
+    5: "xl:col-span-5",
+    6: "xl:col-span-6",
+    7: "xl:col-span-7",
+    8: "xl:col-span-8",
+    9: "xl:col-span-9",
+    10: "xl:col-span-10",
+    11: "xl:col-span-11",
+    12: "xl:col-span-12"
+  }
+};
+var START = {
+  base: { 1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4" },
+  md: {
+    1: "md:col-start-1",
+    2: "md:col-start-2",
+    3: "md:col-start-3",
+    4: "md:col-start-4",
+    5: "md:col-start-5",
+    6: "md:col-start-6",
+    7: "md:col-start-7",
+    8: "md:col-start-8"
+  },
+  xl: {
+    1: "xl:col-start-1",
+    2: "xl:col-start-2",
+    3: "xl:col-start-3",
+    4: "xl:col-start-4",
+    5: "xl:col-start-5",
+    6: "xl:col-start-6",
+    7: "xl:col-start-7",
+    8: "xl:col-start-8",
+    9: "xl:col-start-9",
+    10: "xl:col-start-10",
+    11: "xl:col-start-11",
+    12: "xl:col-start-12"
+  }
+};
+var TIERS = ["base", "md", "xl"];
+function tiersOf(value) {
+  return typeof value === "number" ? TIERS : Object.keys(value);
+}
+function resolveTiers(value, kind) {
+  const out = {};
+  if (value == null) return out;
+  for (const tier of tiersOf(value)) {
+    if (!(tier in TIER_MAX)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[Col] unknown breakpoint "${tier}" (grid tiers are base/md/xl); skipped.`);
+      }
+      continue;
+    }
+    const requested = typeof value === "number" ? value : value[tier];
+    if (requested == null) continue;
+    const index = kind === "offset" ? requested + 1 : requested;
+    if (!Number.isFinite(index)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[Col] ${kind} ${requested} is not a finite number at the "${tier}" tier; skipped.`);
+      }
+      continue;
+    }
+    const rounded = Math.round(index);
+    const clamped = Math.min(Math.max(1, rounded), TIER_MAX[tier]);
+    if (process.env.NODE_ENV !== "production" && (rounded < 1 || rounded > TIER_MAX[tier])) {
+      console.warn(
+        `[Col] ${kind} ${requested} is out of range at the "${tier}" tier (${TIER_MAX[tier]} columns); clamped.`
+      );
+    }
+    out[tier] = clamped;
+  }
+  return out;
+}
+function responsiveClasses(span, offset) {
+  const spans = resolveTiers(span, "span");
+  const starts = resolveTiers(offset, "offset");
+  const spanClasses = [];
+  const startClasses = [];
+  let effectiveSpan = 1;
+  let requestedStart;
+  let emittedStart;
+  for (const tier of TIERS) {
+    const tierSpan = spans[tier];
+    if (tierSpan != null) {
+      effectiveSpan = tierSpan;
+      spanClasses.push(SPAN[tier][tierSpan]);
+    }
+    if (starts[tier] != null) requestedStart = starts[tier];
+    if (requestedStart == null) continue;
+    const lastFittingStart = TIER_MAX[tier] - effectiveSpan + 1;
+    const tierStart = Math.min(requestedStart, lastFittingStart);
+    if (tierStart < requestedStart && process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[Col] span ${effectiveSpan} + offset ${requestedStart - 1} spill past the "${tier}" tier (${TIER_MAX[tier]} columns); offset clamped to ${tierStart - 1}.`
+      );
+    }
+    if (starts[tier] != null || tierStart !== emittedStart) {
+      emittedStart = tierStart;
+      startClasses.push(START[tier][tierStart]);
+    }
+  }
+  return cn(...spanClasses, ...startClasses);
+}
+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 });
+  }
+);
+Col.displayName = "Col";
+
+// src/components/grid-overlay.tsx
+import * as React54 from "react";
+import { jsx as jsx64 } 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(
+      "div",
+      {
+        ref,
+        "aria-hidden": true,
+        className: cn("pointer-events-none absolute inset-0", className),
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
+          gridTemplateRows: "1fr",
+          gap: "var(--grid-gutter)",
+          ...baseline && {
+            backgroundImage: `repeating-linear-gradient(to bottom, transparent 0, transparent calc(${BASELINE} - 1px), var(--border-subtle) calc(${BASELINE} - 1px), var(--border-subtle) calc(${BASELINE}))`
+          },
+          ...style
+        },
+        ...props,
+        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx64("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
+      }
+    );
+  }
+);
+GridOverlay.displayName = "GridOverlay";
+
 // src/components/segment-chip.tsx
-import * as React51 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 jsx61, 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",
   {
@@ -3094,11 +3353,11 @@ var kindIcons = {
   pending: Clock,
   available: Plus
 };
-var SegmentChip = React51.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__ */ jsx61(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
     ] });
   }
@@ -3106,9 +3365,9 @@ var SegmentChip = React51.forwardRef(
 SegmentChip.displayName = "SegmentChip";
 
 // src/components/connection-card.tsx
-import * as React52 from "react";
+import * as React56 from "react";
 import { AlertTriangle } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
+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" },
@@ -3118,13 +3377,13 @@ 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 = React52.forwardRef(
+var ConnectionCard = React56.forwardRef(
   ({ name, scope, auth, status, glyph, statusLabel, grantedCount, action, access, children, 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__ */ jsx62(
+    return /* @__PURE__ */ jsxs33(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__ */ jsx66(
           "div",
           {
             "aria-hidden": "true",
@@ -3132,71 +3391,71 @@ var ConnectionCard = React52.forwardRef(
             children: glyph ?? monogram(name)
           }
         ),
-        /* @__PURE__ */ jsxs32("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx62("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__ */ jsx62(Badge, { variant: "secondary", children: scope }),
-            /* @__PURE__ */ jsx62(Badge, { variant: "secondary", children: authLabels[auth] })
+        /* @__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] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx62("div", { className: "ml-auto shrink-0", children: connected ? /* @__PURE__ */ jsxs32(Badge, { variant: meta.badge, className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx62(StatusDot, { status: meta.dot, size: "sm" }),
+        /* @__PURE__ */ jsx66("div", { className: "ml-auto shrink-0", children: connected ? /* @__PURE__ */ jsxs33(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx66(StatusDot, { status: meta.dot, size: "sm" }),
           statusLabel ?? meta.label
         ] }) : action })
       ] }),
-      access && /* @__PURE__ */ jsxs32(
+      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__ */ jsx62(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx62("span", { children: access })
+            /* @__PURE__ */ jsx66(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx66("span", { children: access })
           ]
         }
       ),
-      (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__ */ jsx62("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs32(Fragment3, { children: [
+      (grantedCount !== void 0 || connected && action) && /* @__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__ */ jsx62("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+          /* @__PURE__ */ jsx66("span", { className: "font-semibold text-text-primary", children: grantedCount }),
           " ",
           grantedCount === 1 ? "product" : "products"
-        ] }) : /* @__PURE__ */ jsx62("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
+        ] }) : /* @__PURE__ */ jsx66("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
         connected && action
       ] }),
-      children && /* @__PURE__ */ jsx62("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children })
+      children && /* @__PURE__ */ jsx66("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children })
     ] });
   }
 );
 ConnectionCard.displayName = "ConnectionCard";
 
 // src/components/request-row.tsx
-import * as React53 from "react";
-import { Fragment as Fragment4, jsx as jsx63, 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 = React53.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__ */ jsx63(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
-          /* @__PURE__ */ jsx63(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__ */ jsx63(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__ */ jsx63(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__ */ jsx63(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,
@@ -3206,7 +3465,7 @@ var RequestRow = React53.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx67(
             "div",
             {
               "aria-hidden": "true",
@@ -3214,11 +3473,11 @@ var RequestRow = React53.forwardRef(
               children: glyph ?? monogram2(name)
             }
           ),
-          /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx63("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-            subtitle && /* @__PURE__ */ jsx63("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__ */ jsx63("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 })
         ]
       }
     );
@@ -3273,6 +3532,7 @@ export {
   CarouselNext,
   CarouselPrevious,
   Checkbox,
+  Col,
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger,
@@ -3350,6 +3610,8 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  Grid,
+  GridOverlay,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -3421,6 +3683,7 @@ export {
   SheetTrigger,
   SidebarNav,
   SidebarNavLink,
+  SidebarProductHeader,
   Skeleton,
   Slider,
   StatCard,