@mshuja288/aksuicore 0.3.0 → 0.4.1

package/dist/index.js

@@ -515,31 +515,48 @@ function Snackbar({
   );
 }
 var StatusMessage = Snackbar;
+function MenuIcon({ open }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5 5 15", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M3.5 5.5h13M3.5 10h13M3.5 14.5h13", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
 function Topbar({
   title,
   logoSrc,
   logoAlt = "Logo",
   username = "",
   onLogout,
+  showMenuButton = false,
+  menuOpen = false,
+  onMenuClick,
   children
 }) {
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [accountOpen, setAccountOpen] = useState(false);
   const menuRef = useRef(null);
   const initial = (username || "U").slice(0, 1).toUpperCase();
   useEffect(() => {
-    if (!menuOpen) {
+    if (!accountOpen) {
       return;
     }
     function onPointerDown(event) {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMenuOpen(false);
+        setAccountOpen(false);
       }
     }
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
-  }, [menuOpen]);
+  }, [accountOpen]);
   return /* @__PURE__ */ jsxs("header", { className: "topbar", children: [
     /* @__PURE__ */ jsxs("div", { className: "topbar-brand", children: [
+      showMenuButton && onMenuClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ghost topbar-menu-button",
+          "aria-label": menuOpen ? "Close navigation menu" : "Open navigation menu",
+          "aria-expanded": menuOpen,
+          onClick: onMenuClick,
+          children: /* @__PURE__ */ jsx(MenuIcon, { open: menuOpen })
+        }
+      ) : null,
       logoSrc ? /* @__PURE__ */ jsx(
         "img",
         {
@@ -562,13 +579,13 @@ function Topbar({
             type: "button",
             className: "avatar-button",
             "aria-haspopup": "menu",
-            "aria-expanded": menuOpen,
-            onClick: () => setMenuOpen((open) => !open),
+            "aria-expanded": accountOpen,
+            onClick: () => setAccountOpen((open) => !open),
             title: username || "Account",
             children: /* @__PURE__ */ jsx("span", { className: "avatar", children: initial })
           }
         ),
-        menuOpen ? /* @__PURE__ */ jsxs("div", { className: "avatar-menu", role: "menu", children: [
+        accountOpen ? /* @__PURE__ */ jsxs("div", { className: "avatar-menu", role: "menu", children: [
           username ? /* @__PURE__ */ jsx("p", { className: "avatar-name", children: username }) : null,
           /* @__PURE__ */ jsx(
             Button,
@@ -576,7 +593,7 @@ function Topbar({
               variant: "ghost",
               role: "menuitem",
               onClick: () => {
-                setMenuOpen(false);
+                setAccountOpen(false);
                 onLogout();
               },
               children: "Logout"
@@ -591,9 +608,10 @@ function SideNav({
   items,
   activeId,
   onSelect,
-  label = "Sections"
+  label = "Sections",
+  className = ""
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: "side-nav", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("nav", { className: ["side-nav", className].filter(Boolean).join(" "), "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -695,28 +713,131 @@ function AppShell({
   activeNavId,
   onNavSelect,
   navLabel = "Sections",
-  showBottomNav = true,
+  mobileNav = "drawer",
+  showBottomNav,
+  navDrawerOpen,
+  onNavDrawerOpenChange,
   topbarActions,
   children,
   screenClassName = ""
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "aksui-root app-shell", children: [
-    /* @__PURE__ */ jsx(Topbar, { title, logoSrc, logoAlt, username, onLogout, children: topbarActions }),
-    /* @__PURE__ */ jsxs("div", { className: "app-body", children: [
-      /* @__PURE__ */ jsx(SideNav, { items: navItems, activeId: activeNavId, onSelect: onNavSelect, label: navLabel }),
-      /* @__PURE__ */ jsx("div", { className: ["screen", screenClassName].filter(Boolean).join(" "), children })
-    ] }),
-    showBottomNav ? /* @__PURE__ */ jsx("nav", { className: "bottom-nav", "aria-label": navLabel, children: navItems.map((item) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: activeNavId === item.id ? "active" : "",
-        onClick: () => onNavSelect(item.id),
-        children: item.short ?? item.label
-      },
-      item.id
-    )) }) : null
-  ] });
+  const [internalDrawerOpen, setInternalDrawerOpen] = useState(false);
+  const drawerControlled = navDrawerOpen !== void 0;
+  const drawerOpen = drawerControlled ? navDrawerOpen : internalDrawerOpen;
+  const useBottomNav = showBottomNav ?? (mobileNav === "bottom" || mobileNav === "hybrid");
+  const useDrawer = mobileNav === "drawer" || mobileNav === "hybrid";
+  const activeItem = navItems.find((item) => item.id === activeNavId);
+  function setDrawerOpen(open) {
+    if (!drawerControlled) {
+      setInternalDrawerOpen(open);
+    }
+    onNavDrawerOpenChange?.(open);
+  }
+  useEffect(() => {
+    if (!drawerOpen) {
+      return;
+    }
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        if (!drawerControlled) {
+          setInternalDrawerOpen(false);
+        }
+        onNavDrawerOpenChange?.(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;
+    };
+  }, [drawerControlled, drawerOpen, onNavDrawerOpenChange]);
+  function selectNav(id) {
+    onNavSelect(id);
+    setDrawerOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "aksui-root",
+        "app-shell",
+        `mobile-nav-${mobileNav}`,
+        useBottomNav ? "has-bottom-nav" : "",
+        drawerOpen ? "nav-drawer-open" : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          Topbar,
+          {
+            title,
+            logoSrc,
+            logoAlt,
+            username,
+            onLogout,
+            showMenuButton: useDrawer,
+            menuOpen: drawerOpen,
+            onMenuClick: () => setDrawerOpen(!drawerOpen),
+            children: topbarActions
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "app-body", children: [
+          /* @__PURE__ */ jsx(SideNav, { items: navItems, activeId: activeNavId, onSelect: onNavSelect, label: navLabel }),
+          /* @__PURE__ */ jsx("div", { className: ["screen", screenClassName].filter(Boolean).join(" "), children })
+        ] }),
+        useDrawer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: drawerOpen ? "nav-drawer-backdrop open" : "nav-drawer-backdrop",
+              "aria-label": "Close navigation menu",
+              tabIndex: drawerOpen ? 0 : -1,
+              onClick: () => setDrawerOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              className: drawerOpen ? "nav-drawer open" : "nav-drawer",
+              "aria-label": navLabel,
+              "aria-hidden": !drawerOpen,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "nav-drawer-head", children: [
+                  /* @__PURE__ */ jsx("p", { className: "nav-drawer-title", children: navLabel }),
+                  /* @__PURE__ */ jsx("button", { type: "button", className: "ghost nav-drawer-close", onClick: () => setDrawerOpen(false), children: "Close" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  SideNav,
+                  {
+                    className: "nav-drawer-nav",
+                    items: navItems,
+                    activeId: activeNavId,
+                    onSelect: selectNav,
+                    label: navLabel
+                  }
+                )
+              ]
+            }
+          )
+        ] }) : null,
+        useBottomNav ? /* @__PURE__ */ jsx("nav", { className: "bottom-nav", "aria-label": navLabel, children: mobileNav === "hybrid" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "active bottom-nav-current", disabled: true, children: activeItem?.short ?? activeItem?.label ?? "Section" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bottom-nav-menu", onClick: () => setDrawerOpen(true), children: "Menu" })
+        ] }) : navItems.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: activeNavId === item.id ? "active" : "",
+            onClick: () => onNavSelect(item.id),
+            children: item.short ?? item.label
+          },
+          item.id
+        )) }) : null
+      ]
+    }
+  );
 }
 function useIsClient2() {
   return useSyncExternalStore(
@@ -726,11 +847,57 @@ function useIsClient2() {
     () => false
   );
 }
+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
+  );
+}
 var EXPORT_FORMAT_OPTIONS = [
   { format: "csv", label: "CSV" },
   { format: "xlsx", label: "Excel" },
   { format: "json", label: "JSON" }
 ];
