@worknice/whiteboard 0.68.1 → 0.70.0

package/dist/layouts/FullLayout.js

@@ -9,7 +9,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__ from "./F
 const FullLayout = ({ aside, asidePosition = {
     desktop: "asideLast",
     mobile: "asideFirst"
-}, backLink, navigation, children, header, mainNavChildren, menuState, navTitle, setMenuState, summary, toolbarChildren, padding = "default" })=>{
+}, navigation, children, header, mainNavChildren, menuState, setMenuState, summary, navToolbarStart, navFooter, padding = "default" })=>{
     const { pathname, router } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
     const toggleRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const navRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
@@ -84,43 +84,42 @@ const FullLayout = ({ aside, asidePosition = {
             [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].closed]: "closed" === menuState
         }),
         children: [
-            mainNavChildren ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        ref: toggleRef,
-                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toggle,
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__["default"], {
-                            onClick: ()=>{
-                                setMenuState((current)=>"open" === current ? "closed" : "open");
-                            },
-                            title: "Toggle Sidebar",
-                            type: "ghost",
-                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__["default"], {})
-                        })
-                    }),
-                    backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].back,
-                        children: backLink
-                    }) : null,
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("nav", {
-                        ref: navRef,
-                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].nav,
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toolbar,
-                                children: toolbarChildren
-                            }),
-                            navTitle ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navTitle,
-                                children: navTitle
-                            }) : null,
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navContent,
-                                children: mainNavChildren
-                            })
-                        ]
-                    })
-                ]
+            mainNavChildren ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("nav", {
+                    ref: navRef,
+                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].nav,
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("header", {
+                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navToolbar,
+                            children: [
+                                navToolbarStart ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navToolbarStart,
+                                    children: navToolbarStart
+                                }) : null,
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    ref: toggleRef,
+                                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navToolbarEnd,
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__["default"], {
+                                        onClick: ()=>{
+                                            setMenuState((current)=>"open" === current ? "closed" : "open");
+                                        },
+                                        title: "Toggle Sidebar",
+                                        type: "ghost",
+                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__["default"], {})
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navContent,
+                            children: mainNavChildren
+                        }),
+                        navFooter ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("footer", {
+                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navFooter,
+                            children: navFooter
+                        }) : null
+                    ]
+                })
             }) : null,
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].content, "default" === padding && __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].padded, aside && {

package/dist/layouts/FullLayout.module.js

@@ -3,11 +3,11 @@ const FullLayout_module_rslib_entry_ = {
     container: "container-lghvCT",
     open: "open-rMThLK",
     closed: "closed-iSkj26",
-    toggle: "toggle-GcG0Tq",
-    back: "back-vj3cdG",
     nav: "nav-PJYqK6",
-    toolbar: "toolbar-Jw7eYV",
-    navTitle: "navTitle-rDcRNN",
+    navToolbar: "navToolbar-fPH7h5",
+    navToolbarStart: "navToolbarStart-D3u8SP",
+    navToolbarEnd: "navToolbarEnd-dAB2oH",
+    navFooter: "navFooter-t_dTvk",
     navContent: "navContent-xOgco3",
     header: "header-BPDFUI",
     summary: "summary-yyotr2",

package/dist/layouts/FullLayout_module.css

@@ -1,3 +1,14 @@
+:root {
+  --nav-toggle-size: 38px;
+  --content-padded-horizontal-padding: var(--size-00);
+}
+
+@media (min-width: 768px) {
+  :root {
+    --content-padded-horizontal-padding: var(--size-p2);
+  }
+}
+
 @media (max-width: 768px) {
   body:has(.container-lghvCT.open-rMThLK) {
     overflow: hidden;
@@ -5,7 +16,13 @@
 }
 
 .container-lghvCT {
+  --nav-toggle-inset: calc(var(--nav-toggle-size)  + var(--size-n2));
   --nav-width: 100vw;
+  --page-header-inset: 0;
+}
+
+.closed-iSkj26:has(.nav-PJYqK6).container-lghvCT {
+  --page-header-inset: var(--nav-toggle-inset);
 }
 
 @media (min-width: 768px) {
@@ -24,62 +41,20 @@
   }
 }
 
-.toggle-GcG0Tq {
-  color: #000;
-  -webkit-user-select: none;
-  user-select: none;
-  z-index: 3;
-  border-radius: 11px;
-  position: fixed;
-  top: 16px;
-  left: 16px;
-}
-
-.closed-iSkj26 .toggle-GcG0Tq {
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  box-sizing: border-box;
-  color: var(--tone-default);
-  background: #ffffffb3;
-  border: .5px solid #3c3c435c;
-}
-
-.back-vj3cdG {
-  left: calc(var(--nav-width)  + 16px);
-  -webkit-user-select: none;
-  user-select: none;
-  z-index: 3;
-  transition: left .25s ease-in-out;
-  position: fixed;
-  top: 16px;
-}
-
-.closed-iSkj26 .back-vj3cdG {
-  left: 70px;
-}
-
-@media (max-width: 1440px) {
-  .container-lghvCT:not(.closed-iSkj26, .open-rMThLK) .back-vj3cdG {
-    left: 70px;
-  }
-}
-
 .nav-PJYqK6 {
   --accent-color: var(--color-purple-000);
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
   color: #000;
   justify-items: space-between;
   font-family: var(--typeface-system);
   bottom: 0;
   left: calc(-1 * var(--nav-width)  - 1px);
+  padding-top: var(--size-n1);
   -webkit-user-select: none;
   user-select: none;
   width: var(--nav-width);
   z-index: 2;
-  background: #ffffffb3;
-  grid-template-rows: auto auto minmax(0, 1fr);
-  padding-top: 16px;
+  border-right: .5px solid #3c3c435c;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   font-size: 17px;
   font-style: normal;
   font-weight: 400;
@@ -89,7 +64,20 @@
   position: fixed;
   top: 0;
   overflow-y: hidden;
-  box-shadow: .5px 0 #3c3c435c;
+}
+
+.nav-PJYqK6:before {
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  content: "";
+  pointer-events: none;
+  z-index: -1;
+  background: #ffffffb3;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
 }
 
 @media (min-width: 1440px) {
@@ -106,23 +94,76 @@
   left: 0;
 }
 
-.toolbar-Jw7eYV {
-  justify-content: flex-end;
+.navToolbar-fPH7h5 {
+  min-height: var(--nav-toggle-size);
+  padding: 0 var(--size-n1);
+  justify-content: space-between;
+  align-items: flex-start;
+  display: flex;
+}
+
+.navToolbarStart-D3u8SP {
+  flex: 1;
   align-items: center;
-  height: 38px;
-  padding: 0 16px;
+  min-width: 0;
   display: flex;
 }
 
-.navTitle-rDcRNN {
-  padding: 16px 16px 0;
+.navToolbarStart-D3u8SP button {
+  text-align: start;
+  justify-content: start;
+  max-width: 100%;
+}
+
+.navToolbarEnd-dAB2oH {
+  color: #000;
+  -webkit-user-select: none;
+  user-select: none;
+  border-radius: 11px;
+  flex-shrink: 0;
+}
+
+.closed-iSkj26 .navToolbarEnd-dAB2oH {
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  box-sizing: border-box;
+  color: var(--tone-default);
+  left: var(--content-padded-horizontal-padding);
+  top: var(--size-n1);
+  z-index: 3;
+  background: #ffffffb3;
+  border: .5px solid #3c3c435c;
+  transition: left .25s ease-in-out;
+  position: fixed;
+}
+
+.navFooter-t_dTvk {
+  gap: var(--size-n3);
+  padding: 0 var(--size-n1) var(--size-n1);
+  display: grid;
+}
+
+.navFooter-t_dTvk button {
+  justify-content: start;
+  width: 100%;
 }
 
 .navContent-xOgco3 {
-  padding: 16px;
+  margin-block: var(--size-n1);
+  min-height: 0;
+  padding-inline: var(--size-n1);
   overflow-y: auto;
 }
 
+.header-BPDFUI {
+  --page-header-inset: 0;
+  transition: padding-left .25s ease-in-out;
+}
+
+.closed-iSkj26:has(.nav-PJYqK6) .header-BPDFUI {
+  padding-left: var(--nav-toggle-inset);
+}
+
 @media (min-width: 1024px) {
   .header-BPDFUI {
     grid-column: 1 / -1;
@@ -173,16 +214,7 @@
 }
 
 .content-kaxfp0.padded-L3X4Ui {
-  padding-top: 60px;
-  padding-bottom: var(--size-00);
-  padding-left: var(--size-00);
-  padding-right: var(--size-00);
-}
-
-@media (min-width: 768px) {
-  .content-kaxfp0.padded-L3X4Ui {
-    padding: 60px var(--size-p3) var(--size-p3);
-  }
+  padding: var(--size-n1) var(--content-padded-horizontal-padding);
 }
 
 @media (min-width: 1024px) {
@@ -195,11 +227,3 @@
   }
 }
 
-@media (min-width: 1440px) {
-  .content-kaxfp0.padded-L3X4Ui {
-    padding-bottom: var(--size-p4);
-    padding-left: var(--size-p4);
-    padding-right: var(--size-p4);
-  }
-}
-

package/dist/presentation/Container_module.css

@@ -16,14 +16,14 @@
 
 .narrowWidthContent-jzMzq_ {
   width: 100%;
-  padding-left: var(--container-spacing);
-  padding-right: var(--container-spacing);
 }
 
-@media (min-width: 720px) {
+@media (min-width: 768px) {
   .narrowWidthContent-jzMzq_ {
+    --page-header-inset: 0;
     width: 900px;
     max-width: calc(100% - var(--container-spacing) * 2);
+    padding: 0 var(--size-00);
     margin-left: auto;
     margin-right: auto;
   }

package/dist/presentation/Header.js

@@ -8,6 +8,7 @@ const Header = ({ actions, children, description, id, tagName: Tag = "header" })
                 children: children
             }),
             actions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Header_module_js_6aa79f68__["default"].actions,
                 children: actions
             }) : null,
             description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {

package/dist/presentation/Header.module.js

@@ -1,6 +1,7 @@
 import "./Header_module.css";
 const Header_module_rslib_entry_ = {
     container: "container-LpNftB",
+    actions: "actions-M11a7I",
     description: "description-z2GJWi"
 };
 export { Header_module_rslib_entry_ as default };

package/dist/presentation/Header_module.css

@@ -1,17 +1,38 @@
 .container-LpNftB {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--size-n2) var(--size-p2);
   grid-template-columns: 1fr auto;
   display: grid;
 }
 
+.container-LpNftB > div:first-child {
+  min-width: 0;
+}
+
+.actions-M11a7I {
+  flex-shrink: 0;
+}
+
 .description-z2GJWi {
   grid-column: 1 / -1;
 }
 
 @media (max-width: 768px) {
-  .container-LpNftB {
-    grid-template-columns: 1fr;
+  .actions-M11a7I [data-button-part="label"] {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .actions-M11a7I :is(button, a, span):has([data-button-part="icon"]):has([data-button-part="label"]) {
+    padding: var(--size-n2);
+    gap: 0;
   }
 }
 

package/dist/presentation/PageHeader.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+type BackLink = {
+    href: string;
+    tooltip: ReactNode;
+};
+type Props = {
+    actions?: ReactNode;
+    backLink?: BackLink;
+    children: ReactNode;
+    description?: ReactNode;
+    id?: string;
+};
+declare const PageHeader: ({ actions, backLink, children, description, id }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;

package/dist/presentation/PageHeader.js

@@ -0,0 +1,36 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__ from "../controls/ButtonLink.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_ChevronLeft_js_95fe0c36__ from "../icons/components/ChevronLeft.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__ from "./Header.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PageHeader_module_js_aa2b4516__ from "./PageHeader.module.js";
+const PageHeader = ({ actions, backLink, children, description, id })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("header", {
+        className: __WEBPACK_EXTERNAL_MODULE__PageHeader_module_js_aa2b4516__["default"].pageHeader,
+        id: id,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__PageHeader_module_js_aa2b4516__["default"].top,
+                children: [
+                    backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__["default"], {
+                        href: backLink.href,
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_ChevronLeft_js_95fe0c36__["default"], {}),
+                        tooltip: backLink.tooltip,
+                        type: "ghost"
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__PageHeader_module_js_aa2b4516__["default"].main,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__["default"], {
+                            actions: actions,
+                            tagName: "div",
+                            children: children
+                        })
+                    })
+                ]
+            }),
+            description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: description
+            }) : null
+        ]
+    });
+const PageHeader_rslib_entry_ = PageHeader;
+export { PageHeader_rslib_entry_ as default };

