wasmCloud · lachieh · Oct 30, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
@@ -0,0 +1,8 @@
+---
+'@wasmcloud/lattice-client-react': patch
+'@wasmcloud/lattice-client-core': patch
+'@wasmcloud/eslint-config': patch
+'washboard-ui': patch
+---
+
+Updated ESLint Config and patched changes for libraries
@@ -69,7 +69,7 @@
     "@vitejs/plugin-react-swc": "^4.1.0",
     "@wasmcloud/eslint-config": "workspace:^",
     "@wasmcloud/prettier-config": "workspace:^",
-    "eslint": "^9.26.0",
+    "eslint": "^9.38.0",
     "execa": "^9.6.0",
     "get-port": "^7.1.0",
     "pino": "^10.0.0",

@@ -1,11 +1,12 @@
+import * as React from 'react';
+
 import {
   LatticeClientOptions,
   LatticeClient,
   LatticeClientProvider,
   NatsWsLatticeConnection,
   LatticeConfigProvider,
 } from '@wasmcloud/lattice-client-react';
-import * as React from 'react';
 
 type Config = Partial<LatticeClientOptions['config']>;
 const getClient = (parameters?: Config) => {

@@ -8,13 +8,16 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {WasmCloudComponent, useLatticeData} from '@wasmcloud/lattice-client-react';
 import {ChevronDown, ChevronRight} from 'lucide-react';
 import {Fragment, ReactElement, useMemo, useState} from 'react';
+
+import {WasmCloudComponent, useLatticeData} from '@wasmcloud/lattice-client-react';
+
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@/components/collapsible';
 import {ShortCopy} from '@/components/short-copy';
 import {Table, TableHeader, TableRow, TableHead, TableBody, TableCell} from '@/components/table';
-import {useColumnVisibility, hideableWadmManagedColumnId} from '../hooks/use-column-visibility';
+
+import {useColumnVisibility, WADM_MANAGED_COLUMN_ID} from '../hooks/use-column-visibility';
 import {WadmManagedIndicator} from './wadm-indicator/wadm-indicator';
 
 const columnHelper = createColumnHelper<WasmCloudComponent>();
@@ -75,7 +78,7 @@ const columns = [
     },
   }),
   columnHelper.accessor('annotations', {
-    id: hideableWadmManagedColumnId,
+    id: WADM_MANAGED_COLUMN_ID,
     header: 'Managed',
     cell: (info) => WadmManagedIndicator(info.getValue()),
   }),
