@richardmcquiston01/dashboard-widgets-toolkit 0.8.0 → 0.10.0

package/dist/react.js

@@ -427,21 +427,36 @@ function fillColumnSpans(items, columns, largeSpan = 2) {
 function fillWidthSpans(items) {
   return placeAndFill(items, WIDTH_COLUMNS, itemWidth);
 }
+function placeRows(items) {
+  return placeAndFillRows(items, WIDTH_COLUMNS, itemWidth).rows;
+}
 function placeAndFill(items, columns, spanOf) {
+  return placeAndFillRows(items, columns, spanOf).spans;
+}
+function placeAndFillRows(items, columns, spanOf) {
   const trackCount = Math.max(1, Math.floor(columns));
   const spans = /* @__PURE__ */ new Map();
+  const rows = [];
   let row = [];
   let used = 0;
   function closeRow() {
+    if (row.length === 0) return;
     const fillers = row.filter(({ item }) => fillsWidth(item.fill));
     const leftover = trackCount - used;
+    const finalSpans = /* @__PURE__ */ new Map();
     if (fillers.length > 0) {
       const share = Math.floor(leftover / fillers.length);
       const remainder = leftover % fillers.length;
       fillers.forEach(({ item, span }, index) => {
-        spans.set(item.key, span + share + (index < remainder ? 1 : 0));
+        const grown = span + share + (index < remainder ? 1 : 0);
+        spans.set(item.key, grown);
+        finalSpans.set(item.key, grown);
       });
     }
+    rows.push({
+      keys: row.map(({ item }) => item.key),
+      spans: row.map(({ item, span }) => finalSpans.get(item.key) ?? span)
+    });
     row = [];
     used = 0;
   }
@@ -452,7 +467,7 @@ function placeAndFill(items, columns, spanOf) {
     used += span;
   }
   closeRow();
-  return spans;
+  return { spans, rows };
 }
 
 // src/core/scale.ts
@@ -522,6 +537,40 @@ var DEFAULT_LABELS = {
   moveLater: (title) => `Move ${title} later`,
   hiddenWidgets: "Hidden:",
   minimizedWidgets: "Minimized:",
+  customize: "Customize",
+  done: "Done",
+  reset: "Reset layout",
+  revertChanges: "Revert changes",
+  confirmReset: "Reset the layout to the default?",
+  confirmRevert: "Revert to how this looked before you started editing?",
+  confirmYes: "Yes",
+  confirmNo: "No",
+  editingOn: "Editing dashboard. Use the buttons on each card to reorder or hide it.",
+  editingOff: "Finished editing.",
+  dashboardControls: "Dashboard controls",
+  locked: (title) => `${title} is locked`,
+  lockedForViewers: (title) => `${title} is locked for viewers`,
+  pageBar: "Pages",
+  pageTabName: (index, count, title) => `Page ${index} of ${count}: ${title}`,
+  previousPageButton: "Previous page",
+  nextPageButton: "Next page",
+  managePages: "Manage pages",
+  addPage: "Add page",
+  renamePage: (title) => `Rename ${title}`,
+  pageTitle: "Page title",
+  savePageTitle: "Save page title",
+  cancelPageTitle: "Cancel renaming",
+  deletePage: (title) => `Delete ${title}`,
+  confirmDeletePage: (title) => `Delete the page "${title}" and move its widgets to another page?`,
+  movePageLeft: (title) => `Move ${title} page left`,
+  movePageRight: (title) => `Move ${title} page right`,
+  moveToPage: (title) => `Move ${title} to another page`,
+  moveToPagePlaceholder: "Move to page\u2026",
+  moveToPageOption: (title, rowsFree) => `${title} (${rowsFree} ${rowsFree === 1 ? "row" : "rows"} free)`,
+  newPageOption: "New page\u2026",
+  movedToPage: (title, pageTitle) => `${title} moved to ${pageTitle}`,
+  pageFull: (pageTitle, maxRows) => `Page "${pageTitle}" is full (${maxRows} rows). Move or hide a widget first.`,
+  emptyPage: "This page has no widgets. Move one here from another page.",
   opensInNewTab: "(opens in a new tab)",
   view: (title) => `View ${title}`,
   close: "Close",
@@ -1392,6 +1441,7 @@ function WidgetCard({
   columnSpan,
   width,
   widgetKey,
+  editing = false,
   headingLevel = 2,
   className,
   children
@@ -1436,6 +1486,7 @@ function WidgetCard({
         "dwt-card",
         `dwt-card--${status}`,
         minimized && "dwt-card--minimized",
+        editing && "dwt-card--editing",
         size !== void 0 && `dwt-card--size-${size}`,
         fillsHeight(fill) && "dwt-card--fill-height",
         fillsWidth(fill) && "dwt-card--fill-width",
@@ -1608,6 +1659,9 @@ function isWidgetVisibleTo(definition, roles) {
 }
 
 // src/core/layout.ts
+var MAX_PAGE_TITLE_LENGTH = 30;
+var MAX_PARSED_PAGES = 50;
+var MAX_PAGE_ROWS = 20;
 var EMPTY_LAYOUT = Object.freeze({
   order: Object.freeze([]),
   hidden: Object.freeze([]),
@@ -1722,6 +1776,22 @@ function restoreWidget(layout, key) {
 function toggleMinimized(layout, key) {
   return isMinimized(layout, key) ? restoreWidget(layout, key) : minimizeWidget(layout, key);
 }
+function mapLayoutLists(layout, change) {
+  const top = change(layout);
+  const pages = layout.pages?.map((page) => {
+    const next = change(page);
+    return next.order === page.order && next.hidden === page.hidden && next.minimized === page.minimized ? page : { ...page, ...next };
+  });
+  const pagesChanged = pages !== void 0 && pages.some((page, i) => page !== layout.pages?.[i]);
+  if (top.order === layout.order && top.hidden === layout.hidden && top.minimized === layout.minimized && !pagesChanged) {
+    return layout;
+  }
+  return {
+    ...layout,
+    ...top,
+    ...pages === void 0 ? {} : { pages }
+  };
+}
 function enforceLocks(definitions, layout, options = {}) {
   if (options.overrideLocks === true) return layout;
   const noMove = /* @__PURE__ */ new Set();
@@ -1733,11 +1803,337 @@ function enforceLocks(definitions, layout, options = {}) {
     if (lock.hide) noHide.add(definition.key);
     if (lock.minimize) noMinimize.add(definition.key);
   }
-  const without = (keys, drop) => keys.some((key) => drop.has(key)) ? keys.filter((key) => !drop.has(key)) : keys;
-  const order = without(layout.order, noMove);
-  const hidden = without(layout.hidden, noHide);
-  const minimized = without(layout.minimized, noMinimize);
-  return order === layout.order && hidden === layout.hidden && minimized === layout.minimized ? layout : { ...layout, order, hidden, minimized };
+  const without2 = (keys, drop) => keys.some((key) => drop.has(key)) ? keys.filter((key) => !drop.has(key)) : keys;
+  return mapLayoutLists(layout, (lists) => ({
+    order: without2(lists.order, noMove),
+    hidden: without2(lists.hidden, noHide),
+    minimized: without2(lists.minimized, noMinimize)
+  }));
+}
+
+// src/core/pages.ts
+var DEFAULT_PAGE_KEY = "default";
+var DEFAULT_PAGE_ROWS = 4;
+function rowsAllowed(page, options) {
+  const rows = page.maxRows ?? options.maxRows ?? DEFAULT_PAGE_ROWS;
+  return Math.max(1, Math.min(MAX_PAGE_ROWS, Math.floor(rows)));
+}
+function hasPages(layout) {
+  return layout.pages !== void 0 && layout.pages.length > 0;
+}
+function pageList(layout) {
+  if (layout.pages !== void 0 && layout.pages.length > 0) {
+    return layout.pages;
+  }
+  return [
+    {
+      key: DEFAULT_PAGE_KEY,
+      title: "Page 1",
+      order: layout.order,
+      hidden: layout.hidden,
+      minimized: layout.minimized
+    }
+  ];
+}
+function withExplicitPages(layout) {
+  if (hasPages(layout)) return layout;
+  return {
+    ...layout,
+    order: [],
+    hidden: [],
+    minimized: [],
+    pages: pageList(layout)
+  };
+}
+function sameKeys(a, b) {
+  return a === b || a.length === b.length && a.every((k, i) => k === b[i]);
+}
+function pageLayout(layout, pageKey) {
+  if (!hasPages(layout))
+    return pageKey === DEFAULT_PAGE_KEY ? layout : void 0;
+  const page = layout.pages?.find(
+    (p) => p.key === pageKey
+  );
+  if (page === void 0) return void 0;
+  const { pages, ...rest } = layout;
+  return {
+    ...rest,
+    order: page.order,
+    hidden: page.hidden,
+    minimized: page.minimized
+  };
+}
+function withPageLayout(layout, pageKey, next) {
+  const current = pageLayout(layout, pageKey);
+  if (current === void 0 || sameKeys(current.order, next.order) && sameKeys(current.hidden, next.hidden) && sameKeys(current.minimized, next.minimized)) {
+    return layout;
+  }
+  if (!hasPages(layout)) {
+    return {
+      ...layout,
+      order: next.order,
+      hidden: next.hidden,
+      minimized: next.minimized
+    };
+  }
+  return {
+    ...layout,
+    pages: (layout.pages ?? []).map(
+      (page) => page.key === pageKey ? {
+        ...page,
+        order: next.order,
+        hidden: next.hidden,
+        minimized: next.minimized
+      } : page
+    )
+  };
+}
+function normalizedTitle(title) {
+  return title.trim().normalize("NFKC").toLowerCase();
+}
+function resolvePageKey(layout, reference) {
+  if (reference === void 0 || reference === "") return void 0;
+  const pages = pageList(layout);
+  const byKey = pages.find((p) => p.key === reference);
+  if (byKey !== void 0) return byKey.key;
+  const wanted = normalizedTitle(reference);
+  return pages.find((p) => normalizedTitle(p.title) === wanted)?.key;
+}
+function homePageKey(layout, item) {
+  return resolvePageKey(layout, item.page) ?? pageList(layout)[0].key;
+}
+function assignPages(definitions, layout) {
+  const pages = pageList(layout);
+  const assigned = new Map(pages.map((p) => [p.key, []]));
+  for (const definition of definitions) {
+    let pageKey;
+    if (!resolveWidgetLock(definition).move) {
+      pageKey = pages.find(
+        (p) => p.order.includes(definition.key) || p.hidden.includes(definition.key)
+      )?.key;
+    }
+    assigned.get(pageKey ?? homePageKey(layout, definition))?.push(definition);
+  }
+  return assigned;
+}
+function pageOf(definitions, layout, key) {
+  for (const [pageKey, widgets] of assignPages(definitions, layout)) {
+    if (widgets.some((w) => w.key === key)) return pageKey;
+  }
+  return void 0;
+}
+function pageWidgets(definitions, layout, pageKey) {
+  const onPage = assignPages(definitions, layout).get(pageKey) ?? [];
+  const view = pageLayout(layout, pageKey);
+  return view === void 0 ? [] : visibleWidgets(onPage, view);
+}
+function pageRoom(definitions, layout, pageKey, options = {}) {
+  const page = pageList(layout).find(
+    (p) => p.key === pageKey
+  );
+  if (page === void 0) return void 0;
+  const maxRows = rowsAllowed(page, options);
+  const rowsUsed = placeRows(
+    pageWidgets(definitions, layout, pageKey)
+  ).length;
+  return { maxRows, rowsUsed, rowsFree: Math.max(0, maxRows - rowsUsed) };
+}
+function describePage(page) {
+  return `Page "${page.title}"`;
+}
+function titleOf(item) {
+  return item.title ?? item.key;
+}
+function checkTitle(layout, title, exceptKey) {
+  const trimmed = title.trim();
+  if (trimmed === "") return err("A page title must not be empty.");
+  if (trimmed.length > MAX_PAGE_TITLE_LENGTH) {
+    return err(
+      `Page title "${trimmed}" is ${trimmed.length} characters; the most is ${MAX_PAGE_TITLE_LENGTH}.`
+    );
+  }
+  const wanted = normalizedTitle(trimmed);
+  const clash = pageList(layout).find(
+    (p) => p.key !== exceptKey && normalizedTitle(p.title) === wanted
+  );
+  if (clash !== void 0) {
+    return err(`Another page is already called "${clash.title}".`);
+  }
+  return ok(trimmed);
+}
+function nextPageKey(layout) {
+  const keys = new Set(pageList(layout).map((p) => p.key));
+  let n = 1;
+  while (keys.has(`page-${n}`)) n += 1;
+  return `page-${n}`;
+}
+function nextPageTitle(layout) {
+  const used = new Set(
+    pageList(layout).map((p) => normalizedTitle(p.title))
+  );
+  let n = pageList(layout).length + 1;
+  while (used.has(normalizedTitle(`Page ${n}`))) n += 1;
+  return `Page ${n}`;
+}
+function addPage(layout, options = {}) {
+  if (pageList(layout).length >= MAX_PARSED_PAGES) {
+    return err(
+      `The layout already has ${MAX_PARSED_PAGES} pages, the most it can keep.`
+    );
+  }
+  const key = options.key ?? nextPageKey(layout);
+  if (pageList(layout).some((p) => p.key === key)) {
+    return err(`A page with the key "${key}" already exists.`);
+  }
+  const title = checkTitle(
+    layout,
+    options.title ?? nextPageTitle(layout)
+  );
+  if (!title.ok) return title;
+  const base = withExplicitPages(layout);
+  const page = {
+    key,
+    title: title.value,
+    order: [],
+    hidden: [],
+    minimized: []
+  };
+  return ok({ ...base, pages: [...base.pages ?? [], page] });
+}
+function renamePage(layout, pageKey, title) {
+  const page = pageList(layout).find(
+    (p) => p.key === pageKey
+  );
+  if (page === void 0) return err(`Page "${pageKey}" doesn't exist.`);
+  const checked = checkTitle(layout, title, pageKey);
+  if (!checked.ok) return checked;
+  if (checked.value === page.title) return ok(layout);
+  const base = withExplicitPages(layout);
+  return ok({
+    ...base,
+    pages: (base.pages ?? []).map(
+      (p) => p.key === pageKey ? { ...p, title: checked.value } : p
+    )
+  });
+}
+function movePage(layout, pageKey, offset) {
+  const pages = layout.pages ?? [];
+  const from = pages.findIndex((p) => p.key === pageKey);
+  if (from === -1) return layout;
+  const to = Math.max(
+    0,
+    Math.min(pages.length - 1, from + Math.trunc(offset))
+  );
+  if (to === from) return layout;
+  const next = [...pages];
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return { ...layout, pages: next };
+}
+function overflowing(definitions, layout, options) {
+  return pageList(layout).find(
+    (page) => placeRows(pageWidgets(definitions, layout, page.key)).length > rowsAllowed(page, options)
+  );
+}
+function removePage(definitions, layout, pageKey, options = {}) {
+  const pages = pageList(layout);
+  const index = pages.findIndex((p) => p.key === pageKey);
+  const page = pages[index];
+  if (page === void 0) return err(`Page "${pageKey}" doesn't exist.`);
+  if (pages.length === 1) {
+    return err(
+      `${describePage(page)} is the only page, so it can't be removed.`
+    );
+  }
+  const target = pages[index > 0 ? index - 1 : 1];
+  const merged = {
+    ...layout,
+    pages: pages.filter((p) => p.key !== pageKey).map(
+      (p) => p.key === target.key ? {
+        ...p,
+        order: index > 0 ? [...p.order, ...page.order] : [...page.order, ...p.order],
+        hidden: [...p.hidden, ...page.hidden],
+        minimized: [...p.minimized, ...page.minimized]
+      } : p
+    )
+  };
+  const full = overflowing(
+    definitions,
+    merged,
+    options
+  );
+  if (full !== void 0) {
+    return err(
+      `${describePage(page)} has widgets that don't fit on the other pages (${describePage(full)} would need more than ${rowsAllowed(full, options)} rows). Move or hide some first.`
+    );
+  }
+  return ok(merged);
+}
+function without(keys, key) {
+  return keys.includes(key) ? keys.filter((k) => k !== key) : keys;
+}
+function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {}) {
+  const widget = definitions.find((d) => d.key === widgetKey);
+  if (widget === void 0) {
+    return err(
+      `Widget "${widgetKey}" isn't one of the widgets, so it can't be moved to a page.`
+    );
+  }
+  const pages = pageList(layout);
+  const target = pages.find((p) => p.key === targetKey);
+  if (target === void 0) return err(`Page "${targetKey}" doesn't exist.`);
+  const sourceKey = pageOf(definitions, layout, widgetKey);
+  if (sourceKey === targetKey) return ok(layout);
+  if (resolveWidgetLock(widget).move) {
+    return err(
+      `Widget "${titleOf(widget)}" is locked against moving, so it can't be moved to ${describePage(target)}.`
+    );
+  }
+  const base = withExplicitPages(layout);
+  const source = (base.pages ?? []).find(
+    (p) => p.key === sourceKey
+  );
+  const hidden = source.hidden.includes(widgetKey);
+  const minimized = source.minimized.includes(widgetKey);
+  const targetOrder = pageWidgets(
+    definitions,
+    base,
+    targetKey
+  ).map((d) => d.key);
+  const moved = {
+    ...base,
+    pages: (base.pages ?? []).map((p) => {
+      if (p.key === sourceKey) {
+        return {
+          ...p,
+          order: without(p.order, widgetKey),
+          hidden: without(p.hidden, widgetKey),
+          minimized: without(p.minimized, widgetKey)
+        };
+      }
+      if (p.key === targetKey) {
+        return {
+          ...p,
+          order: hidden ? p.order : [...targetOrder, widgetKey],
+          hidden: hidden ? [...p.hidden, widgetKey] : p.hidden,
+          minimized: minimized ? [...p.minimized, widgetKey] : p.minimized
+        };
+      }
+      return p;
+    })
+  };
+  if (!hidden) {
+    const allowed = rowsAllowed(target, options);
+    const needed = placeRows(
+      pageWidgets(definitions, moved, targetKey)
+    ).length;
+    if (needed > allowed) {
+      return err(
+        `${describePage(target)} has no room for "${titleOf(widget)}": it would need row ${needed}, and the page allows ${allowed}.`
+      );
+    }
+  }
+  return ok(moved);
 }
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
@@ -2018,6 +2414,25 @@ function useDetailData(definition, load, enabled, fallback) {
   }, [enabled, load, fallback, definition, attempt]);
   return { state, reload: () => setAttempt((count) => count + 1) };
 }
+var NEW_PAGE_VALUE = "__new-page__";
+function PagePanel({
+  paged,
+  id,
+  labelledBy,
+  children
+}) {
+  if (!paged) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id,
+      "aria-labelledby": labelledBy,
+      className: "dwt-page-panel",
+      children
+    }
+  );
+}
 var NARROW_VIEWPORT_QUERY = "(max-width: 640px)";
 var WIDE_GRID_PX = 900;
 function useFillSpans(definitions, gridRef, twelve) {
@@ -2137,6 +2552,232 @@ function DetailHost({
     }
   ) });
 }
+function InlineConfirm({
+  message,
+  onAnswer
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const noRef = useRef(null);
+  useEffect(() => {
+    noRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "group",
+      "aria-label": message,
+      className: "dwt-confirm",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onAnswer(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { role: "alert", className: "dwt-confirm-message", children: message }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.confirmYes,
+            title: labels.confirmYes,
+            onClick: () => onAnswer(true),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: noRef,
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.confirmNo,
+            title: labels.confirmNo,
+            onClick: () => onAnswer(false),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PageTabs({
+  pages,
+  activeKey,
+  idPrefix,
+  panelId,
+  announcement,
+  onSelect
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const tabs = useRef(/* @__PURE__ */ new Map());
+  const activeIndex = pages.findIndex((p) => p.key === activeKey);
+  function onKeyDown(event, index) {
+    const last = pages.length - 1;
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        next = index === last ? 0 : index + 1;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        next = index === 0 ? last : index - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = last;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const target = pages[next];
+    if (target === void 0) return;
+    onSelect(target.key);
+    tabs.current.get(target.key)?.focus();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: slot("pageBar", "dwt-pages"), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: slot(
+          "button",
+          "dwt-button",
+          "dwt-icon-button",
+          "dwt-page-nav"
+        ),
+        "aria-label": labels.previousPageButton,
+        disabled: activeIndex <= 0,
+        onClick: () => onSelect(pages[activeIndex - 1].key),
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2039" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": labels.pageBar, className: "dwt-page-tabs", children: pages.map((page, index) => {
+      const selected = page.key === activeKey;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (element) => {
+            if (element === null) tabs.current.delete(page.key);
+            else tabs.current.set(page.key, element);
+          },
+          type: "button",
+          role: "tab",
+          id: `${idPrefix}-tab-${index}`,
+          "aria-selected": selected,
+          "aria-controls": panelId,
+          "aria-label": labels.pageTabName(
+            index + 1,
+            pages.length,
+            page.title
+          ),
+          title: page.title,
+          tabIndex: selected ? 0 : -1,
+          className: slot("button", "dwt-page-tab"),
+          onClick: () => onSelect(page.key),
+          onKeyDown: (event) => onKeyDown(event, index),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "dwt-page-tab-title", children: page.title }),
+            /* @__PURE__ */ jsx("span", { className: "dwt-page-dot", "aria-hidden": "true" })
+          ]
+        },
+        page.key
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: slot(
+          "button",
+          "dwt-button",
+          "dwt-icon-button",
+          "dwt-page-nav"
+        ),
+        "aria-label": labels.nextPageButton,
+        disabled: activeIndex === pages.length - 1,
+        onClick: () => onSelect(pages[activeIndex + 1].key),
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u203A" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "dwt-visually-hidden", "aria-live": "polite", children: announcement })
+  ] });
+}
+function PageRenameForm({
+  initial,
+  onSubmit,
+  onCancel
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const [title, setTitle] = useState(initial);
+  const [error, setError] = useState(void 0);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "dwt-page-rename",
+      onSubmit: (event) => {
+        event.preventDefault();
+        setError(onSubmit(title));
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onCancel();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            className: "dwt-page-title-input",
+            "aria-label": labels.pageTitle,
+            "aria-invalid": error !== void 0,
+            maxLength: MAX_PAGE_TITLE_LENGTH,
+            value: title,
+            onChange: (event) => setTitle(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.savePageTitle,
+            title: labels.savePageTitle,
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.cancelPageTitle,
+            title: labels.cancelPageTitle,
+            onClick: onCancel,
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" })
+          }
+        ),
+        error !== void 0 && /* @__PURE__ */ jsx("span", { role: "alert", className: "dwt-page-error", children: error })
+      ]
+    }
+  );
+}
 function withoutLock(definition) {
   if (definition.locked === void 0) return definition;
   const copy = { ...definition };
@@ -2148,6 +2789,17 @@ function DashboardInner({
   layout: savedLayout = EMPTY_LAYOUT,
   onLayoutChange,
   overrideLocks = false,
+  editMode = "always",
+  editing: editingProp,
+  defaultEditing = false,
+  onEditingChange,
+  defaultLayout,
+  toolbar = true,
+  activePage: activePageProp,
+  defaultActivePage,
+  onActivePageChange,
+  maxRows,
+  maxPages,
   onRetry,
   loadDetail,
   onOpenDetail,
@@ -2163,11 +2815,47 @@ function DashboardInner({
   const byKey = new Map(
     widgets.map((w) => [w.definition.key, w])
   );
-  const visible = visibleWidgets(definitions, layout);
-  const hidden = hiddenWidgets(definitions, layout);
+  const pages = pageList(layout);
+  const paged = pages.length >= 2;
+  const [activeState, setActiveState] = useState(
+    defaultActivePage
+  );
+  const requested = activePageProp ?? activeState;
+  const activePage = pages.find((page) => page.key === requested) ?? pages[0];
+  const activeKey = activePage.key;
+  const pageDefs = assignPages(definitions, layout).get(activeKey) ?? [];
+  const view = pageLayout(layout, activeKey) ?? layout;
+  const roomOptions = maxRows === void 0 ? {} : { maxRows };
+  const visible = visibleWidgets(pageDefs, view);
+  const hidden = hiddenWidgets(pageDefs, view);
   const editable = onLayoutChange !== void 0;
-  const minimized = editable ? visible.filter((definition) => isMinimized(layout, definition.key)) : [];
-  const shown = editable ? visible.filter((definition) => !isMinimized(layout, definition.key)) : visible;
+  const toggleMode = editMode === "toggle";
+  const [editingState, setEditingState] = useState(defaultEditing);
+  const editing = editingProp ?? editingState;
+  const controlsShown = editable && (!toggleMode || editing);
+  const [snapshot, setSnapshot] = useState(
+    void 0
+  );
+  if (toggleMode && editable && editing) {
+    if (snapshot === void 0) setSnapshot(savedLayout);
+  } else if (snapshot !== void 0) {
+    setSnapshot(void 0);
+  }
+  const [confirming, setConfirming] = useState(
+    void 0
+  );
+  const pending = editing ? confirming : void 0;
+  const [announcement, setAnnouncement] = useState("");
+  const [pageAnnouncement, setPageAnnouncement] = useState("");
+  const [pageError, setPageError] = useState(void 0);
+  const [pageEditor, setPageEditor] = useState(void 0);
+  const editorMode = pageEditor?.key === activeKey ? pageEditor.mode : void 0;
+  const instanceId = useId();
+  const panelId = `${instanceId}-panel`;
+  const toggleRef = useRef(null);
+  const resetRef = useRef(null);
+  const minimized = editable ? visible.filter((definition) => isMinimized(view, definition.key)) : [];
+  const shown = editable ? visible.filter((definition) => !isMinimized(view, definition.key)) : visible;
   const [detailKey, setDetailKey] = useState(void 0);
   const gridRef = useRef(null);
   const twelve = usesWidthColumns(shown);
@@ -2179,142 +2867,507 @@ function DashboardInner({
   function change(next) {
     if (next !== layout) onLayoutChange?.(next);
   }
-  return /* @__PURE__ */ jsxs("div", { className: slot("dashboard", "dwt-dashboard", className), children: [
-    editable && hidden.length > 0 && /* @__PURE__ */ jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
-      /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
-      hidden.map((definition) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: slot("button", "dwt-button", "dwt-show-button"),
-          "aria-label": labels.show(definition.title),
-          onClick: () => change(showWidget(layout, definition.key)),
-          children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
-            definition.title
-          ]
-        },
-        definition.key
-      ))
-    ] }),
-    minimized.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
-          minimized.map((definition) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: slot("button", "dwt-button", "dwt-show-button"),
-              "aria-label": labels.expand(definition.title),
-              onClick: () => change(toggleMinimized(layout, definition.key)),
-              children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
-                definition.title
-              ]
-            },
-            definition.key
-          ))
-        ]
+  function changePage(next) {
+    setPageError(void 0);
+    change(withPageLayout(layout, activeKey, next));
+  }
+  function selectPage(pageKey) {
+    const index = pages.findIndex((page) => page.key === pageKey);
+    if (index === -1) return;
+    if (activePageProp === void 0) setActiveState(pageKey);
+    onActivePageChange?.(pageKey);
+    setPageError(void 0);
+    setPageEditor(void 0);
+    setPageAnnouncement(
+      labels.pageTabName(
+        index + 1,
+        pages.length,
+        pages[index].title
+      )
+    );
+  }
+  function addPageAction() {
+    const added = addPage(layout);
+    if (!added.ok) {
+      setPageError(added.error);
+      return;
+    }
+    change(added.value);
+    const created = added.value.pages?.at(-1);
+    if (created !== void 0) {
+      if (activePageProp === void 0) setActiveState(created.key);
+      onActivePageChange?.(created.key);
+      setPageError(void 0);
+      setPageEditor({ mode: "rename", key: created.key });
+    }
+  }
+  function renamePageAction(title) {
+    const renamed = renamePage(layout, activeKey, title);
+    if (!renamed.ok) return renamed.error;
+    change(renamed.value);
+    setPageEditor(void 0);
+    return void 0;
+  }
+  function deletePageAction() {
+    const index = pages.findIndex((page) => page.key === activeKey);
+    const removed = removePage(definitions, layout, activeKey, roomOptions);
+    setPageEditor(void 0);
+    if (!removed.ok) {
+      setPageError(removed.error);
+      return;
+    }
+    const neighbor = pages[index > 0 ? index - 1 : 1];
+    change(removed.value);
+    if (neighbor !== void 0) selectPage(neighbor.key);
+  }
+  function moveWidgetAction(widgetKey, targetKey) {
+    let target = targetKey;
+    let base = layout;
+    if (targetKey === NEW_PAGE_VALUE) {
+      const added = addPage(layout);
+      if (!added.ok) {
+        setPageError(added.error);
+        return;
       }
-    ),
-    visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: gridRef,
-        className: slot("grid", "dwt-grid", twelve && "dwt-grid--twelve"),
-        children: shown.map((definition, index) => {
-          const widget = byKey.get(
-            definition.key
-          );
-          if (widget === void 0) return null;
-          const key = definition.key;
-          const title = definition.title;
-          const lock = resolveWidgetLock(definition);
-          const canMoveEarlier = !lock.move && moveWidgetBy(definitions, layout, key, -1) !== layout;
-          const canMoveLater = !lock.move && moveWidgetBy(definitions, layout, key, 1) !== layout;
-          const actions = editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            !lock.move && /* @__PURE__ */ jsxs(Fragment, { children: [
+      base = added.value;
+      target = (added.value.pages?.at(-1)).key;
+    }
+    const moved = moveWidgetToPage(
+      definitions,
+      base,
+      widgetKey,
+      target,
+      roomOptions
+    );
+    if (!moved.ok) {
+      setPageError(moved.error);
+      return;
+    }
+    setPageError(void 0);
+    change(moved.value);
+    const destination = moved.value.pages?.find(
+      (page) => page.key === target
+    );
+    setPageAnnouncement(
+      labels.movedToPage(
+        byKey.get(widgetKey)?.definition.title ?? widgetKey,
+        destination?.title ?? target
+      )
+    );
+  }
+  function showAction(widgetKey) {
+    const next = withPageLayout(
+      layout,
+      activeKey,
+      showWidget(view, widgetKey)
+    );
+    if (hasPages(next)) {
+      const room = pageRoom(definitions, next, activeKey, roomOptions);
+      if (room !== void 0 && room.rowsUsed > room.maxRows) {
+        setPageError(labels.pageFull(activePage.title, room.maxRows));
+        return;
+      }
+    }
+    setPageError(void 0);
+    change(next);
+  }
+  function setEditing(next) {
+    if (editingProp === void 0) setEditingState(next);
+    onEditingChange?.(next);
+    setAnnouncement(next ? labels.editingOn : labels.editingOff);
+    setConfirming(void 0);
+  }
+  function answerConfirmation(yes) {
+    const which = pending;
+    setConfirming(void 0);
+    if (yes && which === "reset") {
+      change(enforceLocks(definitions, defaultLayout ?? EMPTY_LAYOUT));
+    } else if (yes && which === "revert" && snapshot !== void 0) {
+      change(snapshot);
+    }
+    (which === "revert" ? toggleRef : resetRef).current?.focus();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: slot(
+        "dashboard",
+        "dwt-dashboard",
+        toggleMode && controlsShown && "dwt-dashboard--editing",
+        className
+      ),
+      children: [
+        editable && toggleMode && toolbar && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": labels.dashboardControls,
+            className: slot("toolbar", "dwt-toolbar"),
+            children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
+                  ref: toggleRef,
                   type: "button",
-                  className: slot(
-                    "button",
-                    "dwt-button",
-                    "dwt-icon-button"
-                  ),
-                  "aria-label": labels.moveEarlier(title),
-                  title: labels.moveEarlier(title),
-                  disabled: index === 0 || !canMoveEarlier,
-                  onClick: () => change(moveWidgetBy(definitions, layout, key, -1)),
-                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
+                  "aria-pressed": editing,
+                  className: slot("button", "dwt-button", "dwt-toolbar-toggle"),
+                  onClick: () => setEditing(!editing),
+                  children: editing ? labels.done : labels.customize
                 }
               ),
+              editing && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: resetRef,
+                    type: "button",
+                    className: slot("button", "dwt-button"),
+                    onClick: () => setConfirming("reset"),
+                    children: labels.reset
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button"),
+                    disabled: snapshot === void 0 || savedLayout === snapshot,
+                    onClick: () => setConfirming("revert"),
+                    children: labels.revertChanges
+                  }
+                )
+              ] }),
+              pending !== void 0 && /* @__PURE__ */ jsx(
+                InlineConfirm,
+                {
+                  message: pending === "reset" ? labels.confirmReset : labels.confirmRevert,
+                  onAnswer: answerConfirmation
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "dwt-visually-hidden", "aria-live": "polite", children: announcement })
+            ]
+          }
+        ),
+        paged && /* @__PURE__ */ jsx(
+          PageTabs,
+          {
+            pages,
+            activeKey,
+            idPrefix: instanceId,
+            panelId,
+            announcement: pageAnnouncement,
+            onSelect: selectPage
+          }
+        ),
+        controlsShown && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": labels.managePages,
+            className: "dwt-page-manage",
+            children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  className: slot(
-                    "button",
-                    "dwt-button",
-                    "dwt-icon-button"
-                  ),
-                  "aria-label": labels.moveLater(title),
-                  title: labels.moveLater(title),
-                  disabled: index === shown.length - 1 || !canMoveLater,
-                  onClick: () => change(moveWidgetBy(definitions, layout, key, 1)),
-                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
+                  className: slot("button", "dwt-button"),
+                  disabled: maxPages !== void 0 && pages.length >= maxPages,
+                  onClick: addPageAction,
+                  children: labels.addPage
+                }
+              ),
+              paged && editorMode === "rename" && /* @__PURE__ */ jsx(
+                PageRenameForm,
+                {
+                  initial: activePage.title,
+                  onSubmit: renamePageAction,
+                  onCancel: () => setPageEditor(void 0)
+                },
+                activeKey
+              ),
+              paged && editorMode !== "rename" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-icon-button"),
+                    "aria-label": labels.renamePage(activePage.title),
+                    title: labels.renamePage(activePage.title),
+                    onClick: () => setPageEditor({ mode: "rename", key: activeKey }),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u270E" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-icon-button"),
+                    "aria-label": labels.movePageLeft(activePage.title),
+                    title: labels.movePageLeft(activePage.title),
+                    disabled: pages[0]?.key === activeKey,
+                    onClick: () => change(movePage(layout, activeKey, -1)),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2190" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-icon-button"),
+                    "aria-label": labels.movePageRight(activePage.title),
+                    title: labels.movePageRight(activePage.title),
+                    disabled: pages.at(-1)?.key === activeKey,
+                    onClick: () => change(movePage(layout, activeKey, 1)),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2192" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-icon-button"),
+                    "aria-label": labels.deletePage(activePage.title),
+                    title: labels.deletePage(activePage.title),
+                    onClick: () => setPageEditor({ mode: "delete", key: activeKey }),
+                    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                  }
+                )
+              ] }),
+              paged && editorMode === "delete" && /* @__PURE__ */ jsx(
+                InlineConfirm,
+                {
+                  message: labels.confirmDeletePage(activePage.title),
+                  onAnswer: (yes) => yes ? deletePageAction() : setPageEditor(void 0)
+                }
+              ),
+              pageError !== void 0 && /* @__PURE__ */ jsx("span", { role: "alert", className: "dwt-page-error", children: pageError })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PagePanel,
+          {
+            paged,
+            id: panelId,
+            labelledBy: `${instanceId}-tab-${pages.findIndex((p) => p.key === activeKey)}`,
+            children: [
+              controlsShown && hidden.length > 0 && /* @__PURE__ */ jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
+                /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
+                hidden.map((definition) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot("button", "dwt-button", "dwt-show-button"),
+                    "aria-label": labels.show(definition.title),
+                    onClick: () => showAction(definition.key),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
+                      definition.title
+                    ]
+                  },
+                  definition.key
+                ))
+              ] }),
+              minimized.length > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
+                    minimized.map((definition) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: slot("button", "dwt-button", "dwt-show-button"),
+                        "aria-label": labels.expand(definition.title),
+                        onClick: () => changePage(toggleMinimized(view, definition.key)),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
+                          definition.title
+                        ]
+                      },
+                      definition.key
+                    ))
+                  ]
+                }
+              ),
+              visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: paged && pageDefs.length === 0 ? labels.emptyPage : definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: gridRef,
+                  className: slot("grid", "dwt-grid", twelve && "dwt-grid--twelve"),
+                  children: shown.map((definition, index) => {
+                    const widget = byKey.get(
+                      definition.key
+                    );
+                    if (widget === void 0) return null;
+                    const key = definition.key;
+                    const title = definition.title;
+                    const lock = resolveWidgetLock(definition);
+                    const ownLock = resolveWidgetLock(
+                      widget.definition
+                    );
+                    const isLocked = ownLock.move || ownLock.hide || ownLock.minimize;
+                    const lockLabel = overrideLocks ? labels.lockedForViewers(title) : labels.locked(title);
+                    const canMoveEarlier = !lock.move && moveWidgetBy(pageDefs, view, key, -1) !== view;
+                    const canMoveLater = !lock.move && moveWidgetBy(pageDefs, view, key, 1) !== view;
+                    const actions = controlsShown ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      isLocked && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          role: "img",
+                          className: "dwt-lock",
+                          "aria-label": lockLabel,
+                          title: lockLabel,
+                          children: /* @__PURE__ */ jsxs(
+                            "svg",
+                            {
+                              viewBox: "0 0 16 16",
+                              width: "14",
+                              height: "14",
+                              "aria-hidden": "true",
+                              focusable: "false",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "rect",
+                                  {
+                                    x: "3",
+                                    y: "7",
+                                    width: "10",
+                                    height: "7",
+                                    rx: "1.5",
+                                    fill: "currentColor"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.4"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      !lock.move && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: slot(
+                              "button",
+                              "dwt-button",
+                              "dwt-icon-button"
+                            ),
+                            "aria-label": labels.moveEarlier(title),
+                            title: labels.moveEarlier(title),
+                            disabled: index === 0 || !canMoveEarlier,
+                            onClick: () => changePage(moveWidgetBy(pageDefs, view, key, -1)),
+                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: slot(
+                              "button",
+                              "dwt-button",
+                              "dwt-icon-button"
+                            ),
+                            "aria-label": labels.moveLater(title),
+                            title: labels.moveLater(title),
+                            disabled: index === shown.length - 1 || !canMoveLater,
+                            onClick: () => changePage(moveWidgetBy(pageDefs, view, key, 1)),
+                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
+                          }
+                        ),
+                        paged && /* @__PURE__ */ jsxs(
+                          "select",
+                          {
+                            className: "dwt-move-select",
+                            "aria-label": labels.moveToPage(title),
+                            value: "",
+                            onChange: (event) => {
+                              if (event.target.value !== "") {
+                                moveWidgetAction(key, event.target.value);
+                              }
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("option", { value: "", children: labels.moveToPagePlaceholder }),
+                              pages.filter((page) => page.key !== activeKey).map((page) => /* @__PURE__ */ jsx("option", { value: page.key, children: labels.moveToPageOption(
+                                page.title,
+                                pageRoom(
+                                  definitions,
+                                  layout,
+                                  page.key,
+                                  roomOptions
+                                )?.rowsFree ?? 0
+                              ) }, page.key)),
+                              (maxPages === void 0 || pages.length < maxPages) && /* @__PURE__ */ jsx("option", { value: NEW_PAGE_VALUE, children: labels.newPageOption })
+                            ]
+                          }
+                        )
+                      ] }),
+                      !lock.hide && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: slot(
+                            "button",
+                            "dwt-button",
+                            "dwt-icon-button"
+                          ),
+                          "aria-label": labels.hide(title),
+                          title: labels.hide(title),
+                          onClick: () => changePage(hideWidget(view, key)),
+                          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                        }
+                      )
+                    ] }) : void 0;
+                    const viewable = resolveDetailOptions(definition) !== void 0 && (onOpenDetail !== void 0 || loadDetail !== void 0 || widget.status === "ok" && deriveDetailData(widget.data) !== void 0);
+                    return /* @__PURE__ */ jsx(
+                      ResolvedWidgetCard,
+                      {
+                        widget,
+                        ...viewable ? {
+                          onView: () => onOpenDetail === void 0 ? setDetailKey(key) : onOpenDetail(key)
+                        } : {},
+                        ...spanProps(spans, key),
+                        ...widthProps(twelve, definition),
+                        minimized: isMinimized(view, key),
+                        editing: toggleMode && controlsShown,
+                        ...actions === void 0 ? {} : { actions },
+                        ...editable && !lock.minimize ? {
+                          onToggleMinimized: () => changePage(toggleMinimized(view, key))
+                        } : {},
+                        ...headingLevel === void 0 ? {} : { headingLevel },
+                        ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(key) }
+                      },
+                      key
+                    );
+                  })
                 }
               )
