torch-glare 2.5.5 → 2.5.6

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

@@ -125,7 +125,28 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
     // `min-w-0` so the rail can be squeezed: its grid track no longer grows to fit a long label
     // (see form-renderer.tsx), so the column has to be allowed to shrink and let the labels
     // truncate instead of spilling over the fields column.
-    <StepperRail activeStep={currentStep} orientation="vertical" className="min-w-0 shrink-0">
+    //
+    // The rail is navigation, so it stays put while the fields scroll past it. Two of these three
+    // classes are load-bearing in a way that is easy to get wrong:
+    //
+    // `self-start` is NOT optional. The rail is a grid item, and a grid item defaults to
+    // `align-self: stretch` — its box is already the full row height, so `sticky` alone has no room
+    // to move within and does exactly nothing. This is the silent-no-op version of this fix.
+    //
+    // `top-[72px]`, not `top-0`. `FormHeaderBar` is `absolute inset-x-0 top-0` over a 44px pill at a
+    // 4px inset, so it covers the scrollport's first 48px, and the body's own `pt-[72px]` is inside
+    // the scrollport and does not push sticky down. `top-0` parks the rail under the floating
+    // header; 72px clears it and matches the offset used across this component family.
+    //
+    // No height cap: the scrollport is the form body, not the viewport, so a `100dvh`-based
+    // `max-h` would be wrong in any bounded container (a drawer, the 640px docs frame). A rail
+    // taller than the body simply scrolls until its end is reached, which is standard sticky
+    // behaviour and correct here.
+    <StepperRail
+      activeStep={currentStep}
+      orientation="vertical"
+      className="min-w-0 shrink-0 sticky self-start top-[72px]"
+    >
       {titles.map((title, index) => {
         // The step buttons ARE the navigation: click to move. Backward is free;
         // clicking forward validates the steps in between (goToStep) and stops at
@@ -272,11 +293,38 @@ type TriggerFn = (names?: FieldPath<FieldValues>[]) => Promise<boolean>;
  * the form's `trigger` (passed in — no `useFormContext` needed). Inert when
  * `steps` is empty (a form without a stepper still calls this, for hooks order).
  */
+/**
+ * LOCAL PATCH (Contact Center): optional external control of the active step.
+ *
+ * Upstream owns `currentStep` outright and advances it by clicking a step, gated on validating
+ * every step in between. That is right for a wizard whose steps are pages of one form — but not
+ * for one whose steps are owned by a SERVER: the import wizard goes upload → (job created) →
+ * mapping → (columns mapped, import started) → progress, and the user cannot click ahead to a
+ * step that does not exist yet.
+ *
+ * Passing `activeStep`/`onStepChange` makes the rail a display of someone else's state: internal
+ * advancement is suppressed and click-to-navigate is reported rather than applied. Omit both and
+ * every existing caller behaves exactly as before.
+ */
+export interface StepperControl {
+  activeStep?: number;
+  onStepChange?: (index: number) => void;
+}
+
 export function useStepperState(
   steps: React.ReactElement<StepProps>[],
   trigger: TriggerFn,
+  control?: StepperControl,
 ): StepperContextValue {
-  const [currentStep, setCurrentStep] = React.useState(0);
+  const [internalStep, setInternalStep] = React.useState(0);
+  // LOCAL PATCH (Contact Center): controlled when `activeStep` is supplied — see `StepperControl`.
+  const isControlled = control?.activeStep !== undefined;
+  const currentStep = isControlled ? (control?.activeStep as number) : internalStep;
+  const setCurrentStep: React.Dispatch<React.SetStateAction<number>> = (value) => {
+    const next = typeof value === "function" ? (value as (p: number) => number)(currentStep) : value;
+    if (isControlled) control?.onStepChange?.(next);
+    else setInternalStep(next);
+  };
   // Steps that have passed their last validation — kept so their checkmark persists when the
   // user navigates back to an earlier step.
   const [completedSteps, setCompletedSteps] = React.useState<Set<number>>(new Set());
@@ -305,6 +353,12 @@ export function useStepperState(
   // the first step that has errors (so you can't skip past an invalid step).
   const goToStep = async (index: number) => {
     const target = Math.max(0, Math.min(index, Math.max(0, lastIndex)));
+    // LOCAL PATCH (Contact Center): controlled — the owner decides whether the move is allowed,
+    // so report it and do not run the forward-validation gauntlet.
+    if (isControlled) {
+      control?.onStepChange?.(target);
+      return;
+    }
     if (target <= currentStep) {
       setCurrentStep(target);
       return;

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

@@ -6,6 +6,7 @@ import type {
   Resolver,
   UseFormReturn,
 } from "react-hook-form";
+import type { FormDrawerProps } from "./FormDrawer";
 
 /**
  * FormRenderer — the chrome around a `FormBuilder`. You author the fields as **JSX children**
@@ -67,6 +68,42 @@ export interface FormRendererProps<T extends FieldValues = FieldValues> {
   /** `id` on the underlying `<form>`. Optional — FormRenderer generates and wires one otherwise. */
   id?: string;
 
+  /**
+   * LOCAL PATCH (Contact Center): detail-tabs control (when the children are a
+   * `FormRenderer.Sidebar` + `FormRenderer.Tab`s). Inert in form mode.
+   *
+   * `activeTab`/`onTabChange` make the rail controlled, so the caller can keep the tab in the URL
+   * (`useTabPersistence` → `?tab=`); omit both for the library's uncontrolled default.
+   * `embedded` renders without the rounded body card, for a host that already draws one.
+   */
+  activeTab?: string;
+  onTabChange?: (tab: string) => void;
+  embedded?: boolean;
+
+  /**
+   * LOCAL PATCH (Contact Center): external control of a `FormRenderer.Stepper`'s active step,
+   * for a wizard whose steps are owned by something other than form validity — a server job,
+   * say. Omit both and the stepper owns its own step exactly as before. Inert without a Stepper.
+   */
+  activeStep?: number;
+  onStepChange?: (index: number) => void;
+
+  /**
+   * LOCAL PATCH (Contact Center): drawer layout, forwarded to `FormDrawer`. One object rather
+   * than eight flat props, since none of it means anything on a page. See `FormDrawerProps`.
+   */
+  drawer?: Pick<
+    FormDrawerProps,
+    | "side"
+    | "nested"
+    | "framed"
+    | "hideHeader"
+    | "bareBody"
+    | "description"
+    | "wrapperClassName"
+    | "className"
+  >;
+
   /** Drawer control (when `display === "drawer"`). */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;

package/apps/lib/components/SectionBlock.tsx

@@ -1,9 +1,13 @@
 import { forwardRef, HTMLAttributes, ReactNode } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
+import { horizontalScrollerStyles } from "../utils/scroller";
 
+// LOCAL PATCH (Contact Center): the pill's side padding is asymmetric (16 leading / 22 trailing),
+// so it must be logical — `ps`/`pe` rather than `pl`/`pr`. This pill heads every section card, so
+// mirrored the wrong way it reads as a systematic misalignment across the whole page.
 const titleBadge = cva(
-  "flex pt-2 pb-2 pl-[16px] pr-[22px] justify-center items-center gap-[6px] rounded-[10px] self-start typography-headers-medium-medium text-[#F4F4F4]",
+  "flex pt-2 pb-2 ps-[16px] pe-[22px] justify-center items-center gap-[6px] rounded-[10px] self-start typography-headers-medium-medium text-[#F4F4F4]",
   {
     variants: {
       color: {
@@ -56,12 +60,29 @@ const header = cva("flex px-[6px] justify-between gap-3", {
   defaultVariants: { variant: "Default" },
 });
 
-const body = cva("flex w-full flex-col", {
+// LOCAL PATCH (Contact Center): the body is the section's horizontal scrollport.
+//
+// `Table` renders `overflow-visible w-auto` (so its sticky header can reach a real scrollport), so
+// a table wider than its card does not clip or scroll itself — it widens the card, and then the
+// page. Only one call site in the app wraps its table in `TableScroller`; the rest drop a bare
+// `<Table>` straight into a section. Owning the scroll here contains all of them at once, and
+// replaces the `Table` variant's old `overflow-hidden`, which truncated instead of scrolling.
+//
+// `overflow-y-hidden` is required, not decorative: CSS computes `overflow-y: visible` to `auto`
+// whenever `overflow-x` is not `visible`, so without it every section grows a spurious vertical
+// scrollbar. The body is content-height, so nothing is clipped vertically. Same reasoning, and the
+// same scrollbar styling, as `TableScroller`.
+//
+// The cost: a scrollport is the containing block for `position: sticky`, so a `<Table>`'s sticky
+// header inside a section now pins to a box that never scrolls vertically — i.e. it stops
+// sticking. Sections hold short tables, and in `variant="Table"` those headers were already inert
+// under the old `overflow-hidden`.
+const body = cva(`flex w-full flex-col ${horizontalScrollerStyles}`, {
   variants: {
     variant: {
       Default: "px-[42px] gap-[2px]",
       // Full bleed, with the rule that separates the header from the table.
-      Table: "mt-[6px] border-t border-border-presentation-global-primary overflow-hidden",
+      Table: "mt-[6px] border-t border-border-presentation-global-primary",
     },
   },
   defaultVariants: { variant: "Default" },

package/apps/lib/components/Select.tsx

@@ -16,12 +16,12 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
-    VariantProps<typeof PopoverTriggerStyles> & {
-      /** Marks the trigger invalid: any non-undefined value turns on the negative border. */
-      errors?: string;
-      icon?: string;
-      theme?: Themes;
-    }
+  VariantProps<typeof PopoverTriggerStyles> & {
+    /** Marks the trigger invalid: any non-undefined value turns on the negative border. */
+    errors?: string;
+    icon?: string;
+    theme?: Themes;
+  }
 >(
   (
     {
@@ -124,9 +124,9 @@ SelectScrollDownButton.displayName = "SelectScrollDownButton";
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
-    VariantProps<typeof SelectContentStyles> & {
-      theme?: Themes;
-    }
+  VariantProps<typeof SelectContentStyles> & {
+    theme?: Themes;
+  }
 >(
   (
     { className, children, variant = "PresentationStyle", position = "popper", theme, ...props },

package/apps/lib/components/SlideDatePicker.tsx

@@ -161,11 +161,13 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
                 (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
               type: "input",
               readOnly: true,
+              theme,
             })
           ) : (
             /* If the children is not a valid element, Show the default input */
             <InputField
               readOnly
+              theme={theme}
               type="input"
               {...props}
               childrenSide={

package/apps/lib/components/Table.tsx

@@ -6,6 +6,7 @@ import { useRef } from "react";
 import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import { useResize } from "../hooks/useResize";
+import { horizontalScrollerStyles } from "../utils/scroller";
 
 type TableHeadVariantsProps = VariantProps<typeof tableHeadVariants>;
 
@@ -18,18 +19,20 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    // `overflow-hidden` is the default, and it is load-bearing twice over: the table is `w-auto`,
-    // so one wider than its container would otherwise push the whole page wide and put a horizontal
-    // scrollbar on the layout; and callers that give the table a radius rely on it to clip the
-    // square header band out of the rounded corners.
+    // `overflow-visible` is the default, so the table does NOT clip or scroll itself. That is what
+    // lets `TableHeader`'s `sticky` reach past the table to the nearest real scrollport and
+    // actually pin — which is the whole point of it being sticky.
     //
-    // The cost is that it makes the table its own scroll container, and `TableHeader`'s `sticky`
-    // resolves against the *nearest* scrollport — so inside a clipping table the header pins to a
-    // box that never scrolls, i.e. does nothing. That is the right default: a header only benefits
-    // from sticking when the table sits in a scroller, and such a caller passes `overflow-visible`
-    // (tailwind-merge lets theirs win) to bind it to that scroller instead. Only do that where the
-    // scroller is `min-w-0`, or the width problem above comes back — `DataViews`' table view is the
-    // worked example.
+    // The consequence is that the table is `w-auto` and unclipped, so **a wider-than-its-container
+    // table is the container's problem**. Every table therefore needs a scrolling ancestor, or it
+    // pushes its container — and eventually the page — wide. Two provide one:
+    //   • `TableScroller` (below), wrapping the table directly. `FormBuilder.Table` uses it.
+    //   • `SectionBlock`'s body, which is `overflow-x-auto` — so a bare `<Table>` dropped into any
+    //     section card scrolls inside the card. That covers the app's detail tabs.
+    // `DataViews`' table view supplies its own `min-w-0 overflow-auto` scroller instead.
+    //
+    // A caller that wants the old self-clipping behaviour passes `overflow-hidden`
+    // (tailwind-merge lets theirs win) and gives up the sticky header in exchange.
     //
     // `[border-collapse:separate]` is what lets the header cells keep their borders while stuck.
     className={cn("overflow-visible w-auto [border-collapse:separate] border-spacing-0", className)}
@@ -388,23 +391,7 @@ TableEndAction.displayName = "TableEndAction";
  */
 const TableScroller = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "w-full overflow-x-auto overflow-y-hidden",
-        "[&::-webkit-scrollbar]:h-[14px]",
-        "[&::-webkit-scrollbar-track]:bg-transparent",
-        "[&::-webkit-scrollbar-thumb]:rounded-[7px]",
-        "[&::-webkit-scrollbar-thumb]:border-[5px] [&::-webkit-scrollbar-thumb]:border-solid",
-        "[&::-webkit-scrollbar-thumb]:border-transparent",
-        "[&::-webkit-scrollbar-thumb]:bg-clip-content",
-        "[&::-webkit-scrollbar-thumb]:bg-background-presentation-body-scroller-default",
-        "[&::-webkit-scrollbar-thumb:hover]:border-[3px]",
-        "[&::-webkit-scrollbar-thumb:hover]:bg-background-presentation-body-scroller-hover",
-        className,
-      )}
-      {...props}
-    >
+    <div ref={ref} className={cn("w-full", horizontalScrollerStyles, className)} {...props}>
       {children}
     </div>
   ),

package/apps/lib/hooks/useActiveTreeItem.ts

@@ -5,10 +5,13 @@ export function useActiveTreeItem(itemIds: string[]) {
   const [activeId, setActiveId] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!itemIds || itemIds.length === 0) {
+    // An empty list is a legitimate answer — a page with no Quick Nav has nothing to track. Only a
+    // missing list is a caller mistake worth a warning.
+    if (!itemIds) {
       console.warn("No itemIds provided to useActiveTreeItem.");
       return;
     }
+    if (itemIds.length === 0) return;
 
     const observer = new IntersectionObserver(
       (entries) => {

package/apps/lib/hooks/useHtmlDir.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+/**
+ * Track the document's text direction from `<html dir>`, updating when it
+ * changes (e.g. on a language switch).
+ *
+ * Several Radix primitives (Tabs, etc.) default to `"ltr"` when no `dir` prop
+ * or `DirectionProvider` is supplied, which leaves them rendered left-to-right
+ * even on an RTL page. Forwarding this value as their `dir` makes them mirror
+ * correctly in Arabic.
+ */
+export function useHtmlDir(): "ltr" | "rtl" {
+  const read = () =>
+    typeof document !== "undefined" && document.documentElement.dir === "rtl"
+      ? "rtl"
+      : "ltr";
+
+  const [dir, setDir] = React.useState<"ltr" | "rtl">(read);
+
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const html = document.documentElement;
+    const sync = () => setDir(read());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(html, { attributes: true, attributeFilter: ["dir"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return dir;
+}

package/apps/lib/hooks/useTagSelection.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export interface Tag {
   id: string;
@@ -9,16 +9,22 @@ export interface Tag {
   [key: string]: unknown;
 }
 
+/** Stable key for a selection, used to tell an external change from one we just made. */
+const signatureOf = (tags: Tag[]) => tags.map((t) => t.id).join("\0");
+
 export const useTagSelection = ({
   Tags,
   onTagsChange,
   inputRef,
   singleSelect = false,
+  creatable = false,
 }: {
   Tags: Tag[];
   onTagsChange?: (selectedTags: Tag[]) => void;
   inputRef?: React.RefObject<HTMLInputElement | null>;
   singleSelect?: boolean;
+  /** Allow typed text to become a selected tag that was never in `Tags`. */
+  creatable?: boolean;
 }) => {
   // Split initial tags into selected and unselected
   const initialSelectedTags = Tags.filter((tag) => tag.isSelected);
@@ -36,18 +42,63 @@ export const useTagSelection = ({
   const [focusedPopoverIndex, setFocusedPopoverIndex] = useState<number | null>(null);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  // Update internal state when Tags prop changes
+  // LOCAL PATCH (Contact Center): key both effects below off a SIGNATURE of `Tags`, not the array
+  // reference. A caller that builds its tag list inline — `MultiSelectField` does, from the form
+  // value — hands over a fresh array every render, so the upstream `[Tags]` dependency changed on
+  // every pass: effect → setTags → re-render → new array → effect, an infinite render loop.
+  const tagsSignature = Tags.map((tag) => `${tag.id}:${tag.isSelected ? 1 : 0}`).join(" ");
+
+  // Update internal state when Tags actually changes.
+  //
+  // Filter against the INCOMING selection as well as the one we hold: on an external sync (the
+  // hydration case below) `selectedTagsStack` is still the pre-sync value at this point, so
+  // filtering by it alone left the freshly selected values sitting in the dropdown as if they
+  // were still available to add.
   useEffect(() => {
-    // Only update if the Tags array reference has changed
-    const selectedIds = selectedTagsStack.map((tag) => tag.id);
-    setTags(Tags.filter((tag) => !selectedIds.includes(tag.id)));
-  }, [Tags]);
+    const selectedIds = new Set([
+      ...selectedTagsStack.map((tag) => tag.id),
+      ...Tags.filter((tag) => tag.isSelected).map((tag) => tag.id),
+    ]);
+    setTags(Tags.filter((tag) => !selectedIds.has(tag.id)));
+  }, [tagsSignature]);
+
+  // LOCAL PATCH (Contact Center): follow the incoming selection.
+  //
+  // Upstream seeded `selectedTagsStack` from `Tags` ONCE, and the effect above refreshed only the
+  // AVAILABLE list — never the selection. That made the component effectively uncontrolled: on an
+  // edit form, react-hook-form's `reset()` hydration lands after mount, so a person's saved emails
+  // and tags rendered as an empty field. Re-sync whenever the incoming selected set differs from
+  // what we hold, and mark the change as external so it isn't echoed straight back to the parent.
+  const incomingSelected = Tags.filter((tag) => tag.isSelected);
+  const incomingSignature = signatureOf(incomingSelected);
+  const lastSyncedRef = useRef<string | null>(null);
+  // Starts true so the mount pass below is swallowed — see the notify effect.
+  const skipNotifyRef = useRef(true);
 
-  // Notify parent component when tags change
   useEffect(() => {
-    if (onTagsChange) {
-      onTagsChange(selectedTagsStack);
+    if (lastSyncedRef.current === incomingSignature) return;
+    lastSyncedRef.current = incomingSignature;
+    // Already matches (we made this change ourselves) — don't re-set state, so the notify flag
+    // stays untouched and the user's next real edit still reaches the parent.
+    if (signatureOf(selectedTagsStack) === incomingSignature) return;
+    skipNotifyRef.current = true;
+    setSelectedTagsStack(
+      singleSelect && incomingSelected.length > 0 ? [incomingSelected[0]] : incomingSelected,
+    );
+  }, [incomingSignature]);
+
+  // Notify parent component when tags change.
+  //
+  // LOCAL PATCH (Contact Center): upstream fired this on MOUNT too, so an untouched field wrote
+  // `[]` into the form — marking it dirty and adding an empty-array key to the request payload for
+  // a value nobody entered. It also fires for a sync from the parent, which would echo the value
+  // straight back. Both are skipped via the flag.
+  useEffect(() => {
+    if (skipNotifyRef.current) {
+      skipNotifyRef.current = false;
+      return;
     }
+    onTagsChange?.(selectedTagsStack);
   }, [selectedTagsStack]);
 
   // Filter tags based on search input
@@ -92,6 +143,38 @@ export const useTagSelection = ({
     setFocusedTagIndex(null);
   };
 
+  /**
+   * LOCAL PATCH (Contact Center): turn typed text into a selected tag.
+   *
+   * Upstream had no way in but `handleSelectTag(id)` against the fixed `Tags` list, so a free-text
+   * list (a person's emails, an organization's aliases) could not be expressed as a badge field at
+   * all — which is why those lists were built as one-column tables instead. Matching an existing
+   * tag by name selects it rather than creating a duplicate; the id IS the text, so a value the
+   * caller round-trips keeps a stable identity.
+   */
+  const handleCreateTag = (rawName: string) => {
+    const name = rawName.trim();
+    if (!name) return;
+    const sameName = (tag: Tag) => tag.name.toLowerCase() === name.toLowerCase();
+
+    // Already chosen — just clear the box so the user sees their text was accepted.
+    if (selectedTagsStack.some(sameName)) {
+      filterTagsBySearch("");
+      return;
+    }
+    // Offered in the list — select it instead of creating a look-alike.
+    const existing = tags.find(sameName);
+    if (existing) {
+      handleSelectTag(existing.id);
+      return;
+    }
+
+    const created: Tag = { id: name, name, value: name, isSelected: true };
+    setSelectedTagsStack((prev) => (singleSelect ? [created] : [...prev, created]));
+    filterTagsBySearch("");
+    setFocusedPopoverIndex(null);
+  };
+
   // Reset the hook state with new data
   const reset = (newTags: Tag[] = [], newSelectedTags: Tag[] = []) => {
     // In single select mode, ensure we only have at most one selected tag
@@ -198,6 +281,9 @@ export const useTagSelection = ({
     searchTags,
     handleSelectTag,
     handleUnselectTag,
+    // LOCAL PATCH (Contact Center) — see above.
+    handleCreateTag,
+    creatable,
     handleKeyDown,
     setFocusedTagIndex,
     setFocusedPopoverIndex,

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.5",
+  "version": "2.5.6",
   "generatedBy": "scripts/bin/generateRegistry",
   "npmVersions": {
     "@dnd-kit/core": "^6.3.1",
@@ -439,7 +439,6 @@
         "components/Table",
         "components/TextEditor",
         "components/Textarea",
-        "components/Tooltip",
         "hooks/useTagSelection",
         "layouts/FieldSection",
         "utils/cn"
@@ -461,6 +460,7 @@
         "components/SectionBlock",
         "components/Stepper",
         "components/TabFormItem",
+        "hooks/useHtmlDir",
         "utils/cn"
       ]
     },
@@ -772,7 +772,8 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
-        "utils/cn"
+        "utils/cn",
+        "utils/scroller"
       ]
     },
     {
@@ -883,7 +884,8 @@
         "components/Button",
         "components/Checkbox",
         "hooks/useResize",
-        "utils/cn"
+        "utils/cn",
+        "utils/scroller"
       ]
     },
     {
@@ -1062,6 +1064,13 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "useHtmlDir",
+      "type": "hooks",
+      "path": "hooks/useHtmlDir.ts",
+      "npmDependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "useInfiniteScroll",
       "type": "hooks",
@@ -1190,6 +1199,13 @@
       "npmDependencies": [],
       "registryDependencies": []
     },
+    {
+      "name": "scroller",
+      "type": "utils",
+      "path": "utils/scroller.ts",
+      "npmDependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "types",
       "type": "utils",

package/apps/lib/utils/scroller.ts

@@ -0,0 +1,26 @@
+/**
+ * LOCAL PATCH (Contact Center): the design's 14px horizontal scroller — a thin track that thickens
+ * and turns blue on hover.
+ *
+ * Lives here, not on `Table`, because two unrelated components wear it: `TableScroller` (the
+ * wrapper `FormBuilder.Table` puts around its grid) and `SectionBlock`'s body (which scrolls any
+ * wide content dropped into a section card). A section card should not have to import the table
+ * component — and its consumers should not pull in the table's dependencies — just to share a
+ * scrollbar.
+ *
+ * `overflow-y-hidden` is part of the set on purpose: CSS computes `overflow-y: visible` to `auto`
+ * whenever `overflow-x` is not `visible`, so omitting it gives every consumer a spurious vertical
+ * scrollbar.
+ */
+export const horizontalScrollerStyles = [
+  "overflow-x-auto overflow-y-hidden",
+  "[&::-webkit-scrollbar]:h-[14px]",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-[7px]",
+  "[&::-webkit-scrollbar-thumb]:border-[5px] [&::-webkit-scrollbar-thumb]:border-solid",
+  "[&::-webkit-scrollbar-thumb]:border-transparent",
+  "[&::-webkit-scrollbar-thumb]:bg-clip-content",
+  "[&::-webkit-scrollbar-thumb]:bg-background-presentation-body-scroller-default",
+  "[&::-webkit-scrollbar-thumb:hover]:border-[3px]",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-background-presentation-body-scroller-hover",
+].join(" ");

package/docs/components/badge-field.md

@@ -477,6 +477,32 @@ Extends all Input element props (except size and variant).
 | addLabel | `string` | `'add'` | Label for the add action shown in the field |
 | dir | `string` | `'ltr'` | Reading direction (`'rtl'` for right-to-left) |
 | placeholder | `string` | - | Input placeholder text |
+| creatable | `boolean` | `false` | Let the user type a value that is not in `tags` and commit it as a badge |
+| createLabel | `(value: string) => string` | ``value => `Create "${value}"` `` | Label for the create row; receives the typed text |
+
+### Creatable tags
+
+With `creatable`, the field stops being a picker over a fixed list: whatever the user types can
+become a badge. Enter or comma commits it; Backspace on an empty box removes the last badge. Pass
+`tags={[]}` for a pure free-text list — emails, aliases, arbitrary labels — which otherwise has to be
+modelled as a one-column table.
+
+```tsx
+<BadgeField
+  creatable
+  tags={recipients}
+  onValueChange={setRecipients}
+  placeholder="Add an email…"
+  createLabel={(value) => `Invite ${value}`}
+/>
+```
+
+The create row is suppressed when the typed text already matches a selected or listed tag
+(case-insensitive), so you cannot produce duplicates. With `creatable` set, the empty-list message
+becomes "Type a value and press Enter" rather than "All tags selected".
+
+> `FormBuilder.MultiSelect` / `.Tags` forward `creatable`, but **not** `createLabel` — inside a form
+> the create row keeps the default label.
 
 ### Tag Type