torch-glare 2.5.2 → 2.5.4

package/apps/lib/components/Table.tsx

@@ -18,7 +18,21 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
+    // `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-visible w-auto [border-collapse:separate] border-spacing-0", className)}
     {...props}
   >
     {props.children}
@@ -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/Textarea.tsx

@@ -7,12 +7,19 @@ import { cva, VariantProps } from "class-variance-authority";
 const textareaStyles = cva(
   [
     "border",
-    "rounded-[8px]",
+    // `radius/xl` (12px). Figma's TextArea-Field has two sizes — S is `radius/lg` (8px) and M is
+    // `radius/xl` — and this component has no size variant: it renders its `Label` wrapper at
+    // `size="M"` below, so M is the size it actually is. Supporting S properly needs a real `size`
+    // prop, which is an API change rather than a radius one.
+    "rounded-radius-xl",
     "px-[8px]",
     "py-[12px]",
     "outline-none",
     "typography-body-large-regular",
-    "!min-h-[36px]",
+    // A floor for the empty field — without one, `field-sizing: content` collapses it to a single
+    // 50px line. No `!` — twMerge does not dedupe an important class against a plain one, so `!`
+    // here would make the height impossible to override from a caller's `className`.
+    "min-h-[200px]",
     "transition-[border,background-color,color,caret-color,box-shadow]",
     "ease-in-out",
     "duration-150",
@@ -29,7 +36,7 @@ const textareaStyles = cva(
     "disabled:text-border-presentation-action-disabled",
     "disabled:cursor-not-allowed",
     "disabled:placeholder-border-presentation-action-disabled",
-    "field-sizing-content w-full min-w-[100px] max-w-[100%]",
+    "w-full min-w-[100px] max-w-[100%]",
   ],
   {
     variants: {
@@ -54,6 +61,14 @@ interface TextareaProps
   secondaryLabel?: string; // Additional label text
   direction?: "row" | "column";
   theme?: "dark" | "light" | "default";
+  /**
+   * Grow the field to fit its content as the user types, instead of scrolling inside a fixed box.
+   * On by default, via CSS `field-sizing: content`. Set a `max-h-*` on the field to cap the growth —
+   * past the cap it scrolls. Note `rows` has no effect while this is on: the browser sizes the field
+   * from its content, so an empty field starts at one line. Pass `autoResize={false}` for the old
+   * fixed-height box with a drag handle.
+   */
+  autoResize?: boolean;
 }
 
 // Textarea component definition
@@ -68,6 +83,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       direction = "row",
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       theme, // excluded from ...props spread
+      autoResize = true,
       ...props
     },
     ref,
@@ -82,7 +98,16 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         size={"M"}
         className={cn(className)}
       >
-        <textarea className={cn(textareaStyles({ state }))} ref={ref} {...props} />
+        <textarea
+          // Auto-grow is pure CSS. Written as an arbitrary *property* rather than as
+          // `field-sizing-content`: that utility only exists in Tailwind v4 and this project is on
+          // v3, where it compiled to no rule at all and left the computed `field-sizing` at `fixed`.
+          // The drag handle goes away with it — the height is content-driven, and a manual drag
+          // would pin it and silently stop the growing.
+          className={cn(textareaStyles({ state }), autoResize && "[field-sizing:content] resize-none")}
+          ref={ref}
+          {...props}
+        />
       </Label>
     );
   },

package/apps/lib/components/TreeDropDown.tsx

@@ -6,9 +6,9 @@ import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
 const TreeDropDownVariants = cva(
   [
     "cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
-    "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
+    "text-content-system-global-primary border-s-[2px] border-transparent outline-none",
     "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
-    "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
+    "rounded-e-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
   ],
   {
     variants: {
@@ -20,19 +20,31 @@ const TreeDropDownVariants = cva(
         true: "hover:gap-[8px]",
       },
     },
+    // The active row is a fixed dark slab, so its colours are pinned locally rather than taken from
+    // the theme. Previously the fill was theme-invariant while the text was not: on a light-themed
+    // page the row rendered near-black with near-black text, and the label was unreadable. The
+    // values below are exactly what the dark sidebar already rendered, so its look is unchanged.
     compoundVariants: [
       {
         active: true,
         variant: "default",
         className: [
-          "bg-background-system-action-primary-hover border-border-system-action-primary-hover [&_button]:bg-purple-alpha-15 hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
+          "bg-purple-1000 border-purple-600 [&_button]:bg-purple-alpha-15",
+          "hover:bg-purple-1000 hover:border-purple-600",
+          // Descendants carry their own theme-driven text colours (headings, badges), so the
+          // foreground has to be forced here or it follows the page instead of the slab.
+          "text-content-presentation-global-primary-light",
+          "[&_*]:!text-content-presentation-global-primary-light",
         ],
       },
       {
         active: true,
         variant: "secondary",
         className: [
-          "bg-wavy-navy-1000 border-border-system-action-field-hover-selected [&_button]:bg-blue-sparkle-alpha-15 hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
+          "bg-wavy-navy-1000 border-blue-sparkle-600 [&_button]:bg-blue-sparkle-alpha-15",
+          "hover:bg-wavy-navy-1000 hover:border-blue-sparkle-600",
+          "text-content-presentation-global-primary-light",
+          "[&_*]:!text-content-presentation-global-primary-light",
         ],
       },
     ],
@@ -86,14 +98,14 @@ export const TreeDropDown = ({
       </div>
       <div
         className={cn(
-          "mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
+          "mt-0 ps-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
           {
             "max-h-[20000px] mt-1": isActive,
             "max-h-0": !isActive,
           },
         )}
       >
-        <span className="h-full w-[1px] bg-border-system-global-primary absolute left-[21px] top-0 rounded-sm z-10" />
+        <span className="h-full w-[1px] bg-border-system-global-primary absolute start-[21px] top-0 rounded-sm z-10" />
         <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>
           {props.children}
         </div>

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.4",
   "generatedBy": "scripts/bin/generateRegistry",
   "npmVersions": {
     "@dnd-kit/core": "^6.3.1",
@@ -186,7 +186,7 @@
         "react-day-picker"
       ],
       "registryDependencies": [
-        "components/Button",
+        "components/ActionButton",
         "components/SimpleSelect",
         "utils/cn"
       ]
@@ -457,25 +457,13 @@
         "components/Button",
         "components/Drawer",
         "components/FormBuilder",
-        "components/FormStepper",
         "components/HeaderBar",
         "components/SectionBlock",
+        "components/Stepper",
         "components/TabFormItem",
         "utils/cn"
       ]
     },
-    {
-      "name": "FormStepper",
-      "type": "components",
-      "path": "components/FormStepper.tsx",
-      "npmDependencies": [
-        "class-variance-authority"
-      ],
-      "registryDependencies": [
-        "utils/cn",
-        "utils/types"
-      ]
-    },
     {
       "name": "FormSummary",
       "type": "components",
@@ -714,6 +702,7 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/DropdownMenu",
         "components/Input",
@@ -743,6 +732,7 @@
       "path": "components/SearchableTree.tsx",
       "npmDependencies": [],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/Input",
         "components/Popover",
@@ -757,6 +747,7 @@
       "path": "components/SearchableTreeDialog.tsx",
       "npmDependencies": [],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/Dialog",
         "components/Input",
@@ -793,7 +784,7 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
-        "components/Button",
+        "components/ActionButton",
         "components/DropdownMenu",
         "components/Tooltip",
         "utils/cn",