torch-glare 2.5.4 → 2.5.6

package/apps/lib/components/BadgeField.tsx

@@ -9,7 +9,7 @@ import {
   FocusEvent,
 } from "react";
 import { cn } from "../utils/cn";
-import { Tooltip, ToolTipSide } from "./Tooltip";
+import { ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Themes } from "../utils/types";
 import { Icon, Input, Group, Trilling } from "./Input";
@@ -22,8 +22,13 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "va
   size?: "XS" | "S" | "M"; // this is used to change the size style of the component
   variant?: "SystemStyle" | "PresentationStyle";
   icon?: ReactNode; // to add left side icon if you pass it
-  errorMessage?: string; // to show tooltip component when error_message not null
+  /** Marks the field invalid: any non-undefined value turns on the negative border. */
+  errorMessage?: string;
   onTable?: boolean; // to change the border style of the component when it is on table
+  /**
+   * @deprecated Ignored. The error tooltip was removed — an invalid field is shown by its negative
+   * border alone. Kept so existing call sites keep compiling; it will go in a future major.
+   */
   toolTipSide?: ToolTipSide;
   label?: string;
   required?: boolean;
@@ -32,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>(
@@ -45,12 +59,15 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
     errorMessage,
     onTable,
     variant = "PresentationStyle",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op, destructured to keep it out of the {...props} spread
     toolTipSide,
     className,
     actionButton,
     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,
@@ -75,6 +92,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       selectedTagsStack,
       handleSelectTag,
       handleUnselectTag,
+      handleCreateTag,
       handleKeyDown,
       setFocusedTagIndex,
       filterTagsBySearch,
@@ -86,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
@@ -100,77 +119,103 @@ 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}>
-        <Tooltip toolTipSide={toolTipSide} open={errorMessage !== undefined} text={errorMessage}>
-          <PopoverTrigger asChild>
-            <Group
-              dir={dir}
-              error={errorMessage !== undefined}
-              onTable={onTable}
-              data-theme={theme}
-              variant={variant}
-              tabIndex={isPopoverOpen ? 0 : -1}
-              onKeyDown={handleKeyDown}
-              size={size === "XS" ? "S" : size}
-              ref={inputGroupRef}
-              onFocus={(e: FocusEvent<HTMLDivElement>) => {
-                setDropDownListWidth(e.currentTarget.offsetWidth);
+        <PopoverTrigger asChild>
+          <Group
+            dir={dir}
+            error={errorMessage !== undefined}
+            onTable={onTable}
+            data-theme={theme}
+            variant={variant}
+            tabIndex={isPopoverOpen ? 0 : -1}
+            onKeyDown={handleKeyDown}
+            size={size === "XS" ? "S" : size}
+            ref={inputGroupRef}
+            onFocus={(e: FocusEvent<HTMLDivElement>) => {
+              setDropDownListWidth(e.currentTarget.offsetWidth);
+            }}
+            className={cn(
+              "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+              {
+                "flex-wrap justify-start": isPopoverOpen,
+                "h-fit": isPopoverOpen,
+              },
+              className,
+            )}
+          >
+            {icon && <Icon>{icon}</Icon>}
+
+            {selectedTagsStack.map((tag, index) => (
+              <Badge
+                key={tag.id}
+                size={size}
+                color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
+                label={tag.name}
+                isClosable={true}
+                onClose={() => handleUnselectTag(tag.id)}
+                className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
+                tabIndex={focusedTagIndex === index ? 0 : -1}
+              />
+            ))}
+
+            <Input
+              {...props}
+              value={searchTags}
+              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);
+                setIsPopoverOpen(true);
+              }}
+              ref={inputRef}
               className={cn(
-                "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+                "min-w-[100px] w-full", // Added w-full to Input
                 {
-                  "flex-wrap justify-start": isPopoverOpen,
-                  "h-fit": isPopoverOpen,
+                  "!h-[18px]": size === "XS",
+                  "!h-[22px]": size === "S",
+                  "!h-[24px]": size === "M",
                 },
-                className,
-              )}
-            >
-              {icon && <Icon>{icon}</Icon>}
-
-              {selectedTagsStack.map((tag, index) => (
-                <Badge
-                  key={tag.id}
-                  size={size}
-                  color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
-                  label={tag.name}
-                  isClosable={true}
-                  onClose={() => handleUnselectTag(tag.id)}
-                  className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
-                  tabIndex={focusedTagIndex === index ? 0 : -1}
-                />
-              ))}
-
-              <Input
-                {...props}
-                value={searchTags}
-                onChange={(e) => {
-                  filterTagsBySearch(e.target.value);
-                }}
-                onFocus={(e) => {
-                  props.onFocus?.(e);
-                  setFocusedTagIndex(null);
-                  setIsPopoverOpen(true);
-                }}
-                ref={inputRef}
-                className={cn(
-                  "min-w-[100px] w-full", // Added w-full to Input
-                  {
-                    "!h-[18px]": size === "XS",
-                    "!h-[22px]": size === "S",
-                    "!h-[24px]": size === "M",
-                  },
-                )}
-              />
-              {actionButton && (
-                <Trilling className="py-0">
-                  {/* Keep the ActionButton right aligned */}
-                  {actionButton}
-                </Trilling>
               )}
