@goplusvn/core 0.1.11 → 0.1.13

package/src/ui/primitives/client.ts

@@ -21,6 +21,8 @@ export * from "./sticky-layout";
 export * from "./prefetch-link";
 export * from "./dynamic-icon";
 export * from "./input-number";
+export * from "./body-lock-guard";
+export * from "./body-lock";
 
 // Feedback Client Components
 export * from "../feedback/sheet";

package/src/ui/primitives/sidebar.tsx

@@ -218,10 +218,16 @@ const Sidebar = React.forwardRef<
     }, [hoverExpandEnabled, setHoverOpen]);
 
     if (collapsible === "none") {
+      // A non-collapsing sidebar is permanently EXPANDED, so it must use the
+      // expanded surface (bg-background / text-foreground), NOT the deep
+      // `bg-sidebar` colour. On a coloured sidebar (e.g. the navy default) the
+      // old `bg-sidebar text-sidebar-foreground` left the group labels + active
+      // item — which are `text-primary` — at ~1.9:1 contrast (unreadable). This
+      // matches the expanded state of the collapsible sidebar (labels-on-light).
       return (
         <div
           className={cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-(--sidebar-width) flex-col border-r bg-background text-foreground",
             className,
           )}
           ref={ref}
@@ -294,7 +300,7 @@ const Sidebar = React.forwardRef<
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
             // Adjustments for collapsible=icon
             variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_8px)] group-data-[collapsible=icon]:px-2.5"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_8px)] group-data-[collapsible=icon]:px-1"
               : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[collapsible=icon]:border-r group-data-[collapsible=icon]:px-0",
             // Hover expand - override icon width to full width on hover
             "group-data-[hover-expanded=true]:!w-(--sidebar-width) group-data-[hover-expanded=true]:shadow-xl group-data-[hover-expanded=true]:z-[100]",
@@ -310,7 +316,12 @@ const Sidebar = React.forwardRef<
               "group-data-[state=collapsed]:bg-sidebar group-data-[state=collapsed]:border-border/50",
               "group-data-[state=expanded]:bg-background group-data-[state=expanded]:border-border/50",
               "group-data-[hover-expanded=true]:!bg-background group-data-[hover-expanded=true]:!border-border/50",
-              "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+              // Floating & inset: the sidebar is a soft floating panel. Round
+              // ALL corners (rounded-xl) so the top-right corner where it meets
+              // the header reads as a soft curve, not a hard 90° junction. Inset
+              // previously had no radius (sharp navy block) — now matches.
+              "group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+              "group-data-[variant=inset]:rounded-xl group-data-[variant=inset]:border group-data-[variant=inset]:border-sidebar-border group-data-[variant=inset]:shadow",
             )}
           >
             {children}
@@ -386,7 +397,17 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex min-h-svh flex-1 flex-col bg-muted/40 transition-[margin] duration-200 ease-linear",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        // Inset: content is a card floating with a uniform m-2 gap on ALL sides
+        // (no ml-0 override) so there's a small gap between the sidebar and the
+        // content/header instead of them touching.
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        // Floating: the content is full-bleed (no card), and its LEFT edge is
+        // the side that meets the floating sidebar. Give it a small left gap
+        // (ml-2) so it doesn't touch the sidebar, and round both left corners
+        // (top-left clips the sticky header, bottom-left clips the footer via
+        // overflow-hidden) so the content hugs the floating sidebar with soft
+        // curves instead of hard 90° corners. Right edge stays flush.
+        "md:peer-data-[variant=floating]:ml-2 md:peer-data-[variant=floating]:rounded-l-xl",
         className,
       )}
       {...props}

package/src/ui/primitives/use-release-stuck-body-lock.ts

@@ -2,28 +2,21 @@
 
 import * as React from "react";
 
+import { releaseStuckBodyLock } from "./body-lock";
+
 /**
- * Lưới an toàn cho "lỗi conflict event kinh điển": Radix (Dialog/AlertDialog/Sheet
- * + Select/Combobox/Popover lồng bên trong) đôi khi để sót `pointer-events: none`
- * / scroll-lock trên <body> sau khi đóng, khiến TOÀN trang không click được.
+ * Gọi trong *Content của mỗi primitive overlay (Dialog/Sheet/AlertDialog…). Content chỉ
+ * mount khi overlay mở; khi nó unmount (đã đóng) ta gỡ khoá body NẾU còn sót — nhưng chỉ
+ * khi không còn modal nào đang mở (xem {@link releaseStuckBodyLock}).
  *
- * Gọi hook này trong *Content của mỗi primitive overlay. Content chỉ mount khi
- * overlay mở; khi nó unmount (đã đóng) ta gỡ khoá — nhưng CHỈ khi không còn lớp
- * dialog/popover nào đang mở, để không phá modal khác đang chồng lên.
+ * Đây là lớp gỡ khoá TỨC THÌ tại thời điểm đóng; {@link BodyLockGuard} là lưới an toàn
+ * toàn cục bao quát các trường hợp còn lại.
  */
 export function useReleaseStuckBodyLock() {
   React.useEffect(() => {
     return () => {
-      setTimeout(() => {
-        const hasOpenLayer = document.querySelector(
-          '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"], [data-radix-popper-content-wrapper]',
-        );
-        if (!hasOpenLayer && document.body.style.pointerEvents === "none") {
-          document.body.style.pointerEvents = "";
-          document.body.style.overflow = "";
-          document.body.removeAttribute("data-scroll-locked");
-        }
-      }, 0);
+      // Đợi một nhịp để Radix chạy xong phần dọn dẹp đồng bộ của nó trước.
+      setTimeout(releaseStuckBodyLock, 0);
     };
   }, []);
 }