@@ -88,6 +91,7 @@ export function ComponentsTable(): ReactElement {
   const [sorting, setSorting] = useState<SortingState>([]);
   const {columnVisibility, setColumnVisibility} = useColumnVisibility(columns);
 
+  // eslint-disable-next-line react-hooks/incompatible-library -- https://github.com/TanStack/table/issues/5567
   const table = useReactTable({
     data,
     columns,
@@ -147,7 +151,7 @@ export function ComponentsTable(): ReactElement {
                             Object.entries(
                               row.getValue('instances-expanded') as Record<string, string[]>,
                             )
-                              .sort((a, b) => (a[0] > b[0] ? 1 : -1))
+                              .toSorted((a, b) => (a[0] > b[0] ? 1 : -1))
                               .map(([index, instances]) => (
                                 <TableRow key={row.id + '-' + index} data-expanded="true">
                                   {row

@@ -8,9 +8,11 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {WasmCloudConfig, useLatticeData} from '@wasmcloud/lattice-client-react';
 import {ChevronDown, ChevronRight} from 'lucide-react';
 import {Fragment, ReactElement, useState, useMemo} from 'react';
+
+import {WasmCloudConfig, useLatticeData} from '@wasmcloud/lattice-client-react';
+
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@/components/collapsible';
 import {Table, TableHeader, TableRow, TableHead, TableBody, TableCell} from '@/components/table';
 
@@ -69,12 +71,13 @@ export function ConfigsTable(): ReactElement {
   const {configs} = useLatticeData();
 
   const data = useMemo(
-    () => Object.values(configs).sort((a, b) => (a.name > b.name ? 1 : -1)),
+    () => Object.values(configs).toSorted((a, b) => (a.name > b.name ? 1 : -1)),
     [configs],
   );
 
   const [sorting, setSorting] = useState<SortingState>([]);
 
+  // eslint-disable-next-line react-hooks/incompatible-library -- https://github.com/TanStack/table/issues/5567
   const table = useReactTable({
     data,
     columns,
@@ -131,7 +134,7 @@ export function ConfigsTable(): ReactElement {
                         <Fragment>
                           {Object.keys(row.getValue('key')).length > 0 &&
                             Object.entries(row.getValue('key') as WasmCloudConfig['entries'])
-                              .sort((a, b) => (a[0] > b[0] ? 1 : -1))
+                              .toSorted((a, b) => (a[0] > b[0] ? 1 : -1))
                               .map(([key, entries]) => (
                                 <TableRow key={row.id + '-' + key} data-expanded="true">
                                   {row

@@ -1,7 +1,8 @@
-import {canConnect, useLatticeConfig} from '@wasmcloud/lattice-client-react';
 import {clsx} from 'clsx';
 import * as React from 'react';
 
+import {canConnect, useLatticeConfig} from '@wasmcloud/lattice-client-react';
+
 export function ConnectionStatus(): React.ReactElement {
   const {config: latticeConfig} = useLatticeConfig();
   const [status, setStatus] = React.useState<'Pending' | 'Online' | 'Offline'>('Pending');

@@ -1,10 +1,12 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
-import {ComponentPropsWithoutRef, ElementRef, forwardRef} from 'react';
+import {ComponentPropsWithoutRef, ComponentRef, forwardRef} from 'react';
+
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/select';
+
 import {useSettings} from '../hooks/use-settings';
 
 const DarkModeToggle = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentRef<typeof SelectPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >((props, ref) => {
   const {darkMode, setDarkMode} = useSettings();

@@ -1,11 +1,14 @@
-import {useLatticeData} from '@wasmcloud/lattice-client-react';
 import {ReactElement} from 'react';
+
+import {useLatticeData} from '@wasmcloud/lattice-client-react';
+
 import {ComponentsTable} from '@/app/components/components-table';
 import {HostsSummary} from '@/app/components/hosts-summary';
 import {LinksTable} from '@/app/components/links-table';
 import {ProvidersTable} from '@/app/components/providers-table';
 import {StatsTile} from '@/app/components/stats-tile';
 import {Card, CardContent, CardHeader} from '@/components/card';
+
 import {ConfigsTable} from './configs-table';
 
 export function Dashboard(): ReactElement {

@@ -1,6 +1,8 @@
-import {useLatticeData} from '@wasmcloud/lattice-client-react';
 import {formatDuration, intervalToDuration} from 'date-fns';
 import {ReactElement} from 'react';
+
+import {useLatticeData} from '@wasmcloud/lattice-client-react';
+
 import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from '@/components/accordion';
 import {Badge} from '@/components/badge';
 import {ShortCopy} from '@/components/short-copy';
@@ -9,7 +11,7 @@ import {Table, TableBody, TableCell, TableHead, TableRow} from '@/components/tab
 export function HostsSummary(): ReactElement {
   const {hosts} = useLatticeData();
 
-  const hostsArray = Object.values(hosts).sort((a, b) => (a.host_id > b.host_id ? 1 : -1));
+  const hostsArray = Object.values(hosts).toSorted((a, b) => (a.host_id > b.host_id ? 1 : -1));
 
   return (
     <div>

@@ -1,6 +1,8 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/react-table';
-import {useLatticeData, WasmCloudLink} from '@wasmcloud/lattice-client-react';
 import * as React from 'react';
+
+import {useLatticeData, WasmCloudLink} from '@wasmcloud/lattice-client-react';
+
 import {DataTable} from '@/components/data-table';
 import {ShortCopy} from '@/components/short-copy';
 
@@ -36,7 +38,7 @@ export function LinksTable(): React.ReactElement {
   const {links} = useLatticeData();
 
   const data = React.useMemo(
-    () => Object.values(links).sort((a, b) => (a.source_id > b.source_id ? 1 : -1)),
+    () => Object.values(links).toSorted((a, b) => (a.source_id > b.source_id ? 1 : -1)),
     [links],
   );
 

@@ -1,4 +1,5 @@
 import {ReactElement} from 'react';
+
 import {ConnectionStatus} from '@/app/components/connection-status';
 import {Settings} from '@/app/components/settings';
 import SvgLogo from '@/assets/logo-wide.svg?react';

@@ -10,18 +10,21 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import {Fragment, ReactElement, useMemo, useState} from 'react';
+
 import {
   useLatticeData,
   type WasmCloudProvider,
   type WasmCloudProviderState,
 } from '@wasmcloud/lattice-client-react';
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import {Fragment, ReactElement, useMemo, useState} from 'react';
+
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@/components/collapsible';
 import {ShortCopy} from '@/components/short-copy';
 import {StatusIndicator} from '@/components/status-indicator';
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/table';
-import {useColumnVisibility, hideableWadmManagedColumnId} from '../hooks/use-column-visibility';
+
+import {useColumnVisibility, WADM_MANAGED_COLUMN_ID} from '../hooks/use-column-visibility';
 import {WadmManagedIndicator} from './wadm-indicator/wadm-indicator';
 
 const columnHelper = createColumnHelper<WasmCloudProvider>();
@@ -118,7 +121,7 @@ const columns = [
     },
   }),
   columnHelper.accessor('annotations', {
-    id: hideableWadmManagedColumnId,
+    id: WADM_MANAGED_COLUMN_ID,
     header: 'Managed',
     enableHiding: true,
     cell: (info) => WadmManagedIndicator(info.getValue()),
@@ -146,7 +149,7 @@ const ProvidersTableExpandedRow = (row: ReactTableRow<WasmCloudProvider>) => {
   const hostStates = row.getValue('hosts') as Record<string, WasmCloudProviderState>;
   if (!hostStates) return null;
 
-  const orderedHostIDs = Object.keys(hostStates).sort((a, b) => (a > b ? 1 : -1));
+  const orderedHostIDs = Object.keys(hostStates).toSorted((a, b) => (a > b ? 1 : -1));
 
   return (
     <>
@@ -204,13 +207,14 @@ export function ProvidersTable(): ReactElement {
   const {providers} = useLatticeData();
 
   const data = useMemo(
-    () => Object.values(providers).sort((a, b) => (a.id > b.id ? 1 : -1)),
+    () => Object.values(providers).toSorted((a, b) => (a.id > b.id ? 1 : -1)),
     [providers],
   );
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const {columnVisibility, setColumnVisibility} = useColumnVisibility(columns);
 
+  // eslint-disable-next-line react-hooks/incompatible-library -- https://github.com/TanStack/table/issues/5567
   const table = useReactTable({
     data,
     columns,

@@ -1,5 +1,6 @@
 import {SettingsIcon} from 'lucide-react';
 import {PropsWithChildren, ReactElement, useState} from 'react';
+
 import {DarkModeToggle} from '@/app/components/dark-mode-toggle';
 import {LatticeSettings} from '@/app/components/lattice-settings';
 import {Button} from '@/components/button';
@@ -13,6 +14,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/sheet';
+
 import {WadmManagedToggle} from './wadm-indicator/wadm-managed-toggle';
 
 function Settings(): ReactElement {

@@ -1,4 +1,5 @@
 import {ReactElement} from 'react';
+
 import {Card} from '@/components/card';
 
 type StatsTileProps = {

@@ -1,4 +1,5 @@
 import {ReactElement} from 'react';
+
 import {WadmManagedAssetOption} from '@/app/components/wadm-indicator/types';
 import {useSettings} from '@/app/hooks/use-settings';
 import WadmLogo from '@/assets/wadm-logo.svg?react';

@@ -1,11 +1,12 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
-import {ComponentPropsWithoutRef, ElementRef, forwardRef} from 'react';
+import {ComponentPropsWithoutRef, ComponentRef, forwardRef} from 'react';
+
 import {WadmManagedAssetOption} from '@/app/components/wadm-indicator/types';
 import {useSettings} from '@/app/hooks/use-settings';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/select';
 
 const WadmManagedToggle = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentRef<typeof SelectPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >((props, ref) => {
   const {wadmManagedAsset, setWadmManagedAsset} = useSettings();

@@ -1,8 +1,8 @@
 import {PropsWithChildren, ReactElement, useEffect} from 'react';
 import {useLocalStorage} from 'usehooks-ts';
 
-import {WadmManagedAssetOption} from '../components/wadm-indicator/types';
 import {DarkModeOption, SettingsContext} from './settings-context';
+import {WadmManagedAssetOption} from '../components/wadm-indicator/types';
 
 export function SettingsProvider({children}: PropsWithChildren): ReactElement {
   const [darkMode, setDarkMode] = useLocalStorage('theme', DarkModeOption.System);
@@ -13,15 +13,11 @@ export function SettingsProvider({children}: PropsWithChildren): ReactElement {
   );
 
   useEffect(() => {
-    if (
-      darkMode === DarkModeOption.Dark ||
-      (darkMode === DarkModeOption.System &&
-        globalThis.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
+    const optionIsDark = darkMode === DarkModeOption.Dark;
+    const optionIsSystemAndPrefersDark =
+      darkMode === DarkModeOption.System &&
+      globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+    document.documentElement.classList.toggle('dark', optionIsDark || optionIsSystemAndPrefersDark);
   }, [darkMode]);
 
   return (

@@ -1,4 +1,5 @@
 import {createContext} from 'react';
+
 import {WadmManagedAssetOption} from '@/app/components/wadm-indicator/types';
 
 export enum DarkModeOption {

@@ -1,33 +1,32 @@
-import {useEffect, useState} from 'react';
-import {WadmManagedAssetOption} from '../components/wadm-indicator/types';
+import * as React from 'react';
+
 import {useSettings} from './use-settings';
+import {WadmManagedAssetOption} from '../components/wadm-indicator/types';
 
-export const hideableWadmManagedColumnId = 'wadm-managed' as const;
+export const WADM_MANAGED_COLUMN_ID = 'wadm-managed' as const;
 
-type ColumnVisibilitySettings = {[key: string]: boolean};
 type Column = {
   id?: string;
 };
 
 const useColumnVisibility = <T extends Column>(columns: T[]) => {
   const {wadmManagedAsset} = useSettings();
 
-  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilitySettings>(
+  const [columnVisibility, setColumnVisibility] = React.useState(
     columns.reduce((accumulator, column) => {
       if (typeof column.id === 'string') {
-        return Object.assign(accumulator, {[column.id]: column.id !== hideableWadmManagedColumnId});
+        return Object.assign(accumulator, {[column.id]: column.id !== WADM_MANAGED_COLUMN_ID});
       }
       return accumulator;
     }, {}),
   );
 
-  useEffect(() => {
-    setColumnVisibility((columnVisibility) => ({
+  return {
+    columnVisibility: {
       ...columnVisibility,
-      [hideableWadmManagedColumnId]: wadmManagedAsset !== WadmManagedAssetOption.None,
-    }));
-  }, [wadmManagedAsset]);
-
-  return {columnVisibility, setColumnVisibility};
+      [WADM_MANAGED_COLUMN_ID]: wadmManagedAsset !== WadmManagedAssetOption.None,
+    },
+    setColumnVisibility,
+  };
 };
 export {useColumnVisibility};
@@ -1,4 +1,5 @@
 import {useContext} from 'react';
+
 import {SettingsContext, SettingsContextValue} from '../contexts/settings-context';
 
 export function useSettings(): SettingsContextValue {