torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/Stepper.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  createContext,
-  useContext,
-} from "react";
+import React, { forwardRef, HTMLAttributes, ReactNode, createContext, useContext } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
@@ -41,25 +35,14 @@ const stepperStyles = cva(["flex gap-0"], {
   },
 });
 
-interface StepperProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperStyles> {
+interface StepperProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperStyles> {
   theme?: Themes;
   activeStep?: number;
   size?: "S" | "M" | "L";
 }
 
 const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  (
-    {
-      className,
-      orientation = "horizontal",
-      theme,
-      activeStep = 0,
-      size = "M",
-      ...props
-    },
-    ref,
-  ) => (
+  ({ className, orientation = "horizontal", theme, activeStep = 0, size = "M", ...props }, ref) => (
     <StepperContext.Provider
       value={{
         activeStep,
@@ -89,18 +72,7 @@ interface StepProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Step = forwardRef<HTMLDivElement, StepProps>(
-  (
-    {
-      className,
-      index = 0,
-      isCompleted,
-      isActive,
-      isError,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ className, index = 0, isCompleted, isActive, isError, children, ...props }, ref) => {
     const { activeStep, orientation } = useStepperContext();
 
     const computedActive = isActive ?? index === activeStep;
@@ -116,16 +88,14 @@ const Step = forwardRef<HTMLDivElement, StepProps>(
         data-orientation={orientation}
         className={cn(
           "flex group/step",
-          orientation === "horizontal"
-            ? "shrink-0 flex-col items-center gap-2"
-            : "flex-row gap-3",
+          orientation === "horizontal" ? "shrink-0 flex-col items-center gap-2" : "flex-row gap-3",
           className,
         )}
         {...props}
       >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return child;
-          return React.cloneElement(child as React.ReactElement<any>, {
+          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
             _active: computedActive,
             _completed: computedCompleted,
             _error: computedError,
@@ -213,13 +183,7 @@ const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
   ) => {
     const { size } = useStepperContext();
 
-    const state = _error
-      ? "error"
-      : _completed
-        ? "completed"
-        : _active
-          ? "active"
-          : "pending";
+    const state = _error ? "error" : _completed ? "completed" : _active ? "active" : "pending";
 
     const renderContent = () => {
       if (_error && errorIcon) return errorIcon;
@@ -232,11 +196,7 @@ const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
     };
 
     return (
-      <div
-        ref={ref}
-        className={cn(stepIndicatorStyles({ state, size }), className)}
-        {...props}
-      >
+      <div ref={ref} className={cn(stepIndicatorStyles({ state, size }), className)} {...props}>
         {renderContent()}
       </div>
     );
@@ -277,10 +237,8 @@ interface StepConnectorProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepConnector = forwardRef<HTMLDivElement, StepConnectorProps>(
-  (
-    { className, _completed, _active: _a, _error: _e, _index: _i, ...props },
-    ref,
-  ) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  ({ className, _completed, _active: _a, _error: _e, _index: _i, ...props }, ref) => {
     const { orientation } = useStepperContext();
 
     return (
@@ -310,6 +268,7 @@ interface StepLabelProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepLabel = forwardRef<HTMLDivElement, StepLabelProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   ({ className, _active, _completed, _error, _index: _i, ...props }, ref) => (
     <div
       ref={ref}
@@ -340,10 +299,8 @@ interface StepDescriptionProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepDescription = forwardRef<HTMLDivElement, StepDescriptionProps>(
-  (
-    { className, _active, _completed: _c, _error: _e, _index: _i, ...props },
-    ref,
-  ) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  ({ className, _active, _completed: _c, _error: _e, _index: _i, ...props }, ref) => (
     <div
       ref={ref}
       className={cn(

package/apps/lib/components/Switch.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
 import { cn } from "../utils/cn";
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import React from "react";
 
 const Switch = React.forwardRef<
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex w-[48px] h-[27px] shrink-0 cursor-pointer items-center rounded-[20px] border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-presentation-switcher-active data-[state=unchecked]:bg-background-presentation-switcher-disabled",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -19,16 +19,14 @@ const Switch = React.forwardRef<
       className={cn(
         "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform",
         "data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0",
-        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0"
+        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }
-
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
+export { Switch };
 
 /* interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active: boolean;
@@ -81,4 +79,4 @@ function Switchers({
       )}
     </section>
   );
-} */
+} */

package/apps/lib/components/TabFormItem.tsx

@@ -12,7 +12,6 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   as?: React.ElementType;
 }
 
-
 const TabFormItem: React.FC<Props> = ({
   componentType,
   active,
@@ -23,17 +22,13 @@ const TabFormItem: React.FC<Props> = ({
   as: Tag = "button",
   ...props
 }) => {
-
   const Component = asChild ? Slot : Tag;
 
   return (
     <Component
       data-theme={theme}
       {...props}
-      className={cn(
-        formBarItemStyles({ componentType, active, buttonType }),
-        className
-      )}
+      className={cn(formBarItemStyles({ componentType, active, buttonType }), className)}
     >
       {props.children}
     </Component>
@@ -42,9 +37,6 @@ const TabFormItem: React.FC<Props> = ({
 
 export default TabFormItem;
 
-
-
-
 export const formBarItemStyles = cva(
   [
     "flex",
@@ -156,7 +148,6 @@ export const formBarItemStyles = cva(
           "text-content-presentation-tab-action-selected hover:text-content-presentation-tab-action-selected",
         ],
       },
-
     ],
-  }
-);
+  },
+);

package/apps/lib/components/TabSwitch.tsx

@@ -59,21 +59,9 @@ const optionStyles = cva(
   {
     variants: {
       size: {
-        S: [
-          "h-5 px-2 text-[12px]",
-          "[&_svg]:h-3 [&_svg]:w-3",
-          "[&_i]:text-[12px]",
-        ],
-        M: [
-          "h-6 px-3 text-[14px]",
-          "[&_svg]:h-[14px] [&_svg]:w-[14px]",
-          "[&_i]:text-[14px]",
-        ],
-        L: [
-          "h-8 px-4 text-[16px]",
-          "[&_svg]:h-4 [&_svg]:w-4",
-          "[&_i]:text-[16px]",
-        ],
+        S: ["h-5 px-2 text-[12px]", "[&_svg]:h-3 [&_svg]:w-3", "[&_i]:text-[12px]"],
+        M: ["h-6 px-3 text-[14px]", "[&_svg]:h-[14px] [&_svg]:w-[14px]", "[&_i]:text-[14px]"],
+        L: ["h-8 px-4 text-[16px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
       },
       active: {
         // Active option = a solid raised WHITE pill with dark text, in every
@@ -102,9 +90,7 @@ const optionStyles = cva(
 );
 
 interface Props<T extends string = string>
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
-    VariantProps<typeof trackStyles> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof trackStyles> {
   options: TabSwitchOption<T>[];
   /** Controlled selected value. */
   value: T;
@@ -114,16 +100,7 @@ interface Props<T extends string = string>
 }
 
 function TabSwitchInner<T extends string = string>(
-  {
-    options,
-    value,
-    onValueChange,
-    size,
-    theme,
-    disabled,
-    className,
-    ...props
-  }: Props<T>,
+  { options, value, onValueChange, size, theme, disabled, className, ...props }: Props<T>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
@@ -157,9 +134,7 @@ function TabSwitchInner<T extends string = string>(
               className={cn(optionStyles({ size, active }))}
             >
               {option.icon && (
-                <span className="flex items-center justify-center">
-                  {option.icon}
-                </span>
+                <span className="flex items-center justify-center">{option.icon}</span>
               )}
               {option.label}
             </button>
@@ -171,9 +146,7 @@ function TabSwitchInner<T extends string = string>(
 }
 
 // forwardRef loses the generic, so we cast to preserve `<TabSwitch<T> />` typing.
-export const TabSwitch = forwardRef(TabSwitchInner) as <
-  T extends string = string,
->(
+export const TabSwitch = forwardRef(TabSwitchInner) as <T extends string = string>(
   props: Props<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
 ) => ReturnType<typeof TabSwitchInner>;
 

package/apps/lib/components/Table.tsx

@@ -18,10 +18,7 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    className={cn(
-      "overflow-hidden w-auto [border-collapse:separate] border-spacing-0",
-      className,
-    )}
+    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
     {...props}
   >
     {props.children}
@@ -54,9 +51,7 @@ TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn(className)} {...props} />
-));
+>(({ className, ...props }, ref) => <tfoot ref={ref} className={cn(className)} {...props} />);
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
@@ -103,68 +98,61 @@ TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement> &
-  TableHeadVariantsProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    sortType?: "asc" | "desc" | undefined;
-    onSort?: () => void;
-    isDummy?: boolean;
-  }
->(
-  (
-    { className, size = "M", disabled, sortType, onSort, isDummy, ...props },
-    forwardedRef,
-  ) => {
-    const headRef = useRef<any>(null);
-    const { width, handleStartResize } = useResize(headRef);
+    TableHeadVariantsProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      sortType?: "asc" | "desc" | undefined;
+      onSort?: () => void;
+      isDummy?: boolean;
+    }
+>(({ className, size = "M", disabled, sortType, onSort, isDummy, ...props }, forwardedRef) => {
+  const headRef = useRef<HTMLTableCellElement>(null);
+  const { width, handleStartResize } = useResize(headRef as React.RefObject<HTMLElement>);
 
-    // Combine refs using useEffect
-    React.useEffect(() => {
-      if (!forwardedRef) return;
-      if (typeof forwardedRef === "function") forwardedRef(headRef.current);
-      else forwardedRef.current = headRef.current;
-    }, [forwardedRef]);
+  // Combine refs using useEffect
+  React.useEffect(() => {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === "function") forwardedRef(headRef.current);
+    else forwardedRef.current = headRef.current;
+  }, [forwardedRef]);
 
-    return (
-      <th
-        ref={headRef}
+  return (
+    <th
+      ref={headRef}
+      className={cn(
+        "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
+      )}
+    >
+      <div
+        {...props}
         className={cn(
-          "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
+          tableHeadVariants({ size, disabled, isDummy }),
+          { "min-w-[100px]": !isDummy },
+          className,
         )}
       >
         <div
-          {...props}
-          className={cn(
-            tableHeadVariants({ size, disabled, isDummy }),
-            { "min-w-[100px]": !isDummy },
-            className,
-          )}
+          style={{ width: `${width}px` }}
+          className={cn("flex items-center justify-between flex-1", {
+            "justify-center": isDummy,
+          })}
         >
-          <div
-            style={{ width: `${width}px` }}
-            className={cn("flex items-center justify-between flex-1", {
-              "justify-center": isDummy,
-            })}
-          >
-            {props.children}
-            {isDummy || !onSort ? null : (
-              <SortButton onSort={onSort} sortType={sortType} />
-            )}
-          </div>
+          {props.children}
+          {isDummy || !onSort ? null : <SortButton onSort={onSort} sortType={sortType} />}
         </div>
-        <button
-          disabled={isDummy}
-          className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
-        >
-          <ResizeIcon
-            className={cn({ "!opacity-0 cursor-default": isDummy })}
-            onMouseDown={handleStartResize}
-            onTouchStart={handleStartResize}
-          />
-        </button>
-      </th>
-    );
-  },
-);
+      </div>
+      <button
+        disabled={isDummy}
+        className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
+      >
+        <ResizeIcon
+          className={cn({ "!opacity-0 cursor-default": isDummy })}
+          onMouseDown={handleStartResize}
+          onTouchStart={handleStartResize}
+        />
+      </button>
+    </th>
+  );
+});
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
@@ -209,6 +197,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
 >(({ className, id, ...props }, ref) => {
   return (
     <div className={cn(["flex items-center justify-center"], className)}>
@@ -222,11 +211,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 
@@ -308,7 +293,13 @@ export {
   TableFooterButton,
 };
 
-const ResizeIcon = (props: any) => {
+interface ResizeIconProps {
+  className?: string;
+  onMouseDown?: React.MouseEventHandler<SVGElement>;
+  onTouchStart?: React.TouchEventHandler<SVGElement>;
+}
+
+const ResizeIcon = (props: ResizeIconProps) => {
   return (
     <svg
       {...props}
@@ -343,10 +334,7 @@ const SortButton = ({
   sortType?: "asc" | "desc" | undefined;
 }) => {
   return (
-    <button
-      className={cn("cursor-pointer text-[16px] z-10")}
-      onPointerDown={onSort}
-    >
+    <button className={cn("cursor-pointer text-[16px] z-10")} onPointerDown={onSort}>
       {sortType === "asc" ? (
         <i className="ri-arrow-up-line text-border-presentation-state-focus" />
       ) : sortType === "desc" ? (
@@ -389,10 +377,7 @@ const tableHeadVariants = cva(
         ],
       },
       isDummy: {
-        true: [
-          "hover:bg-transparent",
-          "hover:text-content-presentation-global-primary",
-        ],
+        true: ["hover:bg-transparent", "hover:text-content-presentation-global-primary"],
       },
       defaultVariants: {
         size: "M",

package/apps/lib/components/TableDnDWrapper.ts

@@ -27,9 +27,7 @@ interface DragState {
   startY: number;
 }
 
-export default function createTableDnDClass(
-  OriginalTable: TableClass,
-): TableClass {
+export default function createTableDnDClass(OriginalTable: TableClass): TableClass {
   return class TableDnD extends OriginalTable {
     private _drag: DragState = {
       active: false,
@@ -101,9 +99,7 @@ export default function createTableDnDClass(
 
       // Proximity-based toolbox visibility:
       // Only show row handle near left edge, column handle near top edge
-      wrapper.addEventListener("mousemove", (e) =>
-        this._onWrapperMouseMove(e),
-      );
+      wrapper.addEventListener("mousemove", (e) => this._onWrapperMouseMove(e));
       wrapper.addEventListener("mouseleave", () => {
         wrapper.classList.remove("tc-dnd--show-row", "tc-dnd--show-col");
       });
@@ -140,8 +136,7 @@ export default function createTableDnDClass(
     // ─── Proximity-based toolbox visibility ──────────────────────────────
 
     private _onWrapperMouseMove(e: MouseEvent): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl || !this._wrapperRef) return;
 
       const tableRect = tableEl.getBoundingClientRect();
@@ -172,20 +167,13 @@ export default function createTableDnDClass(
         this._wrapperRef.classList.add("tc-dnd--show-col");
         this._wrapperRef.classList.remove("tc-dnd--show-row");
       } else {
-        this._wrapperRef.classList.remove(
-          "tc-dnd--show-row",
-          "tc-dnd--show-col",
-        );
+        this._wrapperRef.classList.remove("tc-dnd--show-row", "tc-dnd--show-col");
       }
     }
 
     // ─── Toggler pointerdown (start pending drag) ───────────────────────
 
-    private _onTogglerDown(
-      type: "row" | "col",
-      wrapper: HTMLElement,
-      e: PointerEvent,
-    ): void {
+    private _onTogglerDown(type: "row" | "col", wrapper: HTMLElement, e: PointerEvent): void {
       // Detect which row/col is currently hovered by the table plugin
       const index = this._detectHoveredIndex(type, wrapper);
       if (index < 0) return;
@@ -208,10 +196,7 @@ export default function createTableDnDClass(
 
     // ─── Detect hovered row/col index ───────────────────────────────────
 
-    private _detectHoveredIndex(
-      type: "row" | "col",
-      wrapper: HTMLElement,
-    ): number {
+    private _detectHoveredIndex(type: "row" | "col", wrapper: HTMLElement): number {
       const tableEl = wrapper.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return -1;
 
@@ -230,9 +215,7 @@ export default function createTableDnDClass(
         }
         return -1;
       } else {
-        const toolbox = wrapper.querySelector<HTMLElement>(
-          ".tc-toolbox--column",
-        );
+        const toolbox = wrapper.querySelector<HTMLElement>(".tc-toolbox--column");
         if (!toolbox) return -1;
         const toolboxRect = toolbox.getBoundingClientRect();
         const toolboxMid = toolboxRect.left + toolboxRect.width / 2;
@@ -265,8 +248,7 @@ export default function createTableDnDClass(
         d.active = true;
 
         // Close any open popover from the table plugin
-        const openPopover =
-          this._wrapperRef?.querySelector<HTMLElement>(".tc-popover--opened");
+        const openPopover = this._wrapperRef?.querySelector<HTMLElement>(".tc-popover--opened");
         openPopover?.classList.remove("tc-popover--opened");
 
         this._highlight(d.type!, d.index, true);
@@ -338,13 +320,10 @@ export default function createTableDnDClass(
     // ─── Move Row / Column ──────────────────────────────────────────────
 
     private _moveRow(from: number, to: number): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
-      const rows = Array.from(
-        tableEl.querySelectorAll<HTMLElement>(".tc-row"),
-      );
+      const rows = Array.from(tableEl.querySelectorAll<HTMLElement>(".tc-row"));
       if (from < 0 || from >= rows.length) return;
 
       const target = to > from ? to - 1 : to;
@@ -360,17 +339,14 @@ export default function createTableDnDClass(
     }
 
     private _moveCol(from: number, to: number): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
       const target = to > from ? to - 1 : to;
       if (target === from) return;
 
       tableEl.querySelectorAll<HTMLElement>(".tc-row").forEach((row) => {
-        const cells = Array.from(
-          row.querySelectorAll<HTMLElement>(".tc-cell"),
-        );
+        const cells = Array.from(row.querySelectorAll<HTMLElement>(".tc-cell"));
         if (from >= cells.length) return;
 
         const cell = cells[from];
@@ -385,11 +361,7 @@ export default function createTableDnDClass(
 
     // ─── Drop Index Calc ────────────────────────────────────────────────
 
-    private _calcDrop(
-      wrapper: HTMLElement,
-      cx: number,
-      cy: number,
-    ): number {
+    private _calcDrop(wrapper: HTMLElement, cx: number, cy: number): number {
       const tableEl = wrapper.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return this._drag.index;
 
@@ -414,13 +386,8 @@ export default function createTableDnDClass(
 
     // ─── Visual Feedback ────────────────────────────────────────────────
 
-    private _highlight(
-      type: "row" | "col",
-      idx: number,
-      on: boolean,
-    ): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+    private _highlight(type: "row" | "col", idx: number, on: boolean): void {
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
       if (type === "row") {