@locusgraph/components 0.2.0 → 0.2.2

package/dist/shell/breadcrumbs.js

@@ -1,18 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight as ChevronRightIcon } from "@carbon/icons-react";
-function CrumbLabel({ crumb, last, Link, }) {
-    if (last) {
-        return (_jsx("span", { "aria-current": "page", className: "truncate font-medium", children: crumb.label }));
-    }
-    if (crumb.href === undefined) {
-        return _jsx("span", { className: "truncate text-soft", children: crumb.label });
-    }
-    return (_jsx(Link, { href: crumb.href, className: "truncate text-soft transition-colors hover:text-foreground", children: crumb.label }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function CrumbLabel({
+  crumb,
+  last,
+  Link
+}) {
+  if (last) {
+    return /*#__PURE__*/_jsx("span", {
+      "aria-current": "page",
+      className: "truncate font-medium",
+      children: crumb.label
+    });
+  }
+  if (crumb.href === undefined) {
+    return /*#__PURE__*/_jsx("span", {
+      className: "truncate text-soft",
+      children: crumb.label
+    });
+  }
+  return /*#__PURE__*/_jsx(Link, {
+    href: crumb.href,
+    className: "truncate text-soft transition-colors hover:text-foreground",
+    children: crumb.label
+  });
 }
-function Breadcrumbs({ items, linkComponent = "a" }) {
-    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm", children: items.map((crumb, index) => {
-            const last = index === items.length - 1;
-            return (_jsxs("span", { className: last ? "flex min-w-0 items-center gap-1.5" : "hidden items-center gap-1.5 sm:flex", children: [_jsx(CrumbLabel, { crumb: crumb, last: last, Link: linkComponent }), last ? null : (_jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-faint", "aria-hidden": true }))] }, crumb.href ?? index));
-        }) }));
+function Breadcrumbs({
+  items,
+  linkComponent = "a"
+}) {
+  return /*#__PURE__*/_jsx("nav", {
+    "aria-label": "Breadcrumb",
+    className: "flex min-w-0 items-center gap-1.5 text-sm",
+    children: items.map((crumb, index) => {
+      const last = index === items.length - 1;
+      return /*#__PURE__*/_jsxs("span", {
+        className: last ? "flex min-w-0 items-center gap-1.5" : "hidden items-center gap-1.5 sm:flex",
+        children: [/*#__PURE__*/_jsx(CrumbLabel, {
+          crumb: crumb,
+          last: last,
+          Link: linkComponent
+        }), last ? null : /*#__PURE__*/_jsx(ChevronRightIcon, {
+          className: "size-3.5 shrink-0 text-faint",
+          "aria-hidden": true
+        })]
+      }, crumb.href ?? index);
+    })
+  });
 }
 export { Breadcrumbs };

package/dist/shell/docs/docs-header.js

@@ -1,20 +1,220 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { Menu as MenuIcon } from "@carbon/icons-react";
 import { cn } from "cn";
 import { useState } from "react";
 import { Button } from "../../action/button.js";
 import { Sheet, SheetContent, SheetTitle } from "../../overlay/sheet.js";
-function MobileNavSheet({ children }) {
-    const [open, setOpen] = useState(false);
-    const closeOnLinkClick = (event) => {
-        if (event.target.closest("a")) {
-            setOpen(false);
-        }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function MobileNavSheet(t0) {
+  const $ = _c(8);
+  const {
+    children
+  } = t0;
+  const [open, setOpen] = useState(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = event => {
+      if (event.target.closest("a")) {
+        setOpen(false);
+      }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", className: "lg:hidden", "aria-label": "Open menu", onClick: () => setOpen(true), children: _jsx(MenuIcon, {}) }), _jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 overflow-y-auto p-4", children: [_jsx(SheetTitle, { className: "sr-only", children: "Menu" }), _jsx("div", { onClickCapture: closeOnLinkClick, children: children })] }) })] }));
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const closeOnLinkClick = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx(Button, {
+      variant: "ghost",
+      size: "icon-sm",
+      className: "lg:hidden",
+      "aria-label": "Open menu",
+      onClick: () => setOpen(true),
+      children: /*#__PURE__*/_jsx(MenuIcon, {})
+    });
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx(SheetTitle, {
+      className: "sr-only",
+      children: "Menu"
+    });
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children) {
+    t4 = /*#__PURE__*/_jsxs(SheetContent, {
+      side: "left",
+      className: "w-72 overflow-y-auto p-4",
+      children: [t3, /*#__PURE__*/_jsx("div", {
+        onClickCapture: closeOnLinkClick,
+        children: children
+      })]
+    });
+    $[3] = children;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== open || $[6] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t2, /*#__PURE__*/_jsx(Sheet, {
+        open: open,
+        onOpenChange: setOpen,
+        children: t4
+      })]
+    });
+    $[5] = open;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 }
-function DocsHeader({ brand, links, activeHref, mobileNav, linkComponent: Link = "a", children, }) {
-    return (_jsx("header", { "data-slot": "docs-header", className: "sticky top-0 z-50 w-full bg-background/95 backdrop-blur", children: _jsxs("div", { className: "mx-auto flex h-(--docs-header-height) w-full max-w-[1536px] items-center gap-4 px-6 **:data-[slot=separator]:h-4!", children: [_jsx(MobileNavSheet, { children: mobileNav }), _jsxs(Link, { href: brand.href, className: "flex items-center gap-2 font-brand text-base tracking-tight", children: [brand.icon, _jsxs("span", { children: [_jsx("span", { className: "font-bold", children: brand.name }), brand.product && _jsx("span", { className: "font-light", children: brand.product })] })] }), _jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-0.5 lg:flex", children: links.map((link) => (_jsx(Link, { href: link.href, "aria-current": link.href === activeHref ? "page" : undefined, className: cn("rounded-md px-2.5 py-1.5 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground", link.href === activeHref && "text-foreground"), children: link.title }, link.href))) }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: children })] }) }));
+function DocsHeader(t0) {
+  const $ = _c(30);
+  const {
+    brand,
+    links,
+    activeHref,
+    mobileNav,
+    linkComponent: t1,
+    children
+  } = t0;
+  const Link = t1 === undefined ? "a" : t1;
+  let t2;
+  if ($[0] !== mobileNav) {
+    t2 = /*#__PURE__*/_jsx(MobileNavSheet, {
+      children: mobileNav
+    });
+    $[0] = mobileNav;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== brand.name) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "font-bold",
+      children: brand.name
+    });
+    $[2] = brand.name;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== brand.product) {
+    t4 = brand.product && /*#__PURE__*/_jsx("span", {
+      className: "font-light",
+      children: brand.product
+    });
+    $[4] = brand.product;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t3 || $[7] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("span", {
+      children: [t3, t4]
+    });
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== Link || $[10] !== brand.href || $[11] !== brand.icon || $[12] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(Link, {
+      href: brand.href,
+      className: "flex items-center gap-2 font-brand text-base tracking-tight",
+      children: [brand.icon, t5]
+    });
+    $[9] = Link;
+    $[10] = brand.href;
+    $[11] = brand.icon;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== Link || $[15] !== activeHref || $[16] !== links) {
+    let t8;
+    if ($[18] !== Link || $[19] !== activeHref) {
+      t8 = link => /*#__PURE__*/_jsx(Link, {
+        href: link.href,
+        "aria-current": link.href === activeHref ? "page" : undefined,
+        className: cn("rounded-md px-2.5 py-1.5 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground", link.href === activeHref && "text-foreground"),
+        children: link.title
+      }, link.href);
+      $[18] = Link;
+      $[19] = activeHref;
+      $[20] = t8;
+    } else {
+      t8 = $[20];
+    }
+    t7 = links.map(t8);
+    $[14] = Link;
+    $[15] = activeHref;
+    $[16] = links;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[21] !== t7) {
+    t8 = /*#__PURE__*/_jsx("nav", {
+      "aria-label": "Main",
+      className: "hidden items-center gap-0.5 lg:flex",
+      children: t7
+    });
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== children) {
+    t9 = /*#__PURE__*/_jsx("div", {
+      className: "ml-auto flex items-center gap-2",
+      children: children
+    });
+    $[23] = children;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== t2 || $[26] !== t6 || $[27] !== t8 || $[28] !== t9) {
+    t10 = /*#__PURE__*/_jsx("header", {
+      "data-slot": "docs-header",
+      className: "sticky top-0 z-50 w-full bg-background/95 backdrop-blur",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "mx-auto flex h-(--docs-header-height) w-full max-w-[1536px] items-center gap-4 px-6 **:data-[slot=separator]:h-4!",
+        children: [t2, t6, t8, t9]
+      })
+    });
+    $[25] = t2;
+    $[26] = t6;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  return t10;
 }
 export { DocsHeader };

package/dist/shell/docs/docs-shell.js

@@ -1,7 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "cn";
 import { TooltipProvider } from "../../overlay/tooltip.js";
-function DocsShell({ header, sidebar, aside, children }) {
-    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("div", { "data-slot": "docs-shell", className: "flex min-h-svh flex-col bg-background [--docs-header-height:3.5rem] lg:[--docs-header-height:4rem]", children: [header, _jsxs("div", { className: cn("mx-auto w-full max-w-[1536px] flex-1 items-start px-2", sidebar && "lg:grid lg:grid-cols-[18rem_minmax(0,1fr)]"), children: [sidebar && (_jsx("aside", { "data-slot": "docs-sidebar", className: "sticky top-[calc(var(--docs-header-height)+0.6rem)] hidden h-[calc(100svh-10rem)] lg:block", children: sidebar })), _jsxs("div", { className: "flex min-w-0 items-stretch", children: [_jsx("main", { "data-slot": "docs-body", className: "min-w-0 flex-1 px-4 pt-6 pb-16 md:px-6 lg:pt-10", children: children }), aside && (_jsx("aside", { "data-slot": "docs-aside", className: "sticky top-[calc(var(--docs-header-height)+1px)] hidden h-[90svh] w-72 shrink-0 flex-col gap-8 overflow-hidden pt-10 xl:flex", children: _jsx("div", { className: "no-scrollbar flex flex-col gap-8 overflow-y-auto px-8", children: aside }) }))] })] })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DocsShell({
+  header,
+  sidebar,
+  aside,
+  children
+}) {
+  return /*#__PURE__*/_jsx(TooltipProvider, {
+    delayDuration: 0,
+    children: /*#__PURE__*/_jsxs("div", {
+      "data-slot": "docs-shell",
+      className: "flex min-h-svh flex-col bg-background [--docs-header-height:3.5rem] lg:[--docs-header-height:4rem]",
+      children: [header, /*#__PURE__*/_jsxs("div", {
+        className: cn("mx-auto w-full max-w-[1536px] flex-1 items-start px-2", sidebar && "lg:grid lg:grid-cols-[18rem_minmax(0,1fr)]"),
+        children: [sidebar && /*#__PURE__*/_jsx("aside", {
+          "data-slot": "docs-sidebar",
+          className: "sticky top-[calc(var(--docs-header-height)+0.6rem)] hidden h-[calc(100svh-10rem)] lg:block",
+          children: sidebar
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "flex min-w-0 items-stretch",
+          children: [/*#__PURE__*/_jsx("main", {
+            "data-slot": "docs-body",
+            className: "min-w-0 flex-1 px-4 pt-6 pb-16 md:px-6 lg:pt-10",
+            children: children
+          }), aside && /*#__PURE__*/_jsx("aside", {
+            "data-slot": "docs-aside",
+            className: "sticky top-[calc(var(--docs-header-height)+1px)] hidden h-[90svh] w-72 shrink-0 flex-col gap-8 overflow-hidden pt-10 xl:flex",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "no-scrollbar flex flex-col gap-8 overflow-y-auto px-8",
+              children: aside
+            })
+          })]
+        })]
+      })]
+    })
+  });
 }
 export { DocsShell };

package/dist/shell/docs/docs-sidebar.js

@@ -1,12 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "cn";
-function DocsNavList({ groups, activeHref, linkComponent: Link = "a" }) {
-    return (_jsx("div", { className: "flex flex-col gap-4", children: groups.map((group) => (_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "eyebrow flex h-8 items-center px-2", children: group.label }), _jsx("ul", { className: "flex flex-col gap-0.5", children: group.items.map((item) => {
-                        const active = item.href === activeHref;
-                        return (_jsx("li", { children: _jsx(Link, { href: item.href, "aria-current": active ? "page" : undefined, className: cn("flex h-[30px] w-fit items-center rounded-md border border-transparent px-2 text-sm font-medium transition-colors hover:bg-accent", active && "border-accent bg-accent"), children: item.title }) }, item.href));
-                    }) })] }, group.label))) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DocsNavList({
+  groups,
+  activeHref,
+  linkComponent: Link = "a"
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: "flex flex-col gap-4",
+    children: groups.map(group => /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col",
+      children: [/*#__PURE__*/_jsx("p", {
+        className: "eyebrow flex h-8 items-center px-2",
+        children: group.label
+      }), /*#__PURE__*/_jsx("ul", {
+        className: "flex flex-col gap-0.5",
+        children: group.items.map(item => {
+          const active = item.href === activeHref;
+          return /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(Link, {
+              href: item.href,
+              "aria-current": active ? "page" : undefined,
+              className: cn("flex h-[30px] w-fit items-center rounded-md border border-transparent px-2 text-sm font-medium transition-colors hover:bg-accent", active && "border-accent bg-accent"),
+              children: item.title
+            })
+          }, item.href);
+        })
+      })]
+    }, group.label))
+  });
 }
 function DocsSidebar(props) {
-    return (_jsxs("div", { className: "relative h-full", children: [_jsx("div", { className: "absolute top-12 right-2 bottom-0 w-px bg-[linear-gradient(to_bottom,transparent_0%,var(--border)_10%,var(--border)_90%,transparent_100%)]" }), _jsx("nav", { "aria-label": "Documentation", className: "no-scrollbar h-full w-56 overflow-y-auto pt-10 pb-12 pl-2.5 [mask-image:linear-gradient(to_bottom,transparent,black_2rem,black_calc(100%-3rem),transparent)]", children: _jsx(DocsNavList, { ...props }) })] }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "relative h-full",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "absolute top-12 right-2 bottom-0 w-px bg-[linear-gradient(to_bottom,transparent_0%,var(--border)_10%,var(--border)_90%,transparent_100%)]"
+    }), /*#__PURE__*/_jsx("nav", {
+      "aria-label": "Documentation",
+      className: "no-scrollbar h-full w-56 overflow-y-auto pt-10 pb-12 pl-2.5 [mask-image:linear-gradient(to_bottom,transparent,black_2rem,black_calc(100%-3rem),transparent)]",
+      children: /*#__PURE__*/_jsx(DocsNavList, {
+        ...props
+      })
+    })]
+  });
 }
 export { DocsNavList, DocsSidebar };

