torch-glare 2.3.0 → 2.4.1

package/apps/lib/components/DataTable.tsx

@@ -1,233 +1,213 @@
-'use client'
+"use client";
 
-import * as React from "react"
-import { CSS } from '@dnd-kit/utilities'
+import * as React from "react";
+import { CSS } from "@dnd-kit/utilities";
 import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    Row,
-    SortingState,
-    useReactTable,
-    getPaginationRowModel,
-    getFilteredRowModel,
-} from "@tanstack/react-table"
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  getPaginationRowModel,
+  getFilteredRowModel,
+} from "@tanstack/react-table";
 import {
-    DndContext,
-    closestCenter,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
-    DragEndEvent,
-} from '@dnd-kit/core'
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
 import {
-    arrayMove,
-    SortableContext,
-    sortableKeyboardCoordinates,
-    useSortable,
-    verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
 
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "./Table"
-import { Checkbox } from "./Checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table";
+import { Checkbox } from "./Checkbox";
 
 interface DataTableProps<TData extends { id: string | number }, TValue> {
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[]
-    theme?: "dark" | "light" | "default"
-    onRowReorder?: (newData: TData[]) => void
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  theme?: "dark" | "light" | "default";
+  onRowReorder?: (newData: TData[]) => void;
 }
 
 export function DataTable<TData extends { id: string | number }, TValue>({
-    columns,
-    data,
-    theme = "default",
-    onRowReorder,
+  columns,
+  data,
+  theme = "default",
+  onRowReorder,
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [items, setItems] = React.useState<TData[]>(data)
-    const [rowSelection, setRowSelection] = React.useState({})
-
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        })
-    )
-
-    const table = useReactTable({
-        data: items,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: setSorting,
-        onRowSelectionChange: setRowSelection,
-        enableRowSelection: true,
-        enableMultiRowSelection: true,
-        state: {
-            sorting,
-            rowSelection,
-        },
-    })
-
-    const handleDragEnd = (event: DragEndEvent) => {
-        const { active, over } = event
-
-        if (over && active.id !== over.id) {
-            const oldIndex = items.findIndex((item: any) => item.id === active.id)
-            const newIndex = items.findIndex((item: any) => item.id === over.id)
-
-            const newItems = arrayMove(items, oldIndex, newIndex)
-            setItems(newItems)
-
-            // Update row selection to maintain correct mapping after reorder
-            const newRowSelection: Record<string, boolean> = {}
-            Object.keys(rowSelection).forEach((rowIndex) => {
-                const oldRowIndex = parseInt(rowIndex)
-                const row = table.getRowModel().rows[oldRowIndex]
-                if (row) {
-                    const newRowIndex = newItems.findIndex((item: any) => item.id === (row.original as any).id)
-                    if (newRowIndex !== -1) {
-                        newRowSelection[newRowIndex.toString()] = true
-                    }
-                }
-            })
-            setRowSelection(newRowSelection)
-
-            onRowReorder?.(newItems)
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [items, setItems] = React.useState<TData[]>(data);
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    state: {
+      sorting,
+      rowSelection,
+    },
+  });
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item: TData) => item.id === active.id);
+      const newIndex = items.findIndex((item: TData) => item.id === over.id);
+
+      const newItems = arrayMove(items, oldIndex, newIndex);
+      setItems(newItems);
+
+      // Update row selection to maintain correct mapping after reorder
+      const newRowSelection: Record<string, boolean> = {};
+      Object.keys(rowSelection).forEach((rowIndex) => {
+        const oldRowIndex = parseInt(rowIndex);
+        const row = table.getRowModel().rows[oldRowIndex];
+        if (row) {
+          const newRowIndex = newItems.findIndex((item: TData) => item.id === row.original.id);
+          if (newRowIndex !== -1) {
+            newRowSelection[newRowIndex.toString()] = true;
+          }
         }
-    }
+      });
+      setRowSelection(newRowSelection);
 
