torch-glare 2.5.4 → 2.5.6

package/docs/components/drawer.md

@@ -433,7 +433,7 @@ There is **no automatic per-direction styling**. The anchor is set on the root w
 | Drag handle | on — `<DrawerPanel showHandle>` | off (the default) | off (the default) |
 | Frame / tray | usually off (`framed={false}`) for clean sheet | on (default) for the dark tray | on (default) |
 | Rounded corners | top corners only | all/left corners | top-left + bottom corners |
-| Notch side | top-left (`notchSide="left"`) | top-left | mirror to `notchSide="right"` |
+| Notch side | inline-start (`notchSide="start"`) | inline-start | mirror to `notchSide="end"` |
 | Best for | mobile sheets, action sheets, comments | create/edit forms, filters, detail panels | RTL panels, side navigation |
 
 ### Bottom (default)
@@ -509,7 +509,7 @@ A floating panel anchored to the right edge — the canonical home for create/ed
 
 ### Left (RTL / navigation)
 
-Mirror of the right recipe: `direction="left"`, anchor to the left edge, and if you use a notch, set `notchSide="right"` so the tab mirrors correctly.
+Mirror of the right recipe: `direction="left"`, anchor to the left edge, and if you use a notch, set `notchSide="end"` so the tab sits on the panel's trailing edge.
 
 ```tsx
 <Drawer direction="left">
@@ -517,7 +517,7 @@ Mirror of the right recipe: `direction="left"`, anchor to the left edge, and if
     <Button variant="PrimeStyle">Open left drawer</Button>
   </DrawerTrigger>
   <DrawerContent
-    notchSide="right"
+    notchSide="end"
     wrapperClassName="top-2 left-2 bottom-2 right-auto mt-0 h-auto w-[420px] max-w-[calc(100vw-16px)]"
     notch={
       <DrawerNotch>
@@ -589,7 +589,7 @@ brings its own background. This is where direction-specific styling is applied.
 |---|---|---|---|
 | `framed` | `boolean` | `true` | Show the dark "tray" frame (border + inset shadow) around the panel. Set `false` for clean bottom sheets. |
 | `notch` | `ReactNode` | — | A `DrawerNotch` tab rendered on the top edge. |
-| `notchSide` | `"left" \| "right"` | `"left"` | Which side the notch attaches to (and which corner stays square). Use `"right"` for left-anchored drawers. |
+| `notchSide` | `"start" \| "end"` | `"start"` | Which **inline** edge the notch attaches to (and which corner stays square). Logical, so it mirrors under `dir="rtl"` without you computing a direction. Use `"end"` for left-anchored drawers. |
 | `wrapperClassName` | `string` | — | Classes on the outer positioned element — this is how you anchor/size the panel per direction. |
 | `className` | `string` | — | Classes on the **dark tray**. Add a `gap-*` here when the tray holds more than one child. |
 | `trayClassName` | `string` | — | **Deprecated** — an alias for `className` (merged last, so it still wins). |
@@ -629,7 +629,7 @@ with each bringing its own background.
 | `DrawerDescription` | Muted supporting text (maps to Vaul `Drawer.Description`). |
 | `DrawerBadge` | Small uppercase status pill. `color`: `Blue \| Green \| Red \| Yellow \| Purple \| Gray` (default `Blue`). |
 | `DrawerFooter` | Bottom action area (`mt-auto`, stacked). |
-| `DrawerNotch` | The top-edge tab container. `side`: `"left" \| "right"`. |
+| `DrawerNotch` | The top-edge tab container. `side`: `"start" \| "end"` (default `"start"`); normally cloned in by `DrawerContent` from `notchSide`. |
 | `DrawerNotchClose` | Round close button for inside a notch. |
 | `DrawerNotchPill` | Pill button for inside a notch. `color`: `Yellow \| Blue \| Gray` (default `Yellow`). Styled `<button>` only — wire navigation yourself via `onClick` (see ["What 'Open in new tab' does"](#what-open-in-new-tab-does)). |
 | `DrawerNotchDivider` | Thin vertical divider between notch items. |

package/docs/components/dropdown-menu.md

@@ -294,6 +294,8 @@ function Example() {
 
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
+The panel itself does not scroll — it clips, and an inner viewport inside it does the scrolling. That keeps the panel's 4px frosted gutter fixed instead of scrolling away with the rows. Submenus behave identically and take their own `maxHeight`.
+
 ```typescript
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@/components/DropdownMenu";
 import { Button } from "@/components/Button";
