@cytario/web 2.1.8 → 2.2.0

package/app/components/DirectoryView/buildDirectoryTree.ts

@@ -6,42 +6,30 @@ import { isZarrPath } from "~/utils/zarrUtils";
 export type TreeNodeType = "bucket" | "directory" | "file";
 
 /**
- * A node in the storage directory tree.
- *
- * Structurally extends `@cytario/design` `TreeNode` (`{ id, name, children? }`)
- * so it can be passed directly to the design system `<Tree>` component without
- * conversion. Callbacks like `onActivate` return the full `TreeNode`,
- * eliminating the need for reverse-lookup helpers.
- *
- * Connection-level metadata (`provider`, `bucketName`, etc.) is not stored on
- * every node — look it up from the connections store via `connectionName`.
+ * A node in the storage directory tree. Shape matches `@cytario/design`
+ * `TreeNode` so it can be passed straight to the design-system `<Tree>`.
  */
 export interface TreeNode {
   /** Globally unique identifier: `connectionName/pathName`. */
   id: string;
   /** Name of the connection config this node belongs to. */
   connectionName: string;
-  /**
-   * Display name — the last segment of the path (e.g. `"output.ome.tif"`).
-   *
-   * For `type: "bucket"` nodes, this equals `connectionName` by convention —
-   * loaders set it that way (`connections.loader.ts`, `search.route.tsx`) so
-   * `DirectoryViewTableConnection` can use `node.name` as the row's stable
-   * id and URL segment without a separate lookup.
-   */
+  /** Display name. For `type: "bucket"` this equals `connectionName`. */
   name: string;
   type: TreeNodeType;
-  /**
-   * Full path relative to the connection root, including trailing `/` for
-   * directories. Empty string `""` for bucket root nodes.
-   *
-   * Built by `buildDirectoryTree` as the concatenation of ancestor `name`
-   * segments. Used for routing via `buildConnectionPath()`.
-   */
+  /** Full path relative to connection root (trailing `/` for dirs, `""` for bucket root). */
   pathName: string;
-  children: TreeNode[];
-  /** Original S3 object metadata. Present for files; for directories, holds the first image object (used for previews). */
+  /** `undefined` signals a leaf (react-arborist hides the chevron); `[]` is expandable-empty. */
+  children?: TreeNode[];
+  /** S3 metadata. On directories: first image inside, used for previews. */
   _Object?: _Object;
+  /** Hints from `buildLevelTree` for one-level listings. */
+  hasChildren?: boolean;
+  isLeaf?: boolean;
+  loadState?: "idle" | "loading" | "loaded" | "error";
+  /** Populated for bucket nodes by the per-connection preview probe. */
+  connectionStatus?: "connected" | "error";
+  connectionErrorMessage?: string;
 }
 
 function buildDirectoryTreeRecursive(
@@ -56,9 +44,7 @@ function buildDirectoryTreeRecursive(
   if (keyParts.length > 1) pathName += "/";
 
   if (keyParts.length === 1) {
-    // Skip empty-name leaf nodes produced by S3 folder markers (keys ending
-    // in "/").  The parent directory was already created by the recursive
-    // call, so there is nothing to add.
+    // Skip empty-name leaves from S3 folder marker keys (ending in "/").
     if (name === "") return;
 
     currentDir.push({
@@ -71,8 +57,7 @@ function buildDirectoryTreeRecursive(
       _Object: obj,
     });
   } else {
-    // Zarr directories are images — treat as leaf nodes, skip recursion
-    // into the thousands of internal chunk files.
+    // Zarr directories are images — treat as leaf, skip the thousands of chunks.
     if (isZarrPath(name)) {
       if (!currentDir.find((child) => child.name === name)) {
         currentDir.push({
@@ -104,6 +89,7 @@ function buildDirectoryTreeRecursive(
       existingDir._Object = obj;
     }
 
+    if (!existingDir.children) existingDir.children = [];
     buildDirectoryTreeRecursive(
       existingDir.children,
       keyParts.slice(1),
@@ -114,11 +100,10 @@ function buildDirectoryTreeRecursive(
   }
 }
 
-/** Depth-first search for a node by its `id`. */
 export function findNodeById(nodes: TreeNode[], id: string): TreeNode | undefined {
   for (const node of nodes) {
     if (node.id === id) return node;
-    if (node.children.length > 0) {
+    if (node.children && node.children.length > 0) {
       const found = findNodeById(node.children, id);
       if (found) return found;
     }
@@ -126,19 +111,19 @@ export function findNodeById(nodes: TreeNode[], id: string): TreeNode | undefine
   return undefined;
 }
 
-/** Total size of all files under a directory node. */
 export function computeDirectorySize(node: TreeNode): number {
   if (node.type === "file") return node._Object?.Size ?? 0;
-  if (node.children.length === 0) return node._Object?.Size ?? 0;
+  if (!node.children || node.children.length === 0) {
+    return node._Object?.Size ?? 0;
+  }
   return node.children.reduce((sum, child) => sum + computeDirectorySize(child), 0);
 }
 
-/** Latest LastModified timestamp under a directory node. */
 export function computeDirectoryLastModified(node: TreeNode): number {
   if (node.type === "file") {
     return node._Object?.LastModified ? new Date(node._Object.LastModified).getTime() : 0;
   }
-  if (node.children.length === 0) {
+  if (!node.children || node.children.length === 0) {
     return node._Object?.LastModified ? new Date(node._Object.LastModified).getTime() : 0;
   }
   return node.children.reduce(
@@ -147,13 +132,75 @@ export function computeDirectoryLastModified(node: TreeNode): number {
   );
 }
 
+interface BuildLevelTreeArgs {
+  contents: _Object[];
+  commonPrefixes: string[];
+  connectionName: string;
+  /** Listing prefix to strip from keys to derive node names. Empty at bucket root. */
+  prefix?: string;
+  /** Path relative to connection root, prepended to `pathName`. */
+  urlPath?: string;
+}
+
 /**
- * Build a directory tree from S3 objects.
- *
- * @param prefix  S3 listing prefix to strip from object keys
- * @param urlPath Path relative to the connection root (prepended to node
- *                pathNames so they stay routable via `/connections/:connectionName/*`)
+ * Build a single-level tree from a paginated S3 listing with `Delimiter: "/"`.
+ * Zarr `CommonPrefixes` collapse into a single leaf node.
  */
+export function buildLevelTree({
+  contents,
+  commonPrefixes,
+  connectionName,
+  prefix,
+  urlPath,
+}: BuildLevelTreeArgs): TreeNode[] {
+  const basePath = urlPath ? (urlPath.endsWith("/") ? urlPath : `${urlPath}/`) : "";
+  const stripPrefix = prefix ?? "";
+  const nodes: TreeNode[] = [];
+
+  for (const cp of commonPrefixes) {
+    const relative = cp.startsWith(stripPrefix) ? cp.slice(stripPrefix.length) : cp;
+    const name = relative.replace(/\/$/, "");
+    if (!name) continue;
+    const pathName = `${basePath}${name}/`;
+    const isZarr = isZarrPath(name);
+
+    nodes.push({
+      id: `${connectionName}/${pathName}`,
+      connectionName,
+      type: isZarr ? "file" : "directory",
+      name,
+      pathName,
+      // Empty array → chevron + lazy expansion; `undefined` → no chevron.
+      children: isZarr ? undefined : [],
+      hasChildren: !isZarr,
+      isLeaf: isZarr,
+      loadState: isZarr ? undefined : "idle",
+    });
+  }
+
+  for (const obj of contents) {
+    if (!obj.Key) continue;
+    const relative = obj.Key.startsWith(stripPrefix) ? obj.Key.slice(stripPrefix.length) : obj.Key;
+    if (!relative || relative.endsWith("/")) continue;
+    const name = relative.split("/").pop()!;
+    if (!name) continue;
+    const pathName = `${basePath}${relative}`;
+
+    nodes.push({
+      id: `${connectionName}/${pathName}`,
+      connectionName,
+      type: "file",
+      name,
+      pathName,
+      isLeaf: true,
+      _Object: obj,
+    });
+  }
+
+  return nodes;
+}
+
+/** Build a recursive directory tree from a flat S3 object listing. */
 export function buildDirectoryTree(
   objects: _Object[],
   connectionName: string,

package/app/components/DirectoryView/filterNodes.ts

@@ -6,16 +6,6 @@ import type { ColumnConfig } from "~/components/Table/types";
 import type { Connection } from "~/utils/connectionsStore/useConnectionsStore";
 import { getFileType } from "~/utils/fileType";
 
-// Applies a `ColumnFiltersState` to a `TreeNode[]` so every downstream view
-// (Grid, Table, Tree) receives pre-filtered data. The `ColumnFiltersState`
-// shape is produced by both the Table's column-filter UI and the FilterBar,
-// both writing to the same per-tableId Zustand store.
-//
-//   allNodes -> filteredNodes -> DirectoryView -> (Grid | Table | Tree)
-//
-// Filters only the current level (top-level `nodes`). Tree's hierarchical
-// expansion shows descendants unfiltered; name-matching inside the tree
-// relies on the design-system Tree's `searchTerm` + `searchMatch`.
 type NodeAccessor = (node: TreeNode) => string;
 
 const fileAccessors: Record<string, NodeAccessor> = {
@@ -42,27 +32,22 @@ export function getNodeAccessors(
   return kind === "connections" ? makeConnectionAccessors(connections) : fileAccessors;
 }
 
-/**
- * Filters hidden files (names starting with ".") unless showHidden is true.
- * Filtering is applied recursively so that hidden children inside visible
- * directories are also removed (required for the tree view).
- */
+/** Filter hidden files (names starting with ".") recursively. */
 export function filterHiddenNodes(nodes: TreeNode[], showHidden: boolean): TreeNode[] {
   if (showHidden) return nodes;
 
   return nodes
     .filter((node) => !node.name.startsWith("."))
     .map((node) =>
-      node.children.length > 0
+      node.children && node.children.length > 0
         ? { ...node, children: filterHiddenNodes(node.children, false) }
         : node,
     );
 }
 
 /**
- * Filters TreeNode[] using the same column filter semantics as the Table.
- * Text filters use case-insensitive substring matching; select filters use
- * exact match. Columns without a matching accessor are skipped.
+ * Filter `TreeNode[]` using the same column-filter semantics as the Table.
+ * Text filters use case-insensitive substring; select filters use exact match.
  */
 export function filterNodes(
   nodes: TreeNode[],

package/app/components/DirectoryView/useLazyTreeNodes.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { TreeNode } from "./buildDirectoryTree";
+import { toastBridge, toToastVariant } from "~/toast-bridge";
+import { select } from "~/utils/connectionsStore/selectors";
+import { useConnectionsStore } from "~/utils/connectionsStore/useConnectionsStore";
+import { formatTruncationMessage } from "~/utils/listingLimits";
+import { loadConnectionLevel } from "~/utils/loadConnectionLevel";
+
+/**
+ * Lazily-expanding tree backed by direct browser → S3 listings.
+ * `loadChildren` is idempotent and dedupes concurrent calls; each
+ * `initialNodes` cohort owns an `AbortController` so stale responses
+ * cannot overwrite a fresh tree after navigation.
+ */
+export function useLazyTreeNodes(initialNodes: TreeNode[]) {
+  const [nodes, setNodes] = useState<TreeNode[]>(initialNodes);
+  const inflightRef = useRef<Map<string, Promise<TreeNode[]>>>(new Map());
+  const abortRef = useRef<AbortController>(new AbortController());
+
+  useEffect(() => {
+    const controller = new AbortController();
+    abortRef.current = controller;
+    inflightRef.current = new Map();
+    setNodes(initialNodes);
+    return () => {
+      controller.abort();
+    };
+  }, [initialNodes]);
+
+  const loadChildren = useCallback(async (node: TreeNode): Promise<TreeNode[]> => {
+    if (
+      !node.connectionName ||
+      node.isLeaf ||
+      node.hasChildren === false ||
+      node.loadState === "loaded"
+    ) {
+      return node.children ?? [];
+    }
+    const connectionName = node.connectionName;
+    const key = `${connectionName} ${node.pathName}`;
+    const existing = inflightRef.current.get(key);
+    if (existing) return existing;
+
+    const connection = select.connection(connectionName)(useConnectionsStore.getState());
+    if (!connection) {
+      throw new Error(`No connection in store for "${connectionName}"`);
+    }
+    const { connectionConfig, credentials } = connection;
+
+    const controller = abortRef.current;
+    const { signal } = controller;
+    const inflightMap = inflightRef.current;
+
+    setNodes((prev) =>
+      replaceNodeById(prev, node.id, (n) => ({
+        ...n,
+        loadState: "loading",
+      })),
+    );
+
+    const promise = (async () => {
+      try {
+        const { nodes: children, isCapped } = await loadConnectionLevel({
+          connectionConfig,
+          credentials,
+          connectionName,
+          urlPath: node.pathName,
+          signal,
+        });
+        if (signal.aborted) return [];
+
+        if (isCapped) {
+          toastBridge.emit({
+            variant: toToastVariant("warning"),
+            message: formatTruncationMessage(node.name),
+          });
+        }
+        setNodes((prev) =>
+          replaceNodeById(prev, node.id, (n) => ({
+            ...n,
+            children,
+            loadState: "loaded",
+          })),
+        );
+        return children;
+      } catch (error) {
+        if (signal.aborted) return [];
+        setNodes((prev) =>
+          replaceNodeById(prev, node.id, (n) => ({
+            ...n,
+            loadState: "error",
+          })),
+        );
+        throw error;
+      } finally {
+        if (inflightMap === inflightRef.current) {
+          inflightMap.delete(key);
+        }
+      }
+    })();
+
+    inflightRef.current.set(key, promise);
+    return promise;
+  }, []);
+
+  return { nodes, loadChildren };
+}
+
+function replaceNodeById(
+  nodes: TreeNode[],
+  id: string,
+  update: (n: TreeNode) => TreeNode,
+): TreeNode[] {
+  return nodes.map((n) => {
+    if (n.id === id) return update(n);
+    if (!n.children || n.children.length === 0) return n;
+    return { ...n, children: replaceNodeById(n.children, id, update) };
+  });
+}

package/app/components/GlobalSearch/GlobalSearch.tsx

@@ -18,12 +18,17 @@ export const GlobalSearch = () => {
   const [query, setQuery] = useState(searchQuery);
   const [showResults, setShowResults] = useState(false);
 
-  // Derive nodes from fetcher data
   const nodes: TreeNode[] = fetcher.data?.nodes ?? [];
 
+  // Treat the debounce window as "loading" too — otherwise the dropdown
+  // flashes "No results" between keystrokes.
+  const lastResultsQuery = fetcher.data?.searchQuery ?? "";
+  const trimmedQuery = query.trim();
+  const isLoading =
+    trimmedQuery.length > 0 && (fetcher.state !== "idle" || trimmedQuery !== lastResultsQuery);
+
   const handleSubmit = async (value: string) => {
     setSearchQuery(value);
-    // Trigger fetcher only if there's input
     if (value.trim()) {
       fetcher.submit({ query: value }, { method: "get", action: "/search" });
       setShowResults(true);
@@ -63,7 +68,7 @@ export const GlobalSearch = () => {
         }}
       />
 
-      <Suggestions nodes={nodes} showResults={showResults} />
+      <Suggestions nodes={nodes} showResults={showResults} isLoading={isLoading} />
     </div>
   );
 };

package/app/components/GlobalSearch/Suggestions.tsx

@@ -1,5 +1,5 @@
 import { EmptyState, H2 } from "@cytario/design";
-import { SearchX } from "lucide-react";
+import { Loader2, SearchX } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 
 import { TreeNode } from "../DirectoryView/buildDirectoryTree";
@@ -8,8 +8,12 @@ import { DirectoryTree } from "../DirectoryView/DirectoryViewTree";
 interface SuggestionsProps {
   nodes: TreeNode[];
   showResults: boolean;
+  isLoading: boolean;
 }
-export const Suggestions = ({ nodes, showResults }: SuggestionsProps) => {
+
+// Render order: prefer stale nodes over the empty state while a new query is in
+// flight — otherwise the dropdown flashes "No results" on every keystroke.
+export const Suggestions = ({ nodes, showResults, isLoading }: SuggestionsProps) => {
   return (
     <AnimatePresence>
       {showResults && (
@@ -28,16 +32,30 @@ export const Suggestions = ({ nodes, showResults }: SuggestionsProps) => {
             text-black
             shadow-lg rounded-sm border border-slate-200
           `}
+          aria-busy={isLoading}
         >
           {nodes.length > 0 ? (
             <>
-              <header className="flex-shrink-0 p-4 border-b border-slate-200">
+              <header className="flex-shrink-0 p-4 border-b border-slate-200 flex items-center justify-between">
                 <H2>All Results</H2>
+                {isLoading && (
+                  <Loader2
+                    size={16}
+                    className="animate-spin text-slate-500"
+                    aria-label="Searching"
+                  />
+                )}
               </header>
               <div className="overflow-y-auto flex-1">
                 <DirectoryTree nodes={nodes} />
               </div>
             </>
+          ) : isLoading ? (
+            <EmptyState
+              icon={Loader2}
+              title="Searching…"
+              description="Looking across your connections."
+            />
           ) : (
             <EmptyState
               icon={SearchX}

package/app/config.ts

@@ -1,9 +1,6 @@
 import { CookieOptions } from "react-router";
 
 interface CytarioConfig {
-  setup: {
-    allowedFiles: string;
-  };
   endpoints: {
     webapp: string;
   };
@@ -32,7 +29,6 @@ interface CytarioConfig {
 }
 
 const {
-  ALLOWED_FILES,
   BASE_URL,
   CLIENT_ID,
   CLIENT_SECRET,
@@ -50,9 +46,6 @@ const {
 } = process.env;
 
 export const cytarioConfig: Readonly<CytarioConfig> = {
-  setup: {
-    allowedFiles: ALLOWED_FILES ?? ".*",
-  },
   endpoints: {
     webapp: WEB_HOST!,
   },

package/app/entry.server.tsx

@@ -5,14 +5,13 @@ import { renderToPipeableStream } from "react-dom/server";
 import type { AppLoadContext, EntryContext } from "react-router";
 import { ServerRouter } from "react-router";
 
+import { buildContentSecurityPolicy } from "./.server/csp";
 import { bootstrapPlugins } from "./plugins.generated";
 
 const ABORT_DELAY = 5_000;
 
-// Server-side bootstrap registers only platform plugins from CYTARIO_PLUGINS.
-// Built-ins live behind viv/geotiff (browser-only) and register on the
-// client. `handleRequest` awaits this so a request cannot resolve the
-// registry before the plugin's async `register()` has completed.
+// `handleRequest` awaits this so a request cannot resolve the plugin registry
+// before async `register()` calls have completed.
 const bootstrapPromise: Promise<void> = bootstrapPlugins({
   debug: (msg, fields) => console.debug("[plugin-bootstrap]", msg, fields ?? {}),
   info: (msg, fields) => console.info("[plugin-bootstrap]", msg, fields ?? {}),
@@ -56,6 +55,9 @@ function handleBotRequest(
           const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
+          // Only attached to the HTML document; `.data` and action JSON responses
+          // inherit the document-level policy from the hydrated page.
+          responseHeaders.set("Content-Security-Policy", buildContentSecurityPolicy());
 
           resolve(
             new Response(stream, {
@@ -102,6 +104,9 @@ function handleBrowserRequest(
           const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
+          // Only attached to the HTML document; `.data` and action JSON responses
+          // inherit the document-level policy from the hydrated page.
+          responseHeaders.set("Content-Security-Policy", buildContentSecurityPolicy());
 
           resolve(
             new Response(stream, {

package/app/hooks/useInitConnections.ts

@@ -6,9 +6,9 @@ import { select } from "~/utils/connectionsStore/selectors";
 import { useConnectionsStore } from "~/utils/connectionsStore/useConnectionsStore";
 
 /**
- * Replaces the client store with the authoritative set of connections from
- * the auth context. Runs on every route that calls it — missing connections
- * (deleted server-side) are pruned, new ones added. Safe to call repeatedly.
+ * Replace the client connections store with the auth-context set. Uses an
+ * effect rather than render-time mutation: subscribed descendants would
+ * otherwise trip React's "cannot update during render" warning.
  */
 export function useInitConnections(
   connectionConfigs: ConnectionConfig[],

package/app/root.tsx

@@ -13,6 +13,7 @@ import {
   useNavigation,
   useRouteError,
   useRouteLoaderData,
+  type ClientLoaderFunctionArgs,
   type LinksFunction,
   type MiddlewareFunction,
   type LoaderFunctionArgs,
@@ -62,7 +63,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   formAction,
   defaultShouldRevalidate,
 }) => {
-  // Only revalidate after form submissions (to pick up session notifications)
+  // Only revalidate after form submissions so flash notifications surface.
   if (formAction) return defaultShouldRevalidate;
   return false;
 };
@@ -83,7 +84,6 @@ export const loader = async ({ context }: LoaderFunctionArgs): Promise<RootLoade
     await sessionStorage.commitSession(session);
   }
 
-  // Build Keycloak account settings URL server-side
   const accountSettingsUrl = user
     ? `${cytarioConfig.auth.baseUrl}/account?referrer=${cytarioConfig.auth.clientId}&referrer_uri=${cytarioConfig.endpoints.webapp}`
     : undefined;
@@ -91,6 +91,12 @@ export const loader = async ({ context }: LoaderFunctionArgs): Promise<RootLoade
   return { user, notification, accountSettingsUrl };
 };
 
+// Identity clientLoader. Forces this route off RR's bulk-fetch single-fetch
+// path, which is short-circuited during initial hydrate when a descendant
+// route opts into `clientLoader.hydrate = true` (RR issue #13873).
+export const clientLoader = ({ serverLoader }: ClientLoaderFunctionArgs) =>
+  serverLoader<typeof loader>();
+
 export function Layout({ children }: { children: React.ReactNode }) {
   const data = useRouteLoaderData<RootLoaderResponse>("root");
   const location = useLocation();
@@ -105,12 +111,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
     }
   }, [data?.notification]);
 
-  // Hydrate file store from IndexedDB on mount
   useEffect(() => {
     useFileStore.getState().hydrate();
   }, []);
 
-  // Move focus to main content on route change (skip initial render)
+  // Move focus to main content on route change (skip initial render).
   useEffect(() => {
     if (isInitialRender.current) {
       isInitialRender.current = false;
@@ -185,8 +190,8 @@ export function ErrorBoundary() {
     title = `${error.status} ${error.statusText}`;
     message = error.data ?? "An error occurred while processing your request.";
   } else if (error instanceof Error) {
-    // Log full error server-side but only show generic message to client
-    // to avoid leaking internal details (session IDs, endpoints, stack traces)
+    // Log full error but show only the generic message to avoid leaking
+    // session IDs, endpoints, or stack traces to the client.
     console.error("Unhandled error:", error);
   }
 

package/app/routes/connections/connection.form.tsx

@@ -1,4 +1,5 @@
 import {
+  Banner,
   Field,
   Fieldset,
   FormWizard,
@@ -78,15 +79,15 @@ export const ConnectionForm = ({
   const submit = useSubmit();
   const actionData = useActionData<{
     errors?: Record<string, string[]>;
+    formError?: string;
     status?: string;
   }>();
   const navigation = useNavigation();
 
   const serverErrors = actionData?.status === "error" ? actionData.errors : undefined;
+  const formError = actionData?.status === "error" ? actionData.formError : undefined;
   const isSubmitting = navigation.state === "submitting";
 
-  // Compute the initial step from server errors so we navigate to the
-  // correct page without needing setState inside an effect.
   const initialStep = serverErrors
     ? Object.keys(serverErrors).reduce<number>((acc, field) => {
         const step = FIELD_TO_STEP[field];
@@ -115,7 +116,6 @@ export const ConnectionForm = ({
     mode: "onTouched",
   });
 
-  // Surface server-side errors (e.g. unique name constraint) in the form
   useEffect(() => {
     if (!serverErrors) return;
     for (const [field, messages] of Object.entries(serverErrors)) {
@@ -198,6 +198,12 @@ export const ConnectionForm = ({
       <div className="flex flex-col gap-(--spacing-6)">
         <FormWizardProgress labels={STEP_LABELS} />
 
+        {formError && (
+          <Banner variant="danger" title="Could not save the connection">
+            {formError}
+          </Banner>
+        )}
+
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <form
           className="flex flex-col gap-(--spacing-6)"