torch-glare 2.5.5 → 2.5.6

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

@@ -101,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>
   );
 }

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

@@ -5,6 +5,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "../../utils/cn";
 import { formBarItemStyles } from "../TabFormItem";
+import { useHtmlDir } from "../../hooks/useHtmlDir";
 import { FormHeaderBar, type HeaderVariant } from "./header";
 
 /**
@@ -55,7 +56,9 @@ function DetailSidebarItem({ value, icon, children }: DetailSidebarItemProps) {
       )}
     >
       {icon}
-      <span className="flex-1 truncate text-left typography-body-medium-medium">{children}</span>
+      {/* LOCAL PATCH (Contact Center): `text-start`, not `text-left` — otherwise an Arabic label
+          left-aligns inside a right-aligned rail, and `truncate` clips the wrong end. */}
+      <span className="flex-1 truncate text-start typography-body-medium-medium">{children}</span>
     </TabsPrimitive.Trigger>
   );
 }
@@ -153,24 +156,65 @@ export interface DetailTabsViewProps {
   /** The `FormRenderer.Tab` elements — the content panels. */
   tabs: React.ReactElement<DetailTabProps>[];
   className?: string;
+  /**
+   * LOCAL PATCH (Contact Center): the active tab, when the caller owns it. Omit both this and
+   * `onValueChange` to keep the original uncontrolled behaviour (defaults to the first tab).
+   *
+   * Upstream offered no way in, so a detail view could not put its tab in the URL — no
+   * `?tab=audit` deep link, no correct back-navigation, and a reload always bounced the user to
+   * the first tab. That is what this app's `useTabPersistence` provides.
+   */
+  value?: string;
+  /** LOCAL PATCH (Contact Center): fires when a rail item is clicked. See `value`. */
+  onValueChange?: (value: string) => void;
+  /**
+   * LOCAL PATCH (Contact Center): rendered inside a surface that already draws its own card —
+   * a drawer, a panel. Drops the rounded body background so it doesn't double up, and lets the
+   * host own the height instead of filling the viewport.
+   */
+  embedded?: boolean;
 }
 
 /**
  * The detail-tabs surface: the floating header over a fixed left rail (the sidebar) + a scrolling
- * content column showing the active tab. Radix `Tabs.Root` owns the state (uncontrolled, defaults to
- * the first tab). The rail matches the stepper's rail position; only the content column scrolls.
+ * content column showing the active tab. Radix `Tabs.Root` owns the state — uncontrolled and
+ * defaulting to the first tab, unless the caller passes `value`/`onValueChange`. The rail matches
+ * the stepper's rail position; only the content column scrolls.
  */
