Adopt anti-slop lint rules

app/rum.ts

@@ -9,7 +9,7 @@ const ENV = import.meta.env.PROD ? "production" : "development";
 let initialized = false;
 
 export function initRum(clientToken: string, version = "dev") {
-  if (typeof window === "undefined") return;
+  if (import.meta.env.SSR) return;
   if (initialized) return;
   if (!clientToken) return;
 

biome.json

@@ -1,6 +1,10 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
-  "extends": ["@flow-industries/lint/biome", "@flow-industries/lint/react"],
+  "$schema": "https://biomejs.dev/schemas/2.5.8/schema.json",
+  "extends": [
+    "@flow-industries/lint/biome",
+    "@flow-industries/lint/react",
+    "biome-anti-slop"
+  ],
   "files": {
     "includes": ["!**/*.css"]
   }

package.json

@@ -51,14 +51,15 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
-    "@biomejs/biome": "2.4.12",
-    "@flow-industries/lint": "0.1.0",
+    "@biomejs/biome": "2.5.8",
+    "@flow-industries/lint": "0.3.0",
     "@playwright/test": "1.62.1",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^26.1.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
+    "biome-anti-slop": "0.1.0",
     "geist": "^1.7.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

src/components/logo.tsx

@@ -14,7 +14,7 @@ export function Logo({ className, size = 28, color }: LogoProps) {
       style={{
         width: size,
         height: size,
-        ...(color ? { backgroundColor: color } : {}),
+        backgroundColor: color,
       }}
     />
   );

src/components/ui/aspect-ratio.tsx

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn";
+import { cssVars } from "../../utils/css-vars";
 
 function AspectRatio({
   ratio,
@@ -8,11 +9,7 @@ function AspectRatio({
   return (
     <div
       data-slot="aspect-ratio"
-      style={
-        {
-          "--ratio": ratio,
-        } as React.CSSProperties
-      }
+      style={cssVars({ "--ratio": ratio })}
       className={cn("relative aspect-(--ratio)", className)}
       {...props}
     />

src/components/ui/chart.tsx

@@ -3,9 +3,11 @@ import type { TooltipValueType } from "recharts";
 import * as RechartsPrimitive from "recharts";
 
 import { cn } from "../../utils/cn";
+import { cssVars } from "../../utils/css-vars";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
+const THEME_KEYS = ["light", "dark"] as const;
 
 const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
 type TooltipNameType = number | string;
@@ -92,22 +94,18 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
     <style
       // biome-ignore lint/security/noDangerouslySetInnerHtml: static CSS generated from chart config, no user input
       dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+        __html: THEME_KEYS.map(
+          (theme) => `
+${THEMES[theme]} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color;
+    const color = itemConfig.theme?.[theme] ?? itemConfig.color;
     return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
 `,
-          )
-          .join("\n"),
+        ).join("\n"),
       }}
     />
   );
@@ -153,9 +151,12 @@ function ChartTooltipContent({
     const [item] = payload;
     const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    // `String(x) === x` holds only for string primitives, so this tests the label's
+    // representation without narrowing it by `typeof`.
+    const labelText = String(label);
     const value =
-      !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
+      !labelKey && labelText === label
+        ? (config[labelText]?.label ?? label)
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -231,12 +232,10 @@ function ChartTooltipContent({
                               "my-0.5": nestLabel && indicator === "dashed",
                             },
                           )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
+                          style={cssVars({
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          })}
                         />
                       )
                     )}
@@ -254,7 +253,7 @@ function ChartTooltipContent({
                       </div>
                       {item.value != null && (
                         <span className="font-mono font-medium text-foreground tabular-nums">
-                          {typeof item.value === "number"
+                          {Number(item.value) === item.value
                             ? item.value.toLocaleString()
                             : String(item.value)}
                         </span>
@@ -328,40 +327,59 @@ function ChartLegendContent({
   );
 }
 
+type ChartPayloadField = string | number | boolean | null | undefined;
+
+/** The subset of a Recharts tooltip/legend entry this module reads. */
+interface ChartPayloadEntry {
+  readonly payload?: unknown;
+}
+
+/** Reads a named field off a Recharts entry, keeping it only when it is a primitive. */
+function readField(
+  source: ChartPayloadEntry | undefined,
+  key: string,
+): ChartPayloadField {
+  const value = source
+    ? Object.entries(source).find(([field]) => field === key)?.[1]
+    : undefined;
+  // SAFETY: each branch below rules the value out unless it is a primitive of that exact kind
+  // (coercion round-trips only for the primitive itself), so the narrowed type is established.
+  return value === null ||
+    value === undefined ||
+    value === true ||
+    value === false ||
+    Number(value) === value ||
+    String(value) === value
+    ? (value as ChartPayloadField)
+    : undefined;
+}
+
+/**
+ * Resolves the `ChartConfig` entry for a payload item. Recharts types the nested `payload` as
+ * `any`, so the item is treated as a bag of fields: the configured key may live on the item
+ * itself (`nameKey`/`dataKey` style) or on its nested payload, and whichever names a real config
+ * entry wins. Falls back to the requested key.
+ */
 function getPayloadConfigFromPayload(
   config: ChartConfig,
-  payload: unknown,
+  item: ChartPayloadEntry | undefined,
   key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
+  // SAFETY: `Object(x) === x` holds only for objects, so the nested payload is an object here;
+  // readField then reads it by name and keeps only primitives.
+  const nested =
+    item?.payload !== undefined && Object(item.payload) === item.payload
+      ? (item.payload as ChartPayloadEntry)
       : undefined;
+  const candidates = [readField(item, key), readField(nested, key)];
+  const labelKey = candidates.find(
+    (candidate) =>
+      candidate !== undefined &&
+      candidate !== null &&
+      String(candidate) in config,
+  );
 
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key];
+  return labelKey === undefined ? config[key] : config[String(labelKey)];
 }
 
 export {

src/components/ui/dock.tsx

@@ -32,29 +32,29 @@ interface DockIconButtonProps extends DockItem {
   ref?: React.Ref<HTMLButtonElement>;
 }
 
-const variantClasses: Record<DockVariant, string> = {
+const variantClasses = {
   default: "hover:bg-secondary/50",
   secondary: "bg-secondary/50 hover:bg-primary hover:text-primary-foreground",
   primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-};
+} satisfies Record<DockVariant, string>;
 
-const containerSizeClasses: Record<DockSize, string> = {
+const containerSizeClasses = {
   sm: "gap-1 rounded-xl p-1.5",
   md: "gap-1.5 rounded-xl p-2",
   lg: "gap-2 rounded-2xl p-2 md:gap-3",
-};
+} satisfies Record<DockSize, string>;
 
-const buttonSizeClasses: Record<DockSize, string> = {
+const buttonSizeClasses = {
   sm: "h-8 w-8 rounded-lg p-1.5",
   md: "h-10 w-10 rounded-xl p-2",
   lg: "h-12 w-12 rounded-2xl p-3 md:h-14 md:w-14",
-};
+} satisfies Record<DockSize, string>;
 
-const iconSizeClasses: Record<DockSize, string> = {
+const iconSizeClasses = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-5 w-5 md:h-6 md:w-6",
-};
+} satisfies Record<DockSize, string>;
 
 function DockIconButton({
   icon: Icon,

src/components/ui/form.tsx

@@ -23,8 +23,8 @@ type FormFieldContextValue<
   name: TName;
 };
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(
+  null,
 );
 
 const FormField = <
@@ -44,13 +44,16 @@ const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const formState = useFormState({ name: fieldContext?.name });
 
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
 
+  const fieldState = getFieldState(fieldContext.name, formState);
   const { id } = itemContext;
 
   return {
@@ -67,9 +70,7 @@ type FormItemContextValue = {
   id: string;
 };
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
   const id = React.useId();

src/components/ui/input-group.tsx

@@ -58,7 +58,7 @@ function InputGroupAddon({
       data-align={align}
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
+        if (e.target instanceof HTMLElement && e.target.closest("button")) {
           return;
         }
         e.currentTarget.parentElement?.querySelector("input")?.focus();