@mshuja288/aksuicore 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -517,31 +517,48 @@ function Snackbar({
   );
 }
 var StatusMessage = Snackbar;
+function MenuIcon({ open }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5 5 15", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) : /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const [accountOpen, setAccountOpen] = react.useState(false);
   const menuRef = react.useRef(null);
   const initial = (username || "U").slice(0, 1).toUpperCase();
   react.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__ */ jsxRuntime.jsxs("header", { className: "topbar", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "topbar-brand", children: [
+      showMenuButton && onMenuClick ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MenuIcon, { open: menuOpen })
+        }
+      ) : null,
       logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
@@ -564,13 +581,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__ */ jsxRuntime.jsx("span", { className: "avatar", children: initial })
           }
         ),
-        menuOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "avatar-menu", role: "menu", children: [
+        accountOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "avatar-menu", role: "menu", children: [
           username ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "avatar-name", children: username }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -578,7 +595,7 @@ function Topbar({
               variant: "ghost",
               role: "menuitem",
               onClick: () => {
-                setMenuOpen(false);
+                setAccountOpen(false);
                 onLogout();
               },
               children: "Logout"
@@ -593,9 +610,10 @@ function SideNav({
   items,
   activeId,
   onSelect,
-  label = "Sections"
+  label = "Sections",
+  className = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "side-nav", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: ["side-nav", className].filter(Boolean).join(" "), "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
@@ -697,28 +715,131 @@ function AppShell({
   activeNavId,
   onNavSelect,
   navLabel = "Sections",
-  showBottomNav = true,
+  mobileNav = "drawer",
+  showBottomNav,
+  navDrawerOpen,
+  onNavDrawerOpenChange,
   topbarActions,
   children,
   screenClassName = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aksui-root app-shell", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Topbar, { title, logoSrc, logoAlt, username, onLogout, children: topbarActions }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "app-body", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SideNav, { items: navItems, activeId: activeNavId, onSelect: onNavSelect, label: navLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["screen", screenClassName].filter(Boolean).join(" "), children })
-    ] }),
-    showBottomNav ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bottom-nav", "aria-label": navLabel, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: activeNavId === item.id ? "active" : "",
-        onClick: () => onNavSelect(item.id),
-        children: item.short ?? item.label
-      },
-      item.id
-    )) }) : null
-  ] });
+  const [internalDrawerOpen, setInternalDrawerOpen] = react.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);
+  }
+  react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        "aksui-root",
+        "app-shell",
+        `mobile-nav-${mobileNav}`,
+        useBottomNav ? "has-bottom-nav" : "",
+        drawerOpen ? "nav-drawer-open" : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Topbar,
+          {
+            title,
+            logoSrc,
+            logoAlt,
+            username,
+            onLogout,
+            showMenuButton: useDrawer,
+            menuOpen: drawerOpen,
+            onMenuClick: () => setDrawerOpen(!drawerOpen),
+            children: topbarActions
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "app-body", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SideNav, { items: navItems, activeId: activeNavId, onSelect: onNavSelect, label: navLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["screen", screenClassName].filter(Boolean).join(" "), children })
+        ] }),
+        useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            "aside",
+            {
+              className: drawerOpen ? "nav-drawer open" : "nav-drawer",
+              "aria-label": navLabel,
+              "aria-hidden": !drawerOpen,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nav-drawer-head", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nav-drawer-title", children: navLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost nav-drawer-close", onClick: () => setDrawerOpen(false), children: "Close" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SideNav,
+                  {
+                    className: "nav-drawer-nav",
+                    items: navItems,
+                    activeId: activeNavId,
+                    onSelect: selectNav,
+                    label: navLabel
+                  }
+                )
+              ]
+            }
+          )
+        ] }) : null,
+        useBottomNav ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bottom-nav", "aria-label": navLabel, children: mobileNav === "hybrid" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "active bottom-nav-current", disabled: true, children: activeItem?.short ?? activeItem?.label ?? "Section" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bottom-nav-menu", onClick: () => setDrawerOpen(true), children: "Menu" })
+        ] }) : navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: activeNavId === item.id ? "active" : "",
+            onClick: () => onNavSelect(item.id),
+            children: item.short ?? item.label
+          },
+          item.id
+        )) }) : null
+      ]
+    }
+  );
 }
 function useIsClient2() {
   return react.useSyncExternalStore(
@@ -733,6 +854,37 @@ var EXPORT_FORMAT_OPTIONS = [
   { 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);
@@ -766,6 +918,9 @@ function ResetIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 4.2v4h4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
+function ColumnsIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: open ? "side-rail-chevron open" : "side-rail-chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4.5 13.5 10 8 15.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -782,6 +937,13 @@ function DownloadIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
   ] });
 }
+function MoreIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "10", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.5", cy: "10", r: "1.5", fill: "currentColor" })
+  ] });
+}
 function DetailList({ lines }) {
   return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "record-detail-list", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "record-detail-row", children: [
     /* @__PURE__ */ jsxRuntime.jsx("dt", { children: line.label }),
@@ -805,24 +967,83 @@ 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 = react.useMemo(() => new Set(columns.map((column) => column.key)), [columns]);
+  const fallbackKeys = react.useMemo(
+    () => defaultVisibleColumnKeys ?? defaultVisibleKeys(columns),
+    [columns, defaultVisibleColumnKeys]
+  );
+  const isControlled = visibleColumnKeys !== void 0;
+  const [internalVisibleKeys, setInternalVisibleKeys] = react.useState(
+    () => readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys)
+  );
   const [filters, setFilters] = react.useState({});
   const [sort, setSort] = react.useState(null);
   const [sideOpen, setSideOpen] = react.useState(false);
   const [downloadOpen, setDownloadOpen] = react.useState(false);
+  const [columnsOpen, setColumnsOpen] = react.useState(false);
   const [previewEnabled, setPreviewEnabled] = react.useState(false);
   const [previewKey, setPreviewKey] = react.useState(null);
   const [tooltip, setTooltip] = react.useState(null);
   const [pageSize, setPageSize] = react.useState("15");
   const [page, setPage] = react.useState(1);
+  const [actionsMenuKey, setActionsMenuKey] = react.useState(null);
+  const actionsMenuRef = react.useRef(null);
   const isClient = useIsClient2();
+  react.useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
+  }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
+  const resolvedVisibleKeys = react.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 = react.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 = react.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;
@@ -835,22 +1056,23 @@ function RecordWorkspace({
         return text.toLowerCase().includes(query.toLowerCase());
       })
     );
