@xemahq/ui-kernel 0.9.2 → 0.11.0

package/src/ui/primitives/async-combobox.tsx

@@ -3,10 +3,10 @@ import { ChevronsUpDown, Loader2, Search } from 'lucide-react';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 
 import { cn } from '../cn';
-import { useDebouncedValue } from '../hooks/use-debounced-value';
 import { Button } from './button';
 import { Input } from './input';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { useDebouncedValue } from '../hooks/use-debounced-value';
 
 export interface AsyncComboboxProps<T> {
   /** Unique key prefix for query caching to avoid collisions between combobox instances. */
@@ -99,7 +99,9 @@ export function AsyncCombobox<T>({
   };
 
   const showTypeToSearchHint =
-    !isLoading && minSearchLength > 0 && debouncedSearch.length < minSearchLength;
+    !isLoading &&
+    minSearchLength > 0 &&
+    debouncedSearch.length < minSearchLength;
   const showEmptyMessage = !isLoading && searchEnabled && results.length === 0;
 
   return (
@@ -156,7 +158,9 @@ export function AsyncCombobox<T>({
             )}
 
             {showEmptyMessage && (
-              <p className="text-body-1 text-ink-3 text-center py-4">{emptyMessage}</p>
+              <p className="text-body-1 text-ink-3 text-center py-4">
+                {emptyMessage}
+              </p>
             )}
 
             {!isLoading &&

package/src/ui/primitives/badge.tsx

@@ -1,16 +1,25 @@
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as React from 'react';
 
 import { cn } from '../cn';
 import { badgeVariants } from './badge-variants';
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+import type { VariantProps } from 'class-variance-authority';
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
 
 const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   ({ className, variant, ...props }, ref) => {
-    return <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    );
   },
 );
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge';
 
 export { Badge };

package/src/ui/primitives/button.tsx

@@ -1,10 +1,11 @@
-import { Slot } from "@radix-ui/react-slot";
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
 
 import { cn } from '../cn';
 import { buttonVariants } from './button-variants';
 
+import type { VariantProps } from 'class-variance-authority';
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
@@ -13,10 +14,16 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
 );
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 export { Button };

package/src/ui/primitives/overflow-tabs.tsx

@@ -83,7 +83,9 @@ export function OverflowTabs({
   // Measure container width and react to resizes.
   useEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const ro = new ResizeObserver((entries) => {
       const w = entries[0]?.contentRect.width ?? el.clientWidth;
       setContainerWidth(w);
@@ -97,7 +99,9 @@ export function OverflowTabs({
   // when the tab list itself changes (new tabs, label edits).
   useLayoutEffect(() => {
     const el = measureRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const children = Array.from(el.children) as HTMLElement[];
     setTabWidths(children.map((c) => c.getBoundingClientRect().width));
   }, [tabs]);
@@ -118,36 +122,53 @@ export function OverflowTabs({
     const vis: OverflowTab[] = [];
     const over: OverflowTab[] = [];
     let used = 0;
-    for (let i = 0; i < tabs.length; i++) {
-      const w = tabWidths[i] + (vis.length > 0 ? gap : 0);
+    for (const [i, tab] of tabs.entries()) {
+      const natural = tabWidths[i];
+      if (natural === undefined) {
+        // Unreachable: the length-parity guard above already returned. Kept as a
+        // real check because the alternative — treating a missing measurement as
+        // 0px — would lay tabs out against a budget they don't actually fit.
+        // Fall back to the same all-visible layout the parity guard renders.
+        return { visible: tabs, overflow: [] as readonly OverflowTab[] };
+      }
+      const w = natural + (vis.length > 0 ? gap : 0);
       // A pinned tab is never collapsed — it stays visible whatever the budget
       // says, so a panel's permanent first tab can't hide behind "More…".
-      if (tabs[i].pinned === true || used + w <= budget) {
-        vis.push(tabs[i]);
+      if (tab.pinned === true || used + w <= budget) {
+        vis.push(tab);
         used += w;
       } else {
-        over.push(tabs[i]);
+        over.push(tab);
       }
     }
     // Force the active tab into the visible set if it ended up in overflow.
-    const activeIdx = tabs.findIndex((t) => t.value === value);
-    if (activeIdx !== -1) {
-      const activeTab = tabs[activeIdx];
+    // `find` (not `findIndex` + lookup) so the hit is typed as present.
+    const activeTab = tabs.find((t) => t.value === value);
+    if (activeTab !== undefined) {
       const inVisible = vis.some((t) => t.value === activeTab.value);
       if (!inVisible) {
         // Swap the last visible for the active one to keep the budget OK.
         const dropped = vis.pop();
-        if (dropped) over.unshift(dropped);
+        if (dropped) {
+          over.unshift(dropped);
+        }
         vis.push(activeTab);
         const removeIdx = over.findIndex((t) => t.value === activeTab.value);
-        if (removeIdx !== -1) over.splice(removeIdx, 1);
+        if (removeIdx !== -1) {
+          over.splice(removeIdx, 1);
+        }
       }
     }
     return { visible: vis, overflow: over };
   }, [tabs, tabWidths, containerWidth, gap, moreTriggerWidth, value]);
 
   return (
-    <div className={cn('relative -mb-px flex items-end border-b border-rule', className)}>
+    <div
+      className={cn(
+        'relative -mb-px flex items-end border-b border-rule',
+        className,
+      )}
+    >
       {/* Off-screen measurement layer — renders ALL tabs so widths are real. */}
       <div
         ref={measureRef}
@@ -156,7 +177,12 @@ export function OverflowTabs({
         style={{ visibility: 'hidden' }}
       >
         {tabs.map((t) => (
-          <TabPill key={`measure-${t.value}`} tab={t} active={false} onClick={() => undefined} />
+          <TabPill
+            key={`measure-${t.value}`}
+            tab={t}
+            active={false}
+            onClick={() => undefined}
+          />
         ))}
       </div>
 
@@ -199,11 +225,15 @@ export function OverflowTabs({
               <DropdownMenuItem
                 key={t.value}
                 onClick={() => onChange(t.value)}
-                className={cn(t.value === value && 'bg-accent/60 text-foreground')}
+                className={cn(
+                  t.value === value && 'bg-accent/60 text-foreground',
+                )}
               >
                 <span className="flex-1 truncate">{t.label}</span>
                 {t.count !== undefined && (
-                  <span className="ml-2 text-caption tabular-nums text-ink-4">{t.count}</span>
+                  <span className="ml-2 text-caption tabular-nums text-ink-4">
+                    {t.count}
+                  </span>
                 )}
                 {t.indicator && (
                   <span

package/src/ui/primitives/preview-device-frame.tsx

@@ -96,10 +96,14 @@ function ScaledBezel({ bezel, children }: ScaledBezelProps) {
 
   useLayoutEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const compute = (): void => {
       const { clientWidth, clientHeight } = el;
-      if (clientWidth === 0 || clientHeight === 0) return;
+      if (clientWidth === 0 || clientHeight === 0) {
+        return;
+      }
       // Leave a tiny margin so the shadow is not clipped.
       const margin = 24;
       const availW = Math.max(0, clientWidth - margin);
@@ -163,10 +167,14 @@ function ResponsiveViewport({
 
   useLayoutEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const compute = (): void => {
       const { clientWidth, clientHeight } = el;
-      if (clientWidth === 0 || clientHeight === 0) return;
+      if (clientWidth === 0 || clientHeight === 0) {
+        return;
+      }
       const margin = 24;
       const availW = Math.max(0, clientWidth - margin);
       const availH = Math.max(0, clientHeight - margin);

package/src/ui/primitives/tag-multi-select.tsx

@@ -30,7 +30,10 @@ export interface TagMultiSelectProps {
   disabled?: boolean;
 }
 
-const CHIP_CLASSES: Record<NonNullable<TagMultiSelectProps['chipVariant']>, string> = {
+const CHIP_CLASSES: Record<
+  NonNullable<TagMultiSelectProps['chipVariant']>,
+  string
+> = {
   default: 'bg-primary/10 text-primary border-primary/20',
   secondary: 'bg-secondary text-secondary-foreground border-secondary',
   success: 'bg-success/10 text-success border-success/20',
@@ -63,7 +66,9 @@ export function TagMultiSelect({
 
   const filteredOptions = useMemo(() => {
     const q = search.trim().toLowerCase();
-    if (!q) return options;
+    if (!q) {
+      return options;
+    }
     return options.filter(
       (o) =>
         o.label.toLowerCase().includes(q) ||
@@ -93,7 +98,9 @@ export function TagMultiSelect({
   };
 
   const addCustom = () => {
-    if (!canAddCustom) return;
+    if (!canAddCustom) {
+      return;
+    }
     onChange([...value, normalizedSearch]);
     setSearch('');
     inputRef.current?.focus();
@@ -104,8 +111,13 @@ export function TagMultiSelect({
       e.preventDefault();
       if (canAddCustom) {
         addCustom();
-      } else if (filteredOptions.length === 1) {
-        toggle(filteredOptions[0].value);
+      } else {
+        // Enter with exactly one remaining match selects it.
+        const onlyMatch =
+          filteredOptions.length === 1 ? filteredOptions[0] : undefined;
+        if (onlyMatch !== undefined) {
+          toggle(onlyMatch.value);
+        }
       }
     }
   };
@@ -137,7 +149,9 @@ export function TagMultiSelect({
                   variant="outline"
                   className={cn('text-body-1 gap-1 pr-1', chipClass)}
                 >
-                  <span className="truncate max-w-[160px]">{opt?.label ?? val}</span>
+                  <span className="truncate max-w-[160px]">
+                    {opt?.label ?? val}
+                  </span>
                   <button
                     type="button"
                     onClick={(e) => remove(val, e)}
@@ -183,7 +197,9 @@ export function TagMultiSelect({
         <ScrollArea className="max-h-56">
           <div className="p-1">
             {filteredOptions.length === 0 && !canAddCustom && (
-              <p className="text-body-1 text-ink-3 text-center py-3">{emptyMessage}</p>
+              <p className="text-body-1 text-ink-3 text-center py-3">
+                {emptyMessage}
+              </p>
             )}
 
             {filteredOptions.map((opt) => {
@@ -209,7 +225,9 @@ export function TagMultiSelect({
                     {selected && <Check className="h-4 w-4" />}
                   </span>
                   <span className="flex-1 min-w-0">
-                    <span className="font-medium block truncate">{opt.label}</span>
+                    <span className="font-medium block truncate">
+                      {opt.label}
+                    </span>
                     {opt.hint && (
                       <span className="text-body-1 text-ink-3 block truncate">
                         {opt.hint}
@@ -228,7 +246,10 @@ export function TagMultiSelect({
               >
                 <Plus className="h-4 w-4 text-ink-3" />
                 <span>
-                  Add <span className="font-mono font-medium">{normalizedSearch}</span>
+                  Add{' '}
+                  <span className="font-mono font-medium">
+                    {normalizedSearch}
+                  </span>
                 </span>
               </button>
             )}

package/src/ui/primitives/url-preview-chrome.tsx

@@ -9,6 +9,7 @@
  * implementation.
  */
 import { RotateCw } from 'lucide-react';
+
 import type { ReactElement, ReactNode } from 'react';
 
 const TRAFFIC_LIGHTS = ['#e5645a', '#e8b13d', '#5bb35b'] as const;

package/src/vista/GenericCatalogueSurface.tsx

@@ -30,11 +30,15 @@ interface GenericSurfaceField {
 }
 
 function stringify(value: unknown): string {
-  if (typeof value === 'string') return value;
+  if (typeof value === 'string') {
+    return value;
+  }
   if (typeof value === 'number' || typeof value === 'boolean') {
     return String(value);
   }
-  if (value === null || value === undefined) return '—';
+  if (value === null || value === undefined) {
+    return '—';
+  }
   try {
     return JSON.stringify(value);
   } catch {
@@ -43,9 +47,7 @@ function stringify(value: unknown): string {
 }
 
 function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return (
-    typeof value === 'object' && value !== null && !Array.isArray(value)
-  );
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
 /**

package/src/vista/VistaPanel.tsx

@@ -114,10 +114,16 @@ export function VistaTabBar({
       indicator?: boolean;
       icon?: OverflowTab['icon'];
     } = { value: tab.tabId, label: tab.title };
-    if (tab.pinned === true) entry.pinned = true;
-    if (indicatorTabIds?.includes(tab.tabId) === true) entry.indicator = true;
+    if (tab.pinned === true) {
+      entry.pinned = true;
+    }
+    if (indicatorTabIds?.includes(tab.tabId) === true) {
+      entry.indicator = true;
+    }
     const icon = surfaceKindIcon(tab.kind);
-    if (icon !== undefined) entry.icon = icon;
+    if (icon !== undefined) {
+      entry.icon = icon;
+    }
     return entry;
   });
   return (
@@ -143,7 +149,9 @@ export function VistaSurfaceBody({
   tab,
 }: Readonly<{ tab: VistaTab }>): ReactElement {
   const resolution = vistaSurfaceRegistry.resolve(tab);
-  if (resolution.matched) return resolution.rendered;
+  if (resolution.matched) {
+    return resolution.rendered;
+  }
   return (
     <SurfaceFallbackCard
       kind={resolution.kind}

package/src/vista/html/CustomUiFrame.spec.tsx

@@ -34,7 +34,9 @@ const STYLE_CSS = ':root{--x:1}';
 function parseIframe(markup: string): Element {
   const doc = new DOMParser().parseFromString(markup, 'text/html');
   const iframe = doc.querySelector('iframe');
-  if (!iframe) throw new Error('no iframe rendered');
+  if (!iframe) {
+    throw new Error('no iframe rendered');
+  }
   return iframe;
 }
 

package/src/vista/html/CustomUiFrame.tsx

@@ -153,7 +153,9 @@ export function CustomUiFrame<TIntent>({
   // re-render, per the HostProps contract). Before ready, the frameReady
   // handler above pushes the current props — so no update is lost.
   useEffect(() => {
-    if (!readyRef.current) return;
+    if (!readyRef.current) {
+      return;
+    }
     iframeRef.current?.contentWindow?.postMessage(
       hostPropsMessage(componentProps),
       '*',

package/src/vista/html/custom-ui-frame-bridge.ts

@@ -52,10 +52,14 @@ export function classifyFrameMessage<TIntent>(
 ): ClassifiedFrameMessage<TIntent> {
   // Gate 1: source identity. Reject if we have no frame yet or the message did
   // not come from THIS frame's window.
-  if (frameWindow === null || event.source !== frameWindow) return IGNORED;
+  if (frameWindow === null || event.source !== frameWindow) {
+    return IGNORED;
+  }
 
   const data = event.data;
-  if (data === null || typeof data !== 'object') return IGNORED;
+  if (data === null || typeof data !== 'object') {
+    return IGNORED;
+  }
   const envelope = data as {
     protocol?: unknown;
     type?: unknown;
@@ -64,7 +68,9 @@ export function classifyFrameMessage<TIntent>(
   };
 
   // Gate 2: protocol version.
-  if (envelope.protocol !== CUSTOM_UI_FRAME_PROTOCOL) return IGNORED;
+  if (envelope.protocol !== CUSTOM_UI_FRAME_PROTOCOL) {
+    return IGNORED;
+  }
 
   // Gate 3: closed message-type set.
   switch (envelope.type) {

package/src/vista/html/custom-ui-intents.spec.ts

@@ -104,7 +104,9 @@ describe('createNavigateIntentSet', () => {
       kind: CustomUiIntentKind.Navigate,
       href: '/apps/x',
     });
-    if (intent === null) throw new Error('expected a parsed navigate intent');
+    if (intent === null) {
+      throw new Error('expected a parsed navigate intent');
+    }
     set.perform(intent);
     expect(navigate).toHaveBeenCalledWith({
       kind: CustomUiIntentKind.Navigate,

package/src/vista/html/custom-ui-intents.ts

@@ -72,13 +72,19 @@ export interface CustomUiIntentHandlers {
  */
 function isHostRelativePath(href: string): boolean {
   // Must be rooted at '/'.
-  if (!href.startsWith('/')) return false;
+  if (!href.startsWith('/')) {
+    return false;
+  }
   // A backslash is a protocol-relative/scheme trick after WHATWG normalisation
   // ("/\\evil.com" -> //evil.com -> foreign origin); whitespace / control
   // chars can also confuse the parser. Reject any before resolving.
-  if (href.includes('\\')) return false;
+  if (href.includes('\\')) {
+    return false;
+  }
   // eslint-disable-next-line no-control-regex
-  if (/[\u0000-\u0020\u007f]/.test(href)) return false;
+  if (/[\u0000-\u0020\u007f]/.test(href)) {
+    return false;
+  }
   let resolved: URL;
   try {
     resolved = new URL(href, window.location.origin);
@@ -96,12 +102,18 @@ function isHostRelativePath(href: string): boolean {
  * an out-of-policy value all return `null` — the caller rejects it.
  */
 export function parseCustomUiIntent(raw: unknown): CustomUiIntent | null {
-  if (raw === null || typeof raw !== 'object') return null;
+  if (raw === null || typeof raw !== 'object') {
+    return null;
+  }
   const candidate = raw as { kind?: unknown; href?: unknown };
   switch (candidate.kind) {
     case CustomUiIntentKind.Navigate:
-      if (typeof candidate.href !== 'string') return null;
-      if (!isHostRelativePath(candidate.href)) return null;
+      if (typeof candidate.href !== 'string') {
+        return null;
+      }
+      if (!isHostRelativePath(candidate.href)) {
+        return null;
+      }
       return { kind: CustomUiIntentKind.Navigate, href: candidate.href };
     default:
       return null;
@@ -118,15 +130,7 @@ export function performCustomUiIntent(
   intent: CustomUiIntent,
   handlers: CustomUiIntentHandlers,
 ): void {
-  switch (intent.kind) {
-    case CustomUiIntentKind.Navigate:
-      handlers[CustomUiIntentKind.Navigate](intent);
-      return;
-    default: {
-      const exhaustive: never = intent.kind;
-      throw new Error(`Unhandled custom-UI intent kind: ${String(exhaustive)}`);
-    }
-  }
+  handlers[CustomUiIntentKind.Navigate](intent);
 }
 
 /** The built-in intent set: host-relative navigation and nothing else. */

package/src/vista/surface-catalogue.ts

@@ -55,16 +55,22 @@ export function __resetSurfaceCatalogueSyncForTests(): void {
 export async function syncSurfaceCatalogue(
   fetchCatalogue: SurfaceCatalogueFetcher,
 ): Promise<void> {
-  if (synced) return;
+  if (synced) {
+    return;
+  }
   synced = true;
   try {
     const entries = await fetchCatalogue();
     for (const entry of entries) {
       // Only biome-contributed kinds need registering here; first-party kinds
       // are already registered by the static builtins.
-      if (entry.source !== SurfaceKindSource.Biome) continue;
+      if (entry.source !== SurfaceKindSource.Biome) {
+        continue;
+      }
       // Never shadow a biome's own (or an already-registered) renderer.
-      if (vistaSurfaceRegistry.has(entry.kind)) continue;
+      if (vistaSurfaceRegistry.has(entry.kind)) {
+        continue;
+      }
       vistaSurfaceRegistry.register(entry.kind, {
         version: entry.version,
         validate: (payload) =>

package/src/vista/surfaces/FormSurface.tsx

@@ -48,10 +48,7 @@ import { captureValuesToStringMap } from '../../ui/capture/submit-values';
 import { useSchemaValidation } from '../../ui/capture/use-schema-validation';
 import { cn } from '../../ui/cn';
 import { Button } from '../../ui/primitives/button';
-import {
-  useVistaFormHost,
-  type VistaFormOutcome,
-} from '../vista-form-context';
+import { useVistaFormHost, type VistaFormOutcome } from '../vista-form-context';
 
 import type { CaptureValues } from '../../ui/capture/field-spec';
 import type { VistaFormPayload } from '../vista-payloads';
@@ -117,9 +114,13 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
   }, []);
 
   const handleSubmit = useCallback((): void => {
-    if (host === null) return;
+    if (host === null) {
+      return;
+    }
     setShowFieldErrors(true);
-    if (!isValid) return;
+    if (!isValid) {
+      return;
+    }
     setServiceError(null);
     setPhase(FormPhase.Working);
     // The values object is a PARAMETER here and nowhere else. It is never
@@ -138,7 +139,9 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
   }, [host, isValid, payload.fields, payload.ref, settle, failed, values]);
 
   const handleCheckStatus = useCallback((): void => {
-    if (host === null) return;
+    if (host === null) {
+      return;
+    }
     setServiceError(null);
     setPhase(FormPhase.Working);
     void host
@@ -167,10 +170,24 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
   // an event, not a timer — there is no polling loop and no timeout.
   const isLaunch = payload.launch !== undefined;
   useEffect(() => {
-    if (!isLaunch || phase === FormPhase.Settled || host === null) return;
+    if (!isLaunch || phase === FormPhase.Settled || host === null) {
+      return;
+    }
     const onFocus = (): void => handleCheckStatus();
-    globalThis.addEventListener?.('focus', onFocus);
-    return () => globalThis.removeEventListener?.('focus', onFocus);
+    const addEventListener: unknown = Reflect.get(globalThis, 'addEventListener');
+    if (typeof addEventListener !== 'function') {
+      return;
+    }
+    Reflect.apply(addEventListener, globalThis, ['focus', onFocus]);
+    return () => {
+      const removeEventListener: unknown = Reflect.get(
+        globalThis,
+        'removeEventListener',
+      );
+      if (typeof removeEventListener === 'function') {
+        Reflect.apply(removeEventListener, globalThis, ['focus', onFocus]);
+      }
+    };
     // `handleCheckStatus` is stable per (host, payload) and re-subscribing on a
     // phase change is intended: a settled surface stops listening.
   }, [isLaunch, phase, host, handleCheckStatus]);

package/src/vista/surfaces/TableSurface.tsx

@@ -9,9 +9,10 @@
 import type { VistaTablePayload } from '../vista-payloads';
 import type { ReactElement } from 'react';
 
-
 function cellText(value: unknown): string {
-  if (value === null || value === undefined) return '';
+  if (value === null || value === undefined) {
+    return '';
+  }
   if (typeof value === 'object') {
     try {
       return JSON.stringify(value);
@@ -62,7 +63,7 @@ export function TableSurface({
             <tr
               // Rows carry no identity in the generic contract; position is the
               // only stable key available.
-               
+
               key={rowIndex}
             >
               {columns.map((column, columnIndex) => (