@onnechat/ui 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1908,6 +1908,7 @@ var MIN_SIDEBAR_WIDTH = 16 * 16;
 var MAX_SIDEBAR_WIDTH = 20 * 16;
 var COLLAPSE_THRESHOLD = MIN_SIDEBAR_WIDTH / 2;
 var SIDEBAR_COOKIE_TTL_DAYS = 365;
+var SIDEBAR_ANIMATION_DURATION = "duration-300";
 var SIDEBAR_SIDE_CONFIG = {
   left: {
     defaultWidth: SIDEBAR_WIDTH,
@@ -2231,7 +2232,8 @@ function SidebarSidePanel({
             "aria-hidden": true,
             "data-slot": config.gapSlot,
             className: cn(
-              "relative shrink-0 bg-transparent transition-[width] duration-300",
+              "relative shrink-0 bg-transparent transition-[width]",
+              SIDEBAR_ANIMATION_DURATION,
               state === "expanded" ? side === "left" ? "w-(--left-sidebar-width)" : "w-(--right-sidebar-width)" : "w-0"
             )
           }
@@ -2241,7 +2243,8 @@ function SidebarSidePanel({
           {
             "data-slot": config.containerSlot,
             className: cn(
-              "fixed z-10 hidden overflow-clip bg-sidebar transition-[width] duration-300 lg:flex",
+              "fixed z-10 hidden overflow-clip bg-sidebar transition-[width] lg:flex",
+              SIDEBAR_ANIMATION_DURATION,
               side === "left" ? "left-0 w-(--left-sidebar-width) group-data-[collapsible=offcanvas]:w-0 justify-end" : "right-0 w-(--right-sidebar-width) group-data-[collapsible=offcanvas]:w-0"
             ),
             style: {
@@ -2281,7 +2284,8 @@ function SidebarSidePanel({
               "after:absolute after:inset-y-0 after:w-1 after:rounded-full after:transition-transform",
               "hover:after:translate-x-0 hover:after:bg-sidebar-border",
               "outline-none focus-visible:ring-ring focus-visible:ring-2 focus-visible:border-ring bg-transparent!",
-              side === "left" ? "left-(--left-sidebar-width) group-data-[collapsible=offcanvas]:left-0 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2 transition-[left,transform] duration-300" : "right-(--right-sidebar-width) group-data-[collapsible=offcanvas]:right-0 translate-x-1/2 after:right-1/2 after:translate-x-1/2 transition-[right,transform] duration-300",
+              side === "left" ? "left-(--left-sidebar-width) group-data-[collapsible=offcanvas]:left-0 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2 transition-[left,transform]" : "right-(--right-sidebar-width) group-data-[collapsible=offcanvas]:right-0 translate-x-1/2 after:right-1/2 after:translate-x-1/2 transition-[right,transform]",
+              SIDEBAR_ANIMATION_DURATION,
               isDragging && "after:translate-x-0 after:bg-sidebar-border"
             )
           }
@@ -2741,6 +2745,8 @@ function AppShellHeader({
   title,
   actions,
   user,
+  leftSidebarTrigger,
+  rightSidebarTrigger,
   leftSidebarToggleLabel = "Toggle left sidebar",
   rightSidebarToggleLabel = "Toggle right sidebar",
   mobileActionsClassName,
@@ -2748,8 +2754,10 @@ function AppShellHeader({
 }) {
   const leftSidebar = React9.useContext(AppShellLeftSidebarContext);
   const rightSidebar = React9.useContext(AppShellRightSidebarContext);
+  const resolvedLeftTrigger = leftSidebarTrigger === void 0 ? leftSidebar && /* @__PURE__ */ jsx24(AppShellLeftSidebarTrigger, { label: leftSidebarToggleLabel }) : leftSidebarTrigger;
+  const resolvedRightTrigger = rightSidebarTrigger === void 0 ? rightSidebar && /* @__PURE__ */ jsx24(AppShellRightSidebarTrigger, { label: rightSidebarToggleLabel }) : rightSidebarTrigger;
   return /* @__PURE__ */ jsxs11("div", { "data-slot": "app-shell-header", className: cn("contents", className), ...props, children: [
-    /* @__PURE__ */ jsxs11("div", { className: "lg:hidden flex items-center justify-between gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 glass-dashboard-header max-lg:sticky top-(--announcement-height,0px) z-50 transition-all max-lg:border-b max-lg:border-border/70", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "lg:hidden flex items-center justify-between gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 glass-dashboard-header max-lg:sticky top-[calc(var(--announcement-height,0px)_+_var(--inset-top-height,0px))] z-50 transition-colors max-lg:border-b max-lg:border-border/70", children: [
       /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
         logo && /* @__PURE__ */ jsx24("div", { className: "shrink-0 active:scale-99", children: logo }),
         /* @__PURE__ */ jsx24("div", { className: "flex min-h-7 min-w-0 flex-1 items-center overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "flex min-w-0 flex-1 items-center", children: title }) })
@@ -2757,11 +2765,11 @@ function AppShellHeader({
       /* @__PURE__ */ jsx24("div", { className: cn("flex gap-2 empty:hidden", mobileActionsClassName), children: actions }),
       user
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "max-lg:hidden sticky top-(--announcement-height,0px) z-50 w-full flex min-w-0 items-center gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 border-b glass-dashboard-header border-border/70 transition-colors lg:rounded-t-2xl", children: [
-      leftSidebar && /* @__PURE__ */ jsx24(AppShellLeftSidebarTrigger, { label: leftSidebarToggleLabel }),
+    /* @__PURE__ */ jsxs11("div", { className: "max-lg:hidden sticky top-[calc(var(--announcement-height,0px)_+_var(--inset-top-height,0px))] z-50 w-full flex min-w-0 items-center gap-2 md:gap-4 p-4 min-h-16 h-full max-h-16 border-b glass-dashboard-header border-border/70 transition-colors lg:rounded-t-2xl", children: [
+      resolvedLeftTrigger,
       /* @__PURE__ */ jsx24("div", { className: "flex min-h-7 min-w-0 flex-1 items-center overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "flex min-w-0 flex-1 items-center", children: title }) }),
       /* @__PURE__ */ jsx24("div", { className: "relative z-1 grid grid-flow-col shrink-0 ml-auto gap-2 md:gap-4", children: /* @__PURE__ */ jsx24("div", { className: "min-w-0 flex items-center gap-2 empty:hidden", children: actions }) }),
-      rightSidebar && /* @__PURE__ */ jsx24(AppShellRightSidebarTrigger, { label: rightSidebarToggleLabel })
+      resolvedRightTrigger
     ] })
   ] });
 }
@@ -2823,49 +2831,136 @@ function AppShellInset({
   children,
   loading = false,
   spacing = 24,
+  top,
+  bottom,
   ...props
 }) {
   const leftSidebar = React9.useContext(AppShellLeftSidebarContext);
   const rightSidebar = React9.useContext(AppShellRightSidebarContext);
   const hasSidebar = Boolean(leftSidebar || rightSidebar);
-  return /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      "data-slot": "app-shell-inset",
-      style: {
-        "--sidebar-spacing": spacing,
-        ...style
-      },
-      className: cn(
-        "relative flex w-full min-h-full flex-1 flex-col transition-[margin] duration-300",
-        // The inset chrome (margins + rounding) only exists when at least one
-        // sidebar provider frames the page; each margin collapses against the
-        // side whose sidebar is expanded.
-        hasSidebar && "lg:m-2 lg:rounded-2xl",
-        leftSidebar?.state === "expanded" && "lg:ml-0",
-        rightSidebar?.state === "expanded" && "lg:mr-0",
-        loading && "min-h-0 overflow-hidden",
-        "max-lg:bg-dashboard-background! bg-dashboard-background",
-        "[--calculated-spacing:--spacing(var(--sidebar-spacing))]",
-        // `isolate` keeps composited children (e.g. the glass header's
-        // backdrop-filter) inside the rounded overflow clip on all engines.
-        "w-full min-w-0 lg:overflow-clip isolate",
-        "max-lg:pb-(--calculated-spacing)",
-        className
-      ),
-      ...props,
-      children: [
-        loading && /* @__PURE__ */ jsx24(AppShellLoading, {}),
-        /* @__PURE__ */ jsx24(
-          "div",
-          {
-            "aria-hidden": loading || void 0,
-            className: cn(loading ? "hidden" : "contents"),
-            children
-          }
-        )
-      ]
+  const columnRef = React9.useRef(null);
+  const topRef = React9.useRef(null);
+  React9.useLayoutEffect(() => {
+    const column = columnRef.current;
+    if (!column) return;
+    const el = topRef.current;
+    if (!top || !el) {
+      column.style.setProperty("--inset-top-height", "0px");
+      return;
     }
+    const update = () => {
+      column.style.setProperty(
+        "--inset-top-height",
+        `${el.getBoundingClientRect().height}px`
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      column.style.setProperty("--inset-top-height", "0px");
+    };
+  }, [top]);
+  const pinnedRowBackground = cn(
+    "bg-dashboard-background",
+    hasSidebar && "lg:bg-sidebar"
+  );
+  return (
+    // Transparent column that owns the inset's flex cell so pinned rows can
+    // live outside the rounded panel, over the shell background. The page
+    // keeps its document scroll: the sticky rows hold their screen position
+    // while the panel in between slides normally.
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref: columnRef,
+        "data-slot": "app-shell-inset-column",
+        className: "relative flex w-full min-w-0 min-h-full flex-1 flex-col",
+        children: [
+          top ? /* @__PURE__ */ jsx24(
+            "div",
+            {
+              ref: topRef,
+              "data-slot": "app-shell-inset-top",
+              className: cn(
+                "sticky top-(--announcement-height,0px) z-40 shrink-0",
+                // On mobile the row and the panel share the same background —
+                // without a divider, scrolling content is chopped at an
+                // invisible line. Desktop gets a tonal boundary from bg-sidebar.
+                "max-lg:border-b max-lg:border-border/70",
+                pinnedRowBackground
+              ),
+              children: top
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              "data-slot": "app-shell-inset",
+              style: {
+                "--sidebar-spacing": spacing,
+                ...style
+              },
+              className: cn(
+                // No `w-full` here: the column's cross-axis stretch sizes the panel
+                // to its width MINUS the side margins below — `w-full` + `mr-2`
+                // would overflow the column by the margin, gluing the panel to the
+                // viewport edge (and clipping its rounded corner) whenever the
+                // right sidebar is collapsed.
+                "relative flex flex-1 flex-col transition-[margin]",
+                SIDEBAR_ANIMATION_DURATION,
+                // The inset chrome (margins + rounding) only exists when at least one
+                // sidebar provider frames the page; each margin collapses against the
+                // side whose sidebar is expanded.
+                hasSidebar && "lg:m-2 lg:rounded-2xl",
+                leftSidebar?.state === "expanded" && "lg:ml-0",
+                rightSidebar?.state === "expanded" && "lg:mr-0",
+                loading && "min-h-0 overflow-hidden",
+                "max-lg:bg-dashboard-background! bg-dashboard-background",
+                "[--calculated-spacing:--spacing(var(--sidebar-spacing))]",
+                // `isolate` keeps composited children (e.g. the glass header's
+                // backdrop-filter) inside the rounded overflow clip on all engines.
+                "min-w-0 isolate lg:overflow-clip",
+                "max-lg:pb-(--calculated-spacing)",
+                className
+              ),
+              ...props,
+              children: [
+                loading && /* @__PURE__ */ jsx24(AppShellLoading, {}),
+                /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    "aria-hidden": loading || void 0,
+                    className: cn(loading ? "hidden" : "contents"),
+                    children
+                  }
+                )
+              ]
+            }
+          ),
+          bottom ? /* @__PURE__ */ jsx24(
+            "div",
+            {
+              "data-slot": "app-shell-inset-bottom",
+              className: cn(
+                "sticky bottom-0 z-40 shrink-0",
+                // Divider against the same-background panel on mobile (mirrors
+                // the mobile Header's border-b).
+                "max-lg:border-t max-lg:border-border/70",
+                // The floating mobile Navbar (fixed bottom, z-50, ~100px tall)
+                // would bury and cover this row — when a Navbar is mounted in
+                // the shell, the row yields to it below `lg`.
+                "max-lg:[[data-slot=app-shell]:has([data-slot=app-shell-navbar])_&]:hidden",
+                pinnedRowBackground
+              ),
+              children: bottom
+            }
+          ) : null
+        ]
+      }
+    )
   );
 }
 function AppShellLoading({ className, ...props }) {
@@ -15027,6 +15122,7 @@ export {
   TextShimmer,
   Textarea,
   Toaster,
+  Tooltip,
   TrackerChart,
   VideoPlayer,
   VideoPlayerContent,