torch-glare 2.5.3 → 2.5.5

package/apps/lib/components/Popover.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
-import React, { useEffect, useRef } from "react";
+import React, { cloneElement, isValidElement, useEffect, useRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Slot } from "@radix-ui/react-slot";
 import { Themes } from "../utils/types";
 
+
 interface LocalPopOverProps extends VariantProps<typeof popoverStyles> {
   variant?: "SystemStyle" | "PresentationStyle";
   className?: string;
@@ -32,18 +33,19 @@ PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
-    LocalPopOverProps & {
-      theme?: Themes;
-    }
+  LocalPopOverProps & {
+    theme?: Themes;
+  }
 >(
   (
     {
       className,
       align = "center",
       sideOffset = 4,
-      variant = "SystemStyle",
+      variant = "PresentationStyle",
       overlayBlur = false,
       theme,
+      children,
       ...props
     },
     ref,
@@ -58,7 +60,9 @@ const PopoverContent = React.forwardRef<
             sideOffset={sideOffset}
             className={cn(popoverStyles({ variant, overlayBlur }), className)}
             {...props}
-          />
+          >
+            {children}
+          </PopoverPrimitive.Content>
         </div>
       ) : (
         <PopoverPrimitive.Content
@@ -68,7 +72,9 @@ const PopoverContent = React.forwardRef<
           sideOffset={sideOffset}
           className={cn(popoverStyles({ variant, overlayBlur }), className)}
           {...props}
-        />
+        >
+          {children}
+        </PopoverPrimitive.Content>
       )}
     </PopoverPrimitive.Portal>
   ),
@@ -84,7 +90,7 @@ interface Props<T extends React.ElementType = "li">
 
 // Define the PopoverItem component with a generic type parameter
 const PopoverItem = <T extends React.ElementType = "li">({
-  variant = "SystemStyle",
+  variant = "Default",
   size = "M",
   asChild,
   className,
@@ -103,72 +109,108 @@ const PopoverItem = <T extends React.ElementType = "li">({
     }
   }, [active]);
 
+  const itemClassName = cn(PopoverItemStyles({ variant, size, active }), className);
+
+  // The styles are a two-layer chip (see `PopoverItemStyles`): this element is the container and
+  // the inner div is the row that lights up, which every `[&>div]:` rule targets. It therefore has
+  // to exist in both branches.
+  if (asChild && isValidElement(children)) {
+    // Slot merges the item's props onto the consumer's element (e.g. a Link), so the row div has to
+    // be injected as that element's child — wrapping the Link instead would move the class onto the
+    // wrapper and leave the anchor nested inside the item rather than being it.
+    const child = children as React.ReactElement<{ children?: React.ReactNode }>;
+    return (
+      <Slot className={itemClassName} ref={ref as React.Ref<HTMLElement>}>
+        {cloneElement(child, {}, <div>{child.props.children}</div>)}
+      </Slot>
+    );
+  }
+
   return (
     <Component
       {...(props as React.ComponentPropsWithoutRef<T>)} // Spread the props dynamically
-      className={cn(
-        PopoverItemStyles({
-          variant,
-          size,
-          active,
-        }),
-        className,
-      )}
-      /// <reference path="" />
+      className={itemClassName}
       ref={ref}
     >
-      {children}
+      <div>{children}</div>
     </Component>
   );
 };
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
 
