torch-glare 2.5.2 → 2.5.3

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

@@ -311,7 +311,7 @@ function DataViewsRoot({
                       inherits it rather than landing on the black shell.
 
                       No border: Figma draws one, but every view already brings its own edge — the
-                      table its header rule, the split views their panel borders — so it only ever
+                      table and the split views each draw their own panel border — so it only ever
                       read as a second outline around the first. */}
                   <div className="bg-background-presentation-form-base flex flex-1 overflow-hidden rounded-[16px]">
                     {/* Clip the scrollable surface to the parent radius minus its 1px border

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

@@ -95,7 +95,7 @@ function FiltersRoot({
               ) : (
                 // Reading the colour from a token rather than a `text-white` literal is what lets
                 // the same controls sit in the dark rail and in the light content area.
-                <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+                <h3 className="text-content-presentation-global-primary min-w-0 truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
                   {title}
                 </h3>
               ))}

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

@@ -44,8 +44,11 @@ export function Header({ title, children, className }: HeaderProps) {
     >
       {title !== undefined && (
         <>
-          <div className="flex h-9 shrink-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
-            <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">
+          {/* `min-w-0`, not `shrink-0`: the pill has to be able to give up width, or a long title
+              pushes the view switch, actions and panel toggle off the end of the bar. It yields
+              first and the title ellipsises instead. */}
+          <div className="flex h-9 min-w-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
+            <span className="truncate text-[28px] font-[510] uppercase leading-[1.19] text-white">
               {title}
             </span>
           </div>

package/apps/lib/components/DataViews/panel/section.tsx

@@ -40,7 +40,9 @@ export function Section({
             aria-controls={bodyId}
           />
         ) : (
-          <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+          // No `min-w-0` needed here, unlike the other headings: the parent is `flex flex-col`,
+          // so this already stretches to the column's width rather than sizing to its text.
+          <h3 className="text-content-presentation-global-primary truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
             {title}
           </h3>
         ))}

package/apps/lib/components/DataViews/views/board-view.tsx

@@ -356,7 +356,9 @@ function ColumnHeader({
         COLUMN_BG[group.color ?? "gray"],
       )}
     >
