@mshuja288/aksuicore 0.4.0 → 0.4.2

package/src/patterns/RecordWorkspace.tsx

@@ -21,6 +21,25 @@ function useIsClient() {
   );
 }
 
+/** Hover tooltips only on fine pointers (desktop). Touch / narrow layouts never get them. */
+function useHoverTooltipsEnabled() {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {};
+      }
+      const media = window.matchMedia("(hover: hover) and (pointer: fine)");
+      media.addEventListener("change", onStoreChange);
+      return () => media.removeEventListener("change", onStoreChange);
+    },
+    () =>
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(hover: hover) and (pointer: fine)").matches,
+    () => false,
+  );
+}
+
 export type TableColumn<T> = {
   key: string;
   header: string;
@@ -46,12 +65,34 @@ export type ExportColumnRef = {
   header: string;
 };
 
+export type BulkImportMode = "insert" | "update" | "upsert";
+
+export type BulkImportError = {
+  row: number;
+  field?: string | null;
+  code: string;
+  message: string;
+};
+
+export type BulkImportResult = {
+  totalRows: number;
+  failed: number;
+  applied: boolean;
+  errors: BulkImportError[];
+};
+
 const EXPORT_FORMAT_OPTIONS: { format: ExportDownloadFormat; label: string }[] = [
   { format: "csv", label: "CSV" },
   { format: "xlsx", label: "Excel" },
   { format: "json", label: "JSON" },
 ];
 
+const BULK_IMPORT_MODE_OPTIONS: { mode: BulkImportMode; label: string }[] = [
+  { mode: "insert", label: "Insert" },
+  { mode: "update", label: "Update" },
+  { mode: "upsert", label: "Upsert" },
+];
+
 type SortDirection = "asc" | "desc";
 type SortState = { key: string; direction: SortDirection };
 type DetailLine = { label: string; value: string };
@@ -175,6 +216,16 @@ function PreviewIcon() {
   );
 }
 
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M10 16.5V7.3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M6.5 10.8 10 7.2l3.5 3.6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 4.5h12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 function DownloadIcon() {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true">
@@ -195,6 +246,21 @@ function MoreIcon() {
   );
 }
 
