@richardmcquiston01/dashboard-widgets-toolkit 0.9.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
@@ -535,6 +550,27 @@ var DEFAULT_LABELS = {
   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",
@@ -1623,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([]),
@@ -1737,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();
@@ -1748,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" };
@@ -2033,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) {
@@ -2203,6 +2603,181 @@ function InlineConfirm({
     }
   );
 }
+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 };
@@ -2220,6 +2795,11 @@ function DashboardInner({
   onEditingChange,
   defaultLayout,
   toolbar = true,
+  activePage: activePageProp,
+  defaultActivePage,
+  onActivePageChange,
+  maxRows,
+  maxPages,
   onRetry,
   loadDetail,
   onOpenDetail,
@@ -2235,8 +2815,19 @@ 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 toggleMode = editMode === "toggle";
   const [editingState, setEditingState] = useState(defaultEditing);
@@ -2255,10 +2846,16 @@ function DashboardInner({
   );
   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(layout, definition.key)) : [];
-  const shown = editable ? visible.filter((definition) => !isMinimized(layout, definition.key)) : visible;
+  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);
@@ -2270,6 +2867,110 @@ function DashboardInner({
   function change(next) {
     if (next !== layout) onLayoutChange?.(next);
   }
+  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;
+      }
+      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);
@@ -2347,176 +3048,312 @@ function DashboardInner({
             ]
           }
         ),
-        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: () => change(showWidget(layout, definition.key)),
-              children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
-                definition.title
-              ]
-            },
-            definition.key
-          ))
-        ] }),
-        minimized.length > 0 && /* @__PURE__ */ jsxs(
+        paged && /* @__PURE__ */ jsx(
+          PageTabs,
+          {
+            pages,
+            activeKey,
+            idPrefix: instanceId,
+            panelId,
+            announcement: pageAnnouncement,
+            onSelect: selectPage
+          }
+        ),
+        controlsShown && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
+            role: "group",
+            "aria-label": labels.managePages,
+            className: "dwt-page-manage",
             children: [
-              /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
-              minimized.map((definition) => /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx(
                 "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
-                  ]
+                  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)
                 },
-                definition.key
-              ))
+                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 })
             ]
           }
         ),
-        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",
+        /* @__PURE__ */ jsxs(
+          PagePanel,
           {
-            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(definitions, layout, key, -1) !== layout;
-              const canMoveLater = !lock.move && moveWidgetBy(definitions, layout, key, 1) !== layout;
-              const actions = controlsShown ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                isLocked && /* @__PURE__ */ jsx(
-                  "span",
+            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",
                   {
-                    role: "img",
-                    className: "dwt-lock",
-                    "aria-label": lockLabel,
-                    title: lockLabel,
-                    children: /* @__PURE__ */ jsxs(
-                      "svg",
+                    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",
                       {
-                        viewBox: "0 0 16 16",
-                        width: "14",
-                        height: "14",
-                        "aria-hidden": "true",
-                        focusable: "false",
+                        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(
-                            "rect",
-                            {
-                              x: "3",
-                              y: "7",
-                              width: "10",
-                              height: "7",
-                              rx: "1.5",
-                              fill: "currentColor"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "path",
+                          /* @__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",
                             {
-                              d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2",
-                              fill: "none",
-                              stroke: "currentColor",
-                              strokeWidth: "1.4"
+                              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: () => change(moveWidgetBy(definitions, layout, key, -1)),
-                      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: slot(
+                      !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",
-                        "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" })
-                    }
-                  )
-                ] }),
-                !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),
-                  editing: toggleMode && controlsShown,
-                  ...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
-              );
-            })
+                        {
+                          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
+                    );
+                  })
+                }
+              )
+            ]
           }
         ),
         detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsx(
@@ -3175,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;