@richardmcquiston01/dashboard-widgets-toolkit 0.14.0 → 0.16.0

package/dist/react.cjs

@@ -830,6 +830,14 @@ var DEFAULT_LABELS = {
   menuMoveLater: "Move later",
   menuHide: "Hide",
   menuOptions: "Options\u2026",
+  menuDuplicate: "Duplicate",
+  duplicate: (title) => `Duplicate ${title}`,
+  duplicateBlocked: (title, reason) => `Duplicate ${title} (unavailable: ${reason})`,
+  duplicated: (title) => `Duplicated ${title}`,
+  optionsDelete: "Delete this widget",
+  confirmDelete: "Delete this widget? Its settings are lost.",
+  deleted: (title) => `Deleted ${title}`,
+  suggestedViewTitle: (title, viewLabel) => `${title} ${viewLabel}`,
   optionsFor: (title) => `Options for ${title}`,
   optionsTitleField: "Title",
   titleInUse: "Another widget already uses this title.",
@@ -837,6 +845,8 @@ var DEFAULT_LABELS = {
   widthDefault: "Default",
   widthOption: (width, share) => `${width} of 12 (${share})`,
   optionsFlexible: "Grow to fill empty space in the row",
+  optionsViewField: "View",
+  viewDefault: (viewLabel) => `${viewLabel} (default)`,
   optionsDeclared: "Data",
   apply: "Apply",
   cancel: "Cancel",
@@ -1937,13 +1947,15 @@ var NOT_LOCKED = Object.freeze({
   move: false,
   hide: false,
   minimize: false,
-  options: false
+  options: false,
+  clone: false
 });
 var FULLY_LOCKED = Object.freeze({
   move: true,
   hide: true,
   minimize: true,
-  options: true
+  options: true,
+  clone: true
 });
 function resolveWidgetLock(definition) {
   const setting = definition.locked;
@@ -1953,7 +1965,8 @@ function resolveWidgetLock(definition) {
     move: setting.move === true,
     hide: setting.hide === true,
     minimize: setting.minimize === true,
-    options: setting.options === true
+    options: setting.options === true,
+    clone: setting.clone === true
   };
 }
 function sortDefinitions(definitions) {
@@ -1974,6 +1987,282 @@ function isWidgetVisibleTo(definition, roles) {
   return definition.roles.some((role) => roles.includes(role));
 }
 
+// src/core/payload.ts
+var WIDGET_KINDS = [
+  "TEXT",
+  "KPI",
+  "GAUGE",
+  "TABLE",
+  "BAR_LIST",
+  "ALERT_LIST",
+  "GRAPH"
+];
+function isWidgetKind(value) {
+  return typeof value === "string" && WIDGET_KINDS.includes(value);
+}
+var VALUE_FORMATS = ["number", "currency", "percent"];
+var MAX_GRAPH_SERIES = 8;
+var DEFAULT_EMPTY_TEXT = "Nothing to show yet.";
+function isWidgetEmptyState(payload) {
+  return "empty" in payload && payload.empty === true;
+}
+function emptyTextFor(payload) {
+  if (isWidgetEmptyState(payload)) {
+    return payload.text;
+  }
+  switch (payload.kind) {
+    case "TABLE":
+      return payload.rows.length === 0 ? DEFAULT_EMPTY_TEXT : null;
+    case "BAR_LIST":
+      return payload.items.length === 0 ? DEFAULT_EMPTY_TEXT : null;
+    case "ALERT_LIST":
+      return payload.items.length === 0 ? payload.emptyText : null;
+    case "GRAPH":
+      return payload.series.every((series) => series.points.length === 0) ? DEFAULT_EMPTY_TEXT : null;
+    case "TEXT":
+    case "KPI":
+    case "GAUGE":
+      return null;
+  }
+}
+
+// src/core/views.ts
+var BASE_VIEW_KEY = "base";
+var VIEW_CONVERSIONS = {
+  tableToBarList: { from: "TABLE", to: "BAR_LIST" },
+  tableToGraph: { from: "TABLE", to: "GRAPH" },
+  barListToTable: { from: "BAR_LIST", to: "TABLE" },
+  graphToTable: { from: "GRAPH", to: "TABLE" },
+  barListToGraph: { from: "BAR_LIST", to: "GRAPH" }
+};
+var KIND_LABELS = {
+  TEXT: "Text",
+  KPI: "Number",
+  GAUGE: "Gauge",
+  TABLE: "Table",
+  BAR_LIST: "Bars",
+  ALERT_LIST: "List",
+  GRAPH: "Chart"
+};
+function kindLabel(kind) {
+  return KIND_LABELS[kind];
+}
+function hasViews(item) {
+  return item.views !== void 0 && item.views.length > 0;
+}
+function findView(item, key) {
+  return item.views?.find((view) => view.key === key);
+}
+function viewChoices(item) {
+  if (!hasViews(item)) return [];
+  return [
+    {
+      key: BASE_VIEW_KEY,
+      label: item.baseViewLabel ?? kindLabel(item.kind),
+      kind: item.kind
+    },
+    ...(item.views ?? []).map(({ key, label, kind }) => ({
+      key,
+      label,
+      kind
+    }))
+  ];
+}
+function isKnownView(item, key) {
+  return key !== void 0 && (key === BASE_VIEW_KEY || findView(item, key) !== void 0);
+}
+function effectiveViewKey(item, chosen) {
+  if (!hasViews(item)) return BASE_VIEW_KEY;
+  if (isKnownView(item, chosen)) return chosen;
+  if (isKnownView(item, item.defaultView)) return item.defaultView;
+  return BASE_VIEW_KEY;
+}
+function cellValue2(cell) {
+  const value = cell?.value;
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function columnName(table, index) {
+  return table.columns[index]?.label ?? `#${index + 1}`;
+}
+function checkColumn(table, index, field, context) {
+  if (!Number.isInteger(index) || index < 0 || index >= table.columns.length) {
+    return `${context.where}: ${field} column ${index} does not exist (the table has ${table.columns.length} columns, numbered from 0).`;
+  }
+  return void 0;
+}
+function numericColumn(table, index, context) {
+  const numbers = [];
+  for (const [rowIndex, row] of table.rows.entries()) {
+    const value = cellValue2(row[index]);
+    if (value === void 0) {
+      return err(
+        `${context.where}: row ${rowIndex + 1}, column ${index + 1} ("${columnName(table, index)}") has no numeric value. Add value to the cells.`
+      );
+    }
+    numbers.push(value);
+  }
+  return ok(numbers);
+}
+function tableToBarList(table, conversion, context) {
+  const bad = checkColumn(table, conversion.label, "label", context) ?? checkColumn(table, conversion.value, "value", context);
+  if (bad !== void 0) return err(bad);
+  const numbers = numericColumn(table, conversion.value, context);
+  if (!numbers.ok) return numbers;
+  const items = table.rows.map((row, index) => ({
+    label: row[conversion.label]?.text ?? "",
+    value: numbers.value[index],
+    display: row[conversion.value]?.text ?? String(numbers.value[index])
+  }));
+  return ok({ kind: "BAR_LIST", items });
+}
+function tableToGraph(table, conversion, context) {
+  if (conversion.values.length === 0 || conversion.values.length > MAX_GRAPH_SERIES) {
+    return err(
+      `${context.where}: a chart needs 1 to ${MAX_GRAPH_SERIES} series columns, got ${conversion.values.length}.`
+    );
+  }
+  let bad = checkColumn(
+    table,
+    conversion.label,
+    "label",
+    context
+  );
+  for (const index of conversion.values) {
+    bad ??= checkColumn(table, index, "series", context);
+  }
+  if (bad !== void 0) return err(bad);
+  const series = [];
+  for (const index of conversion.values) {
+    const numbers = numericColumn(table, index, context);
+    if (!numbers.ok) return numbers;
+    series.push({
+      name: columnName(table, index),
+      points: table.rows.map((row, rowIndex) => ({
+        label: row[conversion.label]?.text ?? "",
+        value: numbers.value[rowIndex]
+      }))
+    });
+  }
+  return ok({
+    kind: "GRAPH",
+    series,
+    chartType: conversion.chartType,
+    valueFormat: conversion.valueFormat ?? "number",
+    ...conversion.currency === void 0 ? {} : { currency: conversion.currency },
+    xLabel: columnName(table, conversion.label)
+  });
+}
+function barListToTable(list, conversion) {
+  return ok({
+    kind: "TABLE",
+    columns: [
+      { label: conversion.labelHeading ?? "Name" },
+      { label: conversion.valueHeading ?? "Value", numeric: true }
+    ],
+    rows: list.items.map((item) => [
+      { text: item.label },
+      { text: item.display ?? String(item.value), value: item.value }
+    ])
+  });
+}
+function graphToTable(graph, context) {
+  const first = graph.series[0];
+  if (first === void 0)
+    return err(`${context.where}: the chart has no series.`);
+  const format = {
+    ...graph.currency === void 0 ? {} : { currency: graph.currency },
+    ...context.locale === void 0 ? {} : { locale: context.locale }
+  };
+  return ok({
+    kind: "TABLE",
+    columns: [
+      { label: graph.xLabel ?? "Label" },
+      ...graph.series.map((series) => ({ label: series.name, numeric: true }))
+    ],
+    rows: first.points.map((point, index) => [
+      { text: point.label },
+      ...graph.series.map((series) => {
+        const value = series.points[index]?.value;
+        return value === void 0 ? { text: "\u2014" } : { text: formatValue(value, graph.valueFormat, format), value };
+      })
+    ])
+  });
+}
+function barListToGraph(list, conversion) {
+  return ok({
+    kind: "GRAPH",
+    series: [
+      {
+        name: conversion.seriesName ?? "Value",
+        points: list.items.map((item) => ({
+          label: item.label,
+          value: item.value
+        }))
+      }
+    ],
+    chartType: conversion.chartType,
+    valueFormat: conversion.valueFormat ?? "number",
+    ...conversion.currency === void 0 ? {} : { currency: conversion.currency }
+  });
+}
+function convertView(widgetKey, view, data, options = {}) {
+  const conversion = view.convert;
+  const context = {
+    where: `Widget ${JSON.stringify(widgetKey)} view ${JSON.stringify(view.key)}`,
+    ...options.locale === void 0 ? {} : { locale: options.locale }
+  };
+  const expected = VIEW_CONVERSIONS[conversion.type]?.from;
+  if (expected === void 0) {
+    return err(
+      `${context.where}: unknown conversion type ${JSON.stringify(conversion.type)}.`
+    );
+  }
+  if (data.kind !== expected) {
+    return err(
+      `${context.where}: ${conversion.type} reads a ${expected} payload, but the widget returned ${data.kind}.`
+    );
+  }
+  switch (conversion.type) {
+    case "tableToBarList":
+      return tableToBarList(data, conversion, context);
+    case "tableToGraph":
+      return tableToGraph(data, conversion, context);
+    case "barListToTable":
+      return barListToTable(data, conversion);
+    case "graphToTable":
+      return graphToTable(data, context);
+    case "barListToGraph":
+      return barListToGraph(data, conversion);
+  }
+}
+function applyView(widget, chosen, options = {}) {
+  const key = effectiveViewKey(widget.definition, chosen);
+  const view = findView(widget.definition, key);
+  if (view === void 0) return widget;
+  const definition = {
+    ...widget.definition,
+    kind: view.kind
+  };
+  if (widget.status === "loading") return { ...widget, definition };
+  if (widget.status === "empty") return { ...widget, definition };
+  if (widget.status === "error") return { ...widget, definition };
+  const converted = convertView(
+    widget.definition.key,
+    view,
+    widget.data,
+    options
+  );
+  if (!converted.ok) {
+    return {
+      definition,
+      status: "error",
+      error: converted.error,
+      ...widget.options === void 0 ? {} : { options: widget.options }
+    };
+  }
+  return { ...widget, definition, data: converted.value };
+}
+
 // src/core/settings.ts
 var MAX_WIDGET_TITLE_LENGTH = 80;
 var MAX_COLUMN_LIST = 100;
@@ -2001,6 +2290,7 @@ function parseOne(raw) {
   const width = raw["width"];
   const flexible = raw["flexible"];
   const options = raw["options"];
+  const view = raw["view"];
   const cleanTitle = typeof title === "string" ? title.trim().slice(0, MAX_WIDGET_TITLE_LENGTH) : "";
   const chosen = {};
   if (isRecord(options)) {
@@ -2013,7 +2303,8 @@ function parseOne(raw) {
     ...cleanTitle === "" ? {} : { title: cleanTitle },
     ...isWidgetWidth(width) ? { width } : {},
     ...typeof flexible === "boolean" ? { flexible } : {},
-    ...Object.keys(chosen).length === 0 ? {} : { options: chosen }
+    ...Object.keys(chosen).length === 0 ? {} : { options: chosen },
+    ...typeof view === "string" && view !== "" && view.length <= 80 ? { view } : {}
   };
   return Object.keys(settings).length === 0 ? void 0 : settings;
 }
@@ -2081,12 +2372,18 @@ function effectiveDefinitions(definitions, layout, options = {}) {
 }
 function sameSettings(a, b) {
   if (a === b) return true;
-  return a?.title === b?.title && a?.width === b?.width && a?.flexible === b?.flexible && sameOptionValues(a?.options ?? {}, b?.options ?? {});
+  return a?.title === b?.title && a?.width === b?.width && a?.flexible === b?.flexible && a?.view === b?.view && sameOptionValues(a?.options ?? {}, b?.options ?? {});
 }
 function setWidgetSettings(layout, key, patch) {
   const before = layout.settings?.[key];
   const draft = { ...before };
-  for (const field of ["title", "width", "flexible", "options"]) {
+  for (const field of [
+    "title",
+    "width",
+    "flexible",
+    "options",
+    "view"
+  ]) {
     if (!(field in patch)) continue;
     const value = patch[field];
     if (value === void 0) {
@@ -2119,6 +2416,62 @@ function isTitleInUse(definitions, layout, key, title) {
   );
 }
 
+// src/core/clones.ts
+function cloneNumber(key) {
+  const match = /#(\d+)$/.exec(key);
+  return match === null ? void 0 : Number(match[1]);
+}
+function cleanClones(definitions, clones, options = {}) {
+  if (clones === void 0) return void 0;
+  const byKey = new Map(definitions.map((d) => [d.key, d]));
+  const seen = /* @__PURE__ */ new Set();
+  const kept = [];
+  for (const clone of clones) {
+    if (seen.has(clone.key)) continue;
+    const original = byKey.get(clone.from);
+    if (original === void 0 || original.sourceKey !== void 0) continue;
+    const existing = byKey.get(clone.key);
+    if (existing !== void 0 && existing.sourceKey !== clone.from) continue;
+    if (options.overrideLocks !== true && resolveWidgetLock(original).clone) {
+      continue;
+    }
+    seen.add(clone.key);
+    kept.push(clone);
+  }
+  if (kept.length === 0) return void 0;
+  return kept.length === clones.length && kept.every((c, i) => c === clones[i]) ? clones : kept;
+}
+function defaultCloneTitle(original, clone, index) {
+  const base = original.title ?? original.key;
+  const suffix = ` (#${cloneNumber(clone.key) ?? index + 1})`;
+  return `${base.slice(0, MAX_WIDGET_TITLE_LENGTH - suffix.length)}${suffix}`;
+}
+function withClones(definitions, layout, options = {}) {
+  const valid = cleanClones(
+    definitions,
+    layout.clones,
+    options
+  );
+  if (valid === void 0) return definitions;
+  const present = new Set(definitions.map((d) => d.key));
+  const toAdd = valid.filter((c) => !present.has(c.key));
+  if (toAdd.length === 0) return definitions;
+  const out = [];
+  for (const definition of definitions) {
+    out.push(definition);
+    toAdd.forEach((clone, index) => {
+      if (clone.from !== definition.key) return;
+      const copy = { ...definition };
+      copy.key = clone.key;
+      copy.sourceKey = definition.key;
+      copy.title = defaultCloneTitle(definition, clone, index);
+      delete copy.locked;
+      out.push(copy);
+    });
+  }
+  return out;
+}
+
 // src/core/layout.ts
 var MAX_PAGE_TITLE_LENGTH = 30;
 var MAX_PARSED_PAGES = 50;
@@ -2596,6 +2949,114 @@ function moveWidgetToPage(definitions, layout, widgetKey, targetKey, options = {
   }
   return ok(moved);
 }
+
+// src/core/duplicate.ts
+function canDuplicate(definitions, key, options = {}) {
+  const definition = definitions.find(
+    (d) => d.key === key
+  );
+  if (definition === void 0) return false;
+  if (options.overrideLocks === true) return true;
+  const sourceKey = definition.sourceKey ?? definition.key;
+  const original = definitions.find(
+    (d) => d.key === sourceKey
+  );
+  return original !== void 0 && !resolveWidgetLock(original).clone;
+}
+function nextCloneKey(definitions, layout, fromKey) {
+  const taken = /* @__PURE__ */ new Set([
+    ...definitions.map((d) => d.key),
+    ...(layout.clones ?? []).map((c) => c.key)
+  ]);
+  let highest = 0;
+  for (const clone of layout.clones ?? []) {
+    if (clone.from === fromKey) {
+      highest = Math.max(highest, cloneNumber(clone.key) ?? 0);
+    }
+  }
+  let n = highest + 1;
+  while (taken.has(`${fromKey}#${n}`)) n += 1;
+  return `${fromKey}#${n}`;
+}
+function duplicateWidget(definitions, layout, key, options = {}) {
+  const widget = definitions.find((d) => d.key === key);
+  if (widget === void 0) {
+    return err(`Widget ${JSON.stringify(key)} isn't on this dashboard.`);
+  }
+  const originalKey = widget.sourceKey ?? widget.key;
+  if (!canDuplicate(definitions, key, options)) {
+    return err(
+      `Widget ${JSON.stringify(originalKey)} is locked against duplicating.`
+    );
+  }
+  const cloneKey = nextCloneKey(definitions, layout, originalKey);
+  const copiedSettings = (() => {
+    const mine = layout.settings?.[key];
+    if (mine === void 0) return void 0;
+    const { title: _title, ...rest } = mine;
+    return Object.keys(rest).length === 0 ? void 0 : rest;
+  })();
+  const settings = copiedSettings === void 0 ? layout.settings : { ...layout.settings, [cloneKey]: copiedSettings };
+  let next = {
+    ...layout,
+    clones: [...layout.clones ?? [], { key: cloneKey, from: originalKey }],
+    ...settings === void 0 ? {} : { settings }
+  };
+  const all = withClones(definitions, next, options);
+  const assigned = assignPages(all, next);
+  const pageKey = [...assigned].find(
+    ([, widgets]) => widgets.some((w) => w.key === key)
+  )?.[0];
+  if (pageKey !== void 0) {
+    const view = pageLayout(next, pageKey);
+    const onPage = assigned.get(pageKey) ?? [];
+    if (view !== void 0) {
+      const shown = visibleWidgets(onPage, view).filter((d) => !resolveWidgetLock(d).move && d.key !== cloneKey).map((d) => d.key);
+      const at = shown.indexOf(key);
+      const order = at === -1 ? [...shown, cloneKey] : [...shown.slice(0, at + 1), cloneKey, ...shown.slice(at + 1)];
+      next = withPageLayout(next, pageKey, { ...view, order });
+    }
+  }
+  if (hasPages(next) && pageKey !== void 0) {
+    const effective = effectiveDefinitions(all, next, options);
+    const room = pageRoom(effective, next, pageKey, options);
+    if (room !== void 0 && room.rowsUsed > room.maxRows) {
+      const page = next.pages?.find(
+        (p) => p.key === pageKey
+      );
+      const width = effective.find(
+        (d) => d.key === cloneKey
+      )?.width;
+      return err(
+        `Page "${page?.title ?? pageKey}" has no room for a widget${width === void 0 ? "" : ` ${width} wide`} (it holds ${room.maxRows} rows).`
+      );
+    }
+  }
+  return ok({ layout: next, key: cloneKey });
+}
+function deleteClone(layout, key) {
+  if (layout.clones?.some((clone) => clone.key === key) !== true) return layout;
+  const without2 = (keys) => keys.includes(key) ? keys.filter((k) => k !== key) : keys;
+  const { clones, settings, ...rest } = layout;
+  const remaining = (clones ?? []).filter((c) => c.key !== key);
+  const { [key]: _gone, ...otherSettings } = settings ?? {};
+  return {
+    ...rest,
+    order: without2(layout.order),
+    hidden: without2(layout.hidden),
+    minimized: without2(layout.minimized),
+    ...layout.pages === void 0 ? {} : {
+      pages: layout.pages.map((page) => ({
+        ...page,
+        order: without2(page.order),
+        hidden: without2(page.hidden),
+        minimized: without2(page.minimized)
+      }))
+    },
+    ...Object.keys(otherSettings).length === 0 ? {} : { settings: otherSettings },
+    ...remaining.length === 0 ? {} : { clones: remaining }
+  };
+}
 function InlineConfirm({
   message,
   onAnswer
@@ -2790,7 +3251,8 @@ function draftFrom(settings) {
     title: settings?.title ?? "",
     width: settings?.width,
     flexible: settings?.flexible,
-    options: settings?.options ?? {}
+    options: settings?.options ?? {},
+    view: settings?.view
   };
 }
 function storedDefault(option) {
@@ -2815,7 +3277,9 @@ function patchFrom(definition, draft) {
     title: title === "" ? void 0 : title,
     width: draft.width,
     flexible: draft.flexible === void 0 || draft.flexible === isFlexible(definition) ? void 0 : draft.flexible,
-    options: Object.keys(options).length === 0 ? void 0 : options
+    options: Object.keys(options).length === 0 ? void 0 : options,
+    // Choosing the author's own default view again clears the setting.
+    view: draft.view === void 0 || draft.view === effectiveViewKey(definition, void 0) ? void 0 : draft.view
   };
 }
 function patchKey(patch) {
@@ -2823,19 +3287,28 @@ function patchKey(patch) {
   for (const key of Object.keys(patch.options ?? {}).sort()) {
     options[key] = patch.options[key];
   }
-  return JSON.stringify([patch.title, patch.width, patch.flexible, options]);
+  return JSON.stringify([
+    patch.title,
+    patch.width,
+    patch.flexible,
+    options,
+    patch.view
+  ]);
 }
 var EMPTY_PATCH = {
   title: void 0,
   width: void 0,
   flexible: void 0,
-  options: void 0
+  options: void 0,
+  view: void 0
 };
 function WidgetOptionsDialog({
   definition,
   settings,
   baseline,
   isTitleInUse: isTitleInUse2,
+  sourceTitle,
+  onDelete,
   onApply,
   onClose
 }) {
@@ -2848,6 +3321,7 @@ function WidgetOptionsDialog({
   const [confirming, setConfirming] = react.useState(
     void 0
   );
+  const autoTitle = react.useRef(void 0);
   react.useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog === null) return void 0;
@@ -2867,6 +3341,7 @@ function WidgetOptionsDialog({
   const canRevert = baselineKey !== void 0 && baselineKey !== savedKey;
   const canReset = savedKey !== patchKey(EMPTY_PATCH);
   const range = widthRange(definition);
+  const views = viewChoices(definition);
   const effectiveFlexible = draft.flexible ?? isFlexible(definition);
   function requestClose() {
     if (confirming !== void 0) {
@@ -2889,6 +3364,9 @@ function WidgetOptionsDialog({
     } else if (which === "reset") {
       onApply(EMPTY_PATCH);
       onClose();
+    } else if (which === "delete") {
+      onDelete?.();
+      onClose();
     } else if (baseline !== void 0) {
       onApply(patchFrom(definition, draftFrom(baseline.settings)));
       onClose();
@@ -2904,7 +3382,8 @@ function WidgetOptionsDialog({
     apply: labels.confirmApply,
     discard: labels.confirmDiscard,
     reset: labels.confirmResetOptions,
-    revert: labels.confirmRevertOptions
+    revert: labels.confirmRevertOptions,
+    delete: labels.confirmDelete
   };
   const widths = [];
   for (let width = range.min; width <= range.max; width += 1)
@@ -2992,6 +3471,46 @@ function WidgetOptionsDialog({
               ),
               labels.optionsFlexible
             ] }),
+            views.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dwt-options-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${baseId}-view`, children: labels.optionsViewField }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "select",
+                {
+                  id: `${baseId}-view`,
+                  value: effectiveViewKey(definition, draft.view),
+                  onChange: (event) => {
+                    const value = event.target.value;
+                    setDraft((current) => {
+                      const next = { ...current, view: value };
+                      if (sourceTitle === void 0 || current.title.trim() !== "" && current.title !== autoTitle.current) {
+                        return next;
+                      }
+                      const label = views.find(
+                        (view) => view.key === value
+                      )?.label;
+                      const startView = effectiveViewKey(
+                        definition,
+                        settings?.view
+                      );
+                      if (label === void 0 || value === startView) {
+                        autoTitle.current = void 0;
+                        return { ...next, title: "" };
+                      }
+                      let suggestion = labels.suggestedViewTitle(
+                        sourceTitle,
+                        label
+                      );
+                      for (let n = 2; isTitleInUse2?.(suggestion) === true && n < 50; n += 1) {
+                        suggestion = `${labels.suggestedViewTitle(sourceTitle, label)} (#${n})`;
+                      }
+                      autoTitle.current = suggestion;
+                      return { ...next, title: suggestion };
+                    });
+                  },
+                  children: views.map((view) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: view.key, children: view.key === effectiveViewKey(definition, void 0) ? labels.viewDefault(view.label) : view.label }, view.key))
+                }
+              )
+            ] }),
             (definition.options?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "dwt-options-group", children: [
               /* @__PURE__ */ jsxRuntime.jsx("legend", { children: labels.optionsDeclared }),
               (definition.options ?? []).map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3043,6 +3562,15 @@ function WidgetOptionsDialog({
                   onClick: () => setConfirming("revert"),
                   children: labels.revertToBeforeEditing
                 }
+              ),
+              onDelete !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: slot("button", "dwt-button"),
+                  onClick: () => setConfirming("delete"),
+                  children: labels.optionsDelete
+                }
               )
             ] }) : /* @__PURE__ */ jsxRuntime.jsx(
               InlineConfirm,
@@ -3971,10 +4499,13 @@ function DashboardInner({
   className
 }) {
   const slot = useSlotClassName();
-  const { labels } = useWidgetSettings();
+  const { labels, locale } = useWidgetSettings();
   const effectiveWidgets = widgets.map((w) => {
-    const settings = savedLayout.settings?.[w.definition.key];
-    return settings === void 0 || !overrideLocks && isOptionsLocked(w.definition) ? w : { ...w, definition: applySettings(w.definition, settings) };
+    const settings = !overrideLocks && isOptionsLocked(w.definition) ? void 0 : savedLayout.settings?.[w.definition.key];
+    const styled = settings === void 0 ? w : { ...w, definition: applySettings(w.definition, settings) };
+    return applyView(styled, settings?.view, {
+      ...locale === void 0 ? {} : { locale }
+    });
   });
   const definitions = effectiveWidgets.map(
     (w) => overrideLocks ? withoutLock(w.definition) : w.definition
@@ -4044,6 +4575,29 @@ function DashboardInner({
     setPageError(void 0);
     change(withPageLayout(layout, activeKey, next));
   }
+  function duplicateItems(definition, key, title) {
+    const sources = [...authorDefinitions.values()];
+    if (!canDuplicate(sources, key, { overrideLocks })) return [];
+    const trial = duplicateWidget(sources, layout, key, {
+      overrideLocks,
+      ...roomOptions
+    });
+    return [
+      {
+        kind: "action",
+        key: "duplicate",
+        label: labels.menuDuplicate,
+        ariaLabel: trial.ok ? labels.duplicate(title) : labels.duplicateBlocked(title, trial.error),
+        disabled: !trial.ok,
+        onSelect: () => {
+          if (!trial.ok) return;
+          change(trial.value.layout);
+          setOptionsKey(trial.value.key);
+          setAnnouncement(labels.duplicated(title));
+        }
+      }
+    ];
+  }
   function selectPage(pageKey) {
     const index = pages.findIndex((page) => page.key === pageKey);
     if (index === -1) return;
@@ -4173,10 +4727,16 @@ function DashboardInner({
         definitions,
         defaultLayout ?? EMPTY_LAYOUT
       );
-      const { settings: _defaultSettings, ...arrangement } = arranged;
-      change(
-        layout.settings === void 0 ? arrangement : { ...arrangement, settings: layout.settings }
-      );
+      const {
+        settings: _defaultSettings,
+        clones: _defaultClones,
+        ...arrangement
+      } = arranged;
+      change({
+        ...arrangement,
+        ...layout.settings === void 0 ? {} : { settings: layout.settings },
+        ...layout.clones === void 0 ? {} : { clones: layout.clones }
+      });
     } else if (yes && which === "revert" && snapshot !== void 0) {
       change(snapshot);
     }
@@ -4482,6 +5042,7 @@ function DashboardInner({
                           onSelect: () => setOptionsKey(key)
                         }
                       ],
+                      ...duplicateItems(definition, key, title),
                       ...pageTargets,
                       ...lock.hide ? [] : [
                         {
@@ -4576,6 +5137,21 @@ function DashboardInner({
             definition: authorDefinitions.get(optionsKey),
             settings: layout.settings?.[optionsKey],
             ...snapshot === void 0 ? {} : { baseline: { settings: snapshot.settings?.[optionsKey] } },
+            ...authorDefinitions.get(optionsKey)?.sourceKey === void 0 ? {} : {
+              sourceTitle: effectiveWidgets.find(
+                (w) => w.definition.key === authorDefinitions.get(optionsKey)?.sourceKey
+              )?.definition.title ?? authorDefinitions.get(optionsKey)?.sourceKey ?? "",
+              onDelete: () => {
+                change(deleteClone(layout, optionsKey));
+                setAnnouncement(
+                  labels.deleted(
+                    effectiveWidgets.find(
+                      (w) => w.definition.key === optionsKey
+                    )?.definition.title ?? optionsKey
+                  )
+                );
+              }
+            },
             isTitleInUse: (title) => isTitleInUse(
               widgets.map((w) => w.definition),
               layout,
@@ -4819,45 +5395,6 @@ function useStoredLayout(options) {
   };
 }
 
-// src/core/payload.ts
-var WIDGET_KINDS = [
-  "TEXT",
-  "KPI",
-  "GAUGE",
-  "TABLE",
-  "BAR_LIST",
-  "ALERT_LIST",
-  "GRAPH"
-];
-function isWidgetKind(value) {
-  return typeof value === "string" && WIDGET_KINDS.includes(value);
-}
-var VALUE_FORMATS = ["number", "currency", "percent"];
-var MAX_GRAPH_SERIES = 8;
-var DEFAULT_EMPTY_TEXT = "Nothing to show yet.";
-function isWidgetEmptyState(payload) {
-  return "empty" in payload && payload.empty === true;
-}
-function emptyTextFor(payload) {
-  if (isWidgetEmptyState(payload)) {
-    return payload.text;
-  }
-  switch (payload.kind) {
-    case "TABLE":
-      return payload.rows.length === 0 ? DEFAULT_EMPTY_TEXT : null;
-    case "BAR_LIST":
-      return payload.items.length === 0 ? DEFAULT_EMPTY_TEXT : null;
-    case "ALERT_LIST":
-      return payload.items.length === 0 ? payload.emptyText : null;
-    case "GRAPH":
-      return payload.series.every((series) => series.points.length === 0) ? DEFAULT_EMPTY_TEXT : null;
-    case "TEXT":
-    case "KPI":
-    case "GAUGE":
-      return null;
-  }
-}
-
 // src/core/validate.ts
 var MAX_REPORTED_PROBLEMS = 10;
 function describeType2(value) {
@@ -5162,7 +5699,7 @@ function loadingWidgets(definitions) {
   return definitions.map((definition) => ({ definition, status: "loading" }));
 }
 function cacheKeyFor(definition, options, values) {
-  const base = options.cacheKey === void 0 ? definition.key : options.cacheKey(definition);
+  const base = options.cacheKey === void 0 ? definition.sourceKey ?? definition.key : options.cacheKey(definition);
   return values === void 0 ? base : `${base}${optionsCacheSuffix(definition, values, options)}`;
 }
 function optionValuesFor(definition, options) {
@@ -5336,7 +5873,11 @@ function createWidgetLoader(options) {
       }
     }
     if (!isCurrent()) return;
-    const provider = Object.prototype.hasOwnProperty.call(providers, key) ? providers[key] : void 0;
+    const providerKey = definition.sourceKey ?? key;
+    const provider = Object.prototype.hasOwnProperty.call(
+      providers,
+      providerKey
+    ) ? providers[providerKey] : void 0;
     const result = await resolveWidgetUnapplied(definition, provider, context, {
       ...runOptions,
       signal: controller.signal