@freighttech/ui 0.13.18

package/src/backend/dynamic-table/components/SearchBar.tsx

@@ -0,0 +1,309 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { dispatch } from '../events/events';
+import { TableEvents, SearchEvent } from '../types/index';
+import type { SearchSuggestionsRenderer } from '../types/index';
+
+if (typeof window !== 'undefined') {
+  // @ts-ignore - CSS import handled by bundler
+  import('../styles/SearchBar.css');
+}
+
+interface SearchBarProps {
+  tableRef: React.RefObject<HTMLElement | null>;
+  placeholder?: string;
+  debounceMs?: number;
+  /**
+   * Renders a suggestions panel under the box while it has a query and focus.
+   *
+   * A RENDER PROP RATHER THAN DATA, because what a good hint looks like is
+   * domain knowledge this component does not have: documents want a thumbnail
+   * and the field that matched, an order list would want a status and a total.
+   * SearchBar owns the two things that ARE generic — where the panel is
+   * anchored, and when it is open.
+   */
+  renderSuggestions?: SearchSuggestionsRenderer;
+}
+
+/** Gap between the input and the panel, and the viewport margin the panel keeps. */
+const PANEL_OFFSET = 4;
+const VIEWPORT_MARGIN = 8;
+/**
+ * Never narrower than this, however narrow the 320px-max input gets.
+ *
+ * 460, not 360. At 360 the matched text — the one thing the user searched for —
+ * was clipped at the panel edge while a 30-character filename ran to full
+ * length beside it. A hint panel whose match does not fit is a panel that
+ * cannot do its job.
+ */
+const PANEL_MIN_WIDTH = 460;
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  tableRef,
+  placeholder = 'Search a product',
+  debounceMs = 300,
+  renderSuggestions,
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
+  const [anchor, setAnchor] = useState<{ top: number; left: number; width: number } | null>(null);
+
+
+  const dispatchSearchEvent = useCallback((value: string) => {
+    if (tableRef.current) {
+      dispatch<SearchEvent>(
+        tableRef.current,
+        TableEvents.SEARCH,
+        {
+          query: value,
+          timestamp: Date.now(),
+        }
+      );
+    }
+  }, [tableRef]);
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    // Typing always re-opens: a user who dismissed the panel with Escape and
+    // then kept typing is asking a new question.
+    setSuggestionsOpen(true);
+
+    // Clear existing debounce timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Set new debounce timer
+    debounceTimerRef.current = setTimeout(() => {
+      dispatchSearchEvent(value);
+    }, debounceMs);
+  }, [dispatchSearchEvent, debounceMs]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Arrow keys belong to the suggestions panel while it is open; it listens on
+    // the input itself (see `renderSuggestions`' contract) and stops the event
+    // there. Nothing to do here but stay out of the way.
+    if (e.key === 'Enter') {
+      // Clear debounce and dispatch immediately
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      dispatchSearchEvent(searchValue);
+      setSuggestionsOpen(false);
+    } else if (e.key === 'Escape') {
+      // ESCAPE RETREATS ONE STEP AT A TIME. With a panel open it closes the
+      // panel and keeps the query — wiping a query the user is still reading
+      // results for is a different, much more annoying action than the one they
+      // asked for. A second Escape then clears, as it always did.
+      if (suggestionsOpen) {
+        setSuggestionsOpen(false);
+        return;
+      }
+      // Clear the search on Escape key
+      setSearchValue('');
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      dispatchSearchEvent('');
+      // Keep focus on input after clearing
+      inputRef.current?.focus();
+    }
+  }, [searchValue, dispatchSearchEvent, suggestionsOpen]);
+
+  const handleClear = useCallback(() => {
+    setSearchValue('');
+    setSuggestionsOpen(false);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    dispatchSearchEvent('');
+  }, [dispatchSearchEvent]);
+
+  /** Put a query into the box and into the dataset in one move — what clicking
+   *  a suggestion does. */
+  const submitQuery = useCallback((value: string) => {
+    setSearchValue(value);
+    setSuggestionsOpen(false);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    dispatchSearchEvent(value);
+  }, [dispatchSearchEvent]);
+
+  const closeSuggestions = useCallback(() => setSuggestionsOpen(false), []);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  /**
+   * Mirror a search dispatched by SOMEONE ELSE.
+   *
+   * The grid's zero-result state dispatches `TableEvents.SEARCH` directly to
+   * clear a dead query — it hands the change to this control's machinery.
+   * Without this listener the dataset would filter while the box still looked
+   * empty, leaving the user filtered with no visible cause and no way to clear
+   * it. Guarded on value equality, so this can never echo its own change.
+   */
+  useEffect(() => {
+    const el = tableRef.current;
+    if (!el) return;
+    const onSearch = (e: Event) => {
+      const query = (e as CustomEvent<SearchEvent>).detail?.query ?? '';
+      setSearchValue((current) => (current === query ? current : query));
+    };
+    el.addEventListener(TableEvents.SEARCH, onSearch as EventListener);
+    return () => el.removeEventListener(TableEvents.SEARCH, onSearch as EventListener);
+  }, [tableRef]);
+
+  /**
+   * Where the panel goes.
+   *
+   * MEASURED AND PORTALLED, not `position: absolute` inside the wrapper. The
+   * wrapper is `position: relative` and would host a dropdown happily — but the
+   * toolbar sits inside `.hot-card`, which is `overflow: hidden`, so an in-flow
+   * panel is CLIPPED at the card's edge and only its first few pixels are ever
+   * seen. Measured on the documents list, and it is the same trap the topbar's
+   * own search hit inside the sticky header.
+   */
+  const measureAnchor = useCallback(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const width = Math.min(
+      Math.max(rect.width, PANEL_MIN_WIDTH),
+      window.innerWidth - VIEWPORT_MARGIN * 2,
+    );
+    const left = Math.min(
+      Math.max(VIEWPORT_MARGIN, rect.left),
+      window.innerWidth - width - VIEWPORT_MARGIN,
+    );
+    setAnchor({ top: rect.bottom + PANEL_OFFSET, left, width });
+  }, []);
+
+  useEffect(() => {
+    if (!suggestionsOpen) return;
+    measureAnchor();
+    window.addEventListener('resize', measureAnchor);
+    // Capturing: the page scrolls in `<main>`, not on the window, so a bubbling
+    // listener on window never fires and the panel would detach from the box.
+    window.addEventListener('scroll', measureAnchor, true);
+    return () => {
+      window.removeEventListener('resize', measureAnchor);
+      window.removeEventListener('scroll', measureAnchor, true);
+    };
+  }, [suggestionsOpen, measureAnchor]);
+
+  /** Click-outside. Both refs, because the panel is NOT inside the wrapper. */
+  useEffect(() => {
+    if (!suggestionsOpen) return;
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (wrapperRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      setSuggestionsOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [suggestionsOpen]);
+
+  const suggestionsContext = useMemo(() => ({
+    query: searchValue,
+    inputRef,
+    close: closeSuggestions,
+    submit: submitQuery,
+  }), [searchValue, closeSuggestions, submitQuery]);
+
+  const suggestionPanel = renderSuggestions && suggestionsOpen && anchor && searchValue
+    ? createPortal(
+        <div
+          ref={panelRef}
+          className="hot-search-suggestions"
+          data-testid="table-search-suggestions"
+          style={{ top: anchor.top, left: anchor.left, width: anchor.width }}
+          // The input keeps focus while the panel is used: a mousedown that
+          // moves focus would blur the box, and the arrow keys the panel listens
+          // for on the input would stop arriving mid-interaction.
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          {renderSuggestions(suggestionsContext)}
+        </div>,
+        document.body,
+      )
+    : null;
+
+  return (
+    <div className="search-bar">
+      <div className="search-input-wrapper" ref={wrapperRef}>
+        <svg
+          className="search-icon"
+          width="15"
+          height="15"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+
+        >
+          <path
+            d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM19 19l-4.35-4.35"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <input
+          type="text"
+          value={searchValue}
+          onChange={handleSearchChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="search-input"
+          ref={inputRef}
+          onFocus={() => { if (searchValue) setSuggestionsOpen(true); }}
+          autoComplete="off"
+          role={renderSuggestions ? 'combobox' : undefined}
+          aria-autocomplete={renderSuggestions ? 'list' : undefined}
+          aria-expanded={renderSuggestions ? suggestionsOpen : undefined}
+        />
+        {/* NO keyboard hint here. ⌘K belongs to the upstream global search
+            dialog, which registers a window-level listener and preventDefaults
+            it — this bar has never had a shortcut of any kind, so the badge that
+            used to sit here advertised a key that does something else entirely.
+            Ctrl+F is the BROWSER's: this box filters the whole dataset
+            server-side, and nothing in the grid claims that key. */}
+        {searchValue && (
+          <button
+            onClick={handleClear}
+            className="search-clear-btn"
+            aria-label="Clear search"
+            title="Clear search"
+            type="button"
+            data-search-clear=""
+          >
+            {/* A drawn glyph, not the "×" MULTIPLICATION SIGN character: the
+                literal took its weight and baseline from whatever face the
+                toolbar inherited, so it sat off-centre inside the 20px circle
+                and changed size with the font. The icon is metric-stable. */}
+            <X size={12} strokeWidth={2.25} aria-hidden="true" />
+          </button>
+        )}
+      </div>
+      {suggestionPanel}
+    </div>
+  );
+};
+
+export default SearchBar;

package/src/backend/dynamic-table/components/SelectMenu.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+import { computeAnchoredPosition } from '../utils/anchoredPosition';
+import { useEscapeLayer } from '../hooks/useEscapeLayer';
+
+/**
+ * The Configure View drawer's dropdown.
+ *
+ * A native `<select>` is not usable here: the drawer is a `Sheet` with its own
+ * scroll container and stacking context, so the OS menu paints against the page
+ * rather than the panel, and it cannot carry the v2 type tokens at all. Every
+ * dropdown in this product is therefore a portal-rendered menu anchored via
+ * `getBoundingClientRect`, closing on outside-click, Escape and scroll — the
+ * same shape `FilterDatePicker` already uses, deliberately copied rather than
+ * reinvented.
+ *
+ * The trigger keeps the class the old `<select>` carried, so spacing, radius
+ * and colour are unchanged; only the menu is ours.
+ */
+
+export interface SelectMenuOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectMenuProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectMenuOption[];
+  /** Shown when `value` matches no option (i.e. nothing chosen yet). */
+  placeholder?: string;
+  /**
+   * Rendered as the first entry and selects `''`. Omit for a menu with no
+   * "no choice" state.
+   */
+  emptyOptionLabel?: string;
+  className?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+  /** Marks the trigger for the harness / tests, mirroring the old select. */
+  dataAttributes?: Record<string, string | boolean | undefined>;
+}
+
+const MENU_MAX_HEIGHT = 280;
+
+export const SelectMenu: React.FC<SelectMenuProps> = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyOptionLabel,
+  className = '',
+  ariaLabel,
+  disabled = false,
+  dataAttributes,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: MENU_MAX_HEIGHT,
+    openAbove: false,
+  });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const entries: SelectMenuOption[] =
+    emptyOptionLabel !== undefined ? [{ value: '', label: emptyOptionLabel }, ...options] : options;
+
+  const selected = entries.find((o) => o.value === value);
+
+  const reposition = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    // The menu sets `minWidth` (not `width`) so a long option label stays
+    // readable — which means its real width can exceed the trigger's. Clamp
+    // against the WIDER of the two, or a menu opened from a trigger near the
+    // right edge (every select in the Configure View drawer) overflows.
+    const placement = computeAnchoredPosition(
+      rect,
+      { width: window.innerWidth, height: window.innerHeight },
+      {
+        width: Math.max(rect.width, menuRef.current?.offsetWidth ?? rect.width),
+        preferredHeight: MENU_MAX_HEIGHT,
+        minHeight: 96,
+      },
+    );
+    setPosition({
+      top: placement.top,
+      left: placement.left,
+      // Never narrower than the trigger; a value wider than the trigger is
+      // readable rather than clipped.
+      width: rect.width,
+      maxHeight: placement.maxHeight,
+      openAbove: placement.flipAbove,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onScroll = () => reposition();
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [open, reposition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (menuRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', onMouseDown);
+    return () => document.removeEventListener('mousedown', onMouseDown);
+  }, [open]);
+
+  // Escape closes THIS menu and nothing else. A `document`-capture listener was
+  // not enough: Radix's Sheet registers its own document-capture Escape handler
+  // when it mounts, i.e. before this menu ever opens, so it always ran first and
+  // the whole Configure View drawer closed. See `useEscapeLayer`.
+  useEscapeLayer(open, () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  });
+
+  const commit = useCallback(
+    (next: string) => {
+      onChange(next);
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [onChange],
+  );
+
+  const onTriggerKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      if (!open) {
+        e.preventDefault();
+        setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));
+        setOpen(true);
+        return;
+      }
+    }
+    if (!open) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, entries.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const entry = entries[activeIndex];
+      if (entry) commit(entry.value);
+    }
+  };
+
+  const menu = open ? (
+    <div
+      ref={menuRef}
+      role="listbox"
+      aria-label={ariaLabel}
+      className="hot-select-menu"
+      style={{
+        position: 'fixed',
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        minWidth: `${position.width}px`,
+        maxHeight: `${position.maxHeight}px`,
+        zIndex: 10002,
+        ...(position.openAbove ? { transform: 'translateY(-100%)' } : {}),
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      {entries.map((option, index) => (
+        <button
+          key={option.value || '__empty'}
+          type="button"
+          role="option"
+          aria-selected={option.value === value}
+          data-active={index === activeIndex || undefined}
+          data-selected={option.value === value || undefined}
+          className="hot-select-menu-option text-body-regular-sm"
+          onMouseEnter={() => setActiveIndex(index)}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => commit(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-label={ariaLabel}
+        disabled={disabled}
+        className={`hot-select-trigger ${className}`.trim()}
+        onClick={() => {
+          setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));
+          setOpen((o) => !o);
+        }}
+        onKeyDown={onTriggerKeyDown}
+        {...dataAttributes}
+      >
+        <span
+          className={`hot-select-trigger-label${selected ? '' : ' hot-select-trigger-placeholder'}`}
+        >
+          {selected ? selected.label : (placeholder ?? '')}
+        </span>
+        <ChevronDown className="hot-select-trigger-chevron" aria-hidden />
+      </button>
+      {menu && typeof document !== 'undefined' ? ReactDOM.createPortal(menu, document.body) : menu}
+    </>
+  );
+};
+
+export default SelectMenu;

package/src/backend/dynamic-table/components/StaleDataBar.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import React from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '../../../primitives-v2'
+
+export interface StaleDataBarProps {
+  /** Host label for the dataset, e.g. "Invoices". Used to name what went stale. */
+  tableName?: string
+  /** Re-runs the list request. Omit only when the host cannot refetch. */
+  onRetry?: () => void
+}
+
+/**
+ * What a DynamicTable shows when the list request FAILED but the grid still
+ * holds rows from the previous successful response (HEDGE-165).
+ *
+ * THIS IS THE OTHER HALF OF `LoadErrorState`. HEDGE-119 taught the zero-row
+ * region to tell "the server refused" from "the server said zero rows", and
+ * stopped there — because `LoadErrorState` is gated on `rowCount === 0`, the
+ * case where a refetch fails *while rows are on screen* rendered nothing at
+ * all. The failure flag reached the grid and was dropped on the floor.
+ *
+ * That silence is worse than the state HEDGE-119 fixed, not milder. A grid that
+ * shows nothing at least looks broken. A grid that shows the PREVIOUS answer
+ * looks like a correct answer to the question just asked: the operator types a
+ * search term, the endpoint 500s, and the five rows already there stay put — so
+ * "the search is broken" is the charitable reading and "these five are the
+ * matches" is the likely one. The same trap swallows a post-save refresh: the
+ * save succeeded, the refetch behind it 500'd, and the operator is left looking
+ * at their pre-save values with nothing saying so.
+ *
+ * The rows deliberately STAY (dropping them on a transient failure would be a
+ * worse trade, which is exactly what `placeholderData` in `useDynamicTablePage`
+ * is for). Only the SIGNAL is added: one line saying what is on screen is the
+ * previous result, plus the retry that already existed as `onRetryLoad`.
+ *
+ * `role="status"`, not `role="alert"`: the rows are still usable and the user
+ * may be mid-keystroke, so this must not preempt what they are doing the way
+ * the zero-row `LoadErrorState` (which owns `role="alert"`) legitimately does.
+ */
+const StaleDataBar: React.FC<StaleDataBarProps> = ({ tableName, onRetry }) => {
+  const t = useT()
+
+  const message = tableName
+    ? t(
+        'dynamicTable.staleData.messageNamed',
+        'Could not refresh {name} — the rows below are the previous result, not the current one.',
+        { name: tableName },
+      )
+    : t(
+        'dynamicTable.staleData.message',
+        'Could not refresh this list — the rows below are the previous result, not the current one.',
+      )
+
+  return (
+    <div className="hot-stale-data-bar" role="status" data-stale-data="">
+      <AlertTriangle className="hot-stale-data-bar-icon" aria-hidden="true" />
+      {/* `title` because the message is clipped to one line on a narrow
+          viewport — a band that reflows would re-measure the grid under it. */}
+      <span className="hot-stale-data-bar-message text-body-regular-sm" title={message}>
+        {message}
+      </span>
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry} data-stale-data-retry="">
+          {t('dynamicTable.staleData.retry', 'Try again')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default StaleDataBar

package/src/backend/dynamic-table/components/TableDeleteDialog.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../primitives/dialog'
+import { Button } from '../../../primitives/button'
+
+export interface TableDeleteDialogProps<TRow = any> {
+  row: TRow | null
+  isDeleting: boolean
+  onConfirm: () => void
+  onCancel: () => void
+  /** Ref to focus when the dialog closes */
+  restoreFocusRef?: React.RefObject<HTMLElement | null>
+  title?: string | ((row: TRow) => string)
+  description?: string | ((row: TRow) => string)
+  /** Column key to use for the row name in the default description */
+  nameColumn?: string
+}
+
+export default function TableDeleteDialog<TRow = any>({
+  row,
+  isDeleting,
+  onConfirm,
+  onCancel,
+  restoreFocusRef,
+  title,
+  description,
+  nameColumn = 'name',
+}: TableDeleteDialogProps<TRow>) {
+  const resolvedTitle = row
+    ? typeof title === 'function'
+      ? title(row)
+      : title ?? 'Delete Item'
+    : 'Delete Item'
+
+  const resolvedDescription = row
+    ? typeof description === 'function'
+      ? description(row)
+      : description ??
+        `Are you sure you want to delete "${(row as any)[nameColumn] ?? 'this item'}"? This action cannot be undone.`
+    : ''
+
+  return (
+    <Dialog open={!!row} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent
+        className="hot-dialog"
+        onCloseAutoFocus={(e) => {
+          e.preventDefault()
+          restoreFocusRef?.current?.focus()
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{resolvedTitle}</DialogTitle>
+          <DialogDescription>{resolvedDescription}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} disabled={isDeleting}>
+            {isDeleting ? 'Deleting...' : 'Delete'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}