torch-glare 2.5.5 → 2.5.6

package/apps/lib/components/BadgeField.tsx

@@ -37,6 +37,15 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "va
   tags: Tag[];
   onValueChange?: (tags: Tag[]) => void;
   addLabel?: string;
+  /**
+   * LOCAL PATCH (Contact Center): let the user TYPE a value and have it become a selected badge,
+   * rather than only picking from `tags`. Enter or comma commits what is in the box; Backspace on
+   * an empty box removes the last badge. This is what makes a free-text list (emails, aliases,
+   * tags) expressible as a badge field instead of a one-column table.
+   */
+  creatable?: boolean;
+  /** Label for the "create this text" row. Receives the typed text. */
+  createLabel?: (value: string) => string;
 }
 
 export const BadgeField = forwardRef<HTMLInputElement, Props>(
@@ -57,6 +66,8 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
     theme,
     tags,
     addLabel = "add",
+    creatable = false,
+    createLabel = (value: string) => `Create "${value}"`,
     dir,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
     children,
@@ -81,6 +92,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       selectedTagsStack,
       handleSelectTag,
       handleUnselectTag,
+      handleCreateTag,
       handleKeyDown,
       setFocusedTagIndex,
       filterTagsBySearch,
@@ -92,6 +104,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       searchTags,
     } = useTagSelection({
       Tags: tags,
+      creatable,
       onTagsChange: (e) => {
         // Native onChange keeps the event-shaped API (Tag[] in target.value)
         // for react-hook-form / Controller; onValueChange is the typed, direct
@@ -106,6 +119,14 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       inputRef,
     });
 
+    // LOCAL PATCH (Contact Center): offer the typed text as a new badge, unless it already exists
+    // (selected or listed) — in which case the normal rows already cover it.
+    const typedValue = searchTags.trim();
+    const alreadyExists = [...selectedTagsStack, ...filteredTags].some(
+      (tag) => tag.name.toLowerCase() === typedValue.toLowerCase(),
+    );
+    const showCreateRow = creatable && typedValue !== "" && !alreadyExists;
+
     return (
       <Popover open={isPopoverOpen}>
         <PopoverTrigger asChild>
@@ -152,6 +173,26 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
               onChange={(e) => {
                 filterTagsBySearch(e.target.value);
               }}
+              // LOCAL PATCH (Contact Center): commit typed text as a badge. Handled here rather
+              // than in the Group's `handleKeyDown` because that one only ever navigates the
+              // existing list — and because `preventDefault` on Enter has to stop the surrounding
+              // `<form>` submitting before the badge is added.
+              onKeyDown={(e) => {
+                if (!creatable) return;
+                if (e.key === "Enter" || e.key === ",") {
+                  // Let Enter pick the highlighted row when the user is arrowing the list.
+                  if (e.key === "Enter" && focusedPopoverIndex !== null) return;
+                  if (!searchTags.trim()) return;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleCreateTag(searchTags);
+                  return;
+                }
+                if (e.key === "Backspace" && searchTags === "" && selectedTagsStack.length > 0) {
+                  e.preventDefault();
+                  handleUnselectTag(selectedTagsStack[selectedTagsStack.length - 1].id);
+                }
+              }}
               onFocus={(e) => {
                 props.onFocus?.(e);
                 setFocusedTagIndex(null);
@@ -191,6 +232,22 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
           // Reuse the DropdownMenu surface so the list matches the menu design.
         >
           <div className={cn(menuContentStyles({ variant: "PresentationStyle" }), "p-0")}>
+            {/* LOCAL PATCH (Contact Center): the create-from-typed-text row. */}
+            {showCreateRow && (
+              <button
+                type="button"
+                onClick={() => handleCreateTag(searchTags)}
+                className={cn(
+                  MenuItemStyles({ variant: "Default", size: "M" }),
+                  "w-full p-1 shrink-0 h-fit",
+                )}
+              >
+                <div className="flex items-center gap-1 w-full">
+                  <i className="ri-add-line text-[14px]" />
+                  <span className="truncate">{createLabel(typedValue)}</span>
+                </div>
+              </button>
+            )}
             {filteredTags.length > 0 ? (
               filteredTags.map((tag, index) => (
                 <button
@@ -234,9 +291,17 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                 </button>
               ))
             ) : (
-              <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
-                {tags.length === 0 ? "All tags selected" : "No matching tags found"}
-              </div>
+              // The create row already tells the user what will happen, so don't also say
+              // "no matching tags found" underneath it.
+              !showCreateRow && (
+                <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
+                  {creatable
+                    ? "Type a value and press Enter"
+                    : tags.length === 0
+                      ? "All tags selected"
+                      : "No matching tags found"}
+                </div>
+              )
             )}{" "}
           </div>
         </PopoverContent>

package/apps/lib/components/Button.tsx

@@ -60,7 +60,11 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
             {},
             <div
               className={cn(
-                "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
+                // LOCAL PATCH (Contact Center): logical, not physical. These were `mr`/`ml`/`pl`/`pr`,
+              // so under `dir="rtl"` a leading icon rendered on the right but kept its gap on
+              // its OUTER side — colliding with the label and drifting off the button edge.
+              // `me`/`ms`/`ps`/`pe` compile to the same values in LTR, so English is unchanged.
+              "flex items-center justify-center [&>:is(i,svg):first-child]:me-[3px] [&>:is(i,svg):last-child]:ms-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:ps-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pe-[6px]",
                 containerClassName,
               )}
             >
@@ -71,7 +75,11 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
         ) : (
           <div
             className={cn(
-              "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
+              // LOCAL PATCH (Contact Center): logical, not physical. These were `mr`/`ml`/`pl`/`pr`,
+              // so under `dir="rtl"` a leading icon rendered on the right but kept its gap on
+              // its OUTER side — colliding with the label and drifting off the button edge.
+              // `me`/`ms`/`ps`/`pe` compile to the same values in LTR, so English is unchanged.
+              "flex items-center justify-center [&>:is(i,svg):first-child]:me-[3px] [&>:is(i,svg):last-child]:ms-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:ps-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pe-[6px]",
               containerClassName,
             )}
           >

package/apps/lib/components/DataViews/data-views.tsx

@@ -19,7 +19,9 @@ import {
   type RegisteredView,
 } from "./context";
 import { Actions, Header, PanelToggle, Search, ViewSwitch } from "./header";
+import { Empty } from "./states";
 import {
+  isEmptyElement,
   isHeaderElement,
   isPanelElement,
   isViewElement,
@@ -103,9 +105,13 @@ function DataViewsRoot({
   const panelEl = childArray.find(isPanelElement);
   // Anything the root does not position itself — a `Filters` bar, a toolbar of your own — sits
   // between the header and the views, in the order you wrote it.
+  // LOCAL PATCH (Contact Center): the empty slot. It must be excluded from `extras` too --
+  // `extras` is the negative-space bucket, so without this the element would render twice:
+  // once above the view and once as the body.
+  const emptyEl = childArray.find(isEmptyElement);
   const extras = childArray.filter(
     (n) =>
-      !isViewElement(n) && !isHeaderElement(n) && !isPanelElement(n),
+      !isViewElement(n) && !isHeaderElement(n) && !isPanelElement(n) && !isEmptyElement(n),
   );
 
   // `viewElements` is a fresh array on every render, so memoising on its identity would never
@@ -279,10 +285,15 @@ function DataViewsRoot({
     [currentQuery.filters, setFilters, filterFields],
   );
 
-  // The active view is always what renders. Nothing to show is shown as nothing — the view keeps
-  // its chrome and paints no rows — and `loading` is answered by the view's own skeleton, so the
-  // layout never swaps out from under the user.
-  const body = activeElement;
+  // The active view is what renders, unless a `DataViews.Empty` was supplied and the query has
+  // SETTLED on nothing — then the caller's empty state takes the view's place entirely.
+  //
+  // LOCAL PATCH (Contact Center). `!loading` is the whole reason this is safe: rows are empty
+  // while the first page is still in flight, so without it the empty state would replace the
+  // view's skeleton and announce "nothing matched" before anything had been asked for — the
+  // exact failure that made upstream ship no `Empty` at all (see `states.tsx`). Loading is still
+  // answered by the view's own skeleton; only a settled empty result swaps the body.
+  const body = emptyEl && !loading && rows.length === 0 ? emptyEl : activeElement;
 
   return (
     <DataContext.Provider value={dataValue}>
@@ -379,5 +390,6 @@ export const DataViews = Object.assign(DataViewsRoot, {
   Tree: TreeView,
   Detail,
   // states
+  Empty,
   // paging
 });

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

@@ -26,9 +26,13 @@ export { useActiveRow } from "./hooks";
 export { Cell } from "./cell";
 
 // A view of your own gets the loading state the built-in four get: read `loading` from
-// `useDataViewsData()` and lay these out in your own shape. There is no `Empty` counterpart —
-// nothing to show is shown as nothing.
-export { SkeletonBar, skeletonKeys } from "./states";
+// `useDataViewsData()` and lay these out in your own shape.
+//
+// `DataViews.Empty` (LOCAL PATCH, Contact Center) is the counterpart upstream omits: a slot that
+// renders IN PLACE OF the view once a query has settled on no rows. It is opt-in and carries no
+// design of its own — see `states.tsx` for why it does not reintroduce the "announced nothing
+// matched before anything was asked for" bug that kept it out.
+export { SkeletonBar, skeletonKeys, Empty } from "./states";
 
 // Wrapping a part in a component of your own — a preset panel, a project-standard header — hides
 // the marker the root recognises it by, so the wrapper has to carry the marker itself:
@@ -36,7 +40,7 @@ export { SkeletonBar, skeletonKeys } from "./states";
 // ```tsx
 // const AppPanel = markPanel(function AppPanel() { return <DataViews.Panel>…</DataViews.Panel>; });
 // ```
-export { markHeader, markPanel, markView } from "./slots";
+export { markEmpty, markHeader, markPanel, markView } from "./slots";
 export { resolveBadgeVariant } from "./badge";
 
 export type { ResolvedBadgeProps } from "./badge";

package/apps/lib/components/DataViews/slots.ts

@@ -59,5 +59,14 @@ export const isHeaderElement = (n: React.ReactNode) => isMarked(n, "__dvHeader")
 export const markPanel = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvPanel");
 export const isPanelElement = (n: React.ReactNode) => isMarked(n, "__dvPanel");
 
+/**
+ * LOCAL PATCH (Contact Center): the empty slot — what renders *in place of* the view when a
+ * settled query returns no rows. Without a marker the caller's empty state is just an "extra"
+ * and stacks ABOVE the view, so an empty list shows the message on top of an empty table.
+ * See `states.tsx` for why this does not reintroduce the bug upstream avoided.
+ */
+export const markEmpty = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvEmpty");
+export const isEmptyElement = (n: React.ReactNode) => isMarked(n, "__dvEmpty");
+
 
 

package/apps/lib/components/DataViews/states.tsx

@@ -1,19 +1,27 @@
 "use client";
 
-import React from "react";
+import type { ReactNode } from "react";
+
 import { cn } from "../../utils/cn";
 import { Skeleton } from "../Skeleton";
+import { markEmpty } from "./slots";
 
 /**
- * The shared parts of a loading state.
+ * The shared parts of a loading state, and the empty slot.
+ *
+ * Upstream ships no `Empty`, for reasons that are mostly still right: a centred sentence in place
+ * of the view throws the chrome away and makes the layout jump twice on every query, and — the
+ * real bug — it could not tell "no results" apart from "not fetched yet", so the first load of
+ * every page announced that nothing matched before anything had been asked for.
  *
- * There is deliberately no `Empty` here. When there is nothing to show, the view shows nothing —
- * a table keeps its header band and has no rows, a board keeps its columns and has no cards. A
- * centred sentence in place of the view threw the chrome away and made the layout jump twice on
- * every query, and it could not tell "no results" apart from "not fetched yet", so the first load
- * of every page announced that nothing matched before anything had been asked for.
+ * `Empty` below (LOCAL PATCH, Contact Center) keeps that objection answered rather than ignoring
+ * it. It is a SLOT, not a design: the caller supplies the whole UI, and the root fills it only
+ * when the query has settled (`!loading`) and still returned nothing. "Not fetched yet" is still
+ * the view's own skeleton, so the two states stay distinguishable. What it fixes is the shape the
+ * app was forced into without it — an unrecognised child renders as an "extra" ABOVE the view, so
+ * an empty list showed the message stacked on top of an empty table, headers and all.
  *
- * Loading is answered per view instead, because a skeleton is only useful if it is the shape of
+ * Loading is still answered per view, because a skeleton is only useful if it is the shape of
  * the thing that is coming. These are the pieces the four views share so they cannot drift; the
  * shapes themselves live with the view that owns them.
  */
@@ -36,3 +44,30 @@ export function SkeletonBar({ className }: { className?: string }) {
  * decides that, and it has not answered yet.
  */
 export const skeletonKeys = (n: number) => Array.from({ length: n }, (_, i) => i);
+
+/**
+ * `DataViews.Empty` — what renders **in place of** the view when a settled query returns no rows.
+ *
+ * LOCAL PATCH (Contact Center). A passthrough with a marker: it holds no opinion about what an
+ * empty state looks like, it only tells the root "put this where the view goes". The root fills
+ * it on `!loading && rows.length === 0`; write it anywhere among the children.
+ *
+ * Note the caller's content is what gets the body slot's height, so give it `flex-1` if it should
+ * centre rather than sit at the top of a tall surface — the app's shared `EmptyState` sizes
+ * itself intrinsically.
+ *
+ * ```tsx
+ * <DataViews rows={rows} fields={fields}>
+ *   <DataViews.Header title="Fields">…</DataViews.Header>
+ *   <DataViews.Empty>
+ *     <EmptyState className="flex-1" title={search ? "No matches" : "No fields yet"} />
+ *   </DataViews.Empty>
+ *   <DataViews.Table />
+ * </DataViews>
+ * ```
+ */
+export function Empty({ children, className }: { children?: ReactNode; className?: string }) {
+  return <div className={cn("flex min-h-0 flex-1 flex-col", className)}>{children}</div>;
+}
+
+markEmpty(Empty);

package/apps/lib/components/Drawer.tsx

@@ -40,7 +40,17 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<
   /** @deprecated No effect here — the drag handle is `DrawerPanel`'s `showHandle`. */
   showHandle?: boolean;
   notch?: React.ReactNode;
-  notchSide?: "left" | "right";
+  /**
+   * Which INLINE edge the notch attaches to — `"start"` follows the document direction
+   * (left under LTR, right under RTL), so callers never compute `dir` themselves.
+   *
+   * LOCAL PATCH (Contact Center): these were physical `"left" | "right"` and every consumer
+   * passed `isRtl ? "right" : "left"`, duplicating a decision CSS already knows. The
+   * alignment (`self-start`) and the corner radii below are logical properties, so the
+   * browser mirrors them; only the wedge's SVG path needs a flip, which it does itself with
+   * `rtl:-scale-x-100`.
+   */
+  notchSide?: "start" | "end";
   /**
    * Show the dark "tray" frame (and panel border + inset shadow) around the
    * drawer panel. Defaults to `true`. Set to `false` for bottom-anchored
@@ -64,7 +74,8 @@ interface DrawerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * The light `#F0F0F0` content surface inside a `DrawerContent`.
+ * The body surface inside a `DrawerContent` — the same surface a page draws, anchored to an
+ * edge, so it follows the app theme.
  *
  * It is an ordinary child, not something the tray paints — so a drawer can hold a panel
  * and something else beside it (e.g. a `FormSummary`), each bringing its own background.
@@ -81,12 +92,6 @@ const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
   ({ className, framed = true, showHandle = false, children, ...props }, ref) => (
     <div
       ref={ref}
-      // The content surface is always light (#F0F0F0) regardless of the page
-      // theme, so pin a light theme here. This makes theme-aware content tokens
-      // (DrawerTitle/Description and any consumer content) resolve to their
-      // dark-on-light values instead of following a dark page theme (which
-      // would render white-on-light = invisible).
-      data-theme="light"
       className={cn(
         // `flex-col` is load-bearing: this panel stacks header / body / footer, and its own
         // `showHandle` centres the drag handle with `mx-auto`, which only centres in a column.
@@ -98,13 +103,26 @@ const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
         // main axis, and a flex item's default `min-width: auto` pins it to its content — a wide
         // form pushed the panel straight out past the tray. `min-h-0` alone covered the old
         // column tray; the row needs both.
-        "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0 min-w-0",
-        framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
+        //
+        // LOCAL PATCH (Contact Center): the surface was `bg-[#F0F0F0]` with a `#D4D4D4` border —
+        // frozen copies of the LIGHT values of the two tokens below — and the panel pinned
+        // `data-theme="light"` so its content didn't render white-on-light against them.
+        // mapping-color-system-v4 selects on a BARE `[data-theme="light"]`, so that attribute
+        // re-declared every colour variable on this element and inherited to the whole subtree:
+        // a drawer was immune to the app's theme, and its content was correctly themed to the
+        // WRONG theme. A drawer is the same surface as a page, only anchored to an edge, so it
+        // reads the same tokens and follows `<html>` like everything else. Light and default
+        // resolve to the exact literals removed here (#F0F0F0 / #D4D4D4), so only dark changes.
+        "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1 bg-background-presentation-body-primary min-h-0 min-w-0",
+        framed &&
+          "border border-border-presentation-global-primary shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
         className,
       )}
       {...props}
     >
-      {showHandle && <div className="mx-auto h-2 w-[100px] rounded-full bg-[#D4D4D4]" />}
+      {showHandle && (
+        <div className="mx-auto h-2 w-[100px] rounded-full bg-border-presentation-global-primary" />
+      )}
       {children}
     </div>
   ),
@@ -120,7 +138,7 @@ const DrawerContent = React.forwardRef<
       className,
       children,
       notch,
-      notchSide = "left",
+      notchSide = "start",
       framed: framedProp,
       wrapperClassName,
       trayClassName,
@@ -146,10 +164,12 @@ const DrawerContent = React.forwardRef<
           )}
           {...props}
         >
+          {/* `self-start` / `self-end` are LOGICAL — the browser flips them under
+              `dir="rtl"`, so this needs no direction check. */}
           {notch && (
-            <div className={notchSide === "right" ? "self-end" : "self-start"}>
+            <div className={notchSide === "end" ? "self-end" : "self-start"}>
               {React.isValidElement(notch)
-                ? React.cloneElement(notch as React.ReactElement<{ side?: "left" | "right" }>, {
+                ? React.cloneElement(notch as React.ReactElement<{ side?: "start" | "end" }>, {
                     side: notchSide,
                   })
                 : notch}
@@ -164,10 +184,12 @@ const DrawerContent = React.forwardRef<
               framed
                 ? "p-1.5 bg-black-400 shadow-[0_0_4px_rgba(0,0,0,0.2),0_0_30px_rgba(0,0,0,0.4)]"
                 : "p-0",
+              // Logical corner radii (`ss` = start-start, `se` = start-end): the squared
+              // corner follows the notch under either direction with no JS.
               framed && notch
-                ? notchSide === "right"
-                  ? "rounded-tr-none rounded-tl-[22px] rounded-b-[22px]"
-                  : "rounded-tl-none rounded-tr-[22px] rounded-b-[22px]"
+                ? notchSide === "end"
+                  ? "rounded-se-none rounded-ss-[22px] rounded-b-[22px]"
+                  : "rounded-ss-none rounded-se-[22px] rounded-b-[22px]"
                 : framed
                   ? "rounded-t-[22px]"
                   : "",
@@ -193,14 +215,15 @@ const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 DrawerHeader.displayName = "DrawerHeader";
 
 const drawerHeaderPane = cva(
-  // Dark pill. Force any DrawerTitle/Description inside it back to light text
-  // (their defaults are dark for the light content surface).
+  // A deliberately dark pill in every theme — the same slab the page-mode FormHeaderBar draws
+  // (FormRenderer/header.tsx). Its fill is a literal on purpose, not a frozen token: it must not
+  // follow the panel. So the title/description are forced to light text against it.
   "flex items-center gap-2 rounded-[14px] border p-2 bg-[#131415] border-[#2C2D2E] shadow-[0_0_32px_2px_rgba(0,0,0,0.05)] [&_[data-slot=drawer-title]]:text-white [&_[data-slot=drawer-description]]:text-[#9FA0A1]",
 );
 
 const DrawerHeaderTitle = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  // Dark surface — pin a dark theme so any buttons/content inside resolve their
-  // theme tokens for dark (the surrounding content surface is data-theme=light).
+  // The pane is dark in every theme, so pin dark here: the Buttons and content inside must
+  // resolve against THIS slab, not against the panel (which now follows the app theme).
   <div data-theme="dark" className={cn(drawerHeaderPane(), className)} {...props} />
 );
 DrawerHeaderTitle.displayName = "DrawerHeaderTitle";
@@ -243,40 +266,48 @@ const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 DrawerFooter.displayName = "DrawerFooter";
 
 interface DrawerNotchProps extends React.HTMLAttributes<HTMLDivElement> {
-  side?: "left" | "right";
+  /** Logical edge, mirrored by the browser under `dir="rtl"`. See `notchSide`. */
+  side?: "start" | "end";
 }
 
-const DrawerNotch = ({ className, children, side = "left", ...props }: DrawerNotchProps) => {
-  // Wedge bridges the notch's bottom-edge corner into the tray's top edge.
-  // For a left-attached notch (the default), the wedge sits at the notch's
-  // bottom-right; for a right-attached notch, mirror it to the bottom-left.
+const DrawerNotch = ({ className, children, side = "start", ...props }: DrawerNotchProps) => {
+  // Wedge bridges the notch's bottom inline-end corner into the tray's top edge.
+  //
+  // LOCAL PATCH (Contact Center): both the DOM order and the SVG path used to be picked from a
+  // physical left/right. Neither needs to be: the row is `flex-row`, which is direction-aware, so
+  // writing {pill}{wedge} already renders wedge-on-the-left under RTL. Only the path's curve is
+  // physical, and `rtl:-scale-x-100` mirrors it.
+  //
+  // That class, not a rule in some stylesheet: an earlier draft of this comment pointed at an
+  // `rtl.css` that does not exist in this repo — so under `dir="rtl"` the wedge pointed the wrong
+  // way and nothing failed loudly. Keeping the mirror on the element means it travels with the
+  // component when a consumer copies it in, which a global stylesheet would not.
   const wedge = (
-    <svg aria-hidden width="12" height="12" viewBox="0 0 12 12" className="block shrink-0 self-end">
-      <path
-        d={
-          side === "right"
-            ? "M 12 0 L 12 12 L 0 12 A 12 12 0 0 0 12 0 Z"
-            : "M 0 0 L 0 12 L 12 12 A 12 12 0 0 1 0 0 Z"
-        }
-        fill="#434446"
-      />
+    <svg
+      aria-hidden
+      data-drawer-wedge
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      className="block shrink-0 self-end rtl:-scale-x-100"
+    >
+      <path d="M 0 0 L 0 12 L 12 12 A 12 12 0 0 1 0 0 Z" fill="#434446" />
     </svg>
   );
 
   return (
     <div className="relative flex flex-row items-end">
-      {side === "right" && wedge}
+      {side === "end" && wedge}
       <div
         className={cn(
-          "flex items-center gap-1 rounded-t-[18px] bg-black-400 px-1.5 pt-1.5 pb-1.5",
-          side === "right" ? "flex-row-reverse" : "flex-row",
+          "flex flex-row items-center gap-1 rounded-t-[18px] bg-black-400 px-1.5 pt-1.5 pb-1.5",
           className,
         )}
         {...props}
       >
         {children}
       </div>
-      {side === "left" && wedge}
+      {side === "start" && wedge}
     </div>
   );
 };

package/apps/lib/components/DropdownMenu.tsx

@@ -507,6 +507,20 @@ export const menuContentStyles = cva(
     // 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: {

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,7 @@ 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 {
@@ -56,6 +55,8 @@ export function FieldShell({
   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.
@@ -79,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
@@ -90,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>
         )}
@@ -108,7 +113,7 @@ 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}