@richardmcquiston01/dashboard-widgets-toolkit 0.15.0 → 0.16.0

package/dist/react.d.cts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement, RefObject } from 'react';
-import { D as DashboardWidget, W as WidgetSize, a as WidgetFill, G as GraphWidgetData, N as NiceDomain, b as WidgetDefinition, c as DetailProviderOptions, d as DetailData, e as DetailQuery, O as OptionValues, L as Locale, f as DashboardLayout, g as WidgetViewerSettings, h as WidgetSettingsPatch, A as AlertListWidgetData, B as BarListWidgetData, i as GaugeWidgetData, K as KpiWidgetData, T as TableWidgetData, R as ResolvedTableControls, j as DetailSort, k as TextWidgetData, l as WidgetData, m as LayoutPersistence, S as StoreScope, P as PageItem, n as NormalizeOptions, o as ResolveOptions, p as WidgetContext, q as WidgetProviders } from './storage-DwJ-vGJg.cjs';
+import { D as DashboardWidget, W as WidgetSize, a as WidgetFill, G as GraphWidgetData, N as NiceDomain, b as WidgetDefinition, c as DetailProviderOptions, d as DetailData, e as DetailQuery, O as OptionValues, L as Locale, f as DashboardLayout, g as WidgetViewerSettings, h as WidgetSettingsPatch, A as AlertListWidgetData, B as BarListWidgetData, i as GaugeWidgetData, K as KpiWidgetData, T as TableWidgetData, R as ResolvedTableControls, j as DetailSort, k as TextWidgetData, l as WidgetData, m as LayoutPersistence, S as StoreScope, P as PageItem, n as NormalizeOptions, o as ResolveOptions, p as WidgetContext, q as WidgetProviders } from './storage-oivwB7al.cjs';
 
 interface WidgetCardProps {
     readonly title: string;
@@ -216,6 +216,18 @@ interface DashboardLabels {
     readonly menuHide: string;
     /** The card menu's item that opens the Options dialog. */
     readonly menuOptions: string;
+    /** Arrange menu item that makes a clone of the widget. */
+    readonly menuDuplicate: string;
+    readonly duplicate: (title: string) => string;
+    /** Accessible name of Duplicate when the page has no room; `reason` says why. */
+    readonly duplicateBlocked: (title: string, reason: string) => string;
+    readonly duplicated: (title: string) => string;
+    /** Options dialog button that deletes a clone. */
+    readonly optionsDelete: string;
+    readonly confirmDelete: string;
+    readonly deleted: (title: string) => string;
+    /** The title suggested for a clone shown with another view. */
+    readonly suggestedViewTitle: (title: string, viewLabel: string) => string;
     /** The Options dialog: heading, fields and buttons. */
     readonly optionsFor: (title: string) => string;
     readonly optionsTitleField: string;
@@ -393,11 +405,18 @@ interface WidgetOptionsDialogProps {
     };
     /** Whether another widget already shows this title; the dialog refuses it. */
     readonly isTitleInUse?: (title: string) => boolean;
+    /**
+     * For a clone: its original's title, so choosing another view can suggest
+     * a title like "Recent Orders Line Chart".
+     */
+    readonly sourceTitle?: string;
+    /** For a clone: shows "Delete this widget"; called after the viewer confirms. */
+    readonly onDelete?: () => void;
     /** Called after the viewer confirms Apply, Reset or Revert. */
     readonly onApply: (patch: WidgetSettingsPatch) => void;
     readonly onClose: () => void;
 }
-declare function WidgetOptionsDialog({ definition, settings, baseline, isTitleInUse, onApply, onClose, }: WidgetOptionsDialogProps): ReactElement;
+declare function WidgetOptionsDialog({ definition, settings, baseline, isTitleInUse, sourceTitle, onDelete, onApply, onClose, }: WidgetOptionsDialogProps): ReactElement;
 
 /**
  * Default colors, used as `var(--dwt-*, fallback)` so charts read correctly

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement, RefObject } from 'react';
-import { D as DashboardWidget, W as WidgetSize, a as WidgetFill, G as GraphWidgetData, N as NiceDomain, b as WidgetDefinition, c as DetailProviderOptions, d as DetailData, e as DetailQuery, O as OptionValues, L as Locale, f as DashboardLayout, g as WidgetViewerSettings, h as WidgetSettingsPatch, A as AlertListWidgetData, B as BarListWidgetData, i as GaugeWidgetData, K as KpiWidgetData, T as TableWidgetData, R as ResolvedTableControls, j as DetailSort, k as TextWidgetData, l as WidgetData, m as LayoutPersistence, S as StoreScope, P as PageItem, n as NormalizeOptions, o as ResolveOptions, p as WidgetContext, q as WidgetProviders } from './storage-DwJ-vGJg.js';
+import { D as DashboardWidget, W as WidgetSize, a as WidgetFill, G as GraphWidgetData, N as NiceDomain, b as WidgetDefinition, c as DetailProviderOptions, d as DetailData, e as DetailQuery, O as OptionValues, L as Locale, f as DashboardLayout, g as WidgetViewerSettings, h as WidgetSettingsPatch, A as AlertListWidgetData, B as BarListWidgetData, i as GaugeWidgetData, K as KpiWidgetData, T as TableWidgetData, R as ResolvedTableControls, j as DetailSort, k as TextWidgetData, l as WidgetData, m as LayoutPersistence, S as StoreScope, P as PageItem, n as NormalizeOptions, o as ResolveOptions, p as WidgetContext, q as WidgetProviders } from './storage-oivwB7al.js';
 
 interface WidgetCardProps {
     readonly title: string;
@@ -216,6 +216,18 @@ interface DashboardLabels {
     readonly menuHide: string;
     /** The card menu's item that opens the Options dialog. */
     readonly menuOptions: string;
+    /** Arrange menu item that makes a clone of the widget. */
+    readonly menuDuplicate: string;
+    readonly duplicate: (title: string) => string;
+    /** Accessible name of Duplicate when the page has no room; `reason` says why. */
+    readonly duplicateBlocked: (title: string, reason: string) => string;
+    readonly duplicated: (title: string) => string;
+    /** Options dialog button that deletes a clone. */
+    readonly optionsDelete: string;
+    readonly confirmDelete: string;
+    readonly deleted: (title: string) => string;
+    /** The title suggested for a clone shown with another view. */
+    readonly suggestedViewTitle: (title: string, viewLabel: string) => string;
     /** The Options dialog: heading, fields and buttons. */
     readonly optionsFor: (title: string) => string;
     readonly optionsTitleField: string;
@@ -393,11 +405,18 @@ interface WidgetOptionsDialogProps {
     };
     /** Whether another widget already shows this title; the dialog refuses it. */
     readonly isTitleInUse?: (title: string) => boolean;
+    /**
+     * For a clone: its original's title, so choosing another view can suggest
+     * a title like "Recent Orders Line Chart".
+     */
+    readonly sourceTitle?: string;
+    /** For a clone: shows "Delete this widget"; called after the viewer confirms. */
+    readonly onDelete?: () => void;
     /** Called after the viewer confirms Apply, Reset or Revert. */
     readonly onApply: (patch: WidgetSettingsPatch) => void;
     readonly onClose: () => void;
 }
