torch-glare 2.5.4 → 2.5.6

package/apps/lib/components/DropdownMenu.tsx

@@ -70,16 +70,27 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         collisionPadding={collisionPadding}
-        // Cap at maxHeight, but never exceed the space Radix has after collision
-        // handling. The menu scrolls (overflow on the surface) past this height.
+        // Cap at maxHeight, but never exceed the space Radix has after collision handling. The
+        // `100vh` fallback is load-bearing: an undefined var invalidates the whole `min()`, so
+        // `max-height` would resolve to `none` and the panel — which no longer scrolls itself —
+        // would grow unbounded with its rows clipped and unreachable.
         style={{
-          maxHeight: `min(${maxHeight}px, var(--radix-dropdown-menu-content-available-height))`,
+          maxHeight: `min(${maxHeight}px, var(--radix-dropdown-menu-content-available-height, 100vh))`,
           ...style,
         }}
         className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
-        {autoGroup ? autoGroupChildren(children) : children}
+        {/* Dedicated scroll viewport, matching Select's: the cap lives on the panel above, this
+            fills what is left and scrolls. `min-h-0` is what makes it work — a flex item will not
+            shrink below its content, so without it the list grows past the panel and the panel's
+            `overflow-hidden` just clips the rows with no scrollbar.
+
+            `gap-1` is re-declared here because `autoGroupChildren` emits several siblings (a group,
+            a label, a separator…) and this is now the element they are siblings within. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
       </DropdownMenuPrimitive.Content>
     </DropdownMenuPrimitive.Portal>
   ),
@@ -123,18 +134,45 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
     variant?: "PresentationStyle";
     autoGroup?: boolean;
+    maxHeight?: number;
   }
->(({ className, variant = "PresentationStyle", autoGroup = true, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(menuContentStyles({ variant }), className)}
-      {...props}
-    >
-      {autoGroup ? autoGroupChildren(children) : children}
-    </DropdownMenuPrimitive.SubContent>
-  </DropdownMenuPrimitive.Portal>
-));
+>(
+  (
+    {
+      className,
+      variant = "PresentationStyle",
+      autoGroup = true,
+      collisionPadding = 8,
+      maxHeight = 320,
+      // Destructured out of `{...props}` so the spread below cannot clobber the cap. Radix
+      // re-publishes the namespaced available-height var on SubContent, so the same expression
+      // Content uses works here unchanged.
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        collisionPadding={collisionPadding}
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-dropdown-menu-content-available-height, 100vh))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
+        {...props}
+      >
+        {/* Same panel-clips / viewport-scrolls split as Content. A submenu is a peer surface, so it
+            shares the 320px default rather than getting a smaller one of its own. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
+      </DropdownMenuPrimitive.SubContent>
+    </DropdownMenuPrimitive.Portal>
+  ),
+);
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuItem = React.forwardRef<
@@ -456,16 +494,33 @@ export const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-y-auto",
-    "overflow-x-hidden",
+    // The panel clips; the inner viewport below owns scrolling. Height is capped inline on the
+    // Content element from `min(maxHeight, available-height)` — no `max-h-*` class here on
+    // purpose, so the inline value governs.
+    "overflow-hidden",
     // Only animate the OPEN (enter) state. An exit animation on [data-state=closed]
     // holds the old DOM node during close, which breaks the context menu's
     // close/reposition on a second right-click (Radix issue #2572).
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
-    "scrollbar-hide",
     "backdrop-blur-[21px]",
-    "flex gap-1 flex-col",
+    // No `gap` here: the panel has exactly one child (the scroll viewport), so a gap between
+    // siblings has nothing to act on. The 4px between groups/labels lives on that viewport.
+    "flex flex-col",
+    // LOCAL PATCH (Contact Center): this was the ONE portalled surface in the library with no
+    // z-index. Radix portals the panel to <body> and positions it `fixed`, but `z-index: auto`
+    // paints in a LOWER layer than any positive z-index in the same stacking context, whatever
+    // the DOM order — so the library's own `Table` sticky header (`sticky top-0 z-20`,
+    // Table.tsx) painted straight over it. On a DataViews list that header is opaque and sits
+    // exactly where a topbar action menu opens, so the menu vanished entirely.
+    //
+    // The class goes on Content, not on Radix's positioner: Popper reads the content's COMPUTED
+    // z-index and copies it to the wrapper (@radix-ui/react-popper 1.3.7), which is the same
+    // mechanism `Select`'s identical panel already rides on.
+    //
+    // 1000 matches `Select` and `Popover` rather than clearing `z-20` by one, so a menu opened
+    // inside a Drawer or Dialog (both `z-50`) clears those too — the same half of this bug.
+    "z-[1000]",
   ],
   {
     variants: {
@@ -475,9 +530,11 @@ export const menuContentStyles = cva(
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
-      defaultVariants: {
-        variant: "PresentationStyle",
-      },
+    },
+    // Was nested inside `variants`, where cva reads it as a variant group named
+    // "defaultVariants" and no default is ever applied. `menuGroupStyles` below has it right.
+    defaultVariants: {
+      variant: "PresentationStyle",
     },
   },
 );

package/apps/lib/components/FormBuilder/context.ts

@@ -55,6 +55,18 @@ export const useBare = () => useContext(CellContext) !== false;
 /** True only inside a `FormBuilder.Table` cell — drives the control's `onTable` border style. */
 export const useOnTable = () => useContext(CellContext) === "table";
 
+/**
+ * The "(Required)" tag `FieldShell` prints beside a `required` field's label.
+ *
+ * LOCAL PATCH (Contact Center): upstream hardcodes the English literal, so a
+ * localized app cannot translate it. Defaulting to that literal keeps every
+ * existing caller identical; provide the context once near the app root to
+ * localize every field at once. Logged in TORCH-GLARE-FEEDBACK.md — re-apply
+ * after any `npx torch-glare update`.
+ */
+export const RequiredLabelContext = createContext<string>("(Required)");
+export const useRequiredLabel = () => useContext(RequiredLabelContext);
+
 /**
  * Step registry — a `FormRenderer.Step` provides this so the fields rendered inside it can
  * register their `name`, and the stepper validates just those names before advancing. `null`

package/apps/lib/components/FormBuilder/fields/FieldShell.tsx

@@ -14,8 +14,8 @@ import {
 import { FieldSection } from "../../../layouts/FieldSection";
 import { FormField, FormItem, FormControl } from "../../Form";
 import { FieldHint } from "../../FieldHint";
-import { Tooltip } from "../../Tooltip";
-import { useDirection, useStepRegistry, useBare } from "../context";
+import { useDirection, useStepRegistry, useBare, useRequiredLabel } from "../context";
+import type { FieldHintSpec } from "../types";
 
 export interface FieldShellProps {
   name: string;
@@ -26,6 +26,8 @@ export interface FieldShellProps {
   hidden?: boolean;
   /** Force the field's layout direction, overriding the form's `useDirection()` context. */
   direction?: "horizontal" | "vertical" | "flexible";
+  /** Alerts stacked under the validation error. See `FieldHintSpec`. */
+  hints?: FieldHintSpec[];
   /** The input, wired to the react-hook-form field. */
   children: (
     field: ControllerRenderProps<FieldValues, string>,
@@ -47,11 +49,14 @@ export function FieldShell({
   fullWidth,
   hidden,
   direction: directionProp,
+  hints,
   children,
 }: FieldShellProps) {
   const form = useFormContext();
   const bare = useBare();
   const ctxDirection = useDirection();
+  // LOCAL PATCH (Contact Center): upstream hardcodes "(Required)". See context.ts.
+  const requiredLabel = useRequiredLabel();
   // A field may pin its own direction (e.g. RichText forces vertical), else the form's. When
   // neither is set this stays `undefined` — FieldSection then falls back to its responsive
   // `flexible` layout rather than a fixed two-column one.
@@ -75,9 +80,20 @@ export function FieldShell({
   if (hidden) return null;
 
   // Chrome-less mode — a `FormBuilder.Table` cell (`"table"`) or a panel field (`"bare"`).
-  // Render just the control: no FieldSection label/row, and errors surface as a tooltip on the
-  // control rather than a stacked FieldHint, so a row stays one line tall. Step registration
-  // above still applies. The control's border treatment is the caller's call, via `useOnTable`.
+  // Render just the control: no FieldSection label/row, so a row stays one line tall. Step
+  // registration above still applies. The control's border treatment is the caller's call,
+  // via `useOnTable`.
+  //
+  // LOCAL PATCH (Contact Center): the error Tooltip that used to wrap the control is gone.
+  // Upstream bound it to `open={Boolean(fieldError)}`, so it was not a hover tooltip at all — it
+  // was a bubble pinned open for as long as the field was invalid, anchored `top`, which in a
+  // table's first row sat directly on top of the column header. Several invalid cells meant
+  // several permanent bubbles over the header row. Its `TooltipTrigger` also stamped
+  // `aria-label="Open tooltip"` onto EVERY cell wrapper, error or not, so a screen reader
+  // announced every table input that way.
+  //
+  // The controls already signal invalidity themselves (`state="negative"` / `invalid`), so the
+  // red border remains; only the bubble is dropped. Re-apply after any `npx torch-glare update`.
   if (bare) {
     return (
       <FormField
@@ -86,14 +102,7 @@ export function FieldShell({
         render={({ field, fieldState }) => (
           <FormItem className="w-full">
             <FormControl>
-              <Tooltip
-                open={Boolean(fieldError)}
-                text={fieldError ?? ""}
-                toolTipSide="top"
-                variant="highlight"
-              >
-                <div className="w-full">{children(field, fieldState)}</div>
-              </Tooltip>
+              <div className="w-full">{children(field, fieldState)}</div>
             </FormControl>
           </FormItem>
         )}
@@ -104,11 +113,11 @@ export function FieldShell({
   return (
     <FieldSection
       label={label}
-      requiredLabel={required ? "(Required)" : undefined}
+      requiredLabel={required ? requiredLabel : undefined}
       secondaryLabel={description}
       direction={direction}
       className={fullWidth ? "max-w-full" : undefined}
-      childrenUnderLabel={<FieldError message={fieldError} />}
+      childrenUnderLabel={<FieldMessages message={fieldError} hints={hints} />}
     >
       <FormField
         control={form.control}
@@ -125,10 +134,20 @@ export function FieldShell({
   );
 }
 
-/** Validation error, shown as a `FieldHint` alert (no tooltip); null when there's none. */
-function FieldError({ message }: { message?: string }) {
-  if (!message) return null;
-  return <FieldHint state="error" label={message} />;
+/**
+ * The stack under a field: the validation error first (it is the actionable one), then any author
+ * `hints` in order. Renders nothing when there is neither, so a field without hints is unchanged.
+ */
+function FieldMessages({ message, hints }: { message?: string; hints?: FieldHintSpec[] }) {
+  if (!message && !hints?.length) return null;
+  return (
+    <div className="flex flex-col items-start gap-[4px]">
+      {message && <FieldHint state="error" label={message} />}
+      {hints?.map((hint, i) => (
+        <FieldHint key={i} state={hint.state ?? "info"} label={hint.label} icon={hint.icon} />
+      ))}
+    </div>
+  );
 }
 
 /**

package/apps/lib/components/FormBuilder/fields/SelectField.tsx

@@ -64,22 +64,45 @@ export function SearchableSelectField(props: SearchableSelectFieldProps) {
   );
 }
 
-/** `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`. */
+/**
+ * `FormBuilder.MultiSelect` / `.Tags` — BadgeField, value is `string[]`.
+ *
+ * With `creatable`, the user can type a value that is not in `options` and it becomes a badge —
+ * so a free-text list (emails, aliases, tags) is one field rather than a one-column table. Pass
+ * `options={[]}` for a pure free-text list.
+ */
 export function MultiSelectField(props: OptionsFieldProps) {
   const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => {
-        const selected = new Set<string>(Array.isArray(field.value) ? field.value : []);
-        const tags: Tag[] = props.options.map((opt) => ({
-          id: opt.value,
-          name: opt.label,
-          value: opt.value,
-          isSelected: selected.has(opt.value),
-        }));
+        const values: string[] = Array.isArray(field.value) ? field.value : [];
+        const byValue = new Map(props.options.map((opt) => [opt.value, opt]));
+        // Selected first, IN VALUE ORDER, then whatever is left to offer. Order matters: the
+        // hook re-syncs from this list, so building it in `options` order would reshuffle the
+        // user's badges on every keystroke — and drop any created value that is not an option.
+        const tags: Tag[] = [
+          ...values.map((value) => ({
+            id: value,
+            name: byValue.get(value)?.label ?? value,
+            value,
+            isSelected: true,
+          })),
+          ...props.options
+            .filter((opt) => !values.includes(opt.value))
+            .map((opt) => ({
+              id: opt.value,
+              name: opt.label,
+              value: opt.value,
+              isSelected: false,
+            })),
+        ];
         return (
           <BadgeField
             tags={tags}
+            creatable={props.creatable}
+            placeholder={props.placeholder}
+            disabled={props.disabled}
             onValueChange={(picked) => field.onChange(picked.map((t) => t.value ?? t.id))}
             onTable={onTable}
             className="w-full"

package/apps/lib/components/FormBuilder/submit.tsx

@@ -16,10 +16,28 @@ export interface SubmitButtonProps {
    * **outside** the `<form>` element. Set it explicitly only to target a different form.
    */
   form?: string;
+  /**
+   * LOCAL PATCH (Contact Center): upstream removed this in 2.5.5, leaving no way to
+   * disable a Save. Re-apply after any `npx torch-glare update`.
+   *
+   * Disable the button while leaving the form readable.
+   *
+   * Used by permission gating: someone with read access should still SEE a
+   * record, so a Save they may not use is disabled rather than removed --
+   * a missing button looks broken, a disabled one says "not yours to change".
+   * The server refuses the write either way.
+   */
+  disabled?: boolean;
 }
 
 /** `FormBuilder.Submit` — a loading-aware submit button, hidden in view mode. */
-export function SubmitButton({ children, className, loadingText, form }: SubmitButtonProps) {
+export function SubmitButton({
+  children,
+  className,
+  loadingText,
+  form,
+  disabled,
+}: SubmitButtonProps) {
   const loading = useLoading();
   const ctxFormId = useFormId();
 
@@ -34,6 +52,8 @@ export function SubmitButton({ children, className, loadingText, form }: SubmitB
       // variant is how the rule stops being a rule.
       variant="BluColStyle"
       is_loading={loading}
+      // LOCAL PATCH (Contact Center) -- see `disabled` in SubmitButtonProps.
+      disabled={disabled}
       // `w-fit` because the FormBuilder root is a flex COLUMN: a direct child with `width: auto`
       // inherits `align-items: stretch` and spans the whole form. Sections want that (SectionBlock
       // sets its own `w-full`); a Save button does not. `w-fit` rather than `self-start` so the

package/apps/lib/components/FormBuilder/types.ts

@@ -41,6 +41,16 @@ export type FieldKind =
   | "custom";
 
 /** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
+/**
+ * One alert under a field. Mirrors `FieldHint`'s own props so the design system stays the single
+ * source of truth for how each state looks.
+ */
+export interface FieldHintSpec {
+  label: ReactNode;
+  state?: "info" | "warning" | "error" | "success";
+  icon?: ReactNode;
+}
+
 export interface BaseFieldProps {
   name: string;
   label?: ReactNode;
@@ -51,6 +61,12 @@ export interface BaseFieldProps {
   hidden?: boolean;
   /** Span the full section width. */
   fullWidth?: boolean;
+  /**
+   * Alerts stacked under the field. The validation error, when there is one, always renders first —
+   * it is the actionable message — and these follow in order. Ignored in `bare` mode (a
+   * `FormBuilder.Table` cell), where errors surface as a tooltip to keep the row one line tall.
+   */
+  hints?: FieldHintSpec[];
 }
 
 export interface OptionItem {
@@ -85,6 +101,11 @@ export interface SearchableSelectFieldProps extends SelectFieldProps {
 /** `FormBuilder.MultiSelect` / `.Tags`, `.Radio`. */
 export interface OptionsFieldProps extends BaseFieldProps {
   options: OptionItem[];
+  /**
+   * LOCAL PATCH (Contact Center): `MultiSelect`/`Tags` only — let the user type a value that is
+   * not in `options` and have it become a badge. Pass `options={[]}` for a pure free-text list.
+   */
+  creatable?: boolean;
 }
 
 /** `FormBuilder.Currency`. */

package/apps/lib/components/FormRenderer/FormDrawer.tsx

@@ -5,6 +5,8 @@ import { ReactNode } from "react";
 import {
   Drawer,
   DrawerContent,
+  DrawerDescription,
+  DrawerNested,
   DrawerPanel,
   DrawerTitle,
   DrawerNotch,
@@ -12,7 +14,10 @@ import {
   DrawerNotchDivider,
   DrawerNotchPill,
 } from "../Drawer";
+import { cn } from "../../utils/cn";
 import { FormHeaderBar, type HeaderVariant } from "./header";
+// Only for vaul's `direction` — every other mirror below is native CSS. See `slideFrom`.
+import { useHtmlDir } from "../../hooks/useHtmlDir";
 
 export interface FormDrawerProps {
   open: boolean;
@@ -40,8 +45,52 @@ export interface FormDrawerProps {
   variant?: HeaderVariant;
   /** Action buttons shown on the right of the drawer header (e.g. a Save submit). */
   actions?: ReactNode;
-  /** Shows an "Open in new tab" pill in the notch when provided. */
+  /**
+   * Shows an "Open in new tab" pill in the notch when provided.
+   *
+   * Prefer `notchActions` (a `FormRenderer.NotchAction` child): the caller owns the label
+   * there, so it needs no second prop to be translatable. Kept for callers that only want
+   * upstream's single built-in action.
+   */
   onOpenInNewTab?: () => void;
+  /**
+   * Buttons rendered in the notch, authored by the caller.
+   *
+   * LOCAL PATCH (Contact Center): upstream offers only `onOpenInNewTab` with a hardcoded
+   * English label, so a localized app cannot translate it and cannot add a second action.
+   * Passing the button itself solves both. Written as `FormRenderer.NotchAction` children
+   * and lifted here — see `notch-action.tsx`.
+   */
+  notchActions?: ReactNode;
+
+  /**
+   * LOCAL PATCH (Contact Center): the layout knobs `DrawerContent` already has.
+   *
+   * Upstream swallowed every one of them, which is why each non-default drawer in this app was
+   * hand-rolled instead: a two-field form does not want 1048px, a widget gallery is a bottom
+   * sheet, and a detail view brings its own header and scroll container. All optional and all
+   * defaulting to the original behaviour, so existing callers are untouched.
+   */
+
+  /** Which edge it slides from. `"bottom"` is a sheet; the default follows document direction. */
+  side?: "inline-end" | "bottom";
+  /**
+   * vaul `NestedRoot` — REQUIRED when this drawer opens inside another one, or the two Roots
+   * fight over the overlay and the scroll lock. Throws without a parent Drawer in the tree.
+   */
+  nested?: boolean;
+  /** The dark tray frame and the panel's border/inset shadow. Default `true`. */
+  framed?: boolean;
+  /** Skip the `FormHeaderBar` — for a child that draws its own header. */
+  hideHeader?: boolean;
+  /** Skip the padded scroll wrapper — for a child that owns its own padding and scrolling. */
+  bareBody?: boolean;
+  /** sr-only description. vaul warns when a drawer has none. */
+  description?: string;
+  /** Lands on the positioner: width, height, insets. Replaces the default sizing. */
+  wrapperClassName?: string;
+  /** Lands on the tray. */
+  className?: string;
 }
 
 /**
@@ -69,42 +118,107 @@ export function FormDrawer({
   variant,
   actions,
   onOpenInNewTab,
+  notchActions,
+  // LOCAL PATCH (Contact Center) — see the props above.
+  side = "inline-end",
+  nested = false,
+  framed = true,
+  hideHeader = false,
+  bareBody = false,
+  description,
+  wrapperClassName,
+  className,
 }: FormDrawerProps) {
   const conclusion = summary ?? childrenOutside;
+  const isBottom = side === "bottom";
+  // A drawer inside a drawer must be vaul's NestedRoot, which scales the parent behind it.
+  const Root = nested ? DrawerNested : Drawer;
+
+  // The ONLY thing that still has to know the direction in JS. Everything visual below is
+  // expressed in logical CSS and mirrors itself; but vaul (1.1.2) has no RTL support at all —
+  // it computes an inline `transform: translate3d(±Npx,0,0)` from `direction` and keys its drag
+  // physics off it. An inline transform cannot be overridden from a stylesheet mid-drag, so this
+  // one value must be passed, not styled. Read from <html dir>, so it still follows the document.
+  const slideFrom = useHtmlDir() === "rtl" ? "left" : "right";
 
   return (
-    <Drawer open={open} onOpenChange={onOpenChange} direction="right">
+    <Root open={open} onOpenChange={onOpenChange} direction={isBottom ? "bottom" : slideFrom}>
       {/* The panel fills the available width (minus the 8px insets), capped at 1048px.
           `gap-[6px]` is the gutter between the form panel and the conclusion beside it. */}
       <DrawerContent
-        wrapperClassName="top-2 right-2 bottom-2 left-auto mt-0 h-auto w-[calc(100vw-1rem)] max-w-[1048px]"
-        className="gap-[6px]"
+        // Logical: the notch attaches to the inline-start edge, which the browser resolves
+        // to left under LTR and right under RTL. No direction check here.
+        notchSide="start"
+        framed={framed}
+        // `end-2` / `start-auto` are logical insets (inset-inline-*), so the panel parks
+        // against the inline-end edge in either direction — this used to be two hand-written
+        // physical class strings picked by JS.
+        //
+        // LOCAL PATCH (Contact Center): `inset-x-auto` is load-bearing. `DrawerContent` hardcodes
+        // `inset-x-0`, and tailwind-merge's `inset-x` conflict group covers `left`/`right` but NOT
+        // `start`/`end` — so `inset-x-0` survives into the class list and was only losing because
+        // Tailwind v4 happens to emit `start`/`end` later in the cascade. Every caller inherited
+        // that; this stops depending on emit order.
+        wrapperClassName={
+          wrapperClassName ??
+          (isBottom
+            ? "inset-x-0 bottom-0 top-auto mt-0 h-auto w-full"
+            : "top-2 end-2 bottom-2 inset-x-auto start-auto mt-0 h-auto w-[calc(100vw-1rem)] max-w-[1048px]")
+        }
+        className={cn("gap-[6px]", className)}
+        // LOCAL PATCH (Contact Center): a bottom sheet has no notch. The notch is a tab on the
+        // panel's inline-start edge — on a sheet that slides up from below there is no such edge
+        // to hang it from, and it renders as a stray pill floating above the corner.
         notch={
+          isBottom ? undefined : (
           <DrawerNotch>
             <DrawerNotchClose onClick={() => onOpenChange(false)} />
-            {onOpenInNewTab && (
+            {/* Caller-authored notch buttons win; `onOpenInNewTab` is upstream's built-in
+                single action, kept as a fallback for callers that pass no children. */}
+            {notchActions ? (
               <>
                 <DrawerNotchDivider />
-                <DrawerNotchPill color="Yellow" onClick={onOpenInNewTab}>
-                  Open in new tab
-                  <i className="ri-arrow-right-up-line text-[12px]" />
-                </DrawerNotchPill>
+                {notchActions}
               </>
+            ) : (
+              onOpenInNewTab && (
+                <>
+                  <DrawerNotchDivider />
+                  <DrawerNotchPill color="Yellow" onClick={onOpenInNewTab}>
+                    Open in new tab
+                    <i className="ri-arrow-right-up-line text-[12px]" />
+                  </DrawerNotchPill>
+                </>
+              )
             )}
           </DrawerNotch>
+          )
         }
       >
-        <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px] p-0">
+        {/* `rounded-se-*` is the logical top-inline-end corner: rounded away from the notch,
+            square beneath it, mirrored by the browser rather than by a ternary. */}
+        <DrawerPanel
+          framed={framed}
+          className={cn(
+            "p-0",
+            isBottom ? "rounded-t-[16px]" : "rounded-se-[16px] rounded-b-[16px]",
+          )}
+        >
           <div className="relative flex min-h-0 flex-1 flex-col">
             {/* Vaul requires a Drawer.Title for the a11y name; the visible title is the
                 HeaderBar below, so this one is for screen readers only. */}
             <DrawerTitle className="sr-only">{title}</DrawerTitle>
+            {description && (
+              <DrawerDescription className="sr-only">{description}</DrawerDescription>
+            )}
 
             {/* The SAME floating header the page form uses, so a form's title looks
                 identical in either surface. */}
-            <FormHeaderBar title={title} label={badge} variant={variant}>
-              {actions}
-            </FormHeaderBar>
+            {!hideHeader && (
+              <FormHeaderBar title={title} label={badge} variant={variant}>
+                {actions}
+              </FormHeaderBar>
+            )}
 
             {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. The
                 48px bottom breathing-room goes on an inner wrapper, not the scroll container:
@@ -112,9 +226,17 @@ export function FormDrawer({
                 swallow the container's own `pb`. On a plain wrapper that `h-full` resolves to the
                 content height, so the padding actually lengthens the scroll. The conclusion panel
                 is a separate sibling, so it keeps its own spacing. */}
-            <div className="h-full overflow-y-auto px-3 pt-[72px]">
-              <div className="pb-[48px]">{children}</div>
-            </div>
+            {/* LOCAL PATCH (Contact Center): `bareBody` hands the body to the child untouched.
+                Without it, a child that already scrolls and already offsets for its own header
+                (a detail view does both) gets a second scroll container and a second 72px of
+                dead space stacked on top of its own. */}
+            {bareBody ? (
+              children
+            ) : (
+              <div className={cn("h-full overflow-y-auto px-3", !hideHeader && "pt-[72px]")}>
+                <div className="pb-[48px]">{children}</div>
+              </div>
+            )}
           </div>
         </DrawerPanel>
 
@@ -123,6 +245,6 @@ export function FormDrawer({
             scrolling inside it. No `flex-1`: the panel sizes itself. */}
         {conclusion && <div className="flex min-h-0">{conclusion}</div>}
       </DrawerContent>
-    </Drawer>
+    </Root>
   );
 }