package/dist/presentation/PageHeader.module.js

@@ -0,0 +1,7 @@
+import "./PageHeader_module.css";
+const PageHeader_module_rslib_entry_ = {
+    pageHeader: "pageHeader-RV66CE",
+    top: "top-wChgfn",
+    main: "main-KE919g"
+};
+export { PageHeader_module_rslib_entry_ as default };

package/dist/presentation/PageHeader_module.css

@@ -0,0 +1,19 @@
+.pageHeader-RV66CE {
+  gap: var(--size-n2);
+  flex-direction: column;
+  display: flex;
+}
+
+.top-wChgfn {
+  align-items: flex-start;
+  gap: var(--size-n2);
+  padding-left: var(--page-header-inset, 0);
+  transition: padding-left .25s ease-in-out;
+  display: flex;
+}
+
+.main-KE919g {
+  flex: 1;
+  min-width: 0;
+}
+

package/dist/presentation/RichList/RichList.d.ts

@@ -110,14 +110,18 @@ type CommonProps<Type> = {
      * Set with `pathName` if you want column filters and visibility saved between visits.
      * @default (omitted) persistence disabled.
      */
+    storageId?: string;
+    /**
+     * @deprecated Use `storageId`. Kept for backwards compatibility with `Table`.
+     */
     id?: string;
     /**
-     * Scope for saved list settings; use together with `id` so persistence is enabled.
+     * Scope for saved list settings; use together with `storageId` so persistence is enabled.
      * @default (omitted) persistence disabled.
      */
     pathName?: string;
     /**
-     * Schema for validating stored list state when using `id` and `pathName`.
+     * Schema for validating stored list state when using `storageId` and `pathName`.
      * @default (omitted) stored JSON is not parsed with Zod before use.
      */
     localStorageSchema?: ZodTypeAny;

package/dist/presentation/RichList/RichList.js

@@ -43,7 +43,8 @@ function mergeInlineSinglePersistedColumnFilters(tableColumnFilters, inlineColum
         }
     ];
 }
