chore(oxlint): enforce additional rules & plugins

.oxlintrc.jsonc

@@ -6,19 +6,43 @@
     "oxc",
     "react",
     "react-perf",
+    "import",
+
     // TODO:
-    // "vitest",
+    // "jsx-a11y",
+    "vitest",
     // "jsdoc",
   ],
   "categories": {
     "correctness": "error",
-    "perf": "warn",
+    // "suspicious": "error",
+    // "restriction": "error",
+    // "perf": "warn",
   },
   "rules": {
-    "typescript/no-explicit-any": "error",
     // ======================================
     // grida-specific overrides:
-    "typescript/no-namespace": "off",
+    "no-namespace": "off",
+
+    // `test.todo` / `it.todo` is Vitest's sanctioned way to track planned-
+    // but-not-yet-written tests. We prefer it over `.skip` + TODO comments
+    // (`jest/no-disabled-tests` rejects those). The `vitest/warn-todo` rule
+    // is opinionated the other way; keep it at warn so CI doesn't fail on
+    // legitimate todos while still surfacing them during local development.
+    "vitest/warn-todo": "warn",
+
+    // ======================================
+    // restriction
+    "no-explicit-any": "error",
+    "no-import-type-side-effects": "error",
+    "no-var": "error",
+    // <planned>
+    // "no-invalid-void-type": "error",
+    // "no-empty-function": "error",
+    // "no-optional-chaining": "error",
+    // "no-alert": "error",
+    // "default-case": "error",
+    // </planned>
   },
   "env": {
     "builtin": true,
@@ -36,4 +60,20 @@
     "worker-configuration.d.ts",
     "database-generated.types.ts",
   ],
+  "overrides": [
+    {
+      // Benchmark / perf test files intentionally measure timing and do not
+      // assert correctness. They log results to stdout and surface failures
+      // by throwing on regressions, not via `expect(...)`. Exempt them from
+      // the `expect-expect` rule only.
+      "files": [
+        "**/__tests__/bench/**",
+        "**/*.bench.test.ts",
+        "**/bench-*.test.ts",
+      ],
+      "rules": {
+        "jest/expect-expect": "off",
+      },
+    },
+  ],
 }

apps/viewer/app/v1/pdf/[[...file]]/viewer.tsx

@@ -29,6 +29,7 @@ export default function PDFViewer({
       return (
         <main className="w-dvw h-dvh">
           <object
+            aria-label={title}
             title={title}
             data={file}
             type="application/pdf"

crates/grida-canvas-wasm/lib/__test__/bench-load-scene.test.ts

@@ -150,14 +150,12 @@ describe("bench: load_scene (WASM-on-Node)", () => {
     }, 120_000);
   }
 
-  if (fixtures.length === 0) {
-    it("no .grida fixtures found (skipped)", () => {
-      console.log(
-        "[wasm-bench] No .grida fixtures in lib/__test__/fixtures/local/. " +
-          "Place .grida files there to benchmark real scenes."
-      );
-    });
-  }
+  it.skipIf(fixtures.length > 0)("no .grida fixtures found (skipped)", () => {
+    console.log(
+      "[wasm-bench] No .grida fixtures in lib/__test__/fixtures/local/. " +
+        "Place .grida files there to benchmark real scenes."
+    );
+  });
 });
 
 describe("cross-boundary: TS encode → WASM decode", () => {
@@ -201,7 +199,8 @@ describe("cross-boundary: TS encode → WASM decode", () => {
     });
   }
 
-  if (sharedFixtures.length === 0) {
-    it("no shared .grida fixtures found (skipped)", () => {});
-  }
+  it.skipIf(sharedFixtures.length > 0)(
+    "no shared .grida fixtures found (skipped)",
+    () => {}
+  );
 });

editor/app/(api)/private/west/campaigns/[campaign_id]/participants/import/route.ts

@@ -1,4 +1,4 @@
-import { type Platform } from "@/lib/platform";
+import type { Platform } from "@/lib/platform";
 import { createWestReferralClient } from "@/lib/supabase/server";
 import { NextRequest, NextResponse } from "next/server";
 