-            </Group>
-          </PopoverTrigger>
-        </Tooltip>
+            />
+            {actionButton && (
+              <Trilling className="py-0">
+                {/* Keep the ActionButton right aligned */}
+                {actionButton}
+              </Trilling>
+            )}
+          </Group>
+        </PopoverTrigger>
 
         <PopoverContent
           dir={dir}
@@ -187,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
@@ -230,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/Card.tsx

@@ -6,7 +6,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 export const cardStyles = cva(
   [
     "flex flex-col justify-start",
-    "gap-2 rounded-[12px] border",
+    // `radius/xl` is 12px — the same value this literal had, now taken from the shared scale.
+    "gap-2 rounded-radius-xl border",
     "transition-all ease-in-out duration-200",
     "p-[16px]",
     "border-border-presentation-global-primary",

package/apps/lib/components/ContextMenu.tsx

@@ -139,16 +139,27 @@ const ContextMenuContent = React.forwardRef<
         data-theme={theme}
         ref={ref}
         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-context-menu-content-available-height))`,
+          maxHeight: `min(${maxHeight}px, var(--radix-context-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>
       </ContextMenuPrimitive.Content>
     </ContextMenuPrimitive.Portal>
   ),
@@ -180,18 +191,45 @@ const ContextMenuSubContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
     variant?: "PresentationStyle";
     autoGroup?: boolean;
+    maxHeight?: number;
   }
->(({ className, variant = "PresentationStyle", autoGroup = true, children, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(menuContentStyles({ variant }), className)}
-      {...props}
-    >
-      {autoGroup ? autoGroupChildren(children) : children}
-    </ContextMenuPrimitive.SubContent>
-  </ContextMenuPrimitive.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,
+  ) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        collisionPadding={collisionPadding}
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-context-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>
+      </ContextMenuPrimitive.SubContent>
+    </ContextMenuPrimitive.Portal>
+  ),
+);
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuItem = React.forwardRef<
@@ -487,16 +525,19 @@ 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 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",
   ],
   {
     variants: {
@@ -506,9 +547,11 @@ 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/DataViews/context.ts

@@ -129,8 +129,8 @@ export interface FiltersContextValue {
   setFilters: (filters: FilterState) => void;
   /**
    * What each filter control is, read off the `FormBuilder` children of `DataViews.Filters` —
-   * never derived from the rows. The root collects them as well, so `Filters.Summary` can label a
-   * chip even when it is rendered outside `Filters`.
+   * never derived from the rows. The root collects them as well, so a consumer such as
+   * `Filters.Presets` can resolve a field by path even when it is rendered outside `Filters`.
    */
   filterFields: readonly FilterFieldDescriptor[];
 }

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
@@ -264,9 +270,9 @@ function DataViewsRoot({
     [isPanelOpen, setPanelOpen],
   );
 
-  // The descriptors as well as the value: `Filters.Summary` needs labels for its chips, and it is
-  // routinely rendered outside `Filters` — above the table, in a toolbar — where it cannot reach
-  // the context `Filters` provides to its own children.
+  // The descriptors as well as the value: a consumer such as `Filters.Presets` resolves a field by
+  // path, and may be rendered outside `Filters` — above the table, in a toolbar — where it cannot
+  // reach the context `Filters` provides to its own children.
   const filterFields = useMemo(() => collectFilterFields(children), [children]);
 
   const setFilters = useCallback(
@@ -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/filters/filters.tsx

@@ -10,7 +10,6 @@ import { FiltersContext, useDataViewsFilters } from "../context";
 import { collectFilterFields, renderFields } from "./children";
 import { Custom } from "./custom";
 import { Presets } from "./presets";
-import { Summary } from "./summary";
 import { Sync } from "./sync";
 import { toFormValues } from "./values";
 import type { FiltersProps } from "../types";
@@ -155,5 +154,4 @@ function FiltersRoot({
 export const Filters = Object.assign(FiltersRoot, {
   Presets,
   Custom,
-  Summary,
 });

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);