@richardmcquiston01/dashboard-widgets-toolkit 0.7.0 → 0.9.0

package/dist/react.cjs

@@ -524,6 +524,19 @@ 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`,
   opensInNewTab: "(opens in a new tab)",
   view: (title) => `View ${title}`,
   close: "Close",
@@ -1394,6 +1407,7 @@ function WidgetCard({
   columnSpan,
   width,
   widgetKey,
+  editing = false,
   headingLevel = 2,
   className,
   children
@@ -1438,6 +1452,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",
@@ -1570,6 +1585,45 @@ function ResolvedWidgetCard({
   );
 }
 
+// src/core/definition.ts
+var NOT_LOCKED = Object.freeze({
+  move: false,
+  hide: false,
+  minimize: false
+});
+var FULLY_LOCKED = Object.freeze({
+  move: true,
+  hide: true,
+  minimize: true
+});
+function resolveWidgetLock(definition) {
+  const setting = definition.locked;
+  if (setting === true) return FULLY_LOCKED;
+  if (setting === void 0 || setting === false) return NOT_LOCKED;
+  return {
+    move: setting.move === true,
+    hide: setting.hide === true,
+    minimize: setting.minimize === true
+  };
+}
+function sortDefinitions(definitions) {
+  return definitions.map((definition, index) => ({ definition, index })).sort(
+    (a, b) => (a.definition.sortOrder ?? 0) - (b.definition.sortOrder ?? 0) || a.index - b.index
+  ).map(({ definition }) => definition);
+}
+function isWidgetVisibleTo(definition, roles) {
+  if (definition.active === false) {
+    return false;
+  }
+  if (definition.roles === void 0 || definition.roles.length === 0) {
+    return true;
+  }
+  if (roles === void 0) {
+    return false;
+  }
+  return definition.roles.some((role) => roles.includes(role));
+}
+
 // src/core/layout.ts
 var EMPTY_LAYOUT = Object.freeze({
   order: Object.freeze([]),
@@ -1581,9 +1635,10 @@ function bySortOrder(items) {
     (a, b) => (a.item.sortOrder ?? 0) - (b.item.sortOrder ?? 0) || a.index - b.index
   ).map(({ item }) => item);
 }
-function visibleWidgets(definitions, layout) {
-  const hidden = new Set(layout.hidden);
-  const visible = definitions.filter((d) => !hidden.has(d.key));
+function isPinned(item) {
+  return resolveWidgetLock(item).move;
+}
+function viewerOrder(visible, layout) {
   const byKey = new Map(visible.map((d) => [d.key, d]));
   const ordered = [];
   for (const key of layout.order) {
@@ -1598,34 +1653,62 @@ function visibleWidgets(definitions, layout) {
   }
   return ordered;
 }
+function placeAroundPinned(visible, free) {
+  const slots = bySortOrder(visible).map(
+    (item) => isPinned(item) ? item : void 0
+  );
+  let next = 0;
+  return slots.map((pinned) => pinned ?? free[next++]);
+}
+function visibleWidgets(definitions, layout) {
+  const hidden = new Set(layout.hidden);
+  const visible = definitions.filter((d) => !hidden.has(d.key));
+  const ordered = viewerOrder(visible, layout);
+  if (!visible.some(isPinned)) return ordered;
+  return placeAroundPinned(
+    visible,
+    ordered.filter((item) => !isPinned(item))
+  );
+}
 function hiddenWidgets(definitions, layout) {
   const hidden = new Set(layout.hidden);
   return bySortOrder(definitions.filter((d) => hidden.has(d.key)));
 }
 function moveWidget(definitions, layout, key, toIndex) {
-  const current = visibleWidgets(definitions, layout).map(
-    (d) => d.key
-  );
-  const fromIndex = current.indexOf(key);
-  if (fromIndex === -1 || !Number.isInteger(toIndex) || toIndex < 0 || toIndex >= current.length || toIndex === fromIndex) {
+  const current = visibleWidgets(definitions, layout);
+  const fromIndex = current.findIndex((d) => d.key === key);
+  const mover = current[fromIndex];
+  if (mover === void 0 || !Number.isInteger(toIndex) || toIndex < 0 || toIndex >= current.length || toIndex === fromIndex || isPinned(mover) || isPinned(current[toIndex])) {
     return layout;
   }
-  const next = [...current];
-  next.splice(fromIndex, 1);
-  next.splice(toIndex, 0, key);
-  return { ...layout, order: next };
+  const freeSlots = freeSlotIndexes(current);
+  const free = current.filter((item) => !isPinned(item));
+  const fromFree = freeSlots.indexOf(fromIndex);
+  const toFree = freeSlots.indexOf(toIndex);
+  free.splice(fromFree, 1);
+  free.splice(toFree, 0, mover);
+  const next = placeAroundPinned(current, free);
+  return { ...layout, order: next.map((d) => d.key) };
+}
+function freeSlotIndexes(ordered) {
+  const slots = [];
+  ordered.forEach((item, index) => {
+    if (!isPinned(item)) slots.push(index);
+  });
+  return slots;
 }
 function moveWidgetBy(definitions, layout, key, offset) {
-  const current = visibleWidgets(definitions, layout).map(
-    (d) => d.key
-  );
-  const fromIndex = current.indexOf(key);
+  const current = visibleWidgets(definitions, layout);
+  const fromIndex = current.findIndex((d) => d.key === key);
   if (fromIndex === -1) return layout;
-  const toIndex = Math.max(
+  const freeSlots = freeSlotIndexes(current);
+  const fromFree = freeSlots.indexOf(fromIndex);
+  if (fromFree === -1) return layout;
+  const toFree = Math.max(
     0,
-    Math.min(current.length - 1, fromIndex + Math.trunc(offset))
+    Math.min(freeSlots.length - 1, fromFree + Math.trunc(offset))
   );
-  return moveWidget(definitions, layout, key, toIndex);
+  return moveWidget(definitions, layout, key, freeSlots[toFree]);
 }
 function isHidden(layout, key) {
   return layout.hidden.includes(key);
@@ -1656,6 +1739,23 @@ function restoreWidget(layout, key) {
 function toggleMinimized(layout, key) {
   return isMinimized(layout, key) ? restoreWidget(layout, key) : minimizeWidget(layout, key);
 }
+function enforceLocks(definitions, layout, options = {}) {
+  if (options.overrideLocks === true) return layout;
+  const noMove = /* @__PURE__ */ new Set();
+  const noHide = /* @__PURE__ */ new Set();
+  const noMinimize = /* @__PURE__ */ new Set();
+  for (const definition of definitions) {
+    const lock = resolveWidgetLock(definition);
+    if (lock.move) noMove.add(definition.key);
+    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 };
+}
 function nextSort(current, column) {
   if (current?.column !== column) return { column, direction: "asc" };
   return current.direction === "asc" ? { column, direction: "desc" } : void 0;
@@ -2054,10 +2154,74 @@ function DetailHost({
     }
   ) });
 }
+function InlineConfirm({
+  message,
+  onAnswer
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const noRef = react.useRef(null);
+  react.useEffect(() => {
+    noRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      role: "group",
+      "aria-label": message,
+      className: "dwt-confirm",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onAnswer(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "dwt-confirm-message", children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.confirmYes,
+            title: labels.confirmYes,
+            onClick: () => onAnswer(true),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+function withoutLock(definition) {
+  if (definition.locked === void 0) return definition;
+  const copy = { ...definition };
+  delete copy.locked;
+  return copy;
+}
 function DashboardInner({
   widgets,
-  layout = EMPTY_LAYOUT,
+  layout: savedLayout = EMPTY_LAYOUT,
   onLayoutChange,
+  overrideLocks = false,
+  editMode = "always",
+  editing: editingProp,
+  defaultEditing = false,
+  onEditingChange,
+  defaultLayout,
+  toolbar = true,
   onRetry,
   loadDetail,
   onOpenDetail,
@@ -2066,13 +2230,35 @@ function DashboardInner({
 }) {
   const slot = useSlotClassName();
   const { labels } = useWidgetSettings();
-  const definitions = widgets.map((w) => w.definition);
+  const definitions = widgets.map(
+    (w) => overrideLocks ? withoutLock(w.definition) : w.definition
+  );
+  const layout = enforceLocks(definitions, savedLayout);
   const byKey = new Map(
     widgets.map((w) => [w.definition.key, w])
   );
   const visible = visibleWidgets(definitions, layout);
   const hidden = hiddenWidgets(definitions, layout);
   const editable = onLayoutChange !== void 0;
+  const toggleMode = editMode === "toggle";
+  const [editingState, setEditingState] = react.useState(defaultEditing);
+  const editing = editingProp ?? editingState;
+  const controlsShown = editable && (!toggleMode || editing);
+  const [snapshot, setSnapshot] = react.useState(
+    void 0
+  );
+  if (toggleMode && editable && editing) {
+    if (snapshot === void 0) setSnapshot(savedLayout);
+  } else if (snapshot !== void 0) {
+    setSnapshot(void 0);
+  }
+  const [confirming, setConfirming] = react.useState(
+    void 0
+  );
+  const pending = editing ? confirming : void 0;
+  const [announcement, setAnnouncement] = react.useState("");
+  const toggleRef = react.useRef(null);
+  const resetRef = react.useRef(null);
   const minimized = editable ? visible.filter((definition) => isMinimized(layout, definition.key)) : [];
   const shown = editable ? visible.filter((definition) => !isMinimized(layout, definition.key)) : visible;
   const [detailKey, setDetailKey] = react.useState(void 0);
@@ -2086,129 +2272,267 @@ function DashboardInner({
   function change(next) {
     if (next !== layout) onLayoutChange?.(next);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slot("dashboard", "dwt-dashboard", className), children: [
-    editable && hidden.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
-      hidden.map((definition) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "+ " }),
-            definition.title
-          ]
-        },
-        definition.key
-      ))
-    ] }),
-    minimized.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
-          minimized.map((definition) => /* @__PURE__ */ jsxRuntime.jsxs(
+  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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: slot(
+        "dashboard",
+        "dwt-dashboard",
+        toggleMode && controlsShown && "dwt-dashboard--editing",
+        className
+      ),
+      children: [
+        editable && toggleMode && toolbar && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": labels.dashboardControls,
+            className: slot("toolbar", "dwt-toolbar"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  ref: toggleRef,
+                  type: "button",
+                  "aria-pressed": editing,
+                  className: slot("button", "dwt-button", "dwt-toolbar-toggle"),
+                  onClick: () => setEditing(!editing),
+                  children: editing ? labels.done : labels.customize
+                }
+              ),
+              editing && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: resetRef,
+                    type: "button",
+                    className: slot("button", "dwt-button"),
+                    onClick: () => setConfirming("reset"),
+                    children: labels.reset
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                InlineConfirm,
+                {
+                  message: pending === "reset" ? labels.confirmReset : labels.confirmRevert,
+                  onAnswer: answerConfirmation
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dwt-visually-hidden", "aria-live": "polite", children: announcement })
+            ]
+          }
+        ),
+        controlsShown && hidden.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
+          hidden.map((definition) => /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
               className: slot("button", "dwt-button", "dwt-show-button"),
-              "aria-label": labels.expand(definition.title),
-              onClick: () => change(toggleMinimized(layout, definition.key)),
+              "aria-label": labels.show(definition.title),
+              onClick: () => change(showWidget(layout, definition.key)),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "+ " }),
                 definition.title
               ]
             },
             definition.key
           ))
-        ]
-      }
-    ),
-    visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsxRuntime.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 actions = editable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: slot("button", "dwt-button", "dwt-icon-button"),
-                "aria-label": labels.moveEarlier(title),
-                title: labels.moveEarlier(title),
-                disabled: index === 0,
-                onClick: () => change(moveWidgetBy(definitions, layout, key, -1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2191" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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,
-                onClick: () => change(moveWidgetBy(definitions, layout, key, 1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2193" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 ? {
-                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__ */ jsxRuntime.jsx(
-      DetailHost,
-      {
-        widget: byKey.get(detailKey),
-        loadDetail,
-        onClose: () => setDetailKey(void 0)
-      },
-      detailKey
-    )
-  ] });
+        ] }),
+        minimized.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: slot("hiddenBar", "dwt-hidden-bar", "dwt-minimized-bar"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dwt-hidden-label", children: labels.minimizedWidgets }),
+              minimized.map((definition) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u25B8 " }),
+                    definition.title
+                  ]
+                },
+                definition.key
+              ))
+            ]
+          }
+        ),
+        visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : shown.length === 0 ? null : /* @__PURE__ */ jsxRuntime.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(definitions, layout, key, -1) !== layout;
+              const canMoveLater = !lock.move && moveWidgetBy(definitions, layout, key, 1) !== layout;
+              const actions = controlsShown ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                isLocked && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    role: "img",
+                    className: "dwt-lock",
+                    "aria-label": lockLabel,
+                    title: lockLabel,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 16 16",
+                        width: "14",
+                        height: "14",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "rect",
+                            {
+                              x: "3",
+                              y: "7",
+                              width: "10",
+                              height: "7",
+                              rx: "1.5",
+                              fill: "currentColor"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.4"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                !lock.move && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2191" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2193" })
+                    }
+                  )
+                ] }),
+                !lock.hide && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+              );
+            })
+          }
+        ),
+        detailKey !== void 0 && byKey.get(detailKey) !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          DetailHost,
+          {
+            widget: byKey.get(detailKey),
+            loadDetail,
+            onClose: () => setDetailKey(void 0)
+          },
+          detailKey
+        )
+      ]
+    }
+  );
 }
 function Dashboard({
   locale,
@@ -2232,25 +2556,6 @@ function Dashboard({
   );
 }
 
-// src/core/definition.ts
-function sortDefinitions(definitions) {
-  return definitions.map((definition, index) => ({ definition, index })).sort(
-    (a, b) => (a.definition.sortOrder ?? 0) - (b.definition.sortOrder ?? 0) || a.index - b.index
-  ).map(({ definition }) => definition);
-}
-function isWidgetVisibleTo(definition, roles) {
-  if (definition.active === false) {
-    return false;
-  }
-  if (definition.roles === void 0 || definition.roles.length === 0) {
-    return true;
-  }
-  if (roles === void 0) {
-    return false;
-  }
-  return definition.roles.some((role) => roles.includes(role));
-}
-
 // src/core/payload.ts
 var WIDGET_KINDS = [
   "TEXT",