-export function DetailTabsView({ header, actions, sidebar, tabs, className }: DetailTabsViewProps) {
+export function DetailTabsView({
+  header,
+  actions,
+  sidebar,
+  tabs,
+  className,
+  value,
+  onValueChange,
+  embedded,
+}: DetailTabsViewProps) {
   const defaultValue = tabs[0]?.props.value;
+  // Radix treats a defined `value` as controlled, so only pass one of the two — handing it both
+  // logs a warning and pins the tab.
+  const controlled = value !== undefined;
+  // LOCAL PATCH (Contact Center): Radix Tabs defaults to `dir="ltr"` when given neither a `dir`
+  // prop nor a `DirectionProvider`, and it stamps that onto the subtree — which left this whole
+  // detail surface rendering left-to-right on an Arabic page, no matter what `<html dir>` said.
+  // Same fix already applied to `Tabs.tsx` and `TabPage.tsx`.
+  const htmlDir = useHtmlDir();
 
   return (
     <TabsPrimitive.Root
       orientation="vertical"
-      defaultValue={defaultValue}
+      dir={htmlDir}
+      {...(controlled ? { value, onValueChange } : { defaultValue, onValueChange })}
       className={cn("h-full w-full @container", className)}
     >
       {/* Scroll shell — mirrors FormBuilder's: the absolute header floats over the body. */}
-      <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
+      <div
+        className={cn(
+          "relative isolate flex h-full w-full flex-col overflow-hidden",
+          !embedded && "rounded-2xl bg-background-presentation-body-primary",
+        )}
+      >
         {header && (
           <FormHeaderBar title={header.title} label={header.label} variant={header.variant}>
             {actions}
@@ -178,9 +222,14 @@ export function DetailTabsView({ header, actions, sidebar, tabs, className }: De
         )}
 
         <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-row">
-          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header. */}
+          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header.
+
+              LOCAL PATCH (Contact Center): `border-e`, not `border-r`. The row is `flex-row`, which
+              is direction-aware, so under `dir="rtl"` the rail moves to the right — a physical
+              right border then lands on the outer screen edge instead of between rail and content,
+              leaving the rail visually detached. */}
           <TabsPrimitive.List asChild>
-            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
+            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-e border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
               {sidebar.props.children}
             </aside>
           </TabsPrimitive.List>

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -17,6 +17,7 @@ import {
 } from "./detail";
 import { FormDrawer } from "./FormDrawer";
 import { FormHeaderBar } from "./header";
+import { NotchAction, isNotchActionElement } from "./notch-action";
 import { Section } from "./section";
 import {
   Back,
@@ -72,6 +73,15 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   title,
   badge,
   onOpenInNewTab,
+  // LOCAL PATCH (Contact Center): detail-tabs control — see FormRendererProps.
+  activeTab,
+  onTabChange,
+  embedded,
+  // LOCAL PATCH (Contact Center): external stepper control — see FormRendererProps.
+  activeStep,
+  onStepChange,
+  // LOCAL PATCH (Contact Center): drawer layout — see FormRendererProps.
+  drawer,
 }: FormRendererProps<T>) {
   const isDrawer = display === "drawer";
 
@@ -101,6 +111,14 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
 
   // Split out a `FormRenderer.Stepper`: its Steps become the visibility-toggled slots inside the
   // `<form>`, its non-Step children a footer, and its state drives the rail beside them.
+  // LOCAL PATCH (Contact Center): lift `FormRenderer.NotchAction` children out of the form
+  // body and into the drawer's notch. Authored as children so the caller owns the label (and
+  // therefore its translation) instead of the component hardcoding English — see notch-action.tsx.
+  const notchActions = childArray.filter(isNotchActionElement);
+  const bodyChildren = notchActions.length
+    ? childArray.filter((n) => !isNotchActionElement(n))
+    : children;
+
   const stepperEl = childArray.find(isStepperElement);
   const stepChildren = stepperEl ? Children.toArray(stepperEl.props.children) : [];
   const steps = stepChildren.filter(isStepElement) as ReactElement<StepProps>[];
@@ -111,18 +129,55 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   const stepper = useStepperState(
     steps,
     formInstance.trigger as Parameters<typeof useStepperState>[1],
+    // LOCAL PATCH (Contact Center): undefined `activeStep` leaves the stepper uncontrolled.
+    { activeStep, onStepChange },
   );
 
   if (detailSidebar && detailTabs.length > 0) {
-    return (
+    const detailView = (
       <DetailTabsView
-        header={header}
-        actions={actions}
+        // In a drawer the tray already paints the surface and the drawer header carries the
+        // title, so the view drops its own card and its own floating header.
+        header={isDrawer ? undefined : header}
+        actions={isDrawer ? undefined : actions}
         sidebar={detailSidebar}
         tabs={detailTabs}
         className={className}
+        // LOCAL PATCH (Contact Center): lets the caller keep the tab in the URL, and render
+        // inside a surface that already draws its own card. Both optional.
+        value={activeTab}
+        onValueChange={onTabChange}
+        embedded={embedded ?? isDrawer}
       />
     );
+
+    // LOCAL PATCH (Contact Center): a detail view can be a DRAWER too.
+    //
+    // Upstream returned the detail surface here unconditionally, *before* the `isDrawer` branch
+    // below — so `FormRenderer.Sidebar` + `display="drawer"` silently rendered a full page inside
+    // whatever the caller put it in, and a quick-view drawer had to be hand-rolled around the
+    // detail view instead. A record looks the same whether you opened it from a row or from its
+    // own route; only the surface differs, which is exactly what `display` is for.
+    if (!isDrawer) return detailView;
+    return (
+      <FormDrawer
+        open={open}
+        onOpenChange={onOpenChange ?? (() => {})}
+        title={title ?? header?.title}
+        badge={badge ?? header?.label}
+        variant={header?.variant}
+        actions={actions}
+        onOpenInNewTab={onOpenInNewTab}
+        notchActions={notchActions.length > 0 ? notchActions : undefined}
+        // `DetailTabsView` already owns its scroll container and already offsets for a header,
+        // so the drawer must not add a second of each — that is what `bareBody` is for. The
+        // drawer's own header still renders, carrying the title and actions.
+        bareBody
+        {...drawer}
+      >
+        {detailView}
+      </FormDrawer>
+    );
   }
 
   // The fields the `<form>` wraps: the stepper's steps (+ any custom footer extras), or the
@@ -137,7 +192,7 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
       {stepExtras}
     </>
   ) : (
-    children
+    bodyChildren
   );
 
   const formEl = (
@@ -219,7 +274,10 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
     summary && !isDrawer ? (
       <div className="flex h-full flex-row items-stretch">
         <div className="min-h-0 min-w-0 flex-1">{surface}</div>
-        <div className="ml-[6px] flex min-h-0">{summary}</div>
+        {/* LOCAL PATCH (Contact Center): `ms-`, not `ml-`. Under `dir="rtl"` the summary sits to
+            the LEFT of the surface, so a physical left margin puts the gutter on its far side and
+            the two panels butt together. */}
+        <div className="ms-[6px] flex min-h-0">{summary}</div>
       </div>
     ) : (
       surface
@@ -267,6 +325,8 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
           ) : undefined
         }
         onOpenInNewTab={onOpenInNewTab}
+        notchActions={notchActions.length > 0 ? notchActions : undefined}
+        {...drawer}
       >
         {tree}
       </FormDrawer>
@@ -290,6 +350,7 @@ export const FormRenderer = Object.assign(FormRendererRoot, {
   Step,
   Back,
   Next,
+  NotchAction,
   Sidebar: DetailSidebar,
   Tab: DetailTab,
   Grid: DetailGrid,

package/apps/lib/components/FormRenderer/index.ts

@@ -2,6 +2,8 @@ export { FormRenderer } from "./form-renderer";
 export { FormDrawer } from "./FormDrawer";
 export type { FormDrawerProps } from "./FormDrawer";
 export { FormHeaderBar } from "./header";
+export { NotchAction } from "./notch-action";
+export type { NotchActionProps } from "./notch-action";
 export type { HeaderConfig, HeaderVariant, FormHeaderBarProps } from "./header";
 export type { SectionProps } from "./section";
 export type { StepProps, StepperProps } from "./stepper";

package/apps/lib/components/FormRenderer/notch-action.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../utils/cn";
+import { DrawerNotchPill } from "../Drawer";
+
+/**
+ * `FormRenderer.NotchAction` — a button in the drawer's notch, authored as a CHILD.
+ *
+ * LOCAL PATCH (Contact Center). Upstream models the one notch action it ships as a pair of
+ * props on `FormDrawer` / `FormRenderer`: `onOpenInNewTab` (a handler) plus a hardcoded
+ * English "Open in new tab" label. That shape has two problems:
+ *
+ *   1. The label is the component's, not the caller's, so a localized app cannot translate it
+ *      without a second prop — which is exactly the `openInNewTabLabel` patch we kept having
+ *      to re-apply after every `npx torch-glare update`.
+ *   2. It only ever admits ONE action, and only that action. Anything else in the notch means
+ *      another prop pair.
+ *
+ * Passing the button as a child fixes both at once: the caller owns the text (so i18n is just
+ * `{t(...)}`, no prop), owns the icon, and can render more than one. Same bargain the rest of
+ * the library strikes — `DataViews` registers a view because you rendered it, `FormRenderer`
+ * renders a step because you wrote a `<Step>`.
+ *
+ * It renders nothing where it is written: `FormRenderer` lifts it out of the children and hands
+ * it to `FormDrawer`'s notch, the same way it lifts a `Stepper`. Ignored entirely on a page-display
+ * form, which has no notch.
+ *
+ * ```tsx
+ * <FormRenderer display="drawer" …>
+ *   <FormRenderer.NotchAction onClick={openInTab}>
+ *     {t("contacts.formShell.openInNewTab")}
+ *     <i className="ri-arrow-right-up-line text-[12px]" />
+ *   </FormRenderer.NotchAction>
+ *   <FormRenderer.Section …>…</FormRenderer.Section>
+ * </FormRenderer>
+ * ```
+ */
+export interface NotchActionProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+  /** Pill colour, matching `DrawerNotchPill`. Defaults to the yellow "open elsewhere" pill. */
+  color?: React.ComponentProps<typeof DrawerNotchPill>["color"];
+  children?: React.ReactNode;
+}
+
+export function NotchAction({ color = "Yellow", className, children, ...props }: NotchActionProps) {
+  return (
+    <DrawerNotchPill color={color} className={cn(className)} {...props}>
+      {children}
+    </DrawerNotchPill>
+  );
+}
+
+(NotchAction as unknown as { __isFormNotchAction: boolean }).__isFormNotchAction = true;
+
+export function isNotchActionElement(
+  node: React.ReactNode,
+): node is React.ReactElement<NotchActionProps> {
+  return (
+    React.isValidElement(node) &&
+    (node.type as { __isFormNotchAction?: boolean })?.__isFormNotchAction === true
+  );
+}