-  }, [items, filters, columns]);
+  }, [items, filters, filterableColumns]);
   const sorted = react.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 = react.useMemo(
     () => filterableColumns.reduce((count, column) => count + ((filters[column.key] ?? "").trim() ? 1 : 0), 0),
     [filterableColumns, filters]
   );
+  const hiddenColumnCount = columns.length - visibleColumns.length;
   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));
@@ -860,12 +1082,29 @@ 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
+  }));
+  react.useEffect(() => {
+    if (actionsMenuKey === null) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target)) {
+        setActionsMenuKey(null);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [actionsMenuKey]);
   function requestDownload(format) {
     if (!onDownload || downloadBusy) {
       return;
     }
-    onDownload(format);
+    onDownload(format, exportColumns);
     setDownloadOpen(false);
   }
   function cellText(column, item) {
@@ -873,12 +1112,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);
@@ -922,6 +1161,99 @@ function RecordWorkspace({
     setTooltip({ x, y, lines: detailLines(item) });
   }
   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}`;
+  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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row-actions row-actions-desktop", children: [
+        onView ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost row-action", onClick: () => onView(item), children: "View" }) : null,
+        onUpdate ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "row-actions row-actions-mobile", ref: actionsMenuKey === key ? actionsMenuRef : void 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost row-action-menu-trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": actionsMenuKey === key,
+            "aria-label": "Row actions",
+            onClick: () => setActionsMenuKey((current) => current === key ? null : key),
+            children: /* @__PURE__ */ jsxRuntime.jsx(MoreIcon, {})
+          }
+        ),
+        actionsMenuKey === key ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row-action-menu", role: "menu", children: [
+          onView ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "ghost",
+              onClick: () => {
+                setActionsMenuKey(null);
+                onView(item);
+              },
+              children: "View"
+            }
+          ) : null,
+          onUpdate ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "ghost",
+              disabled: !updateAllowed,
+              onClick: () => {
+                setActionsMenuKey(null);
+                onUpdate(item);
+              },
+              children: "Update"
+            }
+          ) : null,
+          onDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "ghost danger",
+              disabled: !deleteAllowed,
+              onClick: () => {
+                setActionsMenuKey(null);
+                onDelete(item);
+              },
+              children: "Delete"
+            }
+          ) : null
+        ] }) : null
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-workspace", "aria-label": title, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -932,7 +1264,7 @@ function RecordWorkspace({
             toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-card-bar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-card-context", children: toolbar }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "data-table", children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -957,10 +1289,8 @@ function RecordWorkspace({
                 }),
                 /* @__PURE__ */ jsxRuntime.jsx("th", { className: "actions-col", children: "Actions" })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: pageItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "hint table-empty", children: items.length === 0 ? empty : "No records match the current filters." }) }) }) : pageItems.map((item) => {
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: pageItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: visibleColumns.length + 1, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                   "tr",
@@ -980,32 +1310,8 @@ function RecordWorkspace({
                     onMouseLeave: () => setTooltip(null),
                     onClick: () => focusRecord(item),
                     children: [
-                      columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: cellText(column, item) }, column.key)),
-                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "actions-col", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row-actions", children: [
-                        onView ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost row-action", onClick: () => onView(item), children: "View" }) : null,
-                        onUpdate ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { children: cellText(column, item) }, column.key)),
+                      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "actions-col", onClick: (event) => event.stopPropagation(), children: renderRowActions(item) })
                     ]
                   },
                   key
@@ -1067,6 +1373,46 @@ function RecordWorkspace({
                 /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: addLabel })
               ] }) : null,
+              showColumns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-columns", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ghost side-rail-columns-toggle",
+                    "aria-expanded": columnsOpen,
+                    onClick: () => setColumnsOpen((open) => !open),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {}),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        "Columns",
+                        hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""
+                      ] })
+                    ]
+                  }
+                ),
+                columnsOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-columns-panel", role: "group", "aria-label": "Visible columns", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-columns-actions", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost", onClick: selectAllColumns, children: "Select all" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost", onClick: resetColumns, children: "Reset" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { className: "side-rail-column-option", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked,
+                          disabled: disableUncheck,
+                          onChange: (event) => toggleColumnVisible(column.key, event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.header })
+                    ] }, column.key);
+                  }) })
+                ] }) : null
+              ] }) : null,
               showDownload ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-download", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
@@ -1147,6 +1493,23 @@ function RecordWorkspace({
                 /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, {})
               ] }),
               showAdd ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}) }) : null,
+              showColumns ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost side-rail-icon",
+                  title: "Columns",
+                  "aria-label": "Columns",
+                  onClick: () => {
+                    setSideOpen(true);
+                    setColumnsOpen(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {}),
+                    hiddenColumnCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-badge", children: hiddenColumnCount }) : null
+                  ]
+                }
+              ) : null,
               showDownload ? /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {