@antelopejs/dms 0.7.21 → 0.8.0

package/frontend-vue/layers/dms-ui/app/composables/chart/apexYRange.ts

@@ -0,0 +1,123 @@
+import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
+import type { ChartSeries } from "./types";
+import type { UseApexChartInput } from "./useApexChart.types";
+
+const DEFAULT_Y_RANGE_PADDING = 0.08;
+const ZERO_BOUND_MAGNITUDE = 1;
+const STEP_DIVISIONS = 10;
+const NICE_STEP_FACTORS = [1, 2, 5, 10];
+const DECIMAL_BASE = 10;
+/** Enough digits to keep every real value while dropping binary float noise. */
+const SIGNIFICANT_DIGITS = 12;
+
+const DOWNWARD = -1;
+const UPWARD = 1;
+
+type Rounding = (value: number) => number;
+
+/** Bounds Apex resolves from the extent it measured on the drawn series. */
+interface AutoYBounds {
+  min?: (nativeMin: number) => number;
+  max?: (nativeMax: number) => number;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function withoutFloatNoise(value: number): number {
+  return Number(value.toPrecision(SIGNIFICANT_DIGITS));
+}
+
+function pointValues(point: ChartSeries["data"][number]): unknown[] {
+  if (typeof point === "number") return [point];
+  if (!point || typeof point !== "object") return [];
+  return Array.isArray(point.y) ? point.y : [point.y];
+}
+
+function seriesValues(series: ChartSeries[]): number[] {
+  return series.flatMap((entry) =>
+    entry.data.flatMap(pointValues).filter(isFiniteNumber),
+  );
+}
+
+function annotationValues(input: UseApexChartInput): number[] {
+  return (input.annotations ?? [])
+    .flatMap((annotation) => [annotation.y, annotation.y2])
+    .filter(isFiniteNumber);
+}
+
+function resolvePadding(input: UseApexChartInput): number {
+  const requested = input.autoYRange?.padding ?? DEFAULT_Y_RANGE_PADDING;
+  return Number.isFinite(requested) && requested >= 0
+    ? requested
+    : DEFAULT_Y_RANGE_PADDING;
+}
+
+function padOutward(bound: number, padding: number, direction: number): number {
+  return bound + direction * (Math.abs(bound) || ZERO_BOUND_MAGNITUDE) * padding;
+}
+
+/** The smallest 1, 2 or 5 times a power of ten that covers `span`. */
+export function niceStep(span: number): number {
+  const magnitude = DECIMAL_BASE ** Math.floor(Math.log10(span));
+  const factor =
+    NICE_STEP_FACTORS.find((candidate) => candidate * magnitude >= span) ??
+    DECIMAL_BASE;
+  return withoutFloatNoise(factor * magnitude);
+}
+
+function snapToStep(value: number, step: number, round: Rounding): number {
+  return withoutFloatNoise(round(withoutFloatNoise(value / step)) * step);
+}
+
+/**
+ * The tick step for the padded extent of what is known up front: the series
+ * and the annotations. Apex only lays round ticks between bounds that are
+ * multiples of a round step; padded raw bounds give 603.6, 437.2…
+ */
+function estimateStep(values: number[], padding: number): number | undefined {
+  if (values.length === 0) return undefined;
+  const lower = padOutward(Math.min(...values), padding, DOWNWARD);
+  const upper = padOutward(Math.max(...values), padding, UPWARD);
+  const span = upper - lower;
+  return span > 0 ? niceStep(span / STEP_DIVISIONS) : undefined;
+}
+
+function stepForBound(bound: number, knownStep: number | undefined): number {
+  if (knownStep !== undefined) return knownStep;
+  return niceStep((Math.abs(bound) || ZERO_BOUND_MAGNITUDE) / STEP_DIVISIONS);
+}
+
+/**
+ * Y bounds that take in the annotations, padded outward and rounded to a round
+ * step so the axis ticks read 100, 200… rather than the raw padded extent.
+ */
+export function buildAutoYRange(input: UseApexChartInput): AutoYBounds {
+  if (!input.autoYRange || APEX_TYPE_CONFIGS[input.type].isCircular) return {};
+  const padding = resolvePadding(input);
+  const annotations = annotationValues(input);
+  const knownStep = estimateStep(
+    [...seriesValues(input.series), ...annotations],
+    padding,
+  );
+  const bound = (native: number, direction: number, round: Rounding) => {
+    const extent = [native, ...annotations];
+    const raw = direction === DOWNWARD ? Math.min(...extent) : Math.max(...extent);
+    const padded = padOutward(raw, padding, direction);
+    return snapToStep(padded, stepForBound(padded, knownStep), round);
+  };
+  return {
+    min: (nativeMin) => bound(nativeMin, DOWNWARD, Math.floor),
+    max: (nativeMax) => bound(nativeMax, UPWARD, Math.ceil),
+  };
+}
+
+/**
+ * Axis labels without a format of their own. Apex writes them with as many
+ * decimals as the most precise data point, so 160 reads "160.00000000000000"
+ * once one price carries float noise.
+ */
+export function formatPlainAxisValue(value: number): string {
+  return isFiniteNumber(value) ? String(withoutFloatNoise(value)) : String(value);
+}

package/frontend-vue/layers/dms-ui/app/composables/chart/useApexChart.ts

@@ -1,11 +1,13 @@
 import { computed } from "vue";
 import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
 import { buildAnnotations } from "./apexAnnotations";
-import { buildPlotOptions } from "./apexPlotOptions";
+import { buildPlotOptions, ringFitsSliceLabels } from "./apexPlotOptions";
+import { buildAutoYRange, formatPlainAxisValue } from "./apexYRange";
 import { isReducedMotionActive } from "../../build/utils/accessibilityPreferences";
 import {
   axisLabelStyle,
   buildDataLabels,
+  dataLabelOffset,
   buildGrid,
   buildLegend,
   buildMarkers,
@@ -286,36 +288,6 @@ function applySeriesStroke(
 
 const HIGH_CONTRAST_YAXIS_TYPES: ChartType[] = ["radar"];
 
-const DEFAULT_Y_RANGE_PADDING = 0.08;
-const ZERO_BOUND_MAGNITUDE = 1;
-
-function buildAutoYRange(input: UseApexChartInput): Record<string, unknown> {
-  if (!input.autoYRange || APEX_TYPE_CONFIGS[input.type].isCircular) return {};
-  const requested = input.autoYRange.padding ?? DEFAULT_Y_RANGE_PADDING;
-  const padding =
-    Number.isFinite(requested) && requested >= 0
-      ? requested
-      : DEFAULT_Y_RANGE_PADDING;
-  const bounds = (input.annotations ?? [])
-    .flatMap((annotation) => [annotation.y, annotation.y2])
-    .filter(
-      (value): value is number =>
-        typeof value === "number" && Number.isFinite(value),
-    );
-  const lower = bounds.reduce((min, value) => Math.min(min, value), Infinity);
-  const upper = bounds.reduce((max, value) => Math.max(max, value), -Infinity);
-  return {
-    min: (nativeMin: number) => {
-      const min = Math.min(nativeMin, lower);
-      return min - (Math.abs(min) || ZERO_BOUND_MAGNITUDE) * padding;
-    },
-    max: (nativeMax: number) => {
-      const max = Math.max(nativeMax, upper);
-      return max + (Math.abs(max) || ZERO_BOUND_MAGNITUDE) * padding;
-    },
-  };
-}
-
 function buildYAxis(
   input: UseApexChartInput,
   theme: ApexThemeColors,
@@ -331,9 +303,8 @@ function buildYAxis(
     yaxis.min = input.yRange.min;
     yaxis.max = input.yRange.max;
   }
-  if (input.yAxisFormatter) {
-    (yaxis.labels as Record<string, unknown>).formatter = input.yAxisFormatter;
-  }
+  (yaxis.labels as Record<string, unknown>).formatter =
+    input.yAxisFormatter ?? formatPlainAxisValue;
   return yaxis;
 }
 
@@ -387,20 +358,50 @@ function applyMixedSeriesDefs(
   });
 }
 
+const RAW_OPTION_PATH_SEPARATOR = ".";
+
+function parseRawOptionValue(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function isOptionSection(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Set `value` at a dotted path ("markers.size"), copying each section on the
+ * way so the generated options are not mutated. A key without a dot replaces
+ * its whole section, as it always has.
+ */
+function setOptionPath(
+  options: Record<string, unknown>,
+  path: string[],
+  value: unknown,
+): Record<string, unknown> {
+  const [head, ...rest] = path;
+  if (head === undefined) return options;
+  if (rest.length === 0) return { ...options, [head]: value };
+  const section = isOptionSection(options[head]) ? options[head] : {};
+  return { ...options, [head]: setOptionPath(section, rest, value) };
+}
+
 function injectRawOptions(
   options: Record<string, unknown>,
   rawOptions: Array<{ key: string; value: string }> | undefined,
 ): Record<string, unknown> {
-  if (!rawOptions || rawOptions.length === 0) return options;
-  const merged: Record<string, unknown> = { ...options };
-  for (const entry of rawOptions) {
-    try {
-      merged[entry.key] = JSON.parse(entry.value);
-    } catch {
-      merged[entry.key] = entry.value;
-    }
-  }
-  return merged;
+  return (rawOptions ?? []).reduce(
+    (merged, entry) =>
+      setOptionPath(
+        merged,
+        entry.key.split(RAW_OPTION_PATH_SEPARATOR),
+        parseRawOptionValue(entry.value),
+      ),
+    options,
+  );
 }
 
 const RANGE_AREA_APEX_TYPE = "rangeArea";
@@ -465,8 +466,11 @@ function buildBaseOptions(
     chart: buildChartConfig(input, theme.muted),
     colors: seriesColors,
     dataLabels: buildDataLabels(
-      config.supportsDataLabels || input.showLabels === true,
+      (config.supportsDataLabels || input.showLabels === true) &&
+        ringFitsSliceLabels(input),
       theme,
+      config.isCircular,
+      dataLabelOffset(input),
     ),
     stroke: buildStroke(
       input,
@@ -600,10 +604,6 @@ function applyOptionalSections(
   if (isCircular) {
     baseOptions.labels = buildCircularLabels(input.donutData).labels;
   }
-
-  if (input.type === "scatter" && input.pointSize !== undefined) {
-    baseOptions.markers = { size: input.pointSize };
-  }
 }
 
 function projectSeries(

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartTheme.ts

@@ -11,6 +11,11 @@ const SHADE_TOKEN =
 const CSS_VARIABLE = /^--[\w-]+$/;
 const CSS_VARIABLE_FUNCTION = /^var\((--[\w-]+)\)$/;
 const COLOR_CHANNEL_MAX = 255;
+const PERCENT_SCALE = 100;
+const PERCENT_SUFFIX = "%";
+/** CSS Color 4 `rgb(R G B / A)`, which Apex cannot parse: it splits on commas. */
+const SPACE_SEPARATED_RGB =
+  /^rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+%?)\s*)?\)$/i;
 const DEFAULT_PALETTE = [
   "--dms-chart-1",
   "--dms-chart-2",
@@ -34,6 +39,20 @@ function isHexLike(value: string): boolean {
   return HEX_PREFIXES.some((prefix) => value.startsWith(prefix));
 }
 
+function alphaValue(alpha: string): number {
+  if (!alpha.endsWith(PERCENT_SUFFIX)) return Number(alpha);
+  return Number(alpha.slice(0, -PERCENT_SUFFIX.length)) / PERCENT_SCALE;
+}
+
+/** Rewrite a space-separated `rgb()` in the comma form Apex reads. */
+function toCommaSeparatedRgb(color: string): string {
+  const match = SPACE_SEPARATED_RGB.exec(color);
+  if (!match) return color;
+  const [, red, green, blue, alpha] = match;
+  if (alpha === undefined) return `rgb(${red}, ${green}, ${blue})`;
+  return `rgba(${red}, ${green}, ${blue}, ${alphaValue(alpha)})`;
+}
+
 const colorProbeCache = new Map<string, string>();
 
 /** Invalidate resolved colors before consumers recompute for a theme change. */
@@ -105,7 +124,7 @@ function colorVariable(value: string): string | undefined {
 /** Resolve semantic colors, shade tokens and global CSS variables for Apex. */
 export function resolveChartColor(value: string | undefined): string {
   const colorName = value ?? DEFAULT_COLOR_NAME;
-  if (isHexLike(colorName)) return colorName;
+  if (isHexLike(colorName)) return toCommaSeparatedRgb(colorName);
   const variable = colorVariable(colorName);
   if (!variable) return colorName;
   return readCssVariable(variable, SAFE_HEX_FALLBACK);

package/frontend-vue/layers/dms-ui/app/composables/confirm/types.ts

@@ -76,7 +76,7 @@ export interface ConfirmOptions
  */
 export interface ConfirmFromOptions {
   /**
-   * Fill-ins of the URL's `{placeholders}` and of the dialog's texts (a
+   * Fill-ins of the URL's `{{row.X}}` tokens and of the dialog's texts (a
    * record's fields); the dialog's own `params` win in its texts.
    */
   params?: Record<string, unknown>;

package/frontend-vue/layers/dms-ui/app/composables/form/types/props.ts

@@ -59,4 +59,6 @@ export interface FormProps extends FormComponentProps {
   redirectOnSuccess?: string;
   /** Field of the loaded row a page form names in the breadcrumb. */
   labelKey?: string;
+  /** Without the record `fetchUrl` names, "No entry selected", no fields. */
+  requiresRecord?: boolean;
 }

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -9,10 +9,11 @@ import type { FormField, FormFieldOrGroup } from "./types/field";
 import { isFieldGroup } from "./types/field";
 import { resolveResponseToast } from "../../build/utils/responseWarning";
 import { processFieldI18n } from "../../build/utils/fieldOptionsI18n";
+import { orderFormEntries } from "../../build/composables/form/formEntryOrder";
 import {
   type ReplaceUrlVariablesContext,
   hasUrlVariables,
-  replaceUrlVariables,
+  resolveLinkVariables,
   resolveTextVariables,
   resolveUrlVariables,
 } from "../../build/utils/urlVariables";
@@ -90,16 +91,17 @@ export function cloneFormValue(
 
 /**
  * Whether a form offers to save: once it has an address and a field someone
- * can fill in, unless its `saveMode` is `none`.
+ * can fill in, unless its `saveMode` is `none`. An `action` form does
+ * something even with nothing to fill in, so it needs only the address.
  */
 export function formShowsActions(
-  options: Pick<FormProps, "saveMode" | "submitUrl">,
+  options: Pick<FormProps, "saveMode" | "submitUrl" | "kind">,
   fields: ReadonlyArray<{ disabled?: boolean }>,
 ): boolean {
   return (
     options.saveMode !== "none" &&
     !!options.submitUrl &&
-    !fields.every((field) => field.disabled)
+    (options.kind === "action" || !fields.every((field) => field.disabled))
   );
 }
 
@@ -573,7 +575,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
   );
 
   const fields = computed<FormFieldOrGroup[]>(() =>
-    props.fields.map((item) => {
+    orderFormEntries(props.fields).map((item) => {
       if (isFieldGroup(item)) {
         return {
           ...item,
@@ -770,7 +772,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     showSubmitNotice(response);
     props.onSuccessCallback?.(response, plainData);
     if (props.redirectOnSuccess) {
-      const target = replaceUrlVariables(
+      const target = resolveLinkVariables(
         props.redirectOnSuccess,
         buildUrlContext(response as Record<string, unknown> | undefined),
       );

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/action-target.ts

@@ -31,7 +31,7 @@ export interface SidePanelTargetOptions {
  */
 export interface DownloadActionTarget {
   type: "download";
-  /** Takes the `{field}` and `{{params.X}}` / `{{query.X}}` tokens. */
+  /** Takes the `{{row.field}}` and `{{params.X}}` / `{{query.X}}` tokens. */
   url: string;
   /** Saved under; the response's `Content-Disposition` name, else the URL's. */
   filename?: string;

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/config.ts

@@ -224,7 +224,7 @@ export interface TableViewSourceCapabilities {
 /** Where a `TableView.fromSource` table reads its rows (backend `source`). */
 export interface TableViewSourceConfig {
   fetchUrl: string;
-  /** Route answering one row, `{id}` its id (backend `fetchRowUrl`). */
+  /** Route answering one row, `{{row.id}}` its id (backend `fetchRowUrl`). */
   fetchRowUrl?: string;
   capabilities: TableViewSourceCapabilities;
   /** Id of the `PeriodSelector` whose period is sent to `fetchUrl`. */
@@ -294,11 +294,9 @@ export interface TableViewConfig<T extends Data>
   routeParamFilters?: RouteParamFilters;
   routeParams?: Record<string, string>;
   tabs?: TableViewTab[];
-  /** Displays this table view offers, beyond the implicit built-in `table`. */
+  /** Displays this table view offers, in order; the built-in `table` alone when left out. */
   displays?: TableViewDisplayConfig[];
-  /** Whether the built-in `table` display is offered. Defaults to `true`. */
-  tableDisplay?: boolean;
-  /** Display shown by default when the user has no saved preference. Defaults to "table". */
+  /** Display shown by default when the user has no saved preference. Defaults to the first display. */
   defaultDisplay?: string;
   /** Expandable rows: caret column + detail band. */
   expandable?: TableViewExpandableConfig;

package/frontend-vue/layers/dms-ui/app/utils/bannerToneIcons.ts

@@ -0,0 +1,13 @@
+import type { SemanticColor } from "./semanticTint";
+
+/** The tones a banner washes with. */
+export type BannerTone = Exclude<SemanticColor, "neutral">;
+
+/** The icon a banner shows for its tone when it is given none. */
+export const BANNER_TONE_ICONS: Record<BannerTone, string> = {
+  info: "i-ph-info",
+  success: "i-ph-check-circle",
+  warning: "i-ph-warning",
+  error: "i-ph-warning-circle",
+  primary: "i-ph-sparkle",
+};

package/frontend-vue/layers/dms-ui/app/utils/cascader.ts

@@ -201,3 +201,29 @@ export function buildCascaderPathLabels(
   }
   return labels;
 }
+
+function asPickedRow(item: unknown): CascaderRow | undefined {
+  return typeof item === "object" && item !== null
+    ? (item as CascaderRow)
+    : undefined;
+}
+
+/**
+ * The label path of a picked value — an id, or a row carrying its id and its
+ * own label — resolved against the flat list of rows once it is there; its
+ * own label, or its id, until then or when the list does not hold it.
+ */
+export function cascaderValuePath(
+  item: unknown,
+  keyMapping: CascaderKeyMapping,
+  rows?: CascaderRow[],
+): string[] {
+  const row = asPickedRow(item);
+  const ownLabel = row ? rowValue(row, keyMapping.label) : undefined;
+  const id = row
+    ? rowValue(row, keyMapping.value)
+    : rowValue({ id: item }, "id");
+  if (!id) return ownLabel ? [ownLabel] : [];
+  const labels = rows ? buildCascaderPathLabels(rows, keyMapping, id) : [];
+  return labels.length > 0 ? labels : [ownLabel ?? id];
+}

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -284,6 +284,8 @@
         "error_description": "Check your connection, then try again. Nothing can be saved until the entry loads.",
         "forbidden_title": "You can't view this entry",
         "forbidden_description": "Your role doesn't let you view this entry, so the form can't open on its current values. Ask an administrator for access.",
+        "missing_title": "No entry selected",
+        "missing_description": "This form shows one entry, and the address names none. Open it from an entry to see its values.",
         "retry": "Try again"
       },
       "select_date": "Select date",
@@ -335,6 +337,8 @@
       },
       "file": {
         "count": "{count} file(s)",
+        "drop_prompt": "Drop a file or browse",
+        "drop_prompt_multiple": "Drop files or browse",
         "max_size": "Max size: {size}",
         "uploaded_files": "Uploaded files",
         "rejected_title": "File not added",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -285,6 +285,8 @@
         "error_description": "Vérifiez votre connexion, puis réessayez. Rien ne peut être enregistré tant que l'élément n'est pas chargé.",
         "forbidden_title": "Vous ne pouvez pas voir cet élément",
         "forbidden_description": "Votre rôle ne vous permet pas de voir cet élément, le formulaire ne peut donc pas s'ouvrir sur ses valeurs actuelles. Demandez l'accès à un administrateur.",
+        "missing_title": "Aucun élément sélectionné",
+        "missing_description": "Ce formulaire affiche un élément, et l'adresse n'en désigne aucun. Ouvrez-le depuis un élément pour voir ses valeurs.",
         "retry": "Réessayer"
       },
       "select_date": "Sélectionner une date",
@@ -336,6 +338,8 @@
       },
       "file": {
         "count": "{count} fichier(s)",
+        "drop_prompt": "Glisser un fichier ou parcourir",
+        "drop_prompt_multiple": "Glisser des fichiers ou parcourir",
         "max_size": "Taille max : {size}",
         "uploaded_files": "Fichiers téléversés",
         "rejected_title": "Fichier non ajouté",

package/frontend-vue/tests/activity-feed-fill-height.test.ts

@@ -87,6 +87,13 @@ it("keeps each day's separator on top of the scrolled entries", async () => {
   expect(html).toMatch(/<div[^>]*class="[^"]*\bsticky top-0\b[^"]*"[^>]*><h3/);
 });
 
+it("keeps the fold button in sight at the foot of the scrolled entries", async () => {
+  const html = await render({ fillHeight: true, visibleItems: 3 });
+  expect(html).toMatch(
+    /class="dms-activity-feed__fold[^"]*\bsticky bottom-0\b[^"]*"/,
+  );
+});
+
 it("names the region after the feed when it has no title", async () => {
   const area = scrollArea(await render({ fillHeight: true, title: undefined }));
   expect(area).toContain('aria-label="dms.activity_feed.list_label"');

package/frontend-vue/tests/banner-tone-icon.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+/**
+ * A DmsBanner given no icon shows its tone's, as the Banner block does: a
+ * check on success, an "i" on info. An icon given wins.
+ */
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, expect, it, vi } from "vitest";
+
+vi.mock("../layers/dms-ui/app/components/icon-well/IconWell.vue", () => ({
+  default: defineComponent({
+    props: { icon: { type: String, default: undefined } },
+    setup: (props) => () => h("i", { "data-icon": props.icon }),
+  }),
+}));
+
+const { default: DmsBanner } = await import(
+  "../layers/dms-ui/app/components/banner/Banner.vue"
+);
+
+const UAlert = defineComponent({
+  setup:
+    (_props, { slots }) =>
+    () =>
+      h("div", [slots.leading?.()]),
+});
+
+let app: App | undefined;
+
+afterEach(() => app?.unmount());
+
+function iconOf(props: Record<string, unknown>): string | null {
+  const host = document.createElement("div");
+  app = createApp({ render: () => h(DmsBanner, { title: "Notice", ...props }) });
+  app.component("UAlert", UAlert);
+  app.mount(host);
+  return host.querySelector("[data-icon]")?.getAttribute("data-icon") ?? null;
+}
+
+it.each([
+  ["warning", "i-ph-warning"],
+  ["success", "i-ph-check-circle"],
+  ["info", "i-ph-info"],
+  ["error", "i-ph-warning-circle"],
+  ["primary", "i-ph-sparkle"],
+])("shows the %s tone's icon when given none", (tone, icon) => {
+  expect(iconOf({ tone })).toBe(icon);
+});
+
+it("keeps the warning icon of its default tone", () => {
+  expect(iconOf({})).toBe("i-ph-warning");
+});
+
+it("shows the icon it is given whatever the tone", () => {
+  expect(iconOf({ tone: "success", icon: "i-ph-rocket" })).toBe("i-ph-rocket");
+});