+function defaultVisibleKeys(columns) {
+  return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
+}
+function readStoredColumnKeys(prefsKey, fallback, allowed) {
+  if (!prefsKey || typeof window === "undefined") {
+    return fallback;
+  }
+  try {
+    const raw = window.localStorage.getItem(prefsKey);
+    if (!raw) {
+      return fallback;
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return fallback;
+    }
+    const keys = parsed.filter((entry) => typeof entry === "string" && allowed.has(entry));
+    return keys.length > 0 ? keys : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function writeStoredColumnKeys(prefsKey, keys) {
+  if (!prefsKey || typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(prefsKey, JSON.stringify(keys));
+  } catch {
+  }
+}
 function compareColumnValues(column, left, right) {
   const leftRaw = column.display ? column.display(left) : column.value(left);
   const rightRaw = column.display ? column.display(right) : column.value(right);
@@ -764,6 +931,9 @@ function ResetIcon() {
     /* @__PURE__ */ jsx("path", { d: "M4.5 4.2v4h4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
+function ColumnsIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4.5h3.5v11H4zM8.25 4.5h3.5v11h-3.5zM12.5 4.5H16v11h-3.5z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
 function ChevronIcon({ open }) {
   return /* @__PURE__ */ jsx("svg", { className: open ? "side-rail-chevron open" : "side-rail-chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 4.5 13.5 10 8 15.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -780,6 +950,26 @@ function DownloadIcon() {
     /* @__PURE__ */ jsx("path", { d: "M4 15.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
   ] });
 }
+function MoreIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "10", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "10", r: "1.5", fill: "currentColor" })
+  ] });
+}
+function ToolsIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "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"
+    }
+  ) });
+}
 function DetailList({ lines }) {
   return /* @__PURE__ */ jsx("dl", { className: "record-detail-list", children: lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "record-detail-row", children: [
     /* @__PURE__ */ jsx("dt", { children: line.label }),
@@ -803,24 +993,85 @@ function RecordWorkspace({
   onDownload,
   canDownload = true,
   downloadBusy = false,
+  showColumnPicker = true,
+  columnPrefsKey,
+  visibleColumnKeys,
+  defaultVisibleColumnKeys,
+  onVisibleColumnKeysChange,
   toolbar,
   form
 }) {
-  const filterableColumns = columns.filter((column) => column.filterable !== false);
+  const allowedKeys = useMemo(() => new Set(columns.map((column) => column.key)), [columns]);
+  const fallbackKeys = useMemo(
+    () => defaultVisibleColumnKeys ?? defaultVisibleKeys(columns),
+    [columns, defaultVisibleColumnKeys]
+  );
+  const isControlled = visibleColumnKeys !== void 0;
+  const [internalVisibleKeys, setInternalVisibleKeys] = useState(
+    () => readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys)
+  );
   const [filters, setFilters] = useState({});
   const [sort, setSort] = useState(null);
   const [sideOpen, setSideOpen] = useState(false);
+  const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
+  const [columnsOpen, setColumnsOpen] = useState(false);
   const [previewEnabled, setPreviewEnabled] = useState(false);
   const [previewKey, setPreviewKey] = useState(null);
   const [tooltip, setTooltip] = useState(null);
   const [pageSize, setPageSize] = useState("15");
   const [page, setPage] = useState(1);
+  const [actionsMenu, setActionsMenu] = useState(null);
+  const actionsMenuRef = useRef(null);
   const isClient = useIsClient2();
+  const hoverTooltipsEnabled = useHoverTooltipsEnabled();
+  useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
+  }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
+  const resolvedVisibleKeys = useMemo(() => {
+    const source = isControlled ? visibleColumnKeys : internalVisibleKeys;
+    const filtered2 = source.filter((key) => allowedKeys.has(key));
+    return filtered2.length > 0 ? filtered2 : fallbackKeys.filter((key) => allowedKeys.has(key));
+  }, [allowedKeys, fallbackKeys, internalVisibleKeys, isControlled, visibleColumnKeys]);
+  const visibleColumns = useMemo(() => {
+    const byKey = new Map(columns.map((column) => [column.key, column]));
+    return resolvedVisibleKeys.map((key) => byKey.get(key)).filter((column) => Boolean(column));
+  }, [columns, resolvedVisibleKeys]);
+  function setVisibleKeys(next) {
+    const unique = Array.from(new Set(next.filter((key) => allowedKeys.has(key))));
+    const safe = unique.length > 0 ? unique : fallbackKeys.filter((key) => allowedKeys.has(key));
+    if (!isControlled) {
+      setInternalVisibleKeys(safe);
+      writeStoredColumnKeys(columnPrefsKey, safe);
+    }
+    onVisibleColumnKeysChange?.(safe);
+  }
+  function toggleColumnVisible(key, checked) {
+    if (checked) {
+      if (resolvedVisibleKeys.includes(key)) {
+        return;
+      }
+      setVisibleKeys([...resolvedVisibleKeys, key]);
+      return;
+    }
+    if (resolvedVisibleKeys.length <= 1) {
+      return;
+    }
+    setVisibleKeys(resolvedVisibleKeys.filter((entry) => entry !== key));
+  }
+  function selectAllColumns() {
+    setVisibleKeys(columns.map((column) => column.key));
+  }
+  function resetColumns() {
+    setVisibleKeys(fallbackKeys);
+  }
+  const filterableColumns = visibleColumns.filter((column) => column.filterable !== false);
   const filtered = useMemo(() => {
-    const activeFilters = columns.filter((column) => column.filterable !== false);
     return items.filter(
-      (item) => activeFilters.every((column) => {
+      (item) => filterableColumns.every((column) => {
         const query = (filters[column.key] ?? "").trim();
         if (!query) {
           return true;
@@ -833,22 +1084,24 @@ function RecordWorkspace({
         return text.toLowerCase().includes(query.toLowerCase());
       })
     );
-  }, [items, filters, columns]);
+  }, [items, filters, filterableColumns]);
   const sorted = useMemo(() => {
     if (!sort) {
       return filtered;
     }
-    const column = columns.find((entry) => entry.key === sort.key);
+    const column = visibleColumns.find((entry) => entry.key === sort.key);
     if (!column || column.sortable === false) {
       return filtered;
     }
     const direction = sort.direction === "asc" ? 1 : -1;
     return [...filtered].sort((left, right) => compareColumnValues(column, left, right) * direction);
-  }, [filtered, sort, columns]);
+  }, [filtered, sort, visibleColumns]);
   const activeFilterCount = useMemo(
     () => filterableColumns.reduce((count, column) => count + ((filters[column.key] ?? "").trim() ? 1 : 0), 0),
     [filterableColumns, filters]
   );
+  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));
@@ -858,12 +1111,47 @@ function RecordWorkspace({
   const showAdd = canAdd && Boolean(onAdd);
   const showDownload = Boolean(onDownload) && canDownload;
   const showFilters = filterableColumns.length > 0;
+  const showColumns = showColumnPicker && columns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
+  const exportColumns = visibleColumns.map((column) => ({
+    key: column.exportKey ?? column.key,
+    header: column.header
+  }));
+  const canShowTooltip = hoverTooltipsEnabled && !previewEnabled && actionsMenu === null;
+  useEffect(() => {
+    if (actionsMenu === null) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target)) {
+        setActionsMenu(null);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [actionsMenu]);
+  useEffect(() => {
+    if (!toolsDrawerOpen) {
+      return;
+    }
+    function onKeyDown(event) {
+      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) {
     if (!onDownload || downloadBusy) {
       return;
     }
-    onDownload(format);
+    onDownload(format, exportColumns);
     setDownloadOpen(false);
   }
   function cellText(column, item) {
@@ -871,12 +1159,12 @@ function RecordWorkspace({
     return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
   }
   function detailLines(item) {
-    return columns.map((column) => ({
+    return visibleColumns.map((column) => ({
       label: column.header,
       value: cellText(column, item)
     }));
   }
-  const previewTitle = previewItem && columns[0] ? cellText(columns[0], previewItem) : null;
+  const previewTitle = previewItem && visibleColumns[0] ? cellText(visibleColumns[0], previewItem) : null;
   function changeFilter(key, value) {
     setFilters((current) => ({ ...current, [key]: value }));
     setPage(1);
@@ -913,14 +1201,317 @@ function RecordWorkspace({
     }
   }
   function showTooltip(item, event) {
+    if (!canShowTooltip) {
+      return;
+    }
     const padding = 16;
     const width = 280;
     const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
     const y = Math.min(event.clientY + 14, window.innerHeight - padding - 24);
     setTooltip({ x, y, lines: detailLines(item) });
   }
+  function openRowActions(item, event) {
+    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" : showAll ? `1\u2013${sorted.length} of ${sorted.length}` : `${start + 1}\u2013${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
-  return /* @__PURE__ */ jsxs("div", { className: "list-workspace", "aria-label": title, children: [
+  function renderToolsBody({ compactIcons }) {
+    if (compactIcons) {
+      return /* @__PURE__ */ jsxs("div", { className: "side-rail-icons", children: [
+        /* @__PURE__ */ jsxs("label", { className: "side-rail-icon preview-check-icon", title: "Preview", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: previewEnabled,
+              onChange: (event) => setPreviewEnabledValue(event.target.checked),
+              "aria-label": "Preview"
+            }
+          ),
+          /* @__PURE__ */ jsx(PreviewIcon, {})
+        ] }),
+        showAdd ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsx(PlusIcon, {}) }) : null,
+        showColumns ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Columns",
+            "aria-label": "Columns",
+            onClick: () => {
+              setSideOpen(true);
+              setColumnsOpen(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx(ColumnsIcon, {}),
+              hiddenColumnCount > 0 ? /* @__PURE__ */ jsx("span", { className: "filter-badge", children: hiddenColumnCount }) : null
+            ]
+          }
+        ) : null,
+        showDownload ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Download",
+            "aria-label": "Download",
+            disabled: downloadBusy,
+            onClick: () => {
+              setSideOpen(true);
+              setDownloadOpen(true);
+            },
+            children: /* @__PURE__ */ jsx(DownloadIcon, {})
+          }
+        ) : null,
+        showFilters ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Show filters",
+            "aria-label": "Show filters",
+            onClick: () => setSideOpen(true),
+            children: [
+              /* @__PURE__ */ jsx(FilterIcon, {}),
+              activeFilterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "filter-badge", children: activeFilterCount }) : null
+            ]
+          }
+        ) : null,
+        showFilters ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Reset filters",
+            "aria-label": "Reset filters",
+            disabled: activeFilterCount === 0,
+            onClick: clearFilters,
+            children: /* @__PURE__ */ jsx(ResetIcon, {})
+          }
+        ) : null
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "side-rail-body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "preview-check", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: previewEnabled,
+            onChange: (event) => setPreviewEnabledValue(event.target.checked),
+            "aria-label": "Preview"
+          }
+        ),
+        /* @__PURE__ */ jsx(PreviewIcon, {}),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Preview" })
+      ] }),
+      showAdd ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "side-rail-add",
+          onClick: () => {
+            setToolsDrawerOpen(false);
+            onAdd?.();
+          },
+          children: [
+            /* @__PURE__ */ jsx(PlusIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: addLabel })
+          ]
+        }
+      ) : null,
+      showColumns ? /* @__PURE__ */ jsxs("div", { className: "side-rail-columns", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-columns-toggle",
+            "aria-expanded": columnsOpen,
+            onClick: () => setColumnsOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsx(ColumnsIcon, {}),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Columns",
+                hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""
+              ] })
+            ]
+          }
+        ),
+        columnsOpen ? /* @__PURE__ */ jsxs("div", { className: "side-rail-columns-panel", role: "group", "aria-label": "Visible columns", children: [
+          /* @__PURE__ */ jsxs("div", { className: "side-rail-columns-actions", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "ghost", onClick: selectAllColumns, children: "Select all" }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "ghost", onClick: resetColumns, children: "Reset" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "side-rail-columns-list", children: columns.map((column) => {
+            const checked = resolvedVisibleKeys.includes(column.key);
+            const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
+            return /* @__PURE__ */ jsxs("label", { className: "side-rail-column-option", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked,
+                  disabled: disableUncheck,
+                  onChange: (event) => toggleColumnVisible(column.key, event.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: column.header })
+            ] }, column.key);
+          }) })
+        ] }) : null
+      ] }) : null,
+      showDownload ? /* @__PURE__ */ jsxs("div", { className: "side-rail-download", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-download-toggle",
+            "aria-expanded": downloadOpen,
+            disabled: downloadBusy,
+            onClick: () => setDownloadOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsx(DownloadIcon, {}),
+              /* @__PURE__ */ jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
+            ]
+          }
+        ),
+        downloadOpen ? /* @__PURE__ */ jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-download-format",
+            disabled: downloadBusy,
+            onClick: () => requestDownload(option.format),
+            children: option.label
+          },
+          option.format
+        )) }) : null
+      ] }) : null,
+      showFilters ? /* @__PURE__ */ jsxs("div", { className: "side-rail-filters", children: [
+        /* @__PURE__ */ jsxs("div", { className: "filter-panel-head", children: [
+          /* @__PURE__ */ jsx("h3", { children: "Filters" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ghost filter-clear",
+              title: "Reset filters",
+              "aria-label": "Reset filters",
+              disabled: activeFilterCount === 0,
+              onClick: clearFilters,
+              children: [
+                /* @__PURE__ */ jsx(ResetIcon, {}),
+                /* @__PURE__ */ jsx("span", { children: "Reset" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "filter-panel-stack", children: filterableColumns.map((column) => /* @__PURE__ */ jsxs("label", { children: [
+          column.header,
+          column.filterOptions ? /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: filters[column.key] ?? "",
+              options: [{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions],
+              onChange: (value) => changeFilter(column.key, value),
+              placeholder: column.filterPlaceholder ?? "All"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: filters[column.key] ?? "",
+              onChange: (event) => changeFilter(column.key, event.target.value),
+              placeholder: `Filter ${column.header.toLowerCase()}`
+            }
+          )
+        ] }, column.key)) })
+      ] }) : null
+    ] });
+  }
+  function renderRowActions(item) {
+    const key = rowKey(item);
+    const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
+    const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
+    const hasActions = Boolean(onView || onUpdate || onDelete);
+    if (!hasActions) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "row-actions row-actions-desktop", children: [
+        onView ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost row-action", onClick: () => onView(item), children: "View" }) : null,
+        onUpdate ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost row-action",
+            disabled: !updateAllowed,
+            title: updateAllowed ? "Update" : "Update is not available",
+            onClick: () => onUpdate(item),
+            children: "Update"
+          }
+        ) : null,
+        onDelete ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost row-action danger",
+            disabled: !deleteAllowed,
+            title: deleteAllowed ? "Delete" : "Delete is not available",
+            onClick: () => onDelete(item),
+            children: "Delete"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "row-actions row-actions-mobile", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: actionsMenu?.key === key ? "ghost row-action-menu-trigger open" : "ghost row-action-menu-trigger",
+          "aria-haspopup": "menu",
+          "aria-expanded": actionsMenu?.key === key,
+          "aria-label": "Row actions",
+          onClick: (event) => openRowActions(item, event),
+          children: /* @__PURE__ */ jsx(MoreIcon, {})
+        }
+      ) })
+    ] });
+  }
+  const actionsMenuItem = actionsMenu?.item;
+  const actionsUpdateAllowed = actionsMenuItem ? canUpdate ? canUpdate(actionsMenuItem) : Boolean(onUpdate) : false;
+  const actionsDeleteAllowed = actionsMenuItem ? canDelete ? canDelete(actionsMenuItem) : Boolean(onDelete) : false;
+  return /* @__PURE__ */ jsxs("div", { className: toolsDrawerOpen ? "list-workspace tools-drawer-open" : "list-workspace", "aria-label": title, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tools-mobile-bar", children: [
+      /* @__PURE__ */ jsx("div", { className: "tools-mobile-bar-start", children: showAdd ? /* @__PURE__ */ jsxs("button", { type: "button", className: "tools-mobile-add", onClick: onAdd, children: [
+        /* @__PURE__ */ jsx(PlusIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: addLabel })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "tools-mobile-title", children: title }) }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ghost tools-mobile-toggle",
+          "aria-expanded": toolsDrawerOpen,
+          "aria-controls": "aksui-tools-drawer",
+          onClick: () => setToolsDrawerOpen(true),
+          children: [
+            /* @__PURE__ */ jsx(ToolsIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: "Tools" }),
+            toolsBadgeCount > 0 ? /* @__PURE__ */ jsx("span", { className: "filter-badge", children: toolsBadgeCount }) : null
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -930,7 +1521,7 @@ function RecordWorkspace({
             toolbar ? /* @__PURE__ */ jsx("div", { className: "table-card-bar", children: /* @__PURE__ */ jsx("div", { className: "table-card-context", children: toolbar }) }) : null,
             /* @__PURE__ */ jsx("div", { className: "table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "data-table", children: [
               /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                columns.map((column) => {
+                visibleColumns.map((column) => {
                   const sortable = column.sortable !== false;
                   const active = sort?.key === column.key ? sort.direction : null;
                   return /* @__PURE__ */ jsx(
@@ -955,55 +1546,23 @@ function RecordWorkspace({
                 }),
                 /* @__PURE__ */ jsx("th", { className: "actions-col", children: "Actions" })
               ] }) }),
-              /* @__PURE__ */ jsx("tbody", { children: pageItems.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx("p", { className: "hint table-empty", children: items.length === 0 ? empty : "No records match the current filters." }) }) }) : pageItems.map((item) => {
+              /* @__PURE__ */ jsx("tbody", { children: pageItems.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: visibleColumns.length + 1, children: /* @__PURE__ */ jsx("p", { className: "hint table-empty", children: items.length === 0 ? empty : "No records match the current filters." }) }) }) : pageItems.map((item) => {
                 const key = rowKey(item);
-                const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
-                const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
                 const selected = previewEnabled && previewKey === key;
                 return /* @__PURE__ */ jsxs(
                   "tr",
                   {
                     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),
                     children: [
-                      columns.map((column) => /* @__PURE__ */ jsx("td", { children: cellText(column, item) }, column.key)),
-                      /* @__PURE__ */ jsx("td", { className: "actions-col", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "row-actions", children: [
-                        onView ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost row-action", onClick: () => onView(item), children: "View" }) : null,
-                        onUpdate ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            className: "ghost row-action",
-                            disabled: !updateAllowed,
-                            title: updateAllowed ? "Update" : "Update is not available",
-                            onClick: () => onUpdate(item),
-                            children: "Update"
-                          }
-                        ) : null,
-                        onDelete ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            className: "ghost row-action danger",
-                            disabled: !deleteAllowed,
-                            title: deleteAllowed ? "Delete" : "Delete is not available",
-                            onClick: () => onDelete(item),
-                            children: "Delete"
-                          }
-                        ) : null
-                      ] }) })
+                      visibleColumns.map((column) => /* @__PURE__ */ jsx("td", { children: cellText(column, item) }, column.key)),
+                      /* @__PURE__ */ jsx("td", { className: "actions-col", onClick: (event) => event.stopPropagation(), children: renderRowActions(item) })
                     ]
                   },
                   key
@@ -1030,7 +1589,7 @@ function RecordWorkspace({
               /* @__PURE__ */ jsx("p", { className: "preview-kicker", children: "Preview" }),
               /* @__PURE__ */ jsx("h3", { children: previewTitle ?? "No record selected" })
             ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "preview-panel-body", children: previewItem ? /* @__PURE__ */ jsx(DetailList, { lines: detailLines(previewItem) }) : /* @__PURE__ */ jsx("p", { className: "preview-empty", children: "Hover or click a row to preview its details here." }) })
+            /* @__PURE__ */ jsx("div", { className: "preview-panel-body", children: previewItem ? /* @__PURE__ */ jsx(DetailList, { lines: detailLines(previewItem) }) : /* @__PURE__ */ jsx("p", { className: "preview-empty", children: "Select a row to preview its details here." }) })
           ] }) : null,
           /* @__PURE__ */ jsxs("aside", { className: sideOpen ? "side-rail open" : "side-rail", "aria-label": "Actions and filters", children: [
             /* @__PURE__ */ jsxs(
@@ -1047,153 +1606,102 @@ function RecordWorkspace({
                 ]
               }
             ),
-            sideOpen ? /* @__PURE__ */ jsxs("div", { className: "side-rail-body", children: [
-              /* @__PURE__ */ jsxs("div", { className: "preview-check", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: previewEnabled,
-                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
-                    "aria-label": "Preview"
-                  }
-                ),
-                /* @__PURE__ */ jsx(PreviewIcon, {}),
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Preview" })
-              ] }),
-              showAdd ? /* @__PURE__ */ jsxs("button", { type: "button", className: "side-rail-add", onClick: onAdd, children: [
-                /* @__PURE__ */ jsx(PlusIcon, {}),
-                /* @__PURE__ */ jsx("span", { children: addLabel })
-              ] }) : null,
-              showDownload ? /* @__PURE__ */ jsxs("div", { className: "side-rail-download", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "ghost side-rail-download-toggle",
-                    "aria-expanded": downloadOpen,
-                    disabled: downloadBusy,
-                    onClick: () => setDownloadOpen((open) => !open),
-                    children: [
-                      /* @__PURE__ */ jsx(DownloadIcon, {}),
-                      /* @__PURE__ */ jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
-                    ]
-                  }
-                ),
-                downloadOpen ? /* @__PURE__ */ jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "ghost side-rail-download-format",
-                    disabled: downloadBusy,
-                    onClick: () => requestDownload(option.format),
-                    children: option.label
-                  },
-                  option.format
-                )) }) : null
-              ] }) : null,
-              showFilters ? /* @__PURE__ */ jsxs("div", { className: "side-rail-filters", children: [
-                /* @__PURE__ */ jsxs("div", { className: "filter-panel-head", children: [
-                  /* @__PURE__ */ jsx("h3", { children: "Filters" }),
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: "ghost filter-clear",
-                      title: "Reset filters",
-                      "aria-label": "Reset filters",
-                      disabled: activeFilterCount === 0,
-                      onClick: clearFilters,
-                      children: [
-                        /* @__PURE__ */ jsx(ResetIcon, {}),
-                        /* @__PURE__ */ jsx("span", { children: "Reset" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "filter-panel-stack", children: filterableColumns.map((column) => /* @__PURE__ */ jsxs("label", { children: [
-                  column.header,
-                  column.filterOptions ? /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      value: filters[column.key] ?? "",
-                      options: [{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions],
-                      onChange: (value) => changeFilter(column.key, value),
-                      placeholder: column.filterPlaceholder ?? "All"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      value: filters[column.key] ?? "",
-                      onChange: (event) => changeFilter(column.key, event.target.value),
-                      placeholder: `Filter ${column.header.toLowerCase()}`
-                    }
-                  )
-                ] }, column.key)) })
-              ] }) : null
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "side-rail-icons", children: [
-              /* @__PURE__ */ jsxs("label", { className: "side-rail-icon preview-check-icon", title: "Preview", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: previewEnabled,
-                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
-                    "aria-label": "Preview"
-                  }
-                ),
-                /* @__PURE__ */ jsx(PreviewIcon, {})
-              ] }),
-              showAdd ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsx(PlusIcon, {}) }) : null,
-              showDownload ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Download",
-                  "aria-label": "Download",
-                  "aria-expanded": downloadOpen,
-                  disabled: downloadBusy,
-                  onClick: () => {
-                    setSideOpen(true);
-                    setDownloadOpen(true);
-                  },
-                  children: /* @__PURE__ */ jsx(DownloadIcon, {})
-                }
-              ) : null,
-              showFilters ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Show filters",
-                  "aria-label": "Show filters",
-                  onClick: () => setSideOpen(true),
-                  children: [
-                    /* @__PURE__ */ jsx(FilterIcon, {}),
-                    activeFilterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "filter-badge", children: activeFilterCount }) : null
-                  ]
-                }
-              ) : null,
-              showFilters ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Reset filters",
-                  "aria-label": "Reset filters",
-                  disabled: activeFilterCount === 0,
-                  onClick: clearFilters,
-                  children: /* @__PURE__ */ jsx(ResetIcon, {})
-                }
-              ) : null
-            ] })
+            sideOpen ? renderToolsBody({ compactIcons: false }) : renderToolsBody({ compactIcons: true })
           ] })
         ]
       }
     ),