-declare function WidgetOptionsDialog({ definition, settings, baseline, isTitleInUse, onApply, onClose, }: WidgetOptionsDialogProps): ReactElement;
+declare function WidgetOptionsDialog({ definition, settings, baseline, isTitleInUse, sourceTitle, onDelete, onApply, onClose, }: WidgetOptionsDialogProps): ReactElement;
 
 /**
  * Default colors, used as `var(--dwt-*, fallback)` so charts read correctly

package/dist/react.js

@@ -828,6 +828,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.",
@@ -1937,13 +1945,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 +1963,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) {
@@ -2403,6 +2414,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;
@@ -2880,6 +2947,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
@@ -3130,6 +3305,8 @@ function WidgetOptionsDialog({
   settings,
   baseline,
   isTitleInUse: isTitleInUse2,
+  sourceTitle,
+  onDelete,
   onApply,
   onClose
 }) {
@@ -3142,6 +3319,7 @@ function WidgetOptionsDialog({
   const [confirming, setConfirming] = useState(
     void 0
   );
+  const autoTitle = useRef(void 0);
   useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog === null) return void 0;
@@ -3184,6 +3362,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();
@@ -3199,7 +3380,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)
@@ -3296,7 +3478,32 @@ function WidgetOptionsDialog({
                   value: effectiveViewKey(definition, draft.view),
                   onChange: (event) => {
                     const value = event.target.value;
-                    setDraft((current) => ({ ...current, view: 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__ */ jsx("option", { value: view.key, children: view.key === effectiveViewKey(definition, void 0) ? labels.viewDefault(view.label) : view.label }, view.key))
                 }
@@ -3353,6 +3560,15 @@ function WidgetOptionsDialog({
                   onClick: () => setConfirming("revert"),
                   children: labels.revertToBeforeEditing
                 }
+              ),
+              onDelete !== void 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: slot("button", "dwt-button"),
+                  onClick: () => setConfirming("delete"),
+                  children: labels.optionsDelete
+                }
               )
             ] }) : /* @__PURE__ */ jsx(
               InlineConfirm,
@@ -4357,6 +4573,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;
@@ -4486,10 +4725,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);
     }
@@ -4795,6 +5040,7 @@ function DashboardInner({
                           onSelect: () => setOptionsKey(key)
                         }
                       ],
+                      ...duplicateItems(definition, key, title),
                       ...pageTargets,
                       ...lock.hide ? [] : [
                         {
@@ -4889,6 +5135,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,
@@ -5436,7 +5697,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) {
@@ -5610,7 +5871,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