@@ -396,6 +398,7 @@ function LongMenu() {
 |------|------|---------|-------------|
 | `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
 | `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
+| `maxHeight` | `number` | `320` | Max height (px) before the submenu scrolls. Same `min(maxHeight, available-height)` cap as `DropdownMenuContent` |
 | `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuLabel

package/docs/components/form-builder.md

@@ -96,7 +96,33 @@ panel beside the form is `FormRenderer`'s `summary`.
 ## Field components
 
 Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
-`description`, `required`, `disabled`, `hidden`, `fullWidth`.
+`description`, `required`, `disabled`, `hidden`, `fullWidth`, `hints`.
+
+### Hints
+
+`hints` stacks alerts under a field — helper text, a caveat, a confirmation. Each entry mirrors
+`FieldHint`: `label`, an optional `state` of `info` (default) / `warning` / `error` / `success`, and
+an optional `icon`.
+
+```tsx
+<FormBuilder.Text
+  name="sku"
+  label="SKU"
+  required
+  hints={[
+    { state: "info", label: "Must be unique across the catalogue." },
+    { state: "warning", label: "Changing this breaks existing links." },
+  ]}
+/>
+```
+
+The validation error is not one of these — it is rendered automatically and always comes **first**,
+because it is the actionable message; your hints follow in the order given. A field with no `hints`
+renders exactly as before.
+
+Hints are ignored inside a `FormBuilder.Table` cell (and any other `bare` context): there errors
+surface as a tooltip on the control so a row stays one line tall, and stacking alerts would defeat
+that.
 
 | Component                                                                   | Input                                                                                 | Value                                                        |
 | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -110,6 +136,7 @@ Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
 | `FormBuilder.Select` (`options`)                                            | `Select`                                                                              | `string`                                                     |
 | `FormBuilder.SearchableSelect` (`options`, async: `onSearchChange`/`onLoadMore`/`hasMore`) | `SearchableSelect`                                                      | `string`                                                     |
 | `FormBuilder.MultiSelect` / `.Tags` (`options`)                             | `BadgeField`                                                                          | `string[]`                                                   |
+| `FormBuilder.MultiSelect` / `.Tags` (`creatable`)                           | `BadgeField` with free text                                                           | `string[]` — values not in `options` survive                 |
 | `FormBuilder.RadioList` (`options`, each with optional `description`)       | boxed radio list                                                                      | `string`                                                     |
 | `FormBuilder.CheckboxGroup` (`options`, each with optional `description`)   | boxed checkbox list                                                                   | `string[]`                                                   |
 | `FormBuilder.RadioCards` (`options` with `description`)                     | `RadioCard`                                                                           | `string`                                                     |
@@ -188,7 +215,10 @@ country code.
 `FormBuilder.RadioList` (single-select, `string`) and `FormBuilder.CheckboxGroup` (multi-select,
 `string[]`) render their `options` as a boxed, divided list — control on the left, primary
 label, and an optional per-option `description` shown as a secondary label. The whole row is
-clickable. Multi-select is also available as `.MultiSelect` / `.Tags` (a tag-chip picker).
+clickable. Multi-select is also available as `.MultiSelect` / `.Tags` (a tag-chip picker). Add
+`creatable` to either and the user can type a value that is not in `options` and commit it with
+Enter or comma; pass `options={[]}` for a pure free-text list. (`createLabel` is a `BadgeField`
+prop — it is not forwarded, so the create row keeps its default label inside a form.)
 
 `FormBuilder.SwitchBox` (value `boolean`) is a switch wrapped in a `#f9f9f9` field box. It
 renders like any other field — the `label` sits in the normal label column — and the box holds
@@ -201,6 +231,10 @@ presentation, so it lives there.
 form** (via context), so it submits even when placed in a header / action bar that renders
 _outside_ the `<form>` — no manual `form={id}` wiring.
 
+It also takes `disabled`, for permission gating: someone with read access should still *see* a
+record, so a Save they may not use is disabled rather than removed — a missing button looks broken,
+a disabled one says "not yours to change". The server refuses the write either way.
+
 ## Moved to FormRenderer
 
 These all used to live here. They are chrome, so they now live on

package/docs/components/form-renderer.md

@@ -58,6 +58,7 @@ It renders in the form's header action pill (page) or the drawer header (drawer)
 | `FormRenderer.Back` / `.Next`               | Chevron step controls. The header's action bar prepends them for you.           |
 | `FormRenderer.Sidebar` / `.Tab`             | The display-only [detail-tabs](#detail-tabs-sidebar) view.                     |
 | `FormRenderer.Grid` / `.Row`                | Read-only display cells inside a detail tab.                                    |
+| `FormRenderer.NotchAction`                  | A pill in the drawer's notch. You own the label, so it translates.              |
 
 ### `FormRenderer.Section`
 
@@ -109,6 +110,10 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `actions`                                                      | `ReactNode`                   | The form's action bar — rendered in the header action pill (page) or drawer header (drawer). Put the Save here: `actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}`. A bare `FormBuilder.Submit` auto-targets this form.                                                   |
 | `id`                                                           | `string`                      | `id` on the underlying `<form>`. Optional — FormRenderer generates and wires one otherwise.                                                                                                                                                                                      |
 | `open` / `onOpenChange` / `title` / `badge` / `onOpenInNewTab` | —                             | Drawer control (when `display="drawer"`). `title` / `badge` are strings that override `header.title` / `header.label`.                                                                                                                                                           |
+| `embedded`                                                     | `boolean`                     | Render without the rounded body card, for a host that already draws one. Defaults to `true` in a drawer.                                                                                                                                                                          |
+| `activeTab` / `onTabChange`                                    | `string` / `(tab) => void`    | Make the [detail-tabs](#detail-tabs-sidebar) rail controlled, so the tab can live in the URL (`?tab=audit`) and survive a reload. Omit both for the uncontrolled default. Inert in form mode.                                                                                     |
+| `activeStep` / `onStepChange`                                  | `number` / `(index) => void`  | External control of a `FormRenderer.Stepper`'s step, for a wizard owned by something other than form validity. In controlled mode internal advancement is suppressed and a click is *reported*, not applied. Omit both and the stepper behaves exactly as before.                  |
+| `drawer`                                                       | `{ side?; nested?; framed?; hideHeader?; bareBody?; description?; wrapperClassName?; className? }` | Drawer layout, forwarded to `FormDrawer` — see [Drawer layout](#drawer-layout). One object rather than eight flat props, since none of it means anything on a page.                                                |
 
 ## Drawer
 
@@ -129,6 +134,60 @@ import { FormBuilder } from "@/components/FormBuilder";
 </FormRenderer>
 ```
 
+### Drawer layout
+
+Everything about how the drawer is *shaped* goes in one `drawer` object, because none of it means
+anything on a page:
+
+| Key               | Type                          | Default         | What it does                                                                                       |
+| ----------------- | ----------------------------- | --------------- | -------------------------------------------------------------------------------------------------- |
+| `side`            | `'inline-end' \| 'bottom'`    | `'inline-end'`  | Which edge it slides from. `'bottom'` is a sheet and drops the notch — there is no inline edge to hang it from. The default follows document direction. |
+| `nested`          | `boolean`                     | `false`         | **Required** when this drawer opens inside another one, or the two roots fight over the overlay and the scroll lock. Throws without a parent Drawer. |
+| `framed`          | `boolean`                     | `true`          | The dark tray frame and the panel's border / inset shadow.                                          |
+| `hideHeader`      | `boolean`                     | `false`         | Skip the header bar, for a child that draws its own. Also drops the body's top padding.             |
+| `bareBody`        | `boolean`                     | `false`         | Skip the padded scroll wrapper, for a child that already scrolls and offsets for its own header.    |
+| `description`     | `string`                      | —               | Screen-reader-only description. vaul warns when a drawer has none.                                  |
+| `wrapperClassName`| `string`                      | per `side`      | Lands on the positioner — width, height, insets. Replaces the default sizing.                       |
+| `className`       | `string`                      | —               | Lands on the tray.                                                                                  |
+
+```tsx
+// A bottom sheet, opened from inside another drawer.
+<FormRenderer
+  display="drawer"
+  open={open}
+  onOpenChange={setOpen}
+  title="Quick add"
+  drawer={{ side: "bottom", nested: true, description: "Add a line item" }}
+  onSubmit={save}
+  actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}
+>
+  {fields}
+</FormRenderer>
+```
+
+### `FormRenderer.NotchAction`
+
+Buttons in the drawer's notch, authored by you. `onOpenInNewTab` still works, but it hardcodes an
+English label and allows only one action — write `NotchAction` children instead and you own both.
+They render nothing where you write them; the renderer lifts them into the notch.
+
+```tsx
+<FormRenderer display="drawer" open={open} onOpenChange={setOpen} title={t("invoice")}>
+  <FormRenderer.NotchAction onClick={openFullPage}>
+    {t("openInNewTab")}
+    <i className="ri-arrow-right-up-line text-[12px]" />
+  </FormRenderer.NotchAction>
+  <FormRenderer.NotchAction color="Blue" onClick={print}>
+    {t("print")}
+  </FormRenderer.NotchAction>
+
+  {fields}
+</FormRenderer>
+```
+
+`color` matches `DrawerNotchPill` and defaults to `"Yellow"`. Ignored on a page-display form, and a
+`side: "bottom"` sheet has no notch to put them in.
+
 ## Stepper
 
 Drop a `FormRenderer.Stepper` in as the child. The Save lives in the header `actions` and
@@ -140,6 +199,10 @@ validates the current step, then advances (disabled on the last step). A step th
 validation **stays checked** in the rail — even after you navigate back — while a live validation
 error overrides it to red. You still pass just the Submit; the nav is wired for you:
 
+The rail **stays put while the fields scroll**. It is navigation, so it pins below the header rather
+than scrolling out of view with the form; a rail taller than the form body scrolls to its end first,
+as any sticky element does.
+
 ```tsx
 <FormRenderer
   onSubmit={save}
@@ -266,7 +329,14 @@ outside the `<form>`, wire the Save button to the form via `id` / `form={id}`:
 ```
 
 `FormDrawer` props: `open`, `onOpenChange`, `title`, `badge`, `variant`, `actions`,
-`onOpenInNewTab`, `children`, `summary`. It owns no form state.
+`onOpenInNewTab`, `notchActions`, `children`, `summary`, plus the layout flags listed under
+[Drawer layout](#drawer-layout) — `side`, `nested`, `framed`, `hideHeader`, `bareBody`,
+`description`, `wrapperClassName`, `className`. It owns no form state.
+
+`notchActions` is the notch's button slot. Going through `FormRenderer` you rarely set it directly —
+write `FormRenderer.NotchAction` children and they are lifted into it for you. Using `FormDrawer` on
+its own, pass the buttons here. When both `notchActions` and `onOpenInNewTab` are given, the former
+wins; `onOpenInNewTab` remains only for callers happy with its built-in English label.
 
 ### The title
 

package/docs/components/header-bar.md

@@ -146,13 +146,14 @@ All standard `HTMLAttributes<HTMLDivElement>` (for example `id`, `aria-*`, `data
 |---------|-----------|-----------|------------------------|
 | `new` | `bg-blue-sparkle-alpha-50` | `text-blue-sparkle-200` | pill (`label`) → title |
 | `edit` | `bg-orange-alpha-50` | `text-orange-200` | pill (`label`) → title |
-| `detail` | `bg-white-alpha-30` | `text-white-00` | title → pill (`label`) — positions swapped |
+| `detail` | `bg-white-alpha-15` | `text-white-00` | title → pill (`label`) — positions swapped |
 
 ## Styling
 
 - **Fixed dark container**: `rounded-[14px]`, `border-black-600`, `bg-black-1000`, `p-1.5`, with a double soft shadow. The surface is always dark regardless of theme.
 - **Layout**: the root is `inline-flex`, so the chip hugs its content rather than stretching to fill its parent.
-- **Typography**: 28px, weight 510, uppercase, SF Pro with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Typography**: `typography-display-medium-medium` (28px, weight 510) with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Ordering**: `detail` swaps the two children in the DOM rather than reversing the row, so the pair stays correct under `dir="rtl"` and reads in order to assistive tech.
 - **Emphasis pill**: the colored badge background and text color are driven entirely by `variant` (see the Variants table). For `detail`, the pill also moves to the right side.
 
 ## TypeScript Types

package/docs/components/input-field.md

@@ -15,7 +15,7 @@ dependencies:
 
 # InputField
 
-> An enhanced input component that combines Input with integrated popover dropdowns, error tooltips, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
+> An enhanced input component that combines Input with integrated popover dropdowns, error styling, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
 
 ## Installation
 
@@ -206,9 +206,9 @@ function PasswordField() {
 | `icon` | `ReactNode` | - | Icon to display on the left side |
 | `childrenSide` | `ReactNode` | - | Content to display on the right side |
 | `popoverChildren` | `ReactNode` | - | Content for the dropdown popover |
-| `errorMessage` | `string` | - | Error message to display in tooltip |
+| `errorMessage` | `string` | - | Marks the field invalid — any non-undefined value turns on the negative border |
 | `onTable` | `boolean` | `false` | Optimized styling for table context |
-| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | Tooltip position |
+| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | **Deprecated, ignored.** The error tooltip was removed; an invalid field is shown by its border alone |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
 | `disabled` | `boolean` | `false` | Disables the input |

package/docs/components/section-block.md

@@ -380,6 +380,12 @@ The layout has three stacked parts, and the order matters. Only the **scroller**
 horizontally; the header actions above it and the end-action below it stay put, which is
 what keeps `Add New` reachable on a wide table.
 
+The section body is itself the horizontal scrollport, so a table wider than the card scrolls
+**inside** it rather than being clipped or widening the page. One consequence worth knowing: a
+scrollport is the containing block for `position: sticky`, so a `Table`'s sticky header inside a
+section now resolves against a box that never scrolls vertically — i.e. it stops sticking. If you
+need a sticky header, give the table its own vertical scroller.
+
 ```tsx
 import { SectionBlock } from "@/components/SectionBlock";
 import { Button } from "@/components/Button";

package/docs/components/select.md

@@ -241,7 +241,7 @@ function Uncontrolled() {
 |------|------|---------|-------------|
 | `size` | `'S' \| 'M' \| 'L' \| 'XL'` | `'M'` | Size of the trigger |
 | `variant` | `'PresentationStyle' \| 'SystemStyle'` | `'PresentationStyle'` | Visual variant |
-| `errors` | `string` | - | Error message (shows tooltip) |
+| `errors` | `string` | - | Marks the trigger invalid — any non-undefined value turns on the negative border |
 | `theme` | `Themes` | - | Theme override |
 | `icon` | `string` | - | Custom icon class |
 | `className` | `string` | - | Additional CSS classes |

package/docs/migration/changelog.md

@@ -26,6 +26,25 @@ npx torch-glare@latest add Button
 
 ## Release notes
 
+- **v2.5.5** — **breaking**: `DataViews.Filters.Summary` is removed with no shim; delete any
+  `<DataViews.Filters.Summary />` (render your own from `useDataViewsFilters()` if you want one).
+  `DrawerContent.notchSide` / `DrawerNotch.side` become logical `"start" | "end"` (was
+  `"left" | "right"`), and `TreeFolder`'s drag wiring is internal — `dragHandlers`,
+  `TreeFolderRowDragHandlers`, `UseTreeFolderDnDResult`, `scrollContainerRef` and
+  `getRowDragHandlers` are gone. New, non-breaking: `BadgeField` `creatable` / `createLabel`,
+  `FormRenderer` `embedded` / controlled tabs and steps / `drawer` layout options /
+  `FormRenderer.NotchAction`, `FormBuilder.Submit` `disabled`, and `DataViews.Empty`.
+  Also, every `FormBuilder.*` field takes a `hints` array, so one field can
+  carry several alerts. The validation error renders first, your hints follow. See
+  [FormBuilder](../components/form-builder.md#hints). Dropdown panels (`Select`,
+  `SearchableSelect`, `SearchableTree`, `Popover`, `DropdownMenu`, `ContextMenu`) now cap to the
+  space actually on screen and scroll their list in an inner viewport instead of being clipped —
+  note `SearchableTree`'s `maxBodyHeight` default drops 320 → 200, and menu submenus gained a
+  `maxHeight` (they were previously uncapped). `InputField`, `BadgeField` and `Select` no longer
+  pop an error tooltip — an invalid control is shown by its negative border alone, and
+  `toolTipSide` is deprecated and ignored. Plus fixes to `TabSwitch` dividers,
+  `FieldSection` hint placement, the
+  `FormRenderer` stepper grid, `SlideDatePicker` theming and `PopoverItem`'s disabled state.
 - **v2.5.2** — **breaking**: `FormBuilder` now holds only the fields; the section cards, title
   header and stepper moved to `FormRenderer`. See
   [FormBuilder 2.5.2](./form-builder-2.5.2.md) for the rename table.

package/docs/reference/hooks.md

@@ -20,6 +20,7 @@ Custom React hooks that provide reusable functionality for common UI patterns. A
 - **useClickOutside** - Detect clicks outside a referenced element
 - **useResize** - Handle element resizing with RTL support
 - **useTagSelection** - Manage tag selection state with keyboard navigation
+- **useHtmlDir** - Track the document's text direction from `<html dir>`
 
 ---
 
@@ -1498,3 +1499,25 @@ All hooks support:
 - Edge 90+
 
 **IntersectionObserver** (useActiveTreeItem): Requires polyfill for older browsers.
+
+---
+
+## useHtmlDir
+
+Tracks the document's text direction from `<html dir>`, re-reading it when it changes — a language
+switch, say. Returns `"ltr" | "rtl"`.
+
+```tsx
+import { useHtmlDir } from "@/hooks/useHtmlDir";
+
+const dir = useHtmlDir();
+```
+
+Most mirroring should be done in CSS with logical properties, which need no JS at all. Reach for
+this only where a library wants the direction as a **value**: several Radix primitives default to
+`"ltr"` when given no `dir` prop and no `DirectionProvider`, and vaul computes an inline transform
+from its `direction` prop, which a stylesheet cannot override mid-drag.
+
+| Returns | Notes |
+| --- | --- |
+| `"ltr" \| "rtl"` | SSR-safe — returns `"ltr"` when there is no `document`. Watches the attribute with a `MutationObserver`, so a runtime language switch updates every consumer. |

package/docs/reference/utilities.md

@@ -702,3 +702,25 @@ These utilities depend on the following external libraries:
 - [Tailwind CSS Documentation](https://tailwindcss.com)
 - [date-fns Format Reference](https://date-fns.org/docs/format)
 - [TypeScript Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)
+
+---
+
+## Scroller Utilities
+
+### horizontalScrollerStyles
+
+The design's 14px horizontal scroller as a class string: a thin track that thickens and turns blue
+on hover. Shared by `TableScroller` and `SectionBlock`'s body so the two cannot drift.
+
+```tsx
+import { horizontalScrollerStyles } from "@/utils/scroller";
+import { cn } from "@/utils/cn";
+
+<div className={cn(horizontalScrollerStyles, "rounded-lg")}>
+  <table className="w-max">…</table>
+</div>
+```
+
+It includes `overflow-x-auto overflow-y-hidden`, so the element it lands on becomes the scrollport —
+you do not add an overflow class yourself.
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",

package/apps/lib/components/DataViews/filters/summary.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import { cn } from "../../../utils/cn";
-import { formatPathLabel } from "../../../utils/dataViews/path";
-import type { FilterValue } from "../../../utils/dataViews/types";
-import { useDataViewsFilters, useDataViewsView } from "../context";
-
-/**
- * `DataViews.Filters.Summary` — the active filters as removable chips. Useful when the controls
- * themselves live in the panel and you still want the current query visible above the rows.
- *
- * Its labels come from the same descriptors `Filters` reads off its children — the **root** collects
- * those as well, so this works wherever it is rendered, including as `Filters`' sibling. A path no
- * control covers falls back to a label derived from the path.
- */
-export function Summary({ className }: { className?: string }) {
-  const { filters, setFilters, filterFields } = useDataViewsFilters();
-  const { search, setSearch } = useDataViewsView();
-  const entries = Object.entries(filters);
-
-  if (entries.length === 0 && !search) return null;
-
-  const chip = cn(
-    "typography-body-small-regular flex items-center gap-1 rounded-[6px] px-2 py-[2px]",
-    "bg-background-presentation-action-selected text-content-presentation-global-primary",
-  );
-
-  const describe = (path: string, value: FilterValue) => {
-    const label = filterFields.find((f) => f.path === path)?.label ?? formatPathLabel(path);
-    if (Array.isArray(value)) return `${label}: ${value.join(", ")}`;
-    if (value.kind === "number") return `${label}: ${value.min ?? "…"}–${value.max ?? "…"}`;
-    return `${label}: ${value.from ?? "…"} → ${value.to ?? "…"}`;
-  };
-
-  return (
-    <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      {/* The search term narrows the result set exactly as a filter does, so it belongs in the
-          summary of what is currently narrowing it — and it has to be clearable from here too. */}
-      {search && (
-        <span className={chip}>
-          {`Search: ${search}`}
-          <button type="button" aria-label="Clear search" onClick={() => setSearch("")}>
-            <i className="ri-close-line text-[12px]" />
-          </button>
-        </span>
-      )}
-      {entries.map(([path, value]) => (
-        <span key={path} className={chip}>
-          {describe(path, value)}
-          <button
-            type="button"
-            aria-label={`Remove ${path} filter`}
-            onClick={() => {
-              const copy = { ...filters };
-              delete copy[path];
-              setFilters(copy);
-            }}
-          >
-            <i className="ri-close-line text-[12px]" />
-          </button>
-        </span>
-      ))}
-    </div>
-  );
-}