+function ToolsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        d="M11.5 3.5h5v5M16.2 3.8 10 10M8.2 5.2H3.8v11h11V12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function DetailList({ lines }: { lines: DetailLine[] }) {
   return (
     <dl className="record-detail-list">
@@ -224,7 +290,11 @@ export function RecordWorkspace<T>({
   canDelete,
   onDownload,
   canDownload = true,
+  canExport,
   downloadBusy = false,
+  onBulkImport,
+  canImport = true,
+  importBusy = false,
   showColumnPicker = true,
   columnPrefsKey,
   visibleColumnKeys,
@@ -251,8 +321,13 @@ export function RecordWorkspace<T>({
    * Second argument lists currently visible columns (exportKey ?? key).
    */
   onDownload?: (format: ExportDownloadFormat, columns: ExportColumnRef[]) => void;
+  /** Alias for `canDownload` (RBAC). When set, export requires this and `canDownload` to be true. */
+  canExport?: boolean;
   canDownload?: boolean;
   downloadBusy?: boolean;
+  onBulkImport?: (mode: BulkImportMode, file: File) => Promise<BulkImportResult>;
+  canImport?: boolean;
+  importBusy?: boolean;
   /** Column checklist in the side rail. Default true. */
   showColumnPicker?: boolean;
   /** Persist visible column keys in localStorage under this key. */
@@ -278,16 +353,28 @@ export function RecordWorkspace<T>({
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [sort, setSort] = useState<SortState | null>(null);
   const [sideOpen, setSideOpen] = useState(false);
+  const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
+  const [bulkOpen, setBulkOpen] = useState(false);
+  const [bulkMode, setBulkMode] = useState<BulkImportMode>("upsert");
+  const [bulkFile, setBulkFile] = useState<File | null>(null);
+  const [bulkReport, setBulkReport] = useState<BulkImportResult | null>(null);
+  const bulkFileInputRef = useRef<HTMLInputElement | null>(null);
   const [columnsOpen, setColumnsOpen] = useState(false);
   const [previewEnabled, setPreviewEnabled] = useState(false);
   const [previewKey, setPreviewKey] = useState<string | number | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const [pageSize, setPageSize] = useState("15");
   const [page, setPage] = useState(1);
-  const [actionsMenuKey, setActionsMenuKey] = useState<string | number | null>(null);
+  const [actionsMenu, setActionsMenu] = useState<{
+    key: string | number;
+    item: T;
+    x: number;
+    y: number;
+  } | null>(null);
   const actionsMenuRef = useRef<HTMLDivElement | null>(null);
   const isClient = useIsClient();
+  const hoverTooltipsEnabled = useHoverTooltipsEnabled();
 
   useEffect(() => {
     if (isControlled) {
@@ -376,6 +463,7 @@ export function RecordWorkspace<T>({
   );
 
   const hiddenColumnCount = columns.length - visibleColumns.length;
+  const toolsBadgeCount = activeFilterCount + (hiddenColumnCount > 0 ? 1 : 0) + (previewEnabled ? 1 : 0);
   const showAll = pageSize === "all";
   const numericPageSize = showAll ? Math.max(sorted.length, 1) : Number(pageSize);
   const pageCount = showAll ? 1 : Math.max(1, Math.ceil(sorted.length / numericPageSize));
@@ -383,7 +471,9 @@ export function RecordWorkspace<T>({
   const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
   const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
   const showAdd = canAdd && Boolean(onAdd);
-  const showDownload = Boolean(onDownload) && canDownload;
+  const exportAllowed = (canExport ?? true) && canDownload;
+  const showDownload = Boolean(onDownload) && exportAllowed;
+  const showBulkImport = Boolean(onBulkImport) && canImport;
   const showFilters = filterableColumns.length > 0;
   const showColumns = showColumnPicker && columns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
@@ -391,21 +481,42 @@ export function RecordWorkspace<T>({
     key: column.exportKey ?? column.key,
     header: column.header,
   }));
+  const canShowTooltip = hoverTooltipsEnabled && !previewEnabled && actionsMenu === null;
 
   useEffect(() => {
-    if (actionsMenuKey === null) {
+    if (actionsMenu === null) {
       return;
     }
 
     function onPointerDown(event: globalThis.MouseEvent) {
       if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target as Node)) {
-        setActionsMenuKey(null);
+        setActionsMenu(null);
       }
     }
 
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
-  }, [actionsMenuKey]);
+  }, [actionsMenu]);
+
+  useEffect(() => {
+    if (!toolsDrawerOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setToolsDrawerOpen(false);
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [toolsDrawerOpen]);
 
   function requestDownload(format: ExportDownloadFormat) {
     if (!onDownload || downloadBusy) {
@@ -415,6 +526,30 @@ export function RecordWorkspace<T>({
     setDownloadOpen(false);
   }
 
+  async function submitBulkImport() {
+    if (!onBulkImport || importBusy || !bulkFile) {
+      return;
+    }
+    setBulkReport(null);
+    try {
+      const report = await onBulkImport(bulkMode, bulkFile);
+      setBulkReport(report);
+      if (report.applied) {
+        setBulkFile(null);
+        if (bulkFileInputRef.current) {
+          bulkFileInputRef.current.value = "";
+        }
+      }
+    } catch {
+      setBulkReport({
+        totalRows: 0,
+        failed: 1,
+        applied: false,
+        errors: [{ row: 0, code: "ImportFailed", message: "Import request failed." }],
+      });
+    }
+  }
+
   function cellText(column: TableColumn<T>, item: T) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === undefined || raw === "" ? "—" : String(raw);
@@ -470,6 +605,9 @@ export function RecordWorkspace<T>({
   }
 
   function showTooltip(item: T, event: MouseEvent) {
+    if (!canShowTooltip) {
+      return;
+    }
     const padding = 16;
     const width = 280;
     const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
@@ -477,6 +615,22 @@ export function RecordWorkspace<T>({
     setTooltip({ x, y, lines: detailLines(item) });
   }
 
+  function openRowActions(item: T, event: MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    setTooltip(null);
+    const key = rowKey(item);
+    if (actionsMenu?.key === key) {
+      setActionsMenu(null);
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const menuWidth = 168;
+    const menuHeight = 148;
+    const x = Math.min(Math.max(8, rect.right - menuWidth), window.innerWidth - menuWidth - 8);
+    const y = Math.min(rect.bottom + 6, window.innerHeight - menuHeight - 8);
+    setActionsMenu({ key, item, x, y });
+  }
+
   const summary =
     sorted.length === 0
       ? "0 records"
@@ -484,6 +638,309 @@ export function RecordWorkspace<T>({
         ? `1–${sorted.length} of ${sorted.length}`
         : `${start + 1}–${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
 
+  function renderToolsBody({ compactIcons }: { compactIcons: boolean }) {
+    if (compactIcons) {
+      return (
+        <div className="side-rail-icons">
+          <label className="side-rail-icon preview-check-icon" title="Preview">
+            <input
+              type="checkbox"
+              checked={previewEnabled}
+              onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+              aria-label="Preview"
+            />
+            <PreviewIcon />
+          </label>
+          {showAdd ? (
+            <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
+              <PlusIcon />
+            </button>
+          ) : null}
+          {showColumns ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Columns"
+              aria-label="Columns"
+              onClick={() => {
+                setSideOpen(true);
+                setColumnsOpen(true);
+              }}
+            >
+              <ColumnsIcon />
+              {hiddenColumnCount > 0 ? <span className="filter-badge">{hiddenColumnCount}</span> : null}
+            </button>
+          ) : null}
+          {showDownload ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Download"
+              aria-label="Download"
+              disabled={downloadBusy}
+              onClick={() => {
+                setSideOpen(true);
+                setDownloadOpen(true);
+              }}
+            >
+              <DownloadIcon />
+            </button>
+          ) : null}
+          {showBulkImport ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Bulk entry"
+              aria-label="Bulk entry"
+              disabled={importBusy}
+              onClick={() => {
+                setSideOpen(true);
+                setBulkOpen(true);
+              }}
+            >
+              <UploadIcon />
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Show filters"
+              aria-label="Show filters"
+              onClick={() => setSideOpen(true)}
+            >
+              <FilterIcon />
+              {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Reset filters"
+              aria-label="Reset filters"
+              disabled={activeFilterCount === 0}
+              onClick={clearFilters}
+            >
+              <ResetIcon />
+            </button>
+          ) : null}
+        </div>
+      );
+    }
+
+    return (
+      <div className="side-rail-body">
+        <div className="preview-check">
+          <input
+            type="checkbox"
+            checked={previewEnabled}
+            onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+            aria-label="Preview"
+          />
+          <PreviewIcon />
+          <span aria-hidden="true">Preview</span>
+        </div>
+
+        {showAdd ? (
+          <button
+            type="button"
+            className="side-rail-add"
+            onClick={() => {
+              setToolsDrawerOpen(false);
+              onAdd?.();
+            }}
+          >
+            <PlusIcon />
+            <span>{addLabel}</span>
+          </button>
+        ) : null}
+
+        {showColumns ? (
+          <div className="side-rail-columns">
+            <button
+              type="button"
+              className="ghost side-rail-columns-toggle"
+              aria-expanded={columnsOpen}
+              onClick={() => setColumnsOpen((open) => !open)}
+            >
+              <ColumnsIcon />
+              <span>Columns{hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""}</span>
+            </button>
+            {columnsOpen ? (
+              <div className="side-rail-columns-panel" role="group" aria-label="Visible columns">
+                <div className="side-rail-columns-actions">
+                  <button type="button" className="ghost" onClick={selectAllColumns}>
+                    Select all
+                  </button>
+                  <button type="button" className="ghost" onClick={resetColumns}>
+                    Reset
+                  </button>
+                </div>
+                <div className="side-rail-columns-list">
+                  {columns.map((column) => {
+                    const checked = resolvedVisibleKeys.includes(column.key);
+                    const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
+                    return (
+                      <label key={column.key} className="side-rail-column-option">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={disableUncheck}
+                          onChange={(event) => toggleColumnVisible(column.key, event.target.checked)}
+                        />
+                        <span>{column.header}</span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showDownload ? (
+          <div className="side-rail-download">
+            <button
+              type="button"
+              className="ghost side-rail-download-toggle"
+              aria-expanded={downloadOpen}
+              disabled={downloadBusy}
+              onClick={() => setDownloadOpen((open) => !open)}
+            >
+              <DownloadIcon />
+              <span>{downloadBusy ? "Downloading…" : "Download"}</span>
+            </button>
+            {downloadOpen ? (
+              <div className="side-rail-download-formats" role="group" aria-label="Download format">
+                {EXPORT_FORMAT_OPTIONS.map((option) => (
+                  <button
+                    key={option.format}
+                    type="button"
+                    className="ghost side-rail-download-format"
+                    disabled={downloadBusy}
+                    onClick={() => requestDownload(option.format)}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showBulkImport ? (
+          <div className="side-rail-bulk">
+            <button
+              type="button"
+              className="ghost side-rail-bulk-toggle"
+              aria-expanded={bulkOpen}
+              disabled={importBusy}
+              onClick={() => setBulkOpen((open) => !open)}
+            >
+              <UploadIcon />
+              <span>{importBusy ? "Importing…" : "Bulk entry"}</span>
+            </button>
+            {bulkOpen ? (
+              <div className="side-rail-bulk-panel" role="group" aria-label="Bulk entry">
+                <label className="side-rail-bulk-mode">
+                  Mode
+                  <Select
+                    value={bulkMode}
+                    options={BULK_IMPORT_MODE_OPTIONS.map((option) => ({ value: option.mode, label: option.label }))}
+                    onChange={(value) => setBulkMode(value as BulkImportMode)}
+                  />
+                </label>
+                <label className="side-rail-bulk-file">
+                  File
+                  <input
+                    ref={bulkFileInputRef}
+                    type="file"
+                    accept=".csv,.xlsx,.json"
+                    disabled={importBusy}
+                    onChange={(event) => {
+                      setBulkFile(event.target.files?.[0] ?? null);
+                      setBulkReport(null);
+                    }}
+                  />
+                </label>
+                <button
+                  type="button"
+                  className="side-rail-bulk-submit"
+                  disabled={importBusy || !bulkFile}
+                  onClick={() => void submitBulkImport()}
+                >
+                  {importBusy ? "Importing…" : "Import"}
+                </button>
+                {bulkReport ? (
+                  <div className="side-rail-bulk-report" role="status">
+                    <p>
+                      {bulkReport.applied
+                        ? `Applied ${bulkReport.totalRows} row(s).`
+                        : `${bulkReport.failed} error(s) in ${bulkReport.totalRows} row(s).`}
+                    </p>
+                    {bulkReport.errors.length > 0 ? (
+                      <ul className="side-rail-bulk-errors">
+                        {bulkReport.errors.slice(0, 8).map((error, index) => (
+                          <li key={`${error.row}-${error.code}-${index}`}>
+                            Row {error.row}: {error.message}
+                          </li>
+                        ))}
+                        {bulkReport.errors.length > 8 ? (
+                          <li>…and {bulkReport.errors.length - 8} more</li>
+                        ) : null}
+                      </ul>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showFilters ? (
+          <div className="side-rail-filters">
+            <div className="filter-panel-head">
+              <h3>Filters</h3>
+              <button
+                type="button"
+                className="ghost filter-clear"
+                title="Reset filters"
+                aria-label="Reset filters"
+                disabled={activeFilterCount === 0}
+                onClick={clearFilters}
+              >
+                <ResetIcon />
+                <span>Reset</span>
+              </button>
+            </div>
+            <div className="filter-panel-stack">
+              {filterableColumns.map((column) => (
+                <label key={column.key}>
+                  {column.header}
+                  {column.filterOptions ? (
+                    <Select
+                      value={filters[column.key] ?? ""}
+                      options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
+                      onChange={(value) => changeFilter(column.key, value)}
+                      placeholder={column.filterPlaceholder ?? "All"}
+                    />
+                  ) : (
+                    <input
+                      value={filters[column.key] ?? ""}
+                      onChange={(event) => changeFilter(column.key, event.target.value)}
+                      placeholder={`Filter ${column.header.toLowerCase()}`}
+                    />
+                  )}
+                </label>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
   function renderRowActions(item: T) {
     const key = rowKey(item);
     const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
@@ -525,69 +982,60 @@ export function RecordWorkspace<T>({
           ) : null}
         </div>
 
-        <div className="row-actions row-actions-mobile" ref={actionsMenuKey === key ? actionsMenuRef : undefined}>
+        <div className="row-actions row-actions-mobile">
           <button
             type="button"
-            className="ghost row-action-menu-trigger"
+            className={actionsMenu?.key === key ? "ghost row-action-menu-trigger open" : "ghost row-action-menu-trigger"}
             aria-haspopup="menu"
-            aria-expanded={actionsMenuKey === key}
+            aria-expanded={actionsMenu?.key === key}
             aria-label="Row actions"
-            onClick={() => setActionsMenuKey((current) => (current === key ? null : key))}
+            onClick={(event) => openRowActions(item, event)}
           >
             <MoreIcon />
           </button>
-          {actionsMenuKey === key ? (
-            <div className="row-action-menu" role="menu">
-              {onView ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost"
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onView(item);
-                  }}
-                >
-                  View
-                </button>
-              ) : null}
-              {onUpdate ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost"
-                  disabled={!updateAllowed}
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onUpdate(item);
-                  }}
-                >
-                  Update
-                </button>
-              ) : null}
-              {onDelete ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost danger"
-                  disabled={!deleteAllowed}
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onDelete(item);
-                  }}
-                >
-                  Delete
-                </button>
-              ) : null}
-            </div>
-          ) : null}
         </div>
       </>
     );
   }
 
+  const actionsMenuItem = actionsMenu?.item;
+  const actionsUpdateAllowed = actionsMenuItem
+    ? canUpdate
+      ? canUpdate(actionsMenuItem)
+      : Boolean(onUpdate)
+    : false;
+  const actionsDeleteAllowed = actionsMenuItem
+    ? canDelete
+      ? canDelete(actionsMenuItem)
+      : Boolean(onDelete)
+    : false;
+
   return (
-    <div className="list-workspace" aria-label={title}>
+    <div className={toolsDrawerOpen ? "list-workspace tools-drawer-open" : "list-workspace"} aria-label={title}>
+      <div className="tools-mobile-bar">
+        <div className="tools-mobile-bar-start">
+          {showAdd ? (
+            <button type="button" className="tools-mobile-add" onClick={onAdd}>
+              <PlusIcon />
+              <span>{addLabel}</span>
+            </button>
+          ) : (
+            <p className="tools-mobile-title">{title}</p>
+          )}
+        </div>
+        <button
+          type="button"
+          className="ghost tools-mobile-toggle"
+          aria-expanded={toolsDrawerOpen}
+          aria-controls="aksui-tools-drawer"
+          onClick={() => setToolsDrawerOpen(true)}
+        >
+          <ToolsIcon />
+          <span>Tools</span>
+          {toolsBadgeCount > 0 ? <span className="filter-badge">{toolsBadgeCount}</span> : null}
+        </button>
+      </div>
+
       <div
         className={["list-body", sideOpen ? "side-open" : "", previewEnabled ? "preview-open" : ""]
           .filter(Boolean)
@@ -651,16 +1099,10 @@ export function RecordWorkspace<T>({
                           key={key}
                           className={selected ? "data-row selected" : "data-row"}
                           onMouseEnter={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
+                            showTooltip(item, event);
                             focusRecord(item);
                           }}
-                          onMouseMove={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
-                          }}
+                          onMouseMove={(event) => showTooltip(item, event)}
                           onMouseLeave={() => setTooltip(null)}
                           onClick={() => focusRecord(item)}
                         >
@@ -704,7 +1146,7 @@ export function RecordWorkspace<T>({
               {previewItem ? (
                 <DetailList lines={detailLines(previewItem)} />
               ) : (
-                <p className="preview-empty">Hover or click a row to preview its details here.</p>
+                <p className="preview-empty">Select a row to preview its details here.</p>
               )}
             </div>
           </aside>
@@ -721,219 +1163,99 @@ export function RecordWorkspace<T>({
             <ChevronIcon open={sideOpen} />
             {sideOpen ? <span>Collapse</span> : null}
           </button>
+          {sideOpen ? renderToolsBody({ compactIcons: false }) : renderToolsBody({ compactIcons: true })}
+        </aside>
+      </div>
 
-          {sideOpen ? (
-            <div className="side-rail-body">
-              <div className="preview-check">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-                <span aria-hidden="true">Preview</span>
-              </div>
-
-              {showAdd ? (
-                <button type="button" className="side-rail-add" onClick={onAdd}>
-                  <PlusIcon />
-                  <span>{addLabel}</span>
-                </button>
-              ) : null}
-
-              {showColumns ? (
-                <div className="side-rail-columns">
-                  <button
-                    type="button"
-                    className="ghost side-rail-columns-toggle"
-                    aria-expanded={columnsOpen}
-                    onClick={() => setColumnsOpen((open) => !open)}
-                  >
-                    <ColumnsIcon />
-                    <span>Columns{hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""}</span>
+      {isClient
+        ? createPortal(
+            <>
+              <button
+                type="button"
+                className={toolsDrawerOpen ? "tools-drawer-backdrop open" : "tools-drawer-backdrop"}
+                aria-label="Close tools"
+                tabIndex={toolsDrawerOpen ? 0 : -1}
+                onClick={() => setToolsDrawerOpen(false)}
+              />
+              <aside
+                id="aksui-tools-drawer"
+                className={toolsDrawerOpen ? "tools-drawer open" : "tools-drawer"}
+                aria-label="Workspace tools"
+                aria-hidden={!toolsDrawerOpen}
+              >
+                <div className="tools-drawer-head">
+                  <div>
+                    <p className="tools-drawer-kicker">Workspace</p>
+                    <h3>Tools</h3>
+                  </div>
+                  <button type="button" className="ghost tools-drawer-close" onClick={() => setToolsDrawerOpen(false)}>
+                    Close
                   </button>
-                  {columnsOpen ? (
-                    <div className="side-rail-columns-panel" role="group" aria-label="Visible columns">
-                      <div className="side-rail-columns-actions">
-                        <button type="button" className="ghost" onClick={selectAllColumns}>
-                          Select all
-                        </button>
-                        <button type="button" className="ghost" onClick={resetColumns}>
-                          Reset
-                        </button>
-                      </div>
-                      <div className="side-rail-columns-list">
-                        {columns.map((column) => {
-                          const checked = resolvedVisibleKeys.includes(column.key);
-                          const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
-                          return (
-                            <label key={column.key} className="side-rail-column-option">
-                              <input
-                                type="checkbox"
-                                checked={checked}
-                                disabled={disableUncheck}
-                                onChange={(event) => toggleColumnVisible(column.key, event.target.checked)}
-                              />
-                              <span>{column.header}</span>
-                            </label>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ) : null}
                 </div>
-              ) : null}
+                <div className="tools-drawer-body">{renderToolsBody({ compactIcons: false })}</div>
+              </aside>
+            </>,
+            document.body,
+          )
+        : null}
 
-              {showDownload ? (
-                <div className="side-rail-download">
-                  <button
-                    type="button"
-                    className="ghost side-rail-download-toggle"
-                    aria-expanded={downloadOpen}
-                    disabled={downloadBusy}
-                    onClick={() => setDownloadOpen((open) => !open)}
-                  >
-                    <DownloadIcon />
-                    <span>{downloadBusy ? "Downloading…" : "Download"}</span>
-                  </button>
-                  {downloadOpen ? (
-                    <div className="side-rail-download-formats" role="group" aria-label="Download format">
-                      {EXPORT_FORMAT_OPTIONS.map((option) => (
-                        <button
-                          key={option.format}
-                          type="button"
-                          className="ghost side-rail-download-format"
-                          disabled={downloadBusy}
-                          onClick={() => requestDownload(option.format)}
-                        >
-                          {option.label}
-                        </button>
-                      ))}
-                    </div>
-                  ) : null}
-                </div>
-              ) : null}
+      {form}
 
-              {showFilters ? (
-                <div className="side-rail-filters">
-                  <div className="filter-panel-head">
-                    <h3>Filters</h3>
-                    <button
-                      type="button"
-                      className="ghost filter-clear"
-                      title="Reset filters"
-                      aria-label="Reset filters"
-                      disabled={activeFilterCount === 0}
-                      onClick={clearFilters}
-                    >
-                      <ResetIcon />
-                      <span>Reset</span>
-                    </button>
-                  </div>
-                  <div className="filter-panel-stack">
-                    {filterableColumns.map((column) => (
-                      <label key={column.key}>
-                        {column.header}
-                        {column.filterOptions ? (
-                          <Select
-                            value={filters[column.key] ?? ""}
-                            options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
-                            onChange={(value) => changeFilter(column.key, value)}
-                            placeholder={column.filterPlaceholder ?? "All"}
-                          />
-                        ) : (
-                          <input
-                            value={filters[column.key] ?? ""}
-                            onChange={(event) => changeFilter(column.key, event.target.value)}
-                            placeholder={`Filter ${column.header.toLowerCase()}`}
-                          />
-                        )}
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : (
-            <div className="side-rail-icons">
-              <label className="side-rail-icon preview-check-icon" title="Preview">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-              </label>
-              {showAdd ? (
-                <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
-                  <PlusIcon />
-                </button>
-              ) : null}
-              {showColumns ? (
+      {isClient && actionsMenu && actionsMenuItem
+        ? createPortal(
+            <div
+              ref={actionsMenuRef}
+              className="row-action-menu row-action-menu-portal"
+              role="menu"
+              style={{ left: actionsMenu.x, top: actionsMenu.y }}
+            >
+              {onView ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Columns"
-                  aria-label="Columns"
+                  role="menuitem"
+                  className="ghost"
                   onClick={() => {
-                    setSideOpen(true);
-                    setColumnsOpen(true);
+                    setActionsMenu(null);
+                    onView(actionsMenuItem);
                   }}
                 >
-                  <ColumnsIcon />
-                  {hiddenColumnCount > 0 ? <span className="filter-badge">{hiddenColumnCount}</span> : null}
+                  View
                 </button>
               ) : null}
-              {showDownload ? (
+              {onUpdate ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Download"
-                  aria-label="Download"
-                  aria-expanded={downloadOpen}
-                  disabled={downloadBusy}
+                  role="menuitem"
+                  className="ghost"
+                  disabled={!actionsUpdateAllowed}
                   onClick={() => {
-                    setSideOpen(true);
-                    setDownloadOpen(true);
+                    setActionsMenu(null);
+                    onUpdate(actionsMenuItem);
                   }}
                 >
-                  <DownloadIcon />
-                </button>
-              ) : null}
-              {showFilters ? (
-                <button
-                  type="button"
-                  className="ghost side-rail-icon"
-                  title="Show filters"
-                  aria-label="Show filters"
-                  onClick={() => setSideOpen(true)}
-                >
-                  <FilterIcon />
-                  {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+                  Update
                 </button>
               ) : null}
-              {showFilters ? (
+              {onDelete ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Reset filters"
-                  aria-label="Reset filters"
-                  disabled={activeFilterCount === 0}
-                  onClick={clearFilters}
+                  role="menuitem"
+                  className="ghost danger"
+                  disabled={!actionsDeleteAllowed}
+                  onClick={() => {
+                    setActionsMenu(null);
+                    onDelete(actionsMenuItem);
+                  }}
                 >
-                  <ResetIcon />
+                  Delete
                 </button>
               ) : null}
-            </div>
-          )}
-        </aside>
-      </div>
-
-      {form}
+            </div>,
+            document.body,
+          )
+        : null}
 
-      {isClient && tooltip && !previewEnabled
+      {isClient && tooltip && canShowTooltip
         ? createPortal(
             <div className="record-tooltip" style={{ left: tooltip.x, top: tooltip.y }} role="tooltip">
               <p className="record-tooltip-title">{title}</p>