@mshuja288/aksuicore 0.4.0 → 0.4.1

package/dist/index.cjs

@@ -849,6 +849,21 @@ function useIsClient2() {
     () => false
   );
 }
+function useHoverTooltipsEnabled() {
+  return react.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" },
@@ -944,6 +959,19 @@ function MoreIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.5", cy: "10", r: "1.5", fill: "currentColor" })
   ] });
 }
+function ToolsIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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__ */ 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 }),
@@ -987,6 +1015,7 @@ function RecordWorkspace({
   const [filters, setFilters] = react.useState({});
   const [sort, setSort] = react.useState(null);
   const [sideOpen, setSideOpen] = react.useState(false);
+  const [toolsDrawerOpen, setToolsDrawerOpen] = react.useState(false);
   const [downloadOpen, setDownloadOpen] = react.useState(false);
   const [columnsOpen, setColumnsOpen] = react.useState(false);
   const [previewEnabled, setPreviewEnabled] = react.useState(false);
@@ -994,9 +1023,10 @@ function RecordWorkspace({
   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 [actionsMenu, setActionsMenu] = react.useState(null);
   const actionsMenuRef = react.useRef(null);
   const isClient = useIsClient2();
+  const hoverTooltipsEnabled = useHoverTooltipsEnabled();
   react.useEffect(() => {
     if (isControlled) {
       return;
@@ -1073,6 +1103,7 @@ function RecordWorkspace({
     [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));
@@ -1088,18 +1119,36 @@ function RecordWorkspace({
     key: column.exportKey ?? column.key,
     header: column.header
   }));
+  const canShowTooltip = hoverTooltipsEnabled && !previewEnabled && actionsMenu === null;
   react.useEffect(() => {
-    if (actionsMenuKey === null) {
+    if (actionsMenu === null) {
       return;
     }
     function onPointerDown(event) {
       if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target)) {
-        setActionsMenuKey(null);
+        setActionsMenu(null);
       }
     }
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
-  }, [actionsMenuKey]);
+  }, [actionsMenu]);
+  react.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;
@@ -1154,13 +1203,244 @@ 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}`;
+  function renderToolsBody({ compactIcons }) {
+    if (compactIcons) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-icons", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-icon preview-check-icon", title: "Preview", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: previewEnabled,
+              onChange: (event) => setPreviewEnabledValue(event.target.checked),
+              "aria-label": "Preview"
+            }
+          ),
+          /* @__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",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Download",
+            "aria-label": "Download",
+            disabled: downloadBusy,
+            onClick: () => {
+              setSideOpen(true);
+              setDownloadOpen(true);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {})
+          }
+        ) : null,
+        showFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Show filters",
+            "aria-label": "Show filters",
+            onClick: () => setSideOpen(true),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FilterIcon, {}),
+              activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-badge", children: activeFilterCount }) : null
+            ]
+          }
+        ) : null,
+        showFilters ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Reset filters",
+            "aria-label": "Reset filters",
+            disabled: activeFilterCount === 0,
+            onClick: clearFilters,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ResetIcon, {})
+          }
+        ) : null
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "preview-check", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: previewEnabled,
+            onChange: (event) => setPreviewEnabledValue(event.target.checked),
+            "aria-label": "Preview"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Preview" })
+      ] }),
+      showAdd ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "side-rail-add",
+          onClick: () => {
+            setToolsDrawerOpen(false);
+            onAdd?.();
+          },
+          children: [
+            /* @__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",
+          {
+            type: "button",
+            className: "ghost side-rail-download-toggle",
+            "aria-expanded": downloadOpen,
+            disabled: downloadBusy,
+            onClick: () => setDownloadOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
+            ]
+          }
+        ),
+        downloadOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "side-rail-filters", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filters" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ghost filter-clear",
+              title: "Reset filters",
+              "aria-label": "Reset filters",
+              disabled: activeFilterCount === 0,
+              onClick: clearFilters,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ResetIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reset" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-panel-stack", children: filterableColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          column.header,
+          column.filterOptions ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -1195,66 +1475,45 @@ function RecordWorkspace({
           }
         ) : 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
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row-actions row-actions-mobile", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MoreIcon, {})
+        }
+      ) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-workspace", "aria-label": title, children: [
+  const actionsMenuItem = actionsMenu?.item;
+  const actionsUpdateAllowed = actionsMenuItem ? canUpdate ? canUpdate(actionsMenuItem) : Boolean(onUpdate) : false;
+  const actionsDeleteAllowed = actionsMenuItem ? canDelete ? canDelete(actionsMenuItem) : Boolean(onDelete) : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: toolsDrawerOpen ? "list-workspace tools-drawer-open" : "list-workspace", "aria-label": title, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tools-mobile-bar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tools-mobile-bar-start", children: showAdd ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "tools-mobile-add", onClick: onAdd, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: addLabel })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tools-mobile-title", children: title }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ghost tools-mobile-toggle",
+          "aria-expanded": toolsDrawerOpen,
+          "aria-controls": "aksui-tools-drawer",
+          onClick: () => setToolsDrawerOpen(true),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tools" }),
+            toolsBadgeCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-badge", children: toolsBadgeCount }) : null
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1297,16 +1556,10 @@ function RecordWorkspace({
                   {
                     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: [
@@ -1338,7 +1591,7 @@ function RecordWorkspace({
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "preview-kicker", children: "Preview" }),
               /* @__PURE__ */ jsxRuntime.jsx("h3", { children: previewTitle ?? "No record selected" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "preview-panel-body", children: previewItem ? /* @__PURE__ */ jsxRuntime.jsx(DetailList, { lines: detailLines(previewItem) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "preview-empty", children: "Hover or click a row to preview its details here." }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "preview-panel-body", children: previewItem ? /* @__PURE__ */ jsxRuntime.jsx(DetailList, { lines: detailLines(previewItem) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "preview-empty", children: "Select a row to preview its details here." }) })
           ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: sideOpen ? "side-rail open" : "side-rail", "aria-label": "Actions and filters", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1355,210 +1608,102 @@ function RecordWorkspace({
                 ]
               }
             ),
-            sideOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-body", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "preview-check", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: previewEnabled,
-                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
-                    "aria-label": "Preview"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Preview" })
-              ] }),
-              showAdd ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "side-rail-add", onClick: onAdd, children: [
-                /* @__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",
-                  {
-                    type: "button",
-                    className: "ghost side-rail-download-toggle",
-                    "aria-expanded": downloadOpen,
-                    disabled: downloadBusy,
-                    onClick: () => setDownloadOpen((open) => !open),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {}),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
-                    ]
-                  }
-                ),
-                downloadOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "side-rail-filters", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel-head", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filters" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: "ghost filter-clear",
-                      title: "Reset filters",
-                      "aria-label": "Reset filters",
-                      disabled: activeFilterCount === 0,
-                      onClick: clearFilters,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ResetIcon, {}),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reset" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "filter-panel-stack", children: filterableColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                  column.header,
-                  column.filterOptions ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      value: filters[column.key] ?? "",
-                      onChange: (event) => changeFilter(column.key, event.target.value),
-                      placeholder: `Filter ${column.header.toLowerCase()}`
-                    }
-                  )
-                ] }, column.key)) })
-              ] }) : null
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-icons", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-icon preview-check-icon", title: "Preview", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: previewEnabled,
-                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
-                    "aria-label": "Preview"
-                  }
-                ),
-                /* @__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",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Download",
-                  "aria-label": "Download",
-                  "aria-expanded": downloadOpen,
-                  disabled: downloadBusy,
-                  onClick: () => {
-                    setSideOpen(true);
-                    setDownloadOpen(true);
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {})
-                }
-              ) : null,
-              showFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Show filters",
-                  "aria-label": "Show filters",
-                  onClick: () => setSideOpen(true),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(FilterIcon, {}),
-                    activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "filter-badge", children: activeFilterCount }) : null
-                  ]
-                }
-              ) : null,
-              showFilters ? /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "ghost side-rail-icon",
-                  title: "Reset filters",
-                  "aria-label": "Reset filters",
-                  disabled: activeFilterCount === 0,
-                  onClick: clearFilters,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ResetIcon, {})
-                }
-              ) : null
-            ] })
+            sideOpen ? renderToolsBody({ compactIcons: false }) : renderToolsBody({ compactIcons: true })
           ] })
         ]
       }
     ),
+    isClient ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            id: "aksui-tools-drawer",
+            className: toolsDrawerOpen ? "tools-drawer open" : "tools-drawer",
+            "aria-label": "Workspace tools",
+            "aria-hidden": !toolsDrawerOpen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tools-drawer-head", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tools-drawer-kicker", children: "Workspace" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Tools" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost tools-drawer-close", onClick: () => setToolsDrawerOpen(false), children: "Close" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tools-drawer-body", children: renderToolsBody({ compactIcons: false }) })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    ) : null,
     form,
-    isClient && tooltip && !previewEnabled ? reactDom.createPortal(
+    isClient && actionsMenu && actionsMenuItem ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: actionsMenuRef,
+          className: "row-action-menu row-action-menu-portal",
+          role: "menu",
+          style: { left: actionsMenu.x, top: actionsMenu.y },
+          children: [
+            onView ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ghost",
+                onClick: () => {
+                  setActionsMenu(null);
+                  onView(actionsMenuItem);
+                },
+                children: "View"
+              }
+            ) : null,
+            onUpdate ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ghost",
+                disabled: !actionsUpdateAllowed,
+                onClick: () => {
+                  setActionsMenu(null);
+                  onUpdate(actionsMenuItem);
+                },
+                children: "Update"
+              }
+            ) : null,
+            onDelete ? /* @__PURE__ */ jsxRuntime.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 ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "record-tooltip", style: { left: tooltip.x, top: tooltip.y }, role: "tooltip", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "record-tooltip-title", children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(DetailList, { lines: tooltip.lines })