package/dist/shell/docs/on-this-page.js

@@ -1,12 +1,83 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import { useActiveSection } from "./use-active-section.js";
-function OnThisPage({ sections, title = "On This Page" }) {
-    const [activeId, pinSection] = useActiveSection(sections.map((section) => section.id));
-    return (_jsxs("nav", { "aria-label": title, className: "flex flex-col gap-2 text-sm", children: [_jsx("p", { className: "eyebrow flex h-6 items-center", children: title }), sections.map((section) => (_jsx("button", { type: "button", onClick: () => {
-                    pinSection(section.id);
-                    document.getElementById(section.id)?.scrollIntoView({ behavior: "smooth" });
-                }, "aria-current": activeId === section.id ? "location" : undefined, className: cn("text-left text-[0.8rem] text-muted-foreground transition-colors hover:text-foreground", section.nested && "pl-4", activeId === section.id && "font-medium text-foreground"), children: section.title }, section.id)))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function OnThisPage(t0) {
+  const $ = _c(15);
+  const {
+    sections,
+    title: t1
+  } = t0;
+  const title = t1 === undefined ? "On This Page" : t1;
+  let t2;
+  if ($[0] !== sections) {
+    t2 = sections.map(_temp);
+    $[0] = sections;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const [activeId, pinSection] = useActiveSection(t2);
+  let t3;
+  if ($[2] !== title) {
+    t3 = /*#__PURE__*/_jsx("p", {
+      className: "eyebrow flex h-6 items-center",
+      children: title
+    });
+    $[2] = title;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== activeId || $[5] !== pinSection || $[6] !== sections) {
+    let t5;
+    if ($[8] !== activeId || $[9] !== pinSection) {
+      t5 = section_0 => /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: () => {
+          pinSection(section_0.id);
+          document.getElementById(section_0.id)?.scrollIntoView({
+            behavior: "smooth"
+          });
+        },
+        "aria-current": activeId === section_0.id ? "location" : undefined,
+        className: cn("text-left text-[0.8rem] text-muted-foreground transition-colors hover:text-foreground", section_0.nested && "pl-4", activeId === section_0.id && "font-medium text-foreground"),
+        children: section_0.title
+      }, section_0.id);
+      $[8] = activeId;
+      $[9] = pinSection;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    t4 = sections.map(t5);
+    $[4] = activeId;
+    $[5] = pinSection;
+    $[6] = sections;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[11] !== t3 || $[12] !== t4 || $[13] !== title) {
+    t5 = /*#__PURE__*/_jsxs("nav", {
+      "aria-label": title,
+      className: "flex flex-col gap-2 text-sm",
+      children: [t3, t4]
+    });
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = title;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+function _temp(section) {
+  return section.id;
 }
 export { OnThisPage };

package/dist/shell/docs/use-active-section.js

@@ -1,54 +1,56 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 const SMOOTH_SCROLL_MS = 800;
 function isWindowScrolledToBottom() {
-    const pageHeight = document.documentElement.scrollHeight;
-    const canScroll = pageHeight > window.innerHeight + 2;
-    return canScroll && window.innerHeight + window.scrollY >= pageHeight - 2;
+  const pageHeight = document.documentElement.scrollHeight;
+  const canScroll = pageHeight > window.innerHeight + 2;
+  return canScroll && window.innerHeight + window.scrollY >= pageHeight - 2;
 }
 const ACTIVE_LINE_PX = 120;
 function lastSectionAboveLine(ids) {
-    let current = ids[0];
-    for (const id of ids) {
-        const top = document.getElementById(id)?.getBoundingClientRect().top;
-        if (top !== undefined && top <= ACTIVE_LINE_PX) {
-            current = id;
-        }
+  let current = ids[0];
+  for (const id of ids) {
+    const top = document.getElementById(id)?.getBoundingClientRect().top;
+    if (top !== undefined && top <= ACTIVE_LINE_PX) {
+      current = id;
     }
-    return current;
+  }
+  return current;
 }
 function useActiveSection(sectionIds) {
-    const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
-    const pinnedUntil = useRef(0);
-    const followScroll = useCallback((id) => {
-        if (Date.now() > pinnedUntil.current) {
-            setActiveId(id);
+  const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
+  const pinnedUntil = useRef(0);
+  const followScroll = useCallback(id => {
+    if (Date.now() > pinnedUntil.current) {
+      setActiveId(id);
+    }
+  }, []);
+  const pinSection = useCallback(id => {
+    pinnedUntil.current = Date.now() + SMOOTH_SCROLL_MS;
+    setActiveId(id);
+  }, []);
+  const idsKey = sectionIds.join(" ");
+  useEffect(() => {
+    const ids = idsKey.split(" ").filter(Boolean);
+    let frame = 0;
+    const updateActiveSection = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const lastId = ids.at(-1);
+        const current = isWindowScrolledToBottom() && lastId ? lastId : lastSectionAboveLine(ids);
+        if (current) {
+          followScroll(current);
         }
-    }, []);
-    const pinSection = useCallback((id) => {
-        pinnedUntil.current = Date.now() + SMOOTH_SCROLL_MS;
-        setActiveId(id);
-    }, []);
-    const idsKey = sectionIds.join(" ");
-    useEffect(() => {
-        const ids = idsKey.split(" ").filter(Boolean);
-        let frame = 0;
-        const updateActiveSection = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(() => {
-                const lastId = ids.at(-1);
-                const current = isWindowScrolledToBottom() && lastId ? lastId : lastSectionAboveLine(ids);
-                if (current) {
-                    followScroll(current);
-                }
-            });
-        };
-        updateActiveSection();
-        window.addEventListener("scroll", updateActiveSection, { passive: true });
-        return () => {
-            cancelAnimationFrame(frame);
-            window.removeEventListener("scroll", updateActiveSection);
-        };
-    }, [idsKey, followScroll]);
-    return [activeId, pinSection];
+      });
+    };
+    updateActiveSection();
+    window.addEventListener("scroll", updateActiveSection, {
+      passive: true
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", updateActiveSection);
+    };
+  }, [idsKey, followScroll]);
+  return [activeId, pinSection];
 }
 export { useActiveSection };

package/dist/shell/navigation/app-sidebar.js

@@ -1,12 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar, SidebarRail } from "../../layout/sidebar/sidebar.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../../layout/sidebar/sidebar-menu.js";
-import { SidebarContent, SidebarFooter, SidebarHeader, } from "../../layout/sidebar/sidebar-sections.js";
+import { SidebarContent, SidebarFooter, SidebarHeader } from "../../layout/sidebar/sidebar-sections.js";
 import { NavGroup } from "./nav-group.js";
-function BrandLink({ brand, Link }) {
-    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { size: "lg", asChild: true, children: _jsxs(Link, { href: brand.href, children: [_jsx("span", { "data-slot": "app-brand-icon", className: "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg border border-line bg-ghost", children: brand.icon }), _jsxs("span", { className: "grid flex-1 text-left leading-tight", children: [_jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.title }), brand.subtitle && (_jsx("span", { className: "truncate text-xs text-soft", children: brand.subtitle }))] })] }) }) }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function BrandLink({
+  brand,
+  Link
+}) {
+  return /*#__PURE__*/_jsx(SidebarMenu, {
+    children: /*#__PURE__*/_jsx(SidebarMenuItem, {
+      children: /*#__PURE__*/_jsx(SidebarMenuButton, {
+        size: "lg",
+        asChild: true,
+        children: /*#__PURE__*/_jsxs(Link, {
+          href: brand.href,
+          children: [/*#__PURE__*/_jsx("span", {
+            "data-slot": "app-brand-icon",
+            className: "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg border border-line bg-ghost",
+            children: brand.icon
+          }), /*#__PURE__*/_jsxs("span", {
+            className: "grid flex-1 text-left leading-tight",
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "truncate text-sm font-semibold tracking-tight",
+              children: brand.title
+            }), brand.subtitle && /*#__PURE__*/_jsx("span", {
+              className: "truncate text-xs text-soft",
+              children: brand.subtitle
+            })]
+          })]
+        })
+      })
+    })
+  });
 }
-function AppSidebar({ brand, groups, bottomItems, footer, activeHref, linkComponent = "a", }) {
-    return (_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { className: "h-14 justify-center border-b border-line py-0", children: _jsx(BrandLink, { brand: brand, Link: linkComponent }) }), _jsxs(SidebarContent, { children: [groups.map((group) => (_jsx(NavGroup, { group: group, activeHref: activeHref, Link: linkComponent }, group.label))), bottomItems && bottomItems.length > 0 && (_jsx(NavGroup, { group: { label: "", items: bottomItems }, activeHref: activeHref, Link: linkComponent, className: "mt-auto" }))] }), footer && _jsx(SidebarFooter, { className: "border-t border-line", children: footer }), _jsx(SidebarRail, {})] }));
+function AppSidebar({
+  brand,
+  groups,
+  bottomItems,
+  footer,
+  activeHref,
+  linkComponent = "a"
+}) {
+  return /*#__PURE__*/_jsxs(Sidebar, {
+    collapsible: "icon",
+    children: [/*#__PURE__*/_jsx(SidebarHeader, {
+      className: "h-14 justify-center border-b border-line py-0",
+      children: /*#__PURE__*/_jsx(BrandLink, {
+        brand: brand,
+        Link: linkComponent
+      })
+    }), /*#__PURE__*/_jsxs(SidebarContent, {
+      children: [groups.map(group => /*#__PURE__*/_jsx(NavGroup, {
+        group: group,
+        activeHref: activeHref,
+        Link: linkComponent
+      }, group.label)), bottomItems && bottomItems.length > 0 && /*#__PURE__*/_jsx(NavGroup, {
+        group: {
+          label: "",
+          items: bottomItems
+        },
+        activeHref: activeHref,
+        Link: linkComponent,
+        className: "mt-auto"
+      })]
+    }), footer && /*#__PURE__*/_jsx(SidebarFooter, {
+      className: "border-t border-line",
+      children: footer
+    }), /*#__PURE__*/_jsx(SidebarRail, {})]
+  });
 }
 export { AppSidebar };