-    return (
-        <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-        >
-            <Table theme={theme}>
-                <TableHeader>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            <TableHead isDummy ></TableHead>
-                            <TableHead isDummy >
-                                <Checkbox
-                                    checked={table.getIsAllRowsSelected()}
-                                    onCheckedChange={(checked) => {
-                                        table.toggleAllRowsSelected(!!checked)
-                                    }}
-                                />
-                            </TableHead>
-                            {headerGroup.headers.map((header) => {
-                                const sortHandler = header.column.getToggleSortingHandler()
-                                return (
-                                    <TableHead
-                                        key={header.id}
-                                        onSort={sortHandler ? () => sortHandler({}) : undefined}
-                                        sortType={header.column.getIsSorted() as "asc" | "desc" | undefined}
-                                    >
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                    </TableHead>
-                                )
-                            })}
-                        </TableRow>
-                    ))}
-                </TableHeader>
-                <TableBody>
-                    {table.getRowModel().rows?.length ? (
-                        <SortableContext
-                            items={table.getRowModel().rows.map(row => row.original)}
-                            strategy={verticalListSortingStrategy}
-                        >
-                            {table.getRowModel().rows.map((row, i) => (
-                                <SortableRow key={i + "row"} row={row} state={row.getIsSelected() ? "selected" : undefined}>
-                                    <TableCell isDummy >
-                                        <Checkbox
-                                            checked={row.getIsSelected()}
-                                            onCheckedChange={(checked) => {
-                                                row.toggleSelected(!!checked)
-                                            }}
-                                        />
-                                    </TableCell>
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                    <TableCell isDummy className="w-full" ></TableCell>
-                                </SortableRow>
-                            ))}
-                        </SortableContext>
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                No results.
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
-        </DndContext>
-    )
+      onRowReorder?.(newItems);
+    }
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <Table theme={theme}>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              <TableHead isDummy></TableHead>
+              <TableHead isDummy>
+                <Checkbox
+                  checked={table.getIsAllRowsSelected()}
+                  onCheckedChange={(checked) => {
+                    table.toggleAllRowsSelected(!!checked);
+                  }}
+                />
+              </TableHead>
+              {headerGroup.headers.map((header) => {
+                const sortHandler = header.column.getToggleSortingHandler();
+                return (
+                  <TableHead
+                    key={header.id}
+                    onSort={sortHandler ? () => sortHandler({}) : undefined}
+                    sortType={header.column.getIsSorted() as "asc" | "desc" | undefined}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            <SortableContext
+              items={table.getRowModel().rows.map((row) => row.original)}
+              strategy={verticalListSortingStrategy}
+            >
+              {table.getRowModel().rows.map((row, i) => (
+                <SortableRow
+                  key={i + "row"}
+                  row={row}
+                  state={row.getIsSelected() ? "selected" : undefined}
+                >
+                  <TableCell isDummy>
+                    <Checkbox
+                      checked={row.getIsSelected()}
+                      onCheckedChange={(checked) => {
+                        row.toggleSelected(!!checked);
+                      }}
+                    />
+                  </TableCell>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                  <TableCell isDummy className="w-full"></TableCell>
+                </SortableRow>
+              ))}
+            </SortableContext>
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </DndContext>
+  );
 }
 
-
-
-
-interface SortableRowProps<TData> {
-    row: Row<TData>
-    children: React.ReactNode
-    state?: "delete" | "update" | "add" | "selected" | "open"
+interface SortableRowProps<TData extends { id: string | number }> {
+  row: Row<TData>;
+  children: React.ReactNode;
+  state?: "delete" | "update" | "add" | "selected" | "open";
 }
 
-function SortableRow<TData>({ row, children, state }: SortableRowProps<TData>) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: (row.original as any).id,
-    })
-
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.5 : 1,
-    }
-
-    return (
-        <TableRow
-            ref={setNodeRef}
-            style={style}
-            state={state}
-        >
-            <TableCell
-                {...attributes}
-                {...listeners}
-                className="cursor-grab active:cursor-grabbing"
-                isDummy
-            >
-                <i className="ri-draggable text-[18px]" />
-            </TableCell>
-            {children}
-        </TableRow>
-    )
-} 
+function SortableRow<TData extends { id: string | number }>({
+  row,
+  children,
+  state,
+}: SortableRowProps<TData>) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.original.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <TableRow ref={setNodeRef} style={style} state={state}>
+      <TableCell
+        {...attributes}
+        {...listeners}
+        className="cursor-grab active:cursor-grabbing"
+        isDummy
+      >
+        <i className="ri-draggable text-[18px]" />
+      </TableCell>
+      {children}
+    </TableRow>
+  );
+}

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