editor/app/(canvas)/canvas/tools/ai/_components/canvas.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { cn } from "@/components/lib/utils";
-import { type DeepPartial } from "ai";
-import { type PortableNode } from "../schema";
+import type { DeepPartial } from "ai";
+import type { PortableNode } from "../schema";
 
 const DEFAULT_IFRAME_HTML = `
   <html>
@@ -51,6 +51,7 @@ export function Canvas({
   return (
     <div className={cn("w-full h-full", className)} {...props}>
       <iframe
+        title="AI canvas preview"
         ref={iframeRef}
         srcDoc={DEFAULT_IFRAME_HTML}
         style={{

editor/app/(canvas)/canvas/tools/ai/page.tsx

@@ -14,8 +14,8 @@ import { MinimalChatBox } from "@/components/chat";
 import { readStreamableValue } from "@ai-sdk/rsc";
 import { Canvas } from "./_components/canvas";
 import { generate, type UserAttachment } from "./generate";
-import { type DeepPartial } from "ai";
-import { type StreamingResponse } from "./schema";
+import type { DeepPartial } from "ai";
+import type { StreamingResponse } from "./schema";
 import { Toggle } from "@/components/ui/toggle";
 import { CodeIcon } from "@radix-ui/react-icons";
 import { ThemedMonacoEditor } from "@/components/monaco";

editor/app/(library)/library/[t]/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 import { getCategory, search } from "../actions";
 import { notFound } from "next/navigation";
 import Categories from "../_components/categories";

editor/app/(tenant)/~/[tenant]/(e)/d/e/[id]/layout.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { service_role } from "@/lib/supabase/server";
-import { type Metadata, type Viewport } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inconsolata, Inter, Lora } from "next/font/google";
 import type { FormDocument } from "@/grida-forms-hosted/types";
 import { ThemeProvider } from "@/components/theme-provider";

editor/app/(tools)/(playground)/playground/image/layout.tsx

@@ -1,4 +1,4 @@
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Image Playground",

editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/design/_enterprise/west-referral-duo-001-editor.tsx

@@ -16,7 +16,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { TemplateData } from "@/theme/templates/enterprise/west-referral/templates";
 import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
-import { type WWWTemplateEditorInstance } from "@/scaffolds/platform/www";
+import type { WWWTemplateEditorInstance } from "@/scaffolds/platform/www";
 import assert from "assert";
 import { toast } from "sonner";
 import { CampaignTemplateDuo001Viewer } from "./template-duo-001-viewer";

editor/app/(workbench)/[org]/[proj]/[id]/data/(data)/table/[tablename]/definition/page.tsx

@@ -45,12 +45,12 @@ export default function TableDefinitionPage(props: {
       (name) => name !== tb.name
     );
     return schema_other_table_names.map((name) => {
-      return {
-        name,
-        ...SupabasePostgRESTOpenApi.parse_supabase_postgrest_schema_definition(
+      return Object.assign(
+        { name },
+        SupabasePostgRESTOpenApi.parse_supabase_postgrest_schema_definition(
           schema_definitions[name]
-        ),
-      };
+        )
+      );
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tb]);

editor/app/(www)/(ai)/ai/models/page.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 import ai from "@/lib/ai";
 import {
   Card,

editor/app/(www)/(database)/database/page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Page from "./_page";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Grida Database | Your visual Data backend",

editor/app/(www)/(database)/database/supabase/page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Page from "./_page";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Supabase Admin Panel | Visual Database Interface for Supabase",

editor/app/(www)/(figma)/figma/vscode/page.tsx

@@ -36,6 +36,7 @@ function Hero() {
         <CodeTabs />
         <div className="absolute inset-0 -z-10 pointer-events-none">
           <iframe
+            title="Background gradient"
             loading="eager"
             className="w-full h-full"
             src="https://bg.grida.co/embed/shadergradient/89"

editor/app/(www)/(forms)/forms/page.tsx

@@ -1,4 +1,4 @@
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 import { GridaLogo } from "@/components/grida-logo";
 import { Button } from "@/components/ui/button";
 import { Section } from "@/www/ui/section";

editor/app/(www)/(home)/_home/content-1.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import Image from "next/image";
 import { Carousel, CarouselContent, CarouselItem } from "@/www/ui/carousel";
-import { type CarouselApi } from "@/www/ui/carousel";
+import type { CarouselApi } from "@/www/ui/carousel";
 import Autoplay from "embla-carousel-autoplay";
 import { cn } from "@/components/lib/utils";
 import { motion } from "motion/react";

editor/app/(www)/(home)/_home/index.tsx

@@ -96,7 +96,11 @@ function SectionMainDemo() {
           data-locked={isLocked}
           className="w-full h-full pointer-events-none data-[locked='false']:pointer-events-auto"
         >
-          <iframe src="/www-embed/demo-canvas" className="w-full h-full" />
+          <iframe
+            title="Canvas demo"
+            src="/www-embed/demo-canvas"
+            className="w-full h-full"
+          />
         </div>
       </Card>
     </motion.div>

editor/app/(www)/(sdk)/sdk/_sections/demo.tsx

@@ -53,7 +53,11 @@ export default function SectionMainDemo() {
           data-locked={isLocked}
           className="w-full h-full pointer-events-none group-data-[locked='false']/demo-card:pointer-events-auto"
         >
-          <iframe src="/www-embed/demo-canvas" className="w-full h-full" />
+          <iframe
+            title="Canvas demo"
+            src="/www-embed/demo-canvas"
+            className="w-full h-full"
+          />
         </div>
       </Card>
     </motion.div>

editor/app/(www)/(sdk)/sdk/page.tsx

@@ -6,7 +6,7 @@ import Hero from "./_sections/hero";
 import Features from "./_sections/features";
 import SectionMainDemo from "./_sections/demo";
 import FAQ from "./_sections/faq";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Grida Canvas SDK - Build Your Own Canvas Framework | Open Source",

editor/app/(www)/(slides)/slides/_sections/editor-preview.tsx

@@ -37,6 +37,7 @@ export default function EditorPreview() {
             className="w-full h-full pointer-events-none data-[locked='false']:pointer-events-auto"
           >
             <iframe
+              title="Slides editor preview"
               src="/canvas/slides"
               className="w-full h-full"
               loading="lazy"

editor/app/(www)/(slides)/slides/page.tsx

@@ -1,4 +1,4 @@
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 import { Section } from "@/www/ui/section";
 import Header from "@/www/header";
 import FooterWithCTA from "@/www/footer-with-cta";

editor/app/(www)/(west)/west/_page.tsx

@@ -47,6 +47,7 @@ function HeroSection() {
     <section className="relative overflow-hidden py-40 md:py-60">
       <div className="absolute inset-0 -z-10 pointer-events-none dark:hidden">
         <iframe
+          title="Aurora background"
           loading="eager"
           className="w-full h-full"
           src="https://bg.grida.co/embed/aurora"

editor/app/global-error.tsx

@@ -14,7 +14,7 @@ export default function GlobalError({
   }, [error]);
 
   return (
-    <html>
+    <html lang="en">
       <body>
         {/* `NextError` is the default Next.js error page component. Its type
         definition requires a `statusCode` prop. However, since the App Router

editor/components/formfield/phone-field/phone-field.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import { PhoneInput } from "@/components/extension/phone-input";
-import { type CountryCode } from "libphonenumber-js/core";
+import type { CountryCode } from "libphonenumber-js/core";
 
 const PhoneFieldDefaultCountryContext = React.createContext<
   CountryCode | undefined

editor/components/mediaviewer/index.tsx

@@ -324,6 +324,7 @@ export function StandaloneMediaView({
       case "pdf": {
         return (
           <object
+            aria-label="PDF preview"
             data={mediaSrc?.src}
             type="application/pdf"
             className="w-full h-full"

editor/components/tag/tag-input.tsx

@@ -3,7 +3,7 @@
 import React, { useMemo } from "react";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import { TagPopover } from "./tag-popover";
 import { TagList } from "./tag-list";
 import { tagVariants } from "./tag";

editor/components/ui-forms/toggle-group.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
 import { cn } from "@/components/lib/utils";
 import { toggleVariants } from "@/components/ui/toggle";

editor/grida-canvas-hosted/playground/uxhost-settings-keyboardshortcuts.tsx

@@ -123,10 +123,9 @@ export function KeyboardShortcuts() {
   const [searchQuery, setSearchQuery] = useState("");
 
   const filteredActions = useMemo(() => {
-    const actionsWithId = Object.entries(actions).map(([id, action]) => ({
-      id,
-      ...action,
-    }));
+    const actionsWithId = Object.entries(actions).map(([id, action]) =>
+      Object.assign({ id }, action)
+    );
 
     if (!searchQuery.trim()) {
       return actionsWithId;

editor/grida-canvas-react-renderer-dom/nodes/iframe.tsx

@@ -12,6 +12,7 @@ export const IFrameWidget = ({
 }: grida.program.document.IComputedNodeReactRenderProps<grida.program.nodes.HTMLIFrameNode>) => {
   return (
     <iframe
+      title="Embedded iframe"
       src={src as string}
       width={css.toDimension(width)}
       height={css.toDimension(height)}

editor/grida-canvas-react-renderer-dom/template-builder/widgets/icon.tsx

@@ -27,6 +27,7 @@ export function IconWidget({ repository, name }: IconWidgetProps) {
 }
 
 function RadixIconWidget({ name }: { name: keyof typeof RadixIcons }) {
+  // eslint-disable-next-line import/namespace
   const Component = RadixIcons[name];
   if (Component) return <Component />;
   return <></>;

editor/grida-canvas-react/components/image.tsx

@@ -108,7 +108,7 @@ export function ImageView({
     // eslint-disable-next-line @next/next/no-img-element -- Intentional: renders a canvas-exported data URL (Next/Image not applicable).
     <img
       className={cn("w-full h-full object-contain", className)}
-      alt="Paint image"
+      alt="Paint"
       {...props}
       src={imageUrl}
     />