torch-glare 2.4.5 → 2.5.0

package/apps/lib/components/FormBuilder/fields/TextField.tsx

@@ -6,7 +6,7 @@ import type { ControllerRenderProps, FieldValues } from "react-hook-form";
 import { InputField } from "../../InputField";
 import { Textarea } from "../../Textarea";
 import { PasswordLevel } from "../../PasswordLevel";
-import { useLoading, useCell } from "../context";
+import { useLoading, useOnTable } from "../context";
 import { formatNumber } from "../numberFormat";
 import type { BaseFieldProps, CurrencyFieldProps, PasswordFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
@@ -107,7 +107,7 @@ function NumberInput({
 
 function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "email" | "password" }) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -117,7 +117,7 @@ function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "emai
           value={field.value ?? ""}
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
           className="w-full"
         />
       )}
@@ -133,7 +133,7 @@ export function EmailField(props: BaseFieldProps) {
 }
 export function PasswordField(props: PasswordFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -144,7 +144,7 @@ export function PasswordField(props: PasswordFieldProps) {
             value={field.value ?? ""}
             placeholder={props.placeholder}
             disabled={props.disabled || loading}
-            onTable={cell}
+            onTable={onTable}
             className="w-full"
           />
           {props.strengthMeter && <PasswordLevel value={field.value ?? ""} />}
@@ -156,7 +156,7 @@ export function PasswordField(props: PasswordFieldProps) {
 
 export function NumberField(props: BaseFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -164,7 +164,7 @@ export function NumberField(props: BaseFieldProps) {
           field={field}
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
         />
       )}
     </FieldShell>
@@ -173,7 +173,7 @@ export function NumberField(props: BaseFieldProps) {
 
 export function CurrencyField(props: CurrencyFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -186,7 +186,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
           }
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
         />
       )}
     </FieldShell>

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -8,6 +8,7 @@ import { cn } from "../../utils/cn";
 import { Form } from "../Form";
 import { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
 import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
+import { markFieldKind } from "./field-kind";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
 import {
@@ -97,6 +98,7 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   values,
   loading = false,
   fieldDirection,
+  layout = "page",
   resetOnSuccess,
   conclusion,
   className,
@@ -148,10 +150,18 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
     rest
   );
 
-  // The fields column caps at 1200px and centers — as the middle column of the grid, and
-  // standalone.
+  // The fields column caps at 1100px and centers — as the middle column of the grid, and
+  // standalone. `layout="bare"` drops the cap and the gutters so an embedded form fills its
+  // container instead: 48px of padding a side is most of a settings rail.
   const fieldsInner = (
-    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-[48px]">{fields}</div>
+    <div
+      className={cn(
+        "flex w-full flex-col gap-4",
+        layout === "page" && "mx-auto max-w-[1100px] px-[48px]",
+      )}
+    >
+      {fields}
+    </div>
   );
 
   const formEl = (
@@ -284,3 +294,45 @@ export const FormBuilder = Object.assign(FormBuilderRoot, {
   Back,
   Next,
 });
+
+/**
+ * What each field produces, for consumers that read a form they did not author.
+ *
+ * Stamped here rather than on the field definitions because the aliases — `DateRange`, `Tags`,
+ * `Image` — only exist in the table above, and a reader checking "is this list complete?" should
+ * have one place to look. `Tags` and `MultiSelect` are the same component, so the repeat is
+ * harmless.
+ */
+(
+  [
+    [FormBuilder.Text, "text"],
+    [FormBuilder.Email, "text"],
+    [FormBuilder.Password, "text"],
+    [FormBuilder.Textarea, "text"],
+    [FormBuilder.Otp, "text"],
+    [FormBuilder.Color, "text"],
+    [FormBuilder.Phone, "text"],
+    [FormBuilder.Number, "number"],
+    [FormBuilder.Currency, "number"],
+    [FormBuilder.Select, "choice"],
+    [FormBuilder.SearchableSelect, "choice"],
+    [FormBuilder.RadioList, "choice"],
+    [FormBuilder.RadioCards, "choice"],
+    [FormBuilder.MultiSelect, "multiChoice"],
+    [FormBuilder.Tags, "multiChoice"],
+    [FormBuilder.CheckboxGroup, "multiChoice"],
+    [FormBuilder.TreeSelect, "multiChoice"],
+    [FormBuilder.Checkbox, "boolean"],
+    [FormBuilder.SwitchBox, "boolean"],
+    [FormBuilder.Date, "date"],
+    [FormBuilder.DateRange, "date"],
+    [FormBuilder.DateTime, "date"],
+    [FormBuilder.DateMultiple, "date"],
+    [FormBuilder.Slider, "slider"],
+    [FormBuilder.Custom, "custom"],
+    [FormBuilder.File, "custom"],
+    [FormBuilder.Image, "custom"],
+    [FormBuilder.Signature, "custom"],
+    [FormBuilder.RichText, "custom"],
+  ] as const
+).forEach(([component, kind]) => markFieldKind(component, kind));

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

@@ -1,12 +1,14 @@
 export { FormBuilder } from "./form-builder";
 export type { SectionProps } from "./form-builder";
+export { fieldKindOf, markFieldKind } from "./field-kind";
 export { FormHeaderBar } from "./header";
 export type { HeaderProps, HeaderVariant, FormHeaderBarProps } from "./header";
 export { RichTextField } from "../TextEditor/RichTextField";
 export type { StepProps } from "./stepper";
-export type { FieldDirection } from "./context";
+export type { FieldDirection, CellMode } from "./context";
 export type {
   BaseFieldProps,
+  FieldKind,
   OptionItem,
   SelectFieldProps,
   SearchableSelectFieldProps,

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

@@ -11,6 +11,35 @@ import type {
 import type { FieldDirection } from "./context";
 import type { SectionColor } from "../SectionBlock";
 
+/**
+ * What shape of value a field produces, stamped on each `FormBuilder.*` field component.
+ *
+ * This is for consumers that have to interpret a form they did not author — `DataViews.Filters`
+ * reads it to decide whether a child's value becomes a list, a numeric range or a date range. It
+ * describes the field, not any one consumer's use of it.
+ *
+ * Read it with `fieldKindOf(element)` rather than comparing `element.type` against an imported
+ * component: identity comparison breaks across duplicated module instances and stops matching
+ * after a hot reload.
+ */
+export type FieldKind =
+  /** A string value — `Text`, `Textarea`, `Email`, `Password`, `Color`, `Phone`, `Otp`. */
+  | "text"
+  /** A number — `Number`, `Currency`. */
+  | "number"
+  /** One of a supplied list — `Select`, `SearchableSelect`, `RadioList`, `RadioCards`. */
+  | "choice"
+  /** Several of a supplied list — `MultiSelect`, `Tags`, `CheckboxGroup`, `TreeSelect`. */
+  | "multiChoice"
+  /** A boolean — `Checkbox`, `SwitchBox`. */
+  | "boolean"
+  /** A date or date range — `Date`, `DateRange`, `DateTime`, `DateMultiple`. */
+  | "date"
+  /** Two numbers when `range`, otherwise one — `Slider`. */
+  | "slider"
+  /** Whatever the caller renders — `Custom`, `File`, `Image`, `Signature`, `RichText`. */
+  | "custom";
+
 /** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
 export interface BaseFieldProps {
   name: string;
@@ -249,6 +278,17 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   loading?: boolean;
   /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
   fieldDirection?: FieldDirection;
+  /**
+   * How the fields column is framed.
+   *
+   * `"page"` (the default) is the full-page form: centred, capped at 1100px, and held off the
+   * edges by 48px gutters.
+   *
+   * `"bare"` drops all three so the fields fill whatever they are placed inside. Use it when the
+   * form is embedded in something narrow — a 260px settings rail has no room to give up 96px to
+   * gutters, and its controls would overflow the panel rather than fill it.
+   */
+  layout?: "page" | "bare";
   /** Reset to defaults after a successful submit. */
   resetOnSuccess?: boolean;
   /**

package/apps/lib/components/TabSwitch.tsx

@@ -48,7 +48,7 @@ const trackStyles = cva(
 // transparent and lighten on hover.
 const optionStyles = cva(
   [
-    "flex items-center justify-center gap-[6px]",
+    "flex items-center justify-center gap-[4px]",
     "rounded-[8px]",
     "font-[510] leading-none",
     "transition-all duration-200 ease-in-out",
@@ -74,8 +74,11 @@ const optionStyles = cva(
         true: [
           "bg-white",
           "text-[#1C1D1F]",
+          // The border is not in the design. It stays because its transparent twin below is what
+          // keeps both states the same width — without it, selecting a tab resizes the pill and
+          // shoves its neighbours. The design's own 4px gap absorbs the 1px.
           "border border-black/5",
-          "shadow-[0_1px_3px_0_rgba(0,0,0,0.18)]",
+          "drop-shadow-[0px_0px_5px_rgba(0,0,0,0.25)]",
         ],
         false: [
           "border border-transparent",
@@ -121,8 +124,17 @@ function TabSwitchInner<T extends string = string>(
 
         return (
           <div key={option.value} className="flex items-center">
-            {showDivider && (
-              <div className="mx-[3px] h-3 w-px bg-border-presentation-action-disabled" />
+            {idx > 0 && (
+              <div
+                aria-hidden
+                className={cn(
+                  // The slot is always here, and only its ink changes. Unmounting it instead cost
+                  // the track 7px every time the rule below hid one, so picking a tab resized the
+                  // track and shoved its neighbours sideways.
+                  "mx-[3px] h-3 w-px",
+                  showDivider ? "bg-border-presentation-action-disabled" : "bg-transparent",
+                )}
+              />
             )}
             <button
               type="button"

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

@@ -22,6 +22,7 @@ import type {
   TreeFolderVisibleRow,
 } from "./types";
 import { useTreeFolderDnD } from "./useTreeFolderDnD";
+import { DndContext, DragList } from "../../hooks/useDragDrop";
 
 export type TreeFolderProps = {
   data: TreeFolderNode[];
@@ -230,10 +231,9 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
     }, []);
 
     // ---- DnD ----
-    const { dragIds, dropTarget, getRowDragHandlers } = useTreeFolderDnD({
+    const { dragIds, dropTarget, contextProps, ids } = useTreeFolderDnD({
       data,
       rowsById,
-      scrollContainerRef: scrollRef,
       enabled: dndEnabled,
       onMove: handleMoveInternal,
       canDrop: ({ parentId }) => {
@@ -310,6 +310,7 @@ 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 ?? (
@@ -319,6 +320,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
             ))
           ) : (
             <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];
@@ -364,13 +366,14 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
                     dndEnabled={dndEnabled}
                     onSelect={handleSelect}
                     onToggle={handleToggle}
-                    dragHandlers={getRowDragHandlers(row.node.id)}
                   />
                 );
               })}
+              </DragList>
             </div>
           )}
         </div>
+        </DndContext>
       </div>
     );
   },

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

@@ -1,20 +1,11 @@
 "use client";
 
 import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
-import type { DragEvent } from "react";
+import { useDragItem } from "../../hooks/useDragDrop";
 import { cn } from "../../utils/cn";
 import { resolveIcon } from "./icons";
 import type { TreeFolderIconResolver, TreeFolderNode, TreeFolderVisibleRow } from "./types";
 
-export type TreeFolderRowDragHandlers = {
-  draggable: boolean;
-  onDragStart: (e: DragEvent<HTMLElement>) => void;
-  onDragEnd: (e: DragEvent<HTMLElement>) => void;
-  onDragOver: (e: DragEvent<HTMLElement>) => void;
-  onDragLeave: (e: DragEvent<HTMLElement>) => void;
-  onDrop: (e: DragEvent<HTMLElement>) => void;
-};
-
 export type TreeFolderRowProps = {
   row: TreeFolderVisibleRow;
   rowHeight: number;
@@ -37,7 +28,6 @@ export type TreeFolderRowProps = {
   dndEnabled: boolean;
   onSelect: (id: string | null) => void;
   onToggle: (id: string) => void;
-  dragHandlers: TreeFolderRowDragHandlers;
 };
 
 export function TreeFolderRow({
@@ -57,9 +47,14 @@ export function TreeFolderRow({
   dndEnabled,
   onSelect,
   onToggle,
-  dragHandlers,
 }: TreeFolderRowProps) {
   const { node, level, isOpen, isInternal, ancestorHasMoreSiblings } = row;
+
+  const {
+    ref: dragRef,
+    handleProps: dragProps,
+    style: dragStyle,
+  } = useDragItem(node.id, !dndEnabled || Boolean(node.disabled), { follow: false });
   const data = node;
   const hasChildren = isInternal;
 
@@ -134,10 +129,13 @@ export function TreeFolderRow({
 
   return (
     <div
+      ref={dragRef}
       data-row-id={node.id}
       className={cn("select-none group/row", outerClassName)}
-      style={{ height: rowHeight }}
-      {...dragHandlers}
+      // The row is the drag surface, not just the grip: that is how this tree has always behaved,
+      // and the 8px threshold is what keeps a click on it still a click.
+      style={{ ...dragStyle, height: rowHeight }}
+      {...dragProps}
     >
       <span aria-hidden className={bandClassName} />
 
@@ -234,6 +232,10 @@ export function TreeFolderRow({
           {data.name}
         </span>
 
+        {/* `meta` has always been part of `TreeFolderNode` but was never painted. It sits after
+            the name, before the collapsed-child count, and only appears when a node supplies it. */}
+        {data.meta != null && <span className="shrink-0 pr-2">{data.meta}</span>}
+
         {hasChildren && !isOpen && (
           <span
             className={cn(

package/apps/lib/components/TreeFolder/index.ts

@@ -1,7 +1,7 @@
 export { TreeFolder } from "./TreeFolder";
 export type { TreeFolderHandle, TreeFolderProps } from "./TreeFolder";
 export { TreeFolderRow } from "./TreeFolderRow";
-export type { TreeFolderRowProps, TreeFolderRowDragHandlers } from "./TreeFolderRow";
+export type { TreeFolderRowProps } from "./TreeFolderRow";
 export { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb";
 export { defaultIconRegistry, defaultIconFor } from "./icons";
 export {