-const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_RICH_LIST_CONTENT_SLOTS, contentAlignment = "space-evenly", trailingSlot, href, onClick, rowActions, bulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, secondaryBulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, rowHeight = "medium", csvFilename, fillContainerHeight = false, compactBreakpoint: compactBreakpointProp, emptyState = "No results", id, pathName, localStorageSchema, header, onFiltersChange })=>{
+const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_RICH_LIST_CONTENT_SLOTS, contentAlignment = "space-evenly", trailingSlot, href, onClick, rowActions, bulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, secondaryBulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, rowHeight = "medium", csvFilename, fillContainerHeight = false, compactBreakpoint: compactBreakpointProp, emptyState = "No results", storageId, id, pathName, localStorageSchema, header, onFiltersChange })=>{
+    const resolvedStorageId = storageId ?? id;
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const [inlineSingleSelectChoice, setInlineSingleSelectChoice] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
     const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
@@ -154,6 +155,9 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
     const sortableEntryIds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>new Set(sortableEntries.map((entry)=>entry.id)), [
         sortableEntries
     ]);
+    const groupableEntryIds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>new Set(groupableEntries.map((entry)=>entry.id)), [
+        groupableEntries
+    ]);
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
         const tableFilteringForEntry = (entryId)=>!(void 0 !== inlineSingleSelectExcludedFromTableColumnId && entryId === inlineSingleSelectExcludedFromTableColumnId);