-            ] }),
-            !lock.hide && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: slot("button", "dwt-button", "dwt-icon-button"),
-                "aria-label": labels.hide(title),
-                title: labels.hide(title),
-                onClick: () => change(hideWidget(layout, key)),
-                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
-              }
-            )
-          ] }) : void 0;
-          const viewable = resolveDetailOptions(definition) !== void 0 && (onOpenDetail !== void 0 || loadDetail !== void 0 || widget.status === "ok" && deriveDetailData(widget.data) !== void 0);
-          return /* @__PURE__ */ jsx(
-            ResolvedWidgetCard,
-            {
-              widget,
-              ...viewable ? {
-                onView: () => onOpenDetail === void 0 ? setDetailKey(key) : onOpenDetail(key)
-              } : {},
-              ...spanProps(spans, key),
-              ...widthProps(twelve, definition),
-              minimized: isMinimized(layout, key),
-              ...actions === void 0 ? {} : { actions },
-              ...editable && !lock.minimize ? {
-                onToggleMinimized: () => change(toggleMinimized(layout, key))
-              } : {},
-              ...headingLevel === void 0 ? {} : { headingLevel },
-              ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(key) }
-            },
-            key
-          );
-        })
-      }
-    ),
-    detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
-      DetailHost,
-      {
-        widget: byKey.get(detailKey),
-        loadDetail,
-        onClose: () => setDetailKey(void 0)
-      },
-      detailKey
-    )
-  ] });
+            ]
+          }
+        ),
+        detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
+          DetailHost,
+          {
+            widget: byKey.get(detailKey),
+            loadDetail,
+            onClose: () => setDetailKey(void 0)
+          },
+          detailKey
+        )
+      ]
+    }
+  );
 }
 function Dashboard({
   locale,
@@ -2959,8 +4012,21 @@ function useWidgets(definitions, providers, context, options = {}) {
       },
       { rootMargin }
     );
-    grid.querySelectorAll("[data-widget-key]").forEach((card) => observer.observe(card));
-    return () => observer.disconnect();
+    const observed = /* @__PURE__ */ new WeakSet();
+    const observeNewCards = () => {
+      grid.querySelectorAll("[data-widget-key]").forEach((card) => {
+        if (observed.has(card)) return;
+        observed.add(card);
+        observer.observe(card);
+      });
+    };
+    observeNewCards();
+    const mutations = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(observeNewCards);
+    mutations?.observe(grid, { childList: true, subtree: true });
+    return () => {
+      mutations?.disconnect();
+      observer.disconnect();
+    };
   }, [loader, loadWhen, rootMargin, cardKeys]);
   useEffect(() => {
     if (loader === null || !(refreshMs > 0)) return void 0;