@@ -11,12 +11,7 @@ export interface DataViewRadioProps {
   className?: string;
 }
 
-export function DataViewRadio({
-  value,
-  label,
-  children,
-  className,
-}: DataViewRadioProps) {
+export function DataViewRadio({ value, label, children, className }: DataViewRadioProps) {
   return (
     <RadioGroupPrimitive.Item
       value={value}
@@ -30,9 +25,16 @@ export function DataViewRadio({
       <span
         className={cn(
           "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
-          "border border-border-presentation-action-primary bg-background-presentation-form-field-primary transition-colors",
+          // Hardcoded literals so the indicator always renders dark inside the
+          // DataView regardless of the host app's data-theme (matches the
+          // always-dark panel chrome convention). Unselected ring = the spec
+          // CheckBox-Primary border (#626467) + BorderStyle fill
+          // (rgba(255,255,255,0.05)); same tokens the shared Checkbox uses.
+          "border border-[#626467] bg-white/5 transition-colors",
           "group-data-[state=checked]:border-transparent",
-          "group-data-[state=checked]:bg-border-presentation-state-focus",
+          // #0075FF = the previous selected-fill value (border-presentation-state-focus),
+          // now literal so the blue is theme-independent and visually unchanged.
+          "group-data-[state=checked]:bg-[#0075FF]",
         )}
       >
         <RadioGroupPrimitive.Indicator className="flex items-center justify-center">

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

@@ -1,12 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import {
-  X,
-  Settings as SettingsIcon,
-  Filter as FilterIcon,
-  Plus,
-} from "lucide-react";
+import { X, Settings as SettingsIcon, Filter as FilterIcon, Plus } from "lucide-react";
 import type {
   ViewConfig,
   ViewType,
@@ -18,6 +13,7 @@ import type {
 } from "./types";
 
 import { RadioGroup } from "../Radio";
+import { Button } from "../Button";
 import { FilterPanel } from "./FilterPanel";
 import { RadioRow, DataViewsSwitch } from "./PanelControls";
 import { cn } from "../../utils/cn";
@@ -50,17 +46,9 @@ export type DataViewsConfigPanelProps = {
   state?: "open" | "closed";
 };
 
-const DEFAULT_SAVED_VIEWS: SavedView[] = [
-  { id: "default", label: "Default View" },
-];
+const DEFAULT_SAVED_VIEWS: SavedView[] = [{ id: "default", label: "Default View" }];
 
-function SectionHeader({
-  title,
-  action,
-}: {
-  title: string;
-  action?: React.ReactNode;
-}) {
+function SectionHeader({ title, action }: { title: string; action?: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between">
       <h3 className="text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
@@ -86,9 +74,7 @@ function GripDots() {
       fill="currentColor"
     >
       {[5.33, 9.33].flatMap((cx) =>
-        [3.33, 8, 12.67].map((cy) => (
-          <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />
-        )),
+        [3.33, 8, 12.67].map((cy) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />),
       )}
     </svg>
   );
@@ -126,23 +112,15 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
   // `onSavedViewChange` are supplied; otherwise fall back to local state so the
   // radios are still interactive (DataViewsLayout doesn't thread these props
   // yet — without this the selection would snap back every click).
-  const [internalSavedView, setInternalSavedView] = useState(
-    () => savedViews[0]?.id,
-  );
+  const [internalSavedView, setInternalSavedView] = useState(() => savedViews[0]?.id);
   const selectedSavedView = activeSavedView ?? internalSavedView;
   const handleSavedViewChange = (id: string) => {
     if (onSavedViewChange) onSavedViewChange(id);
     else setInternalSavedView(id);
   };
 
-  const visibleFields = useMemo(
-    () => fields.filter((f) => f.type !== "hidden"),
-    [fields],
-  );
-  const visiblePaths = useMemo(
-    () => new Set(visibleFields.map((f) => f.path)),
-    [visibleFields],
-  );
+  const visibleFields = useMemo(() => fields.filter((f) => f.type !== "hidden"), [fields]);
+  const visiblePaths = useMemo(() => new Set(visibleFields.map((f) => f.path)), [visibleFields]);
   const fieldByPath = useMemo(
     () => new Map(visibleFields.map((f) => [f.path, f])),
     [visibleFields],
@@ -234,7 +212,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
           type="button"
           onClick={onClose}
           aria-label="Close panel"
-          className="flex h-7 w-7 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:bg-white/25"
+          className="flex h-7 w-7 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:bg-background-presentation-state-negative-primary hover:text-white"
         >
           <X className="h-[18px] w-[18px]" />
         </button>
@@ -262,14 +240,16 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                   </div>
                 ))}
               </RadioGroup>
-              <button
+              <Button
                 type="button"
+                variant="BorderStyle"
+                size="M"
                 onClick={onSaveNewView}
-                className="flex w-full items-center justify-center gap-1.5 rounded-[4px] bg-white/[0.15] px-1.5 py-0.5 text-[12px] font-[510] text-white transition-colors hover:bg-white/25"
+                className="w-full"
               >
-                <Plus className="h-3 w-3" />
+                <Plus className="h-4 w-4" />
                 Save a New View
-              </button>
+              </Button>
             </div>
 
             <div className="h-px w-full bg-[#2C2D2E]" />
@@ -277,9 +257,6 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
             {/* Table Columns */}
             <div className="space-y-3">
               <SectionHeader title="Table Columns" />
-              <p className="text-[12px] leading-[1.475] text-content-presentation-global-tertiary">
-                Show or hide columns in table view
-              </p>
               {orderedColumns.length === 0 ? (
                 <p className="text-xs text-content-presentation-global-tertiary">
                   No fields detected.
@@ -307,10 +284,8 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                           onDragOver={(e) => {
                             e.preventDefault();
                             e.dataTransfer.dropEffect = "move";
-                            const rect =
-                              e.currentTarget.getBoundingClientRect();
-                            const before =
-                              e.clientY < rect.top + rect.height / 2;
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            const before = e.clientY < rect.top + rect.height / 2;
                             const slot = before ? index : index + 1;
                             if (dropSlot !== slot) setDropSlot(slot);
                           }}
@@ -342,9 +317,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                           <span className="flex shrink-0 items-center">
                             <DataViewsSwitch
                               checked={col.visible}
-                              onCheckedChange={() =>
-                                toggleColumnVisibility(col.id)
-                              }
+                              onCheckedChange={() => toggleColumnVisibility(col.id)}
                             />
                           </span>
                         </div>
@@ -353,9 +326,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                   })}
                   {/* Drop-at-end indicator: only ever rendered when the slot
                       points past the last row, so still exactly one line. */}
-                  {dropSlot === orderedColumns.length && dragPath && (
-                    <DropLine />
-                  )}
+                  {dropSlot === orderedColumns.length && dragPath && <DropLine />}
                 </div>
               )}
             </div>
@@ -394,13 +365,8 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                       <div key={col.id}>
                         {/* Edge-to-edge divider (Figma: no horizontal
                             inset). */}
-                        {i > 0 && (
-                          <div className="dv-divider h-px bg-[#2C2D2E]" />
-                        )}
-                        <RadioRow
-                          value={col.id}
-                          label={col.label || field?.label || col.id}
-                        />
+                        {i > 0 && <div className="dv-divider h-px bg-[#2C2D2E]" />}
+                        <RadioRow value={col.id} label={col.label || field?.label || col.id} />
                       </div>
                     );
                   })}

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

@@ -57,9 +57,7 @@ export function DataViewsHeader({
     >
       {/* Title pill */}
       <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">
-          {title}
-        </span>
+        <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">{title}</span>
       </div>
 
       {/* Divider */}