@cytario/web 2.1.3 → 2.1.5

package/app/components/LavaLoader.tsx

@@ -17,11 +17,7 @@ export const LavaLoader = (props: LavaLoaderProps) => (
   </ClientOnly>
 );
 
-const LavaLoaderInner = ({
-  absolute = false,
-  rows = 3,
-  cols = 3,
-}: LavaLoaderProps) => {
+const LavaLoaderInner = ({ absolute = false, rows = 3, cols = 3 }: LavaLoaderProps) => {
   const totalDots = rows * cols;
   const size = 12;
   const duration = 500;
@@ -48,7 +44,7 @@ const LavaLoaderInner = ({
       }
       return neighbors[Math.floor(Math.random() * neighbors.length)];
     },
-    [rows, cols]
+    [rows, cols],
   );
 
   const [activeDot, setActiveDot] = useState<{
@@ -57,16 +53,13 @@ const LavaLoaderInner = ({
   }>(pickRandomDot());
 
   useEffect(() => {
-    const interval = setInterval(
-      () => setActiveDot((prev) => pickNeighbor(prev)),
-      duration
-    );
+    const interval = setInterval(() => setActiveDot((prev) => pickNeighbor(prev)), duration);
     return () => clearInterval(interval);
   }, [pickNeighbor, duration]);
 
   const cx = twMerge(
     "flex items-center justify-center w-full h-full",
-    absolute ? "absolute" : "relative"
+    absolute ? "absolute" : "relative",
   );
 
   return (

package/app/components/Layout/Footer.tsx

@@ -6,10 +6,7 @@ interface FooterProps {
   className?: string;
 }
 export function Footer({ children, className }: FooterProps) {
-  const cx = twMerge(
-    "px-6 p-2 bg-slate-50 border-t border-slate-300",
-    className
-  );
+  const cx = twMerge("px-6 p-2 bg-slate-50 border-t border-slate-300", className);
   return (
     <footer className={cx}>
       <div className="container mx-auto flex justify-between">{children}</div>

package/app/components/Pills/ScopePill.tsx

@@ -1,13 +1,7 @@
-import {
-  PathPill,
-  Pill,
-  type PillColor,
-  pillColorFromName,
-} from "@cytario/design";
+import { PathPill, Pill, type PillColor, pillColorFromName } from "@cytario/design";
 import { Shield } from "lucide-react";
 
-const UUID_RE =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
 /** "cytario" root segment always renders teal; everything else uses hash color. */
 function scopeColor(segment: string, index: number): PillColor {

package/app/components/Table/ColumnFilterInput.tsx

@@ -1,10 +1,4 @@
-import {
-  IconButton,
-  Input,
-  Pill,
-  Select,
-  type SelectItem,
-} from "@cytario/design";
+import { IconButton, Input, Pill, Select, type SelectItem } from "@cytario/design";
 import { Column } from "@tanstack/react-table";
 import { X } from "lucide-react";
 import { type ReactNode, useMemo } from "react";
@@ -37,9 +31,7 @@ export function ColumnFilterInput({
     if (filterOptions) {
       return [
         ALL_OPTION,
-        ...filterOptions
-          .filter((o) => o.value !== "")
-          .map((o) => ({ id: o.value, name: o.label })),
+        ...filterOptions.filter((o) => o.value !== "").map((o) => ({ id: o.value, name: o.label })),
       ];
     }
     const facetedValues = column.getFacetedUniqueValues();
@@ -55,8 +47,7 @@ export function ColumnFilterInput({
 
   const selectedKey = filterValue || ALL_KEY;
 
-  const setFilter = (key: string) =>
-    column.setFilterValue(key === ALL_KEY ? undefined : key);
+  const setFilter = (key: string) => column.setFilterValue(key === ALL_KEY ? undefined : key);
 
   const clearFilter = () => column.setFilterValue(undefined);
 
@@ -64,11 +55,7 @@ export function ColumnFilterInput({
     if (!filterRender) return undefined;
     const render = filterRender;
     function FilterOption(item: SelectItem) {
-      return item.id === ALL_KEY ? (
-        <AllPill />
-      ) : (
-        render({ label: item.name, value: item.id })
-      );
+      return item.id === ALL_KEY ? <AllPill /> : render({ label: item.name, value: item.id });
     }
     return FilterOption;
   }, [filterRender]);
@@ -89,9 +76,7 @@ export function ColumnFilterInput({
         <Input
           value={filterValue}
           onChange={setFilter}
-          placeholder={
-            filterPlaceholder ?? `Filter ${column.columnDef.header}...`
-          }
+          placeholder={filterPlaceholder ?? `Filter ${column.columnDef.header}...`}
           aria-label={`Filter by ${column.columnDef.header}`}
           size="sm"
         />

package/app/components/Table/ColumnResizeHandle.tsx

@@ -1,10 +1,6 @@
 import { Header } from "@tanstack/react-table";
 
-export const ColumnResizeHandle = ({
-  header,
-}: {
-  header: Header<unknown, unknown>;
-}) => {
+export const ColumnResizeHandle = ({ header }: { header: Header<unknown, unknown> }) => {
   return (
     <button
       type="button"

package/app/components/Table/ColumnSortButton.tsx

@@ -14,11 +14,7 @@ function getStyle(sortDirection: false | SortDirection) {
 }
 
 /** Sort indicator icon for a table column header. Shows on hover when unsorted, always visible when active. */
-export const ColumnSortButton = ({
-  header,
-}: {
-  header: Header<unknown, unknown>;
-}) => {
+export const ColumnSortButton = ({ header }: { header: Header<unknown, unknown> }) => {
   const sortDirection = header.column.getIsSorted();
   const cx = twMerge("shrink-0", getStyle(sortDirection));
 

package/app/components/Table/SelectionFooter.tsx

@@ -23,16 +23,14 @@ export function SelectionFooter({
       <div className="container mx-auto flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span className="text-sm text-slate-600">
-            <span className="font-medium text-slate-900">{selectedCount}</span>
-            {" "}of {totalCount} selected
+            <span className="font-medium text-slate-900">{selectedCount}</span> of {totalCount}{" "}
+            selected
           </span>
           <Button variant="secondary" size="sm" onPress={onReset}>
             Clear selection
           </Button>
         </div>
-        {children && (
-          <div className="flex items-center gap-2">{children}</div>
-        )}
+        {children && <div className="flex items-center gap-2">{children}</div>}
       </div>
     </div>
   );

package/app/components/Table/Table.tsx

@@ -22,11 +22,7 @@ import { useTableSorting } from "./useTableSorting";
 // Re-export types for external use
 export type { ColumnConfig, TableProps, CellRenderers } from "./types";
 
-function booleanSortingFn<TData>(
-  rowA: Row<TData>,
-  rowB: Row<TData>,
-  columnId: string,
-): number {
+function booleanSortingFn<TData>(rowA: Row<TData>, rowB: Row<TData>, columnId: string): number {
   const a = rowA.getValue<boolean>(columnId) ? 1 : 0;
   const b = rowB.getValue<boolean>(columnId) ? 1 : 0;
   return a - b;
@@ -47,12 +43,8 @@ export function Table<TData extends object>({
   const { columnSizing, setColumnSizing } = useColumnWidths(columns, tableId);
   const anchorColumnId = columns.find((c) => c.anchor)?.id ?? columns[0]?.id;
   const { sorting, setSorting } = useTableSorting(tableId, anchorColumnId);
-  const {
-    columnVisibility,
-    setColumnVisibility,
-    toggleableColumns,
-    toggleColumn,
-  } = useColumnVisibility(columns, tableId);
+  const { columnVisibility, setColumnVisibility, toggleableColumns, toggleColumn } =
+    useColumnVisibility(columns, tableId);
   const { columnFilters, setColumnFilters, resetFilters } = useColumnFilters({
     tableId,
   });
@@ -195,11 +187,7 @@ export function Table<TData extends object>({
       </div>
 
       {/* Scrollable body — horizontal scrollbar visible */}
-      <div
-        ref={bodyRef}
-        className="overflow-x-auto"
-        onScroll={handleBodyScroll}
-      >
+      <div ref={bodyRef} className="overflow-x-auto" onScroll={handleBodyScroll}>
         <table className="min-w-full" aria-hidden="true">
           <tbody>
             {data.length === 0 ? (
@@ -210,11 +198,7 @@ export function Table<TData extends object>({
                     title="No results"
                     description="No results match your filters"
                     action={
-                      <Button
-                        variant="secondary"
-                        iconLeft={FilterX}
-                        onPress={resetFilters}
-                      >
+                      <Button variant="secondary" iconLeft={FilterX} onPress={resetFilters}>
                         Clear all filters
                       </Button>
                     }

package/app/components/Table/TableBodyRow.tsx

@@ -21,25 +21,22 @@ export function TableBodyRow({
   enableRowSelection,
   className,
 }: TableBodyRowProps) {
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLTableRowElement>) => {
-      const tr = event.currentTarget;
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLTableRowElement>) => {
+    const tr = event.currentTarget;
 
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        const next = tr.nextElementSibling as HTMLElement | null;
-        next?.focus();
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        const prev = tr.previousElementSibling as HTMLElement | null;
-        prev?.focus();
-      } else if (event.key === "Enter") {
-        const link = tr.querySelector("a");
-        link?.click();
-      }
-    },
-    [],
-  );
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const next = tr.nextElementSibling as HTMLElement | null;
+      next?.focus();
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const prev = tr.previousElementSibling as HTMLElement | null;
+      prev?.focus();
+    } else if (event.key === "Enter") {
+      const link = tr.querySelector("a");
+      link?.click();
+    }
+  }, []);
 
   return (
     <tr
@@ -78,8 +75,7 @@ export function TableBodyRow({
         };
 
         const rawValue = cell.getValue();
-        const useRawString =
-          columnConfig?.ellipsis === "middle" && typeof rawValue === "string";
+        const useRawString = columnConfig?.ellipsis === "middle" && typeof rawValue === "string";
 
         const content = isIndexColumn
           ? rowIndex + 1
@@ -88,28 +84,20 @@ export function TableBodyRow({
             : flexRender(cell.column.columnDef.cell, cell.getContext());
 
         const copyValue =
-          columnConfig?.copyable && typeof rawValue === "string"
-            ? rawValue
-            : undefined;
+          columnConfig?.copyable && typeof rawValue === "string" ? rawValue : undefined;
 
         return isIndexColumn ? (
           <th key={cell.id} className="p-2" style={style}>
             <div className="flex items-center gap-1 text-sm text-slate-500 tabular-nums justify-between">
               {enableRowSelection && (
-                <Checkbox
-                  isSelected={row.getIsSelected()}
-                  onChange={() => row.toggleSelected()}
-                />
+                <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} />
               )}
               <span>{rowIndex + 1}</span>
             </div>
           </th>
         ) : (
           <td key={cell.id} className={cxCell} style={style}>
-            <TooltipSpan
-              ellipsis={columnConfig?.ellipsis}
-              copyValue={copyValue}
-            >
+            <TooltipSpan ellipsis={columnConfig?.ellipsis} copyValue={copyValue}>
               {content}
             </TooltipSpan>
           </td>

package/app/components/Table/TableHeaderRow.tsx

@@ -1,9 +1,5 @@
 import { Checkbox, IconButton } from "@cytario/design";
-import {
-  HeaderGroup,
-  VisibilityState,
-  flexRender,
-} from "@tanstack/react-table";
+import { HeaderGroup, VisibilityState, flexRender } from "@tanstack/react-table";
 import { FilterX } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
@@ -59,10 +55,7 @@ export function TableHeaderRow({
         };
         const alignClass = alignClasses[columnConfig?.align ?? "left"];
 
-        const cxTh = twMerge(
-          baseClass,
-          isIndexColumn ? indexClass : alignClass,
-        );
+        const cxTh = twMerge(baseClass, isIndexColumn ? indexClass : alignClass);
 
         const style = {
           width: header.getSize(),
@@ -93,11 +86,7 @@ export function TableHeaderRow({
             className={cxTh}
             style={style}
             aria-sort={
-              isSorted === "asc"
-                ? "ascending"
-                : isSorted === "desc"
-                  ? "descending"
-                  : undefined
+              isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : undefined
             }
           >
             {isIndexColumn ? (
@@ -110,9 +99,7 @@ export function TableHeaderRow({
                         header.getContext().table.getIsSomeRowsSelected() &&
                         !header.getContext().table.getIsAllRowsSelected()
                       }
-                      onChange={() =>
-                        header.getContext().table.toggleAllRowsSelected()
-                      }
+                      onChange={() => header.getContext().table.toggleAllRowsSelected()}
                     />
                   )}
                   <TableMenu
@@ -144,16 +131,11 @@ export function TableHeaderRow({
                       isRight && "flex-row-reverse",
                       isSorted && "text-slate-900",
                     )}
-                    onClick={
-                      header.column.getToggleSortingHandler() ?? undefined
-                    }
+                    onClick={header.column.getToggleSortingHandler() ?? undefined}
                   >
                     <div className="min-w-0">
                       <TooltipSpan>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
+                        {flexRender(header.column.columnDef.header, header.getContext())}
                       </TooltipSpan>
                     </div>
 
@@ -164,10 +146,7 @@ export function TableHeaderRow({
                   <div className={tableHeadCx}>
                     <div className="min-w-0">
                       <TooltipSpan>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
+                        {flexRender(header.column.columnDef.header, header.getContext())}
                       </TooltipSpan>
                     </div>
                   </div>

package/app/components/Table/TableMenu.tsx

@@ -1,10 +1,4 @@
-import {
-  IconButton,
-  Menu,
-  MenuCheckboxItem,
-  MenuItem,
-  MenuSeparator,
-} from "@cytario/design";
+import { IconButton, Menu, MenuCheckboxItem, MenuItem, MenuSeparator } from "@cytario/design";
 import type { VisibilityState } from "@tanstack/react-table";
 import { Columns3 } from "lucide-react";
 import type { Selection } from "react-aria-components";
@@ -28,16 +22,11 @@ export function TableMenu({
   const store = useTableStore(tableId);
 
   const selectedKeys = new Set(
-    toggleableColumns
-      .filter((col) => columnVisibility[col.id] !== false)
-      .map((col) => col.id),
+    toggleableColumns.filter((col) => columnVisibility[col.id] !== false).map((col) => col.id),
   );
 
   function handleSelectionChange(keys: Selection) {
-    const newKeys =
-      keys === "all"
-        ? new Set(toggleableColumns.map((c) => c.id))
-        : keys;
+    const newKeys = keys === "all" ? new Set(toggleableColumns.map((c) => c.id)) : keys;
 
     for (const col of toggleableColumns) {
       const wasSelected = columnVisibility[col.id] !== false;
@@ -67,12 +56,7 @@ export function TableMenu({
         </>
       }
     >
-      <IconButton
-        icon={Columns3}
-        variant="ghost"
-        size="sm"
-        aria-label="Column settings"
-      />
+      <IconButton icon={Columns3} variant="ghost" size="sm" aria-label="Column settings" />
     </Menu>
   );
 }

package/app/components/Table/state/createTableStore.ts

@@ -1,8 +1,4 @@
-import type {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-} from "@tanstack/react-table";
+import type { ColumnFiltersState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { createStore } from "zustand";
 import { devtools, persist } from "zustand/middleware";
 
@@ -47,8 +43,7 @@ export const createTableStore = (tableId: string) =>
               "setColumnWidth",
             ),
 
-          setSorting: (sorting: SortingState) =>
-            set({ sorting }, false, "setSorting"),
+          setSorting: (sorting: SortingState) => set({ sorting }, false, "setSorting"),
 
           setColumnVisibility: (columnVisibility: VisibilityState) =>
             set({ columnVisibility }, false, "setColumnVisibility"),
@@ -90,8 +85,7 @@ export const createTableStore = (tableId: string) =>
           },
         ),
         onRehydrateStorage: () => (_state, error) => {
-          if (error)
-            console.error(`[TableStore-${tableId}] Rehydration failed:`, error);
+          if (error) console.error(`[TableStore-${tableId}] Rehydration failed:`, error);
         },
       },
     ),

package/app/components/Table/state/useTableStore.ts

@@ -51,8 +51,6 @@ export function useTableStore(tableId: string): StoreApi<TableStore> {
  * }
  * ```
  */
-export function getTableStore(
-  tableId: string,
-): StoreApi<TableStore> | undefined {
+export function getTableStore(tableId: string): StoreApi<TableStore> | undefined {
   return tableStores.get(tableId);
 }

package/app/components/Table/types.ts

@@ -1,9 +1,4 @@
-import type {
-  ColumnDefBase,
-  FilterFn,
-  OnChangeFn,
-  RowSelectionState,
-} from "@tanstack/react-table";
+import type { ColumnDefBase, FilterFn, OnChangeFn, RowSelectionState } from "@tanstack/react-table";
 import { ReactNode } from "react";
 
 // Behavior props aligned with TanStack naming
@@ -48,7 +43,8 @@ interface ColumnVisibility {
 }
 
 export interface ColumnConfig
-  extends ColumnBehavior,
+  extends
+    ColumnBehavior,
     ColumnSorting,
     ColumnSizing,
     ColumnDisplay,
@@ -63,9 +59,7 @@ export interface ColumnConfig
  * row object and returns a ReactNode. Columns without a renderer display
  * their raw accessor value.
  */
-export type CellRenderers<TData> = Partial<
-  Record<string, (row: TData) => ReactNode>
->;
+export type CellRenderers<TData> = Partial<Record<string, (row: TData) => ReactNode>>;
 
 export interface TableProps<TData extends object> {
   columns: ColumnConfig[];

package/app/components/Table/useColumnFilters.ts

@@ -25,10 +25,7 @@ export function useColumnFilters({ tableId }: UseColumnFiltersOptions) {
   const setColumnFilters: OnChangeFn<ColumnFiltersState> = useCallback(
     (updaterOrValue) => {
       const current = store.getState().columnFilters;
-      const next =
-        typeof updaterOrValue === "function"
-          ? updaterOrValue(current)
-          : updaterOrValue;
+      const next = typeof updaterOrValue === "function" ? updaterOrValue(current) : updaterOrValue;
       setFiltersStore(next);
     },
     [store, setFiltersStore],

package/app/components/Table/useColumnVisibility.ts

@@ -25,8 +25,7 @@ export function useColumnVisibility(columns: ColumnConfig[], tableId: string) {
       if (col.anchor) {
         vis[col.id] = true;
       } else {
-        vis[col.id] =
-          storedVisibility[col.id] ?? (col.defaultVisible !== false);
+        vis[col.id] = storedVisibility[col.id] ?? col.defaultVisible !== false;
       }
     });
     return vis;
@@ -37,14 +36,11 @@ export function useColumnVisibility(columns: ColumnConfig[], tableId: string) {
       const current = store.getState().columnVisibility;
       const currentFull: VisibilityState = {};
       columns.forEach((col) => {
-        currentFull[col.id] =
-          current[col.id] ?? (col.defaultVisible !== false);
+        currentFull[col.id] = current[col.id] ?? col.defaultVisible !== false;
       });
 
       const next =
-        typeof updaterOrValue === "function"
-          ? updaterOrValue(currentFull)
-          : updaterOrValue;
+        typeof updaterOrValue === "function" ? updaterOrValue(currentFull) : updaterOrValue;
 
       // Enforce anchors
       columns.forEach((col) => {
@@ -56,10 +52,7 @@ export function useColumnVisibility(columns: ColumnConfig[], tableId: string) {
     [store, columns, setVisibilityStore],
   );
 
-  const toggleableColumns = useMemo(
-    () => columns.filter((col) => !col.anchor),
-    [columns],
-  );
+  const toggleableColumns = useMemo(() => columns.filter((col) => !col.anchor), [columns]);
 
   const toggleColumn = useCallback(
     (columnId: string) => {

package/app/components/Table/useColumnWidths.ts

@@ -45,9 +45,7 @@ export function useColumnWidths(columns: ColumnConfig[], tableId: string) {
       });
 
       const next =
-        typeof updaterOrValue === "function"
-          ? updaterOrValue(currentSizing)
-          : updaterOrValue;
+        typeof updaterOrValue === "function" ? updaterOrValue(currentSizing) : updaterOrValue;
 
       // Update only columns that changed (skip index column)
       Object.entries(next).forEach(([columnId, width]) => {

package/app/components/Table/useTableSorting.ts

@@ -10,33 +10,25 @@ import { useTableStore } from "./state/useTableStore";
  * When no stored sorting exists, falls back to sorting by
  * `defaultSortColumnId` ascending (typically the anchor column).
  */
-export function useTableSorting(
-  tableId: string,
-  defaultSortColumnId?: string,
-) {
+export function useTableSorting(tableId: string, defaultSortColumnId?: string) {
   const store = useTableStore(tableId);
 
   const storedSorting = useStore(store, (state) => state.sorting);
   const setSortingStore = useStore(store, (state) => state.setSorting);
 
   const defaultSorting: SortingState = useMemo(
-    () =>
-      defaultSortColumnId ? [{ id: defaultSortColumnId, desc: false }] : [],
+    () => (defaultSortColumnId ? [{ id: defaultSortColumnId, desc: false }] : []),
     [defaultSortColumnId],
   );
 
-  const sorting =
-    storedSorting.length > 0 ? storedSorting : defaultSorting;
+  const sorting = storedSorting.length > 0 ? storedSorting : defaultSorting;
 
   const setSorting: OnChangeFn<SortingState> = useCallback(
     (updaterOrValue) => {
       const currentSorting = store.getState().sorting;
       const current = currentSorting.length > 0 ? currentSorting : defaultSorting;
 
-      const next =
-        typeof updaterOrValue === "function"
-          ? updaterOrValue(current)
-          : updaterOrValue;
+      const next = typeof updaterOrValue === "function" ? updaterOrValue(current) : updaterOrValue;
 
       setSortingStore(next);
     },

package/app/components/Tooltip/Tooltip.tsx

@@ -1,15 +1,8 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  ReactNode,
-} from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect, ReactNode } from "react";
 import ReactDOM from "react-dom";
 
 // Use useLayoutEffect on client, useEffect on server to avoid SSR warning
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 interface TooltipProps {
   content: ReactNode;
@@ -34,10 +27,7 @@ const tooltipClassName = `
   blurred backdrop-filter backdrop-blur-sm
 `;
 
-export const Tooltip: React.FC<TooltipProps> = ({
-  content,
-  children,
-}) => {
+export const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
   const [visible, setVisible] = useState(false);
   const [coordsInitial, setCoordsInitial] = useState<Coords>({ x: 0, y: 0 });
   const [coords, setCoords] = useState<Coords>({ x: 0, y: 0 });
@@ -140,10 +130,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     >
       {children}
       {typeof window !== "undefined" &&
-        ReactDOM.createPortal(
-          tooltipContent,
-          document.getElementById("tooltip")!,
-        )}
+        ReactDOM.createPortal(tooltipContent, document.getElementById("tooltip")!)}
     </span>
   );
 };