-      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light">
+      {/* `min-w-0` because this is a flex item: without it the heading refuses to shrink below its
+          text and a long group name pushes the action button out of the column. */}
+      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light min-w-0 truncate">
         {group.label}
       </h3>
       {onAction && (

package/apps/lib/components/DataViews/views/inbox-view.tsx

@@ -67,9 +67,12 @@ function InboxViewImpl({
         )}
       >
         <li className="border-border-presentation-global-primary border-b px-3 py-2">
+          {/* `block` before `truncate`: the parent is a plain `<li>`, so this span would otherwise
+              be inline — and `overflow` has no effect on an inline box, which would leave the
+              ellipsis silently doing nothing. */}
           <span
             style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium text-content-presentation-global-primary uppercase"
+            className="typography-display-medium-medium text-content-presentation-global-primary block truncate uppercase"
           >
             {titleField?.label ?? "inbox"}
           </span>

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

@@ -134,7 +134,11 @@ function useIsActive(element: { value?: string }, defaultValue: string) {
 export const PaneTable = markPaneView(function PaneTable(props: TreePaneTableProps) {
   const active = useIsActive({ value: props.value }, "table");
   if (!active) return null;
-  return <TableView {...withoutTabProps(props)} />;
+  // Standalone, `TableView` draws its own border and radius so it reads as a separated surface.
+  // In here it is not standalone: the pane around it already draws exactly that border and radius
+  // (`tree-view.tsx`), so leaving the table's on nests one inside the other a pixel apart.
+  // `TreePaneTableProps` omits `className`, so there is no caller value to merge with.
+  return <TableView {...withoutTabProps(props)} className="rounded-none border-0" />;
 }, { defaultValue: "table", defaultLabel: "List", defaultIcon: <Table2 /> });
 
 /**

package/apps/lib/components/DataViews/views/table-view.tsx

@@ -115,7 +115,15 @@ function TableViewImpl({
 
   return (
     <DndContext {...contextProps}>
-      <div className={cn("bg-background-presentation-form-base flex h-full", className)}>
+      {/* Its own edge, matching the inbox and tree panels: this view is a surface on the shell,
+          not a fill of it. `overflow-hidden` keeps the rows clipped to the radius. */}
+      <div
+        className={cn(
+          "bg-background-presentation-form-base flex h-full overflow-hidden",
+          "border-border-presentation-global-primary rounded-[16px] border",
+          className,
+        )}
+      >
         <div className="flex flex-1 flex-col gap-4 overflow-hidden">
           <div
             ref={scrollRef}
@@ -125,12 +133,30 @@ function TableViewImpl({
             className="min-w-0 flex-1 overflow-auto rounded-lg"
           >
             <Table ref={tableRef} className="w-full">
-              <TableHeader>
+              {/* The header sticks to the scroller above by default — that lives on `TableHeader`
+                  in the primitive. Two things this view adds:
+
+                  Opacity. The primitive's header token is translucent, so scrolling rows read
+                  straight through it; the primitive can't fix that without naming a surface colour
+                  it doesn't know. Here the surface *is* known — the view root above sets
+                  `form-base` — so paint that as the background-color (tailwind-merge drops the
+                  primitive's translucent one, same `bg-color` group) and re-apply the tint as a
+                  background-image, which stacks above background-color. Composited that is the
+                  exact colour the header already had, just no longer see-through.
+
+                  And `shadow-none`, because the drop shadow reads as a seam now that the view
+                  carries its own border. */}
+              <TableHeader className="bg-background-presentation-form-base bg-[image:linear-gradient(var(--background-presentation-form-header),var(--background-presentation-form-header))] shadow-none">
                 <TableRow>
                   {onRowMove && <TableHead isDummy className="w-8" />}
                   {selectable && (
                     <TableHead isDummy className="w-12">
+                      {/* Size is stated on both this and the per-row checkbox rather than left to
+                          `Checkbox`'s default — they have to agree, and relying on the default on
+                          one side only is what previously made the select-all bigger than the
+                          column it heads. */}
                       <Checkbox
+                        size="M"
                         checked={allSelected ? true : someSelected ? "indeterminate" : false}
                         onCheckedChange={toggleAll}
                         aria-label="Select all rows"
@@ -149,7 +175,11 @@ function TableViewImpl({
                       // so a screen reader hears one identical button per column.
                       sortLabel={field.label ?? formatPathLabel(field.path)}
                     >
-                      {field.label ?? field.path}
+                      {/* Wrapped rather than handed to `Table` as bare text: `truncate` needs a box
+                          to clip, and the label's parent in the primitive is already `flex min-w-0`
+                          so this span shrinks and ellipsises instead of wrapping the header row
+                          onto a second line. */}
+                      <span className="truncate">{field.label ?? field.path}</span>
                     </TableHead>
                   ))}
                 </TableRow>
@@ -203,7 +233,7 @@ function TableViewImpl({
                             attributes, so it cannot express a controlled checkbox. */}
                             <div className="flex items-center justify-center">
                               <Checkbox
-                                size="S"
+                                size="M"
                                 checked={selected}
                                 onCheckedChange={() => toggleRow(id)}
                                 aria-label="Select row"

package/apps/lib/components/DataViews/views/tree-view.tsx

@@ -253,8 +253,8 @@ function TreeViewImpl({
 
   return (
     // A split view, so the gap between the rail and the pane is part of the design: it paints the
-    // shell's black over the Master Container's surface, and the two cards float on it. The table
-    // and board fill their container instead, which is why only these two do this.
+    // shell's black over the Master Container's surface, and the two cards float on it. The board
+    // fills its container instead — the table now carries its own border, like these panels.
     <div className={cn("flex h-full gap-2 bg-black", className)}>
       <div
         className={cn(
@@ -265,9 +265,11 @@ function TreeViewImpl({
         )}
       >
         <div className="border-border-presentation-global-primary border-b px-3 py-2">
+          {/* `block` before `truncate` — the parent is a plain div, so an inline span would clip
+              nothing. Same reason as the inbox's panel header. */}
           <span
             style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium text-content-presentation-global-primary uppercase"
+            className="typography-display-medium-medium text-content-presentation-global-primary block truncate uppercase"
           >
             {labelField?.label ?? "categories"}
           </span>

package/apps/lib/components/FormBuilder/context.ts

@@ -2,7 +2,15 @@
 
 import { createContext, useContext } from "react";
 
-export type FieldDirection = "horizontal" | "vertical";
+/**
+ * How a field row lays out its label against its control.
+ *
+ * `"flexible"` is the responsive one: stacked, then label-beside-control once the field row itself
+ * is past the container `md` breakpoint. It is what you get by leaving `fieldDirection` unset — and
+ * it is assignable so you can ask for it back where something else defaults you away from it, most
+ * notably a `FormRenderer` drawer, which pins `"vertical"`.
+ */
+export type FieldDirection = "horizontal" | "vertical" | "flexible";
 
 /** Loading flag — drives the Submit spinner and disables inputs. */
 export const LoadingContext = createContext<boolean>(false);

package/apps/lib/components/FormBuilder/submit.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode } from "react";
 
+import { cn } from "../../utils/cn";
 import { Button } from "../Button";
 import { useFormId, useLoading } from "./context";
 
@@ -28,9 +29,17 @@ export function SubmitButton({ children, className, loadingText, form }: SubmitB
       // Defaults to the enclosing form's id, so a Save in the header (outside the `<form>`)
       // still submits it via native form-association.
       form={form ?? ctxFormId}
-      variant="PrimeStyle"
+      // The blue fill, because Save is the form's primary action and a primary action is blue.
+      // Deliberately not a prop: a form has one primary action, and letting each caller pick a
+      // variant is how the rule stops being a rule.
+      variant="BluColStyle"
       is_loading={loading}
-      className={className}
+      // `w-fit` because the FormBuilder root is a flex COLUMN: a direct child with `width: auto`
+      // inherits `align-items: stretch` and spans the whole form. Sections want that (SectionBlock
+      // sets its own `w-full`); a Save button does not. `w-fit` rather than `self-start` so the
+      // header action bar — a row with `items-center` — is untouched at every button size.
+      // Merged through `cn` so a caller can still opt into `className="w-full"` in a narrow drawer.
+      className={cn("w-fit", className)}
     >
       {loading ? (loadingText ?? children ?? "Saving…") : (children ?? "Save")}
     </Button>

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

@@ -276,7 +276,11 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   values?: T;
   /** Loading flag — Submit shows a spinner and inputs disable. */
   loading?: boolean;
-  /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
+  /**
+   * Field row direction. Unset means `"flexible"` — stacked, then label-beside-control once the
+   * field row passes the container `md` breakpoint. `FormRenderer` pins `"vertical"` in a drawer;
+   * pass `"flexible"` there to get the responsive layout back.
+   */
   fieldDirection?: FieldDirection;
   /** Reset to defaults after a successful submit. */
   resetOnSuccess?: boolean;

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

@@ -159,10 +159,22 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   // inside it: a form embedded in a 260px rail has no room to give up 96px to gutters.
   const fieldsColumn = <div className="mx-auto w-full max-w-[1100px] px-[48px]">{formEl}</div>;
 
-  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the
-  // layout stays side-by-side at every screen size (the fields column shrinks instead).
+  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the layout
+  // stays side-by-side at every screen size; when space runs short the fields column shrinks and
+  // the rail's labels truncate.
+  //
+  // `minmax(180px,1fr)` and not a bare `1fr` on the side tracks. `1fr` means `minmax(auto,1fr)`,
+  // whose *auto* minimum stops a track shrinking below its content — so a long step label made the
+  // rail's track wider than the empty track opposite it, and the two side tracks being equal is the
+  // only thing centring the middle column. Hovering a step made it visibly worse: the label's
+  // padding grows 6px→9px on hover (FormStepper), so the centre jumped 3px every time.
+  //
+  // The minimum is a fixed 180px rather than `auto` precisely so it cannot depend on the labels:
+  // both side tracks size identically whatever the rail holds, so the middle column stays centred,
+  // and the rail still has room to be legible (a plain `minmax(0,…)` let it collapse to 0 in a
+  // narrow preview frame). Past that floor the labels truncate instead of pushing.
   const bodyInner = isStepper ? (
-    <div className="grid w-full grid-cols-[1fr_minmax(0,1100px)_1fr] gap-8">
+    <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)] gap-8">
       <StepperNav control={formInstance.control as Control<FieldValues>} />
       {fieldsColumn}
       {/* Empty third column — balances the rail's gutter so the middle column is centred. */}

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

@@ -113,7 +113,10 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
     [...(stepFields[index] ?? [])].some((name) => name in errors);
 
   return (
-    <FormStepper activeStep={currentStep} className="shrink-0 flex-col items-start gap-[4px]">
+    // `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.
+    <FormStepper activeStep={currentStep} className="min-w-0 shrink-0 flex-col items-start gap-[4px]">
       {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
@@ -126,9 +129,21 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
             : "default";
         return (
           <React.Fragment key={title}>
-            <FormStep index={index} type={type} onClick={() => void goToStep(index)}>
+            {/* The shrink/truncate pair is passed in rather than changed in `FormStepper`, so its
+                other consumers keep sizing to their labels. `shrink` beats the pill's own
+                `shrink-0` and `truncate` beats the label's `whitespace-nowrap` — both via
+                tailwind-merge, which `FormStepper` runs the caller's className through. */}
+            <FormStep
+              index={index}
+              type={type}
+              onClick={() => void goToStep(index)}
+              // `max-w-full` is what actually makes the label truncate: the rail is
+              // `items-start`, so without a cap the pill shrink-wraps its label and grows straight
+              // past the track instead of clipping inside it.
+              className="min-w-0 max-w-full shrink"
+            >
               <FormStepIndicator />
-              <FormStepLabel>{title}</FormStepLabel>
+              <FormStepLabel className="truncate">{title}</FormStepLabel>
             </FormStep>
             {/* Connector between steps — a 3×16 rounded bar centred under the badge. */}
             {index < titles.length - 1 && (

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

@@ -16,7 +16,7 @@ import type {
  */
 
 export type FormRendererDisplay = "page" | "drawer";
-export type FieldDirection = "horizontal" | "vertical";
+export type FieldDirection = "horizontal" | "vertical" | "flexible";
 
 export interface FormRendererProps<T extends FieldValues = FieldValues> {
   /** The form body — `FormRenderer.Section` / field / `FormRenderer.Stepper` JSX. */

package/apps/lib/components/SectionBlock.tsx

@@ -14,7 +14,17 @@ const titleBadge = cva(
         Orange: "bg-red-orange-900",
         Purple: "bg-violet-900",
         Pink: "bg-medium-violet-red-900",
-        Gray: "bg-background-presentation-badge-gray",
+        // Per Figma (`FormHeader10`, Color=Gray), which pairs two *variables*: the pill is
+        // `background/presentation/button/primary` and its label `content/presentation/global/
+        // primary-inverse`. They invert together — a light pill with dark text in the dark theme,
+        // dark pill with white text in the light one — so the text token has to ride along on the
+        // variant. It overrides the base `text-[#F4F4F4]` because `titleBadge` goes through `cn`
+        // (tailwind-merge) below; the other seven are dark palette chips that still want that base.
+        //
+        // This previously read `bg-background-presentation-badge-gray`, which is not a token at all:
+        // every badge colour has `-solid`/`-subtle` and none has a bare name, so the utility was
+        // never generated and a Gray badge painted no background whatsoever.
+        Gray: "bg-background-presentation-button-primary text-content-presentation-global-primary-inverse",
       },
     },
     defaultVariants: { color: "Blue" },

package/apps/lib/components/Table.tsx

@@ -18,6 +18,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.
+    //
+    // 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.
+    //
+    // `[border-collapse:separate]` is what lets the header cells keep their borders while stuck.
     className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
     {...props}
   >
@@ -34,9 +48,20 @@ const TableHeader = React.forwardRef<
     ref={ref}
     // The header band is one continuous bar, not a per-cell background — a background on each
     // `<th>` would paint over the half of the previous column's resize handle that overhangs
-    // the boundary.
+    // the boundary. That is also why `sticky` sits here rather than on the `<th>`s: per-cell
+    // sticky would leave this background behind and let rows show through it.
+    //
+    // `z-20` clears the `z-10` on the resize handle and sort button inside the cells. In a table
+    // that never scrolls vertically, `sticky` keeps the element in flow and changes nothing.
+    //
+    // The band's token is translucent (`#0003`), so once rows do slide under it they read through.
+    // Making it opaque is deliberately NOT done here: it would mean naming one surface colour, and
+    // this header paints over whatever its caller sits on — forcing a surface would visibly recolour
+    // every table not on that one. A caller whose table actually scrolls supplies the opaque
+    // background itself, where the surface is known; `DataViews`' table view is the worked example.
     className={cn(
       "bg-background-presentation-form-header backdrop-blur-[8px]",
+      "sticky top-0 z-20",
       "shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]",
       className,
     )}
@@ -108,28 +133,28 @@ const MIN_COLUMN_WIDTH = 40;
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement> &
-    TableHeadVariantsProps &
-    React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      sortType?: "asc" | "desc" | undefined;
-      onSort?: () => void;
-      /** Column name for the sort button's accessible label. */
-      sortLabel?: string;
-      /**
-       * Called with the new width (px) while the column is being drag-resized. Pass it to take
-       * **control** of the width — the header then renders `style.width` and expects you to
-       * feed the new value back. Required whenever the table needs a definite width
-       * (`table-layout: fixed`), because only the owner of every column width can total them.
-       * Omit for uncontrolled resizing, where the header keeps the width itself.
-       */
-      onResize?: (width: number) => void;
-      /**
-       * Classes for the inner layout box (the flex row holding the label and sort toggle).
-       * `className` and every other prop go to the `<th>` — reach for this only when you need
-       * to restyle the content box itself, e.g. its typography or colour.
-       */
-      contentClassName?: string;
-      isDummy?: boolean;
-    }
+  TableHeadVariantsProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    sortType?: "asc" | "desc" | undefined;
+    onSort?: () => void;
+    /** Column name for the sort button's accessible label. */
+    sortLabel?: string;
+    /**
+     * Called with the new width (px) while the column is being drag-resized. Pass it to take
+     * **control** of the width — the header then renders `style.width` and expects you to
+     * feed the new value back. Required whenever the table needs a definite width
+     * (`table-layout: fixed`), because only the owner of every column width can total them.
+     * Omit for uncontrolled resizing, where the header keeps the width itself.
+     */
+    onResize?: (width: number) => void;
+    /**
+     * Classes for the inner layout box (the flex row holding the label and sort toggle).
+     * `className` and every other prop go to the `<th>` — reach for this only when you need
+     * to restyle the content box itself, e.g. its typography or colour.
+     */
+    contentClassName?: string;
+    isDummy?: boolean;
+  }
 >(
   (
     {
@@ -287,11 +312,11 @@ const TableCell = React.forwardRef<
         // Never fade a dummy cell — its content is a centred checkbox or drag handle, not
         // clippable text.
         fade &&
-          !isDummy && [
-            "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
-            "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
-            "[&:has(input)]:[mask-image:none]",
-          ],
+        !isDummy && [
+          "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
+          "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
+          "[&:has(input)]:[mask-image:none]",
+        ],
         { "min-w-fit justify-center": isDummy },
         childrenClassName,
       )}
@@ -307,7 +332,7 @@ const TableCheckbox = React.forwardRef<
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     id: string;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- id destructured to exclude it from the props spread onto Checkbox
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- id destructured to exclude it from the props spread onto Checkbox
 >(({ className, id, ...props }, ref) => {
   return (
     <div className={cn(["flex items-center justify-center"], className)}>

package/apps/lib/components/TreeFolder/TreeFolder.tsx

@@ -311,68 +311,68 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
 
         <TreeFolderStyles />
         <DndContext {...contextProps}>
-        <div ref={scrollRef} role="tree" className="tf-scroll flex-1 min-h-0 overflow-auto">
-          {isEmpty ? (
-            (emptyState ?? (
-              <div className="text-xs text-content-presentation-global-tertiary p-3">
-                Nothing here yet.
+          <div ref={scrollRef} role="tree" className="tf-scroll flex-1 min-h-0 overflow-auto pt-[6px]">
+            {isEmpty ? (
+              (emptyState ?? (
+                <div className="text-xs text-content-presentation-global-tertiary p-3">
+                  Nothing here yet.
+                </div>
+              ))
+            ) : (
+              <div className="min-w-max" style={stripStyle}>
+                <DragList ids={ids} makeRoom={false}>
+                  {visibleRows.map((row, idx) => {
+                    const prevRow = visibleRows[idx - 1];
+                    const nextRow = visibleRows[idx + 1];
+                    const isSelected = selectedId === row.node.id;
+                    const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected;
+                    const inBand = isSelected || isDescendant;
+
+                    // Neighbour-aware band rounding: a row is "in-band" if it's the selected
+                    // node itself or one of its descendants. The Set lookup handles deep nesting.
+                    const prevInBand =
+                      inBand &&
+                      !!prevRow &&
+                      (prevRow.node.id === selectedId || descendantIdSet.has(prevRow.node.id));
+                    const nextInBand =
+                      inBand &&
+                      !!nextRow &&
+                      (nextRow.node.id === selectedId || descendantIdSet.has(nextRow.node.id));
+
+                    const isDragging = dragIdSet.has(row.node.id);
+                    const isDropTargetInside =
+                      dropTarget?.rowId === row.node.id && dropTarget.position === "inside";
+                    const isDropBefore =
+                      dropTarget?.rowId === row.node.id && dropTarget.position === "before";
+                    const isDropAfter =
+                      dropTarget?.rowId === row.node.id && dropTarget.position === "after";
+
+                    return (
+                      <TreeFolderRow
+                        key={row.node.id}
+                        row={row}
+                        rowHeight={rowHeight}
+                        indent={indent}
+                        iconFor={iconFor}
+                        isSelected={isSelected}
+                        isAncestor={isAncestorFn(row.node.id) && !isSelected}
+                        isDescendantOfSelected={isDescendant}
+                        isPrevInBand={prevInBand}
+                        isNextInBand={nextInBand}
+                        isDragging={isDragging}
+                        isDropTargetInside={isDropTargetInside}
+                        isDropBefore={isDropBefore}
+                        isDropAfter={isDropAfter}
+                        dndEnabled={dndEnabled}
+                        onSelect={handleSelect}
+                        onToggle={handleToggle}
+                      />
+                    );
+                  })}
+                </DragList>
               </div>
-            ))
-          ) : (
-            <div className="min-w-max" style={stripStyle}>
-              <DragList ids={ids} makeRoom={false}>
-              {visibleRows.map((row, idx) => {
-                const prevRow = visibleRows[idx - 1];
-                const nextRow = visibleRows[idx + 1];
-                const isSelected = selectedId === row.node.id;
-                const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected;
-                const inBand = isSelected || isDescendant;
-
-                // Neighbour-aware band rounding: a row is "in-band" if it's the selected
-                // node itself or one of its descendants. The Set lookup handles deep nesting.
-                const prevInBand =
-                  inBand &&
-                  !!prevRow &&
-                  (prevRow.node.id === selectedId || descendantIdSet.has(prevRow.node.id));
-                const nextInBand =
-                  inBand &&
-                  !!nextRow &&
-                  (nextRow.node.id === selectedId || descendantIdSet.has(nextRow.node.id));
-
-                const isDragging = dragIdSet.has(row.node.id);
-                const isDropTargetInside =
-                  dropTarget?.rowId === row.node.id && dropTarget.position === "inside";
-                const isDropBefore =
-                  dropTarget?.rowId === row.node.id && dropTarget.position === "before";
-                const isDropAfter =
-                  dropTarget?.rowId === row.node.id && dropTarget.position === "after";
-
-                return (
-                  <TreeFolderRow
-                    key={row.node.id}
-                    row={row}
-                    rowHeight={rowHeight}
-                    indent={indent}
-                    iconFor={iconFor}
-                    isSelected={isSelected}
-                    isAncestor={isAncestorFn(row.node.id) && !isSelected}
-                    isDescendantOfSelected={isDescendant}
-                    isPrevInBand={prevInBand}
-                    isNextInBand={nextInBand}
-                    isDragging={isDragging}
-                    isDropTargetInside={isDropTargetInside}
-                    isDropBefore={isDropBefore}
-                    isDropAfter={isDropAfter}
-                    dndEnabled={dndEnabled}
-                    onSelect={handleSelect}
-                    onToggle={handleToggle}
-                  />
-                );
-              })}
-              </DragList>
-            </div>
-          )}
-        </div>
+            )}
+          </div>
         </DndContext>
       </div>
     );

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.2",
+  "version": "2.5.3",
   "generatedBy": "scripts/bin/generateRegistry",
   "npmVersions": {
     "@dnd-kit/core": "^6.3.1",