+    isClient ? createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: toolsDrawerOpen ? "tools-drawer-backdrop open" : "tools-drawer-backdrop",
+            "aria-label": "Close tools",
+            tabIndex: toolsDrawerOpen ? 0 : -1,
+            onClick: () => setToolsDrawerOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            id: "aksui-tools-drawer",
+            className: toolsDrawerOpen ? "tools-drawer open" : "tools-drawer",
+            "aria-label": "Workspace tools",
+            "aria-hidden": !toolsDrawerOpen,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "tools-drawer-head", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "tools-drawer-kicker", children: "Workspace" }),
+                  /* @__PURE__ */ jsx("h3", { children: "Tools" })
+                ] }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "ghost tools-drawer-close", onClick: () => setToolsDrawerOpen(false), children: "Close" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "tools-drawer-body", children: renderToolsBody({ compactIcons: false }) })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    ) : null,
     form,
-    isClient && tooltip && !previewEnabled ? createPortal(
+    isClient && actionsMenu && actionsMenuItem ? createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: actionsMenuRef,
+          className: "row-action-menu row-action-menu-portal",
+          role: "menu",
+          style: { left: actionsMenu.x, top: actionsMenu.y },
+          children: [
+            onView ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ghost",
+                onClick: () => {
+                  setActionsMenu(null);
+                  onView(actionsMenuItem);
+                },
+                children: "View"
+              }
+            ) : null,
+            onUpdate ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ghost",
+                disabled: !actionsUpdateAllowed,
+                onClick: () => {
+                  setActionsMenu(null);
+                  onUpdate(actionsMenuItem);
+                },
+                children: "Update"
+              }
+            ) : null,
+            onDelete ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ghost danger",
+                disabled: !actionsDeleteAllowed,
+                onClick: () => {
+                  setActionsMenu(null);
+                  onDelete(actionsMenuItem);
+                },
+                children: "Delete"
+              }
+            ) : null
+          ]
+        }
+      ),
+      document.body
+    ) : null,
+    isClient && tooltip && canShowTooltip ? createPortal(
       /* @__PURE__ */ jsxs("div", { className: "record-tooltip", style: { left: tooltip.x, top: tooltip.y }, role: "tooltip", children: [
         /* @__PURE__ */ jsx("p", { className: "record-tooltip-title", children: title }),
         /* @__PURE__ */ jsx(DetailList, { lines: tooltip.lines })