+
 const PopoverItemStyles = cva(
+  // `MenuItemStyles` (ContextMenu/DropdownMenu) minus its grey wrapper fill: same 2px gutter, same
+  // inner `<div>` that lights up on hover/focus, but the row itself stays transparent on the panel.
+  // `PopoverItem` always renders that inner div, including through `asChild`.
   [
-    "text-content-presentation-action-light-primary",
+    "text-content-presentation-global-primary-light typography-body-medium-regular",
     "outline-none",
     "border",
     "border-transparent",
     "flex w-full",
-    "gap-[8px]",
+    "shrink-0", // keep full row height so the popover scrolls instead of squishing
     "items-center",
     "justify-start",
     "text-overflow",
     "overflow-hidden",
-    "px-[12px]",
-    "rounded-[4px]",
+    "p-[2px]",
     "transition-all",
+    // No `bg-[rgba(184,192,204,0.36)]` here, unlike the menu's item: a popover row sits directly on
+    // the panel with no grey container behind it. Everything else is the menu's rule set.
     "ease-in-out",
     "duration-300",
+    "[&>div]:flex",
+    "[&>div]:px-[12px]",
+    "[&>div]:py-[4px]",
+    "[&>div]:gap-2",
+    "[&>div]:w-full",
+    "[&>div]:rounded-[8px]",
+    "[&>div]:items-center",
+    "group",
   ],
   {
     variants: {
       variant: {
+        // The menu marks its keyboard highlight with Radix's `data-highlighted` and its disabled
+        // rows with `data-disabled`; a PopoverItem is a plain <button>, so those become `:focus`
+        // and `:disabled` here. Everything else is the menu's rule set verbatim.
         Default: [
-          "text-content-presentation-action-light-primary",
-          "bg-background-presentation-action-dropdown-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-global-primary-inverse",
-          "disabled:text-content-presentation-state-disabled",
-          "disabled:bg-white-00",
+          "text-content-presentation-global-primary-light",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-black-1000",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-black-1000",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         Warning: [
-          "text-content-presentation-state-information",
-          "hover:bg-background-presentation-state-information-primary",
-          "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "hover:text-content-presentation-global-primary-inverse",
+          "text-blue-sparkle-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-blue-sparkle-700",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-blue-sparkle-700",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         Negative: [
-          "text-content-presentation-state-negative",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "active:text-content-presentation-state-negative",
+          "text-medium-red-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-medium-red-600",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-medium-red-600",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         SystemStyle: [
           "bg-background-system-body-primary",
@@ -198,13 +240,13 @@ const PopoverItemStyles = cva(
           "text-content-presentation-action-light-primary",
         ],
       },
-
-      defaultVariants: {
-        variant: "Default",
-        size: "M",
-        active: false,
-        disabled: false,
-      },
+    },
+    // Same misplacement as `popoverStyles` — a sibling of `variants`, not one of them.
+    defaultVariants: {
+      variant: "Default",
+      size: "M",
+      active: false,
+      disabled: false,
     },
     compoundVariants: [
       {
@@ -218,7 +260,10 @@ const PopoverItemStyles = cva(
 
 const popoverStyles = cva(
   [
-    "p-1 max-h-[200px] z-[1000] shrink-0",
+    // Cap at 200px but never exceed the room Radix actually has after collision handling, so a
+    // popover opened near a screen edge shrinks and scrolls instead of being cut off. Consumers that
+    // supply their own inner scroller override this with an inline `maxHeight`, which beats the class.
+    "p-1 max-h-[min(200px,var(--radix-popover-content-available-height,100vh))] z-[1000] shrink-0",
     "rounded-[8px]",
     "border",
     "min-w-[240px]",
@@ -239,22 +284,29 @@ const popoverStyles = cva(
           "bg-background-system-body-primary",
           "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
         ],
-        // Adopts the DropdownMenu surface (`menuContentStyles`): backdrop-blurred, borderless
-        // rounded-14 panel with a soft ambient shadow — keeping the original background color.
+        // Figma `Dropdown-Menu-1.0` (1735:159246) — the same surface `menuContentStyles` renders,
+        // so a popover and a dropdown menu are indistinguishable panels.
         PresentationStyle: [
-          "border-transparent",
+          // `border-0`, not `border-transparent`: the base sets `border`, and with `border-box`
+          // that 1px sits on top of the 4px padding, making the panel 2px wider than the design.
+          "border-0",
           "rounded-[14px]",
           "backdrop-blur-[21px]",
-          "bg-background-presentation-form-base",
+          // The design's fill is a raw `rgba(61,64,69,0.72)` with no Figma variable behind it, so it
+          // is spelled out exactly as DropdownMenu/ContextMenu already spell it. It has to be
+          // translucent: over the previous opaque `form-base` the backdrop-blur painted nothing.
+          "bg-[rgba(61,64,69,0.72)]",
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
       overlayBlur: {
         true: ["h-fit"],
       },
-      defaultVariants: {
-        variant: "PresentationStyle",
-      },
+    },
+    // Was nested inside `variants`, where cva reads it as a variant group called
+    // "defaultVariants" and no default is ever applied.
+    defaultVariants: {
+      variant: "PresentationStyle",
     },
   },
 );

package/apps/lib/components/SearchableSelect.tsx

@@ -6,7 +6,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { useClickOutside } from "../hooks/useClickOutside";
 // Reuse the exact menu-item styling so rows look identical to DropdownMenuItem.
 import { MenuItemStyles } from "./DropdownMenu";
@@ -189,7 +190,11 @@ export function SearchableSelect({
             setDropdownWidth(e.currentTarget.offsetWidth)
           }
           // Trigger styling mirrors the `Select` component's trigger so the two read identically.
-          className={cn("flex w-full items-center gap-1 rounded-[6px] p-[4px]", className)}
+          // `p-[3px]` so the end button lands 4px from the outer edge once the 1px border is added.
+          // The old `rounded-[6px]` here was dead but dangerous: `twMerge` cannot dedupe it against
+          // the Group's `rounded-radius-xl` (custom scale key vs arbitrary value), so both shipped
+          // and the 12px only won on CSS source order.
+          className={cn("flex w-full items-center gap-1 p-[3px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <Input
@@ -212,10 +217,10 @@ export function SearchableSelect({
               "!h-[24px]": size === "M",
             })}
           />
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
             onMouseDown={(e: React.MouseEvent) => {
@@ -227,11 +232,7 @@ export function SearchableSelect({
                 setOpen(true);
               }
             }}
-            className={cn(
-              // Same box + open-state fill as the Select trigger's chevron.
-              "h-[32px] w-[32px] shrink-0",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
@@ -239,7 +240,7 @@ export function SearchableSelect({
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </PopoverTrigger>
 
@@ -248,19 +249,23 @@ export function SearchableSelect({
         data-theme={theme}
         ref={popoverContentRef}
         variant={variant}
-        style={{ width: dropdownWidth || undefined }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onWheel={(e) => e.stopPropagation()}
         className={cn(menuContentStyles({ variant }))}
+        // The panel carries the cap — `maxVisibleItems` rows, but never more than the room Radix has
+        // on screen. Inline beats the `max-h-[…]` class popoverStyles contributes.
+        style={{
+          width: dropdownWidth || undefined,
+          maxHeight: `min(${maxVisibleItems * ROW_HEIGHT}px, var(--radix-popover-content-available-height, 100vh))`,
+        }}
       >
-        {/* Dedicated scroll viewport: caps height to ~maxVisibleItems rows and
-            scrolls the rest. Keeping it separate from the popover padding avoids
-            flex/overflow conflicts that block scrolling. */}
+        {/* Dedicated scroll viewport. The height cap lives on the panel above; this just fills what is
+            left and scrolls. `min-h-0` is required — a flex item will not shrink below its content, so
+            without it the list grew past the panel and was clipped instead of scrolling. */}
         <div
           ref={scrollRef}
           onScroll={handleScroll}
-          className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
-          style={{ maxHeight: maxVisibleItems * ROW_HEIGHT }}
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
         >
           {filteredOptions.length > 0 && (
             // Boxed group container — matches the DropdownMenu's auto-grouped look.

package/apps/lib/components/SearchableTree.tsx

@@ -5,7 +5,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { useClickOutside } from "../hooks/useClickOutside";
 
 /**
@@ -71,6 +72,8 @@ interface Props<T> {
    */
   selectableFolders?: boolean;
   /** Max height (px) of the scrollable tree body before it scrolls (default 320). */
+  /** Height cap for the scrolling body, in px. The panel never exceeds this, nor the room Radix
+   *  has on screen — past it the tree scrolls inside the panel. Default 200. */
   maxBodyHeight?: number;
 
   // --- Async (optional; static `nodes` still works) ---
@@ -111,7 +114,7 @@ export function SearchableTree<T>({
   className,
   defaultExpanded = true,
   selectableFolders = false,
-  maxBodyHeight = 320,
+  maxBodyHeight = 200,
   filterClientSide = true,
   onSearchChange,
   searchDebounceMs = 300,
@@ -236,7 +239,8 @@ export function SearchableTree<T>({
           onFocus={(e: React.FocusEvent<HTMLDivElement>) =>
             setDropdownWidth(e.currentTarget.offsetWidth)
           }
-          className={cn("flex w-full items-center gap-1 p-1", className)}
+          // 3px + the 1px border = Figma's 4px from the field's outer edge.
+          className={cn("flex w-full items-center gap-1 p-[3px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           {/* The field itself is the search input — typing filters the tree. */}
@@ -262,10 +266,10 @@ export function SearchableTree<T>({
               "!h-[24px]": size === "M",
             })}
           />
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
             onMouseDown={(e: React.MouseEvent) => {
@@ -278,18 +282,15 @@ export function SearchableTree<T>({
                 setOpen(true);
               }
             }}
-            className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </PopoverTrigger>
 
@@ -300,16 +301,31 @@ export function SearchableTree<T>({
         variant={variant}
         align="start"
         sideOffset={4}
-        style={{ width: dropdownWidth || undefined }}
+        // The panel owns the height: `maxBodyHeight` at most, and never more than the room Radix has
+        // on screen. Inline beats popoverStyles' `max-h-[…]` class.
+        style={{
+          width: dropdownWidth || undefined,
+          maxHeight: `min(${maxBodyHeight}px, var(--radix-popover-content-available-height, 100vh))`,
+        }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onWheel={(e) => e.stopPropagation()}
-        className="p-0 border-0 bg-transparent shadow-none rounded-[14px] flex flex-col gap-0 overflow-visible"
+        // No `bg-transparent`/`shadow-none`: PopoverContent IS the frosted surface. Forcing it
+        // transparent and moving the glass to the inner div double-blurred (an element with
+        // backdrop-filter forms a backdrop root for its descendants, so the inner one sampled
+        // nothing). `overflow-hidden`, not `overflow-visible` — the list must stay inside the
+        // frosted panel rather than spilling rows over bare page content.
+        className="p-0 border-0 rounded-[14px] flex flex-col gap-0 overflow-hidden"
       >
         {/* SearchResult body — frosted surface holding the "Tree" label + rows. */}
-        <div className="flex w-full items-start">
+        {/* `flex-1 min-h-0 items-stretch`: this wrapper hands the panel's height down to the body.
+            With `items-start` the body sized to its own content and escaped the panel instead. */}
+        <div className="flex w-full flex-1 min-h-0 items-stretch">
           <div
-            className="flex-1 min-w-px overflow-auto scrollbar-hide rounded-[14px] py-[8px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]"
-            style={{ maxHeight: maxBodyHeight }}
+            // Transparent: the frosted surface is the PopoverContent behind it. A second
+            // backdrop-filter here would sample nothing anyway.
+            // The cap now lives on the panel; this fills what is left and scrolls, which needs
+            // `min-h-0` — a flex item will not shrink below its content without it.
+            className="flex-1 min-w-px min-h-0 overflow-auto scrollbar-hide rounded-[14px] p-[4px]"
           >
             {visibleTree.length > 0 ? (
               <div className="flex flex-col gap-[4px]">

package/apps/lib/components/SearchableTreeDialog.tsx

@@ -13,7 +13,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "./Dialog";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 
 /**
  * SearchableTreeDialog — a field that opens a modal Dialog to pick a node from a tree.
@@ -58,6 +59,9 @@ interface Props<T> {
   searchPlaceholder?: string;
   /** Label shown on the dialog's search field. */
   title?: string;
+  /** Height cap for the scrolling body, in px. Also bounded by 55vh so it shrinks on short
+   *  screens. Past it the tree scrolls inside the dialog. Default 200. */
+  maxBodyHeight?: number;
 
   size?: "XS" | "S" | "M";
   variant?: "SystemStyle" | "PresentationStyle";
@@ -108,6 +112,7 @@ export function SearchableTreeDialog<T>({
   placeholder = "Select…",
   searchPlaceholder = "Search…",
   title = "Select an item",
+  maxBodyHeight = 200,
   size = "M",
   variant = "PresentationStyle",
   icon,
@@ -224,7 +229,8 @@ export function SearchableTreeDialog<T>({
           size={size === "XS" ? "S" : size}
           role="button"
           tabIndex={0}
-          className={cn("flex w-full items-center gap-1 p-1 cursor-pointer", className)}
+          // 3px + the 1px border = Figma's 4px from the field's outer edge.
+          className={cn("flex w-full items-center gap-1 p-[3px] cursor-pointer", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <span
@@ -237,24 +243,21 @@ export function SearchableTreeDialog<T>({
           >
             {triggerLabel}
           </span>
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
-            className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </DialogTrigger>
 
@@ -284,7 +287,13 @@ export function SearchableTreeDialog<T>({
         {/* SearchResult.Container — inset 12px each side, tucked under the bar (z-1). */}
         <div className="flex w-full items-start px-[12px]">
           {/* Body — frosted surface that connects to the bar with rounded-bottom. */}
-          <div className="flex-1 min-w-px max-h-[55vh] overflow-auto scrollbar-hide rounded-b-[14px] pt-[8px] pb-[4px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]">
+          <div
+            // `max-h-[55vh]` alone never engaged: at a 900px viewport that is 495px, far more than
+            // the tree needs, so the body simply grew to fit and there was nothing to scroll.
+            // `maxBodyHeight` is the real cap; 55vh still bounds it on short screens.
+            style={{ maxHeight: `min(${maxBodyHeight}px, 55vh)` }}
+            className="flex-1 min-w-px min-h-0 overflow-auto scrollbar-hide rounded-b-[14px] pt-[8px] pb-[4px] px-[4px] bg-[rgba(61,64,69,0.72)] backdrop-blur-[21px] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]"
+          >
             {visibleTree.length > 0 ? (
               <div className="flex flex-col gap-[4px]">
                 {/* "Tree" section label. */}

package/apps/lib/components/SectionBlock.tsx

@@ -71,7 +71,9 @@ const rail = cva("flex w-full min-w-[300px] flex-col items-start", {
   variants: {
     variant: {
       // Hairline between each direct child (form rows).
-      Default: "divide-y divide-gray-300",
+      // `divide-gray-300` was a hardcoded light gray, so in the dark theme every row separator
+      // rendered as a bright rgb(209,213,219) line. The token follows the theme.
+      Default: "divide-y divide-border-presentation-global-primary",
       // The table draws its own row borders — a divide rule would double up on the
       // table / scroller / end-action siblings.
       Table: "",