@@ -222,9 +226,9 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
         }), [
         entriesWithFilter
     ]);
-    const storageKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>pathName && id ? `${pathName}#${id}_richList` : null, [
+    const storageKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>pathName && resolvedStorageId ? `${pathName}#${resolvedStorageId}_richList` : null, [
         pathName,
-        id
+        resolvedStorageId
     ]);
     const localStorageData = "undefined" != typeof window && storageKey ? window.localStorage.getItem(storageKey) : null;
     const parsedLocalStorage = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
@@ -245,6 +249,10 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
         parsedLocalStorage.sorting,
         sortableEntryIds
     ]);
+    const initialGrouping = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(parsedLocalStorage.grouping ?? []).filter((id)=>groupableEntryIds.has(id)), [
+        groupableEntryIds,
+        parsedLocalStorage.grouping
+    ]);
     const mergedInitialPersistedColumnFilters = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>parsedLocalStorage.columnFilters ?? columnFiltersInitialState, [
         parsedLocalStorage.columnFilters,
         columnFiltersInitialState
@@ -333,7 +341,7 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
             columnVisibility: initialColumnVisibility,
             expanded: true,
             globalFilter: "",
-            grouping: parsedLocalStorage.grouping ?? [],
+            grouping: initialGrouping,
             sorting: initialSorting
         },
         defaultColumn: {
@@ -359,6 +367,38 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
         permanentlyHiddenColumnIds,
         table
     ]);
+    const hasRestoredLayoutFromStorageRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        if (hasRestoredLayoutFromStorageRef.current || !storageKey || !localStorageSchema) return;
+        hasRestoredLayoutFromStorageRef.current = true;
+        const raw = window.localStorage.getItem(storageKey);
+        if (!raw) return;
+        try {
+            const parsed = JSON.parse(raw);
+            localStorageSchema.parse(parsed);
+            const sorting = (parsed.sorting ?? []).filter((sort)=>sortableEntryIds.has(sort.id));
+            if (sorting.length > 0) table.setSorting(sorting);
+            const grouping = (parsed.grouping ?? []).filter((id)=>groupableEntryIds.has(id));
+            if (grouping.length > 0) table.setGrouping(grouping);
+            if (parsed.columnVisibility) table.setColumnVisibility((prev)=>{
+                const next = {
+                    ...prev,
+                    ...parsed.columnVisibility
+                };
+                for (const id of permanentlyHiddenColumnIds)next[id] = false;
+                return next;
+            });
+        } catch (error) {
+            console.error("Error restoring RichList layout from localStorage:", error);
+        }
+    }, [
+        groupableEntryIds,
+        localStorageSchema,
+        permanentlyHiddenColumnIds,
+        sortableEntryIds,
+        storageKey,
+        table
+    ]);
     const tableState = table.getState();
     const persistedSorting = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>tableState.sorting.filter((sort)=>sortableEntryIds.has(sort.id)), [
         sortableEntryIds,
@@ -376,7 +416,8 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
     ]);
     const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
+        if (!storageKey) return;
+        window.localStorage.setItem(storageKey, JSON.stringify({
             columnFilters: mergeInlineSinglePersistedColumnFilters(tableState.columnFilters, inlineSingleSelectExcludedFromTableColumnId, inlineSingleSelectOptionIdResolved),
             columnVisibility: tableState.columnVisibility,
             sorting: persistedSorting,
@@ -731,10 +772,17 @@ const RichListInner = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = E
 };
 const RICH_LIST_DEFER_ROW_THRESHOLD = 1000;
 const RichList = (props)=>{
-    const shouldDefer = props.data.length > RICH_LIST_DEFER_ROW_THRESHOLD;
-    const [ready, setReady] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(!shouldDefer);
+    const resolvedStorageId = props.storageId ?? props.id;
+    const persistenceEnabled = Boolean(resolvedStorageId);
+    const persistencePathReady = !persistenceEnabled || Boolean(props.pathName);
+    const shouldDefer = props.data.length > RICH_LIST_DEFER_ROW_THRESHOLD || persistenceEnabled;
+    const [ready, setReady] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(!shouldDefer && persistencePathReady);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (ready) return;
+        if (ready || !persistencePathReady) return;
+        if (!shouldDefer) {
+            setReady(true);
+            return;
+        }
         let innerHandle = 0;
         const outerHandle = requestAnimationFrame(()=>{
             innerHandle = requestAnimationFrame(()=>setReady(true));
@@ -744,7 +792,9 @@ const RichList = (props)=>{
             cancelAnimationFrame(innerHandle);
         };
     }, [
-        ready
+        persistencePathReady,
+        ready,
+        shouldDefer
     ]);
     return ready ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RichListInner, {
         ...props

package/dist/presentation/RichList/RichListRow.js

@@ -258,7 +258,8 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, anyRowCanBeSe
                             icon: action.icon,
                             tooltip: action.label,
                             href: action.href(rowOriginal),
-                            external: action.external
+                            external: action.external,
+                            download: action.download?.(rowOriginal)
                         }, action.id);
                         if ("onClick" === action.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                             id: action.id,