@wix/himalaya-cli 0.1398.0 → 0.1399.0

package/templates/restaurant-owner/tier5-src/_shared/aria-widget-view.ts

@@ -12,10 +12,11 @@
 // every collapsible element carries its own `*Hidden` boolean — the same shape
 // the transcript bubbles already use for their three link slots.
 
-import type { NormalizedWidget, WidgetKind, WidgetOption } from "./aria-widget-model.js";
+import type { NormalizedWidget, WidgetBenefit, WidgetKind, WidgetOption } from "./aria-widget-model.js";
 import { SELECTED_TOKEN, VALUES_TOKEN, isWebUrl, stripMarkdown } from "./aria-widget-model.js";
 import { oauthView } from "./aria-widget-oauth.js";
 import { composeGenericCard } from "./aria-generic-widget.js";
+import { formatNumber } from "./engine-intl.js";
 import { normalizeWidget } from "./aria-widget-kinds.js";
 import { scanEnvelopes, widgetsOfParts } from "./aria-widgets.js";
 
@@ -90,9 +91,12 @@ export interface WidgetOptionRow {
   /** The per-option button's label, already host-disclosed. */
   buttonLabel: string;
   buttonHidden: boolean;
-  /** PLANS' benefit list, joined — an array cannot ride on a templated row. */
+  /** PLANS benefit prose plus nested repeater rows carrying each icon. */
   listText: string;
+  benefits: WidgetBenefit[];
   listHidden: boolean;
+  badge: string;
+  badgeHidden: boolean;
   selected: boolean;
   /** This option's own button `respondText`, before substitution. Carried on
    *  the row because the row is what a tap identifies. */
@@ -114,6 +118,7 @@ export interface WidgetOptionRow {
 export interface WidgetSlice {
   label: string;
   value: number;
+  color: string;
 }
 
 /** One step of a TODO_PLAN, shaped for `Timeline`. */
@@ -218,6 +223,9 @@ export interface WidgetView {
    *  negation: an EMPTY chart is neither, so hiding each component on the
    *  other's flag left both on screen as blank boxes. */
   chartPieHidden: boolean;
+  chartRingHidden: boolean;
+  chartPlainPieHidden: boolean;
+  chartLegend: { label: string; color: string; marker: "dot"; value: string }[];
   chartSeriesHidden: boolean;
   chartEmptyHidden: boolean;
   /** Hide the async spinner. `asyncUntracked` is not the right flag: a TRACKED
@@ -526,7 +534,7 @@ export const NO_WIDGET: WidgetView = {
   optionsGridHidden: true, optionsListHidden: false,
   footerRowHidden: false, footerColumnHidden: true,
   slices: [], values: [], chartIsPie: false, chartIsSeries: false, chartKind: "",
-  chartPieHidden: true, chartSeriesHidden: true, chartEmptyHidden: true,
+  chartPieHidden: true, chartRingHidden: true, chartPlainPieHidden: true, chartLegend: [], chartSeriesHidden: true, chartEmptyHidden: true,
   asyncSpinnerHidden: true, itemsLoadingHidden: true,
   chartEmpty: true, description: "", descriptionHidden: true,
   steps: [], stepsEmpty: true, progress: 0, progressText: "",
@@ -574,11 +582,20 @@ function webOnly(url: string | undefined): string {
 /** One option, flattened. `selected` is passed in because it is worker state
  *  rather than anything the payload said — except on the first build, where the
  *  service's `isPreselected` seeds it. */
+/** An option that would draw nothing — every line stripped to empty, no picture, badge,
+ *  benefit or usable button — is dropped rather than rendered as a blank card or an
+ *  unlabeled row, and does not count toward `renderable`. */
+function hasVisibleContent(row: WidgetOptionRow): boolean {
+  return !!(row.title || row.subtitle || row.text || row.pictureUrl || row.badge
+    || row.benefits.length || !row.buttonHidden);
+}
+
 function optionRow(
   o: {
     value: string; title: string; subtitle: string; text: string;
     pictureUrl: string; buttonLabel: string; actionUrl: string; listText: string;
-    respondText: string; actionScreenId?: string; notSupportedText?: string;
+    respondText: string; actionScreenId?: string; notSupportedText?: string; badge?: string;
+    benefits?: WidgetBenefit[];
   },
   i: number,
   selected: boolean,
@@ -629,22 +646,33 @@ function optionRow(
   // RADIO_BUTTON option, which may carry `text` and no `title` at all, renders
   // as an empty row. So fold here rather than in each case's composition: the
   // raw `text` is still exported below for anything that wants both.
-  const hasTitle = !!o.title;
-  const rowTitle = hasTitle ? o.title : (o.text || o.subtitle);
+  // "Has a title" is judged on the STRIPPED title: a title of pure markup (`***`) falls back
+  // to the option's other prose exactly as a missing one does.
+  const strippedTitle = stripMarkdown(o.title);
+  const hasTitle = !!strippedTitle;
+  const rowTitle = hasTitle ? strippedTitle : stripMarkdown(o.text || o.subtitle);
   const rowSubtitle = hasTitle
-    ? (o.subtitle || o.text)
-    : (o.text && o.subtitle ? o.subtitle : "");
+    ? stripMarkdown(o.subtitle || o.text)
+    : stripMarkdown(o.text && o.subtitle ? o.subtitle : "");
+  // Every `*Hidden` flag follows the STRIPPED value: prose that is only markup
+  // (`---`, `***`, an image with empty alt) strips to "" and must not paint an
+  // empty node.
+  const text = stripMarkdown(o.text);
+  const listText = stripMarkdown(o.listText);
+  const benefits = (o.benefits ?? []).filter((b) => b.text);
+  const badge = stripMarkdown(o.badge || "");
   return {
     id: `o${i}`,
     value: o.value,
     title: rowTitle,
     subtitle: rowSubtitle, subtitleHidden: !rowSubtitle,
-    text: o.text, textHidden: !o.text,
+    text, textHidden: !text,
     pictureUrl, pictureHidden: !pictureUrl,
     // A label is not enough: the button has to be able to DO something — say
     // its text, go to its url, or explain why its screen is not here.
     buttonLabel, buttonHidden: !(buttonLabel && (respondText || actionUrl || actionScreenId)),
-    listText: o.listText, listHidden: !o.listText,
+    listText, benefits, listHidden: !listText && !benefits.length,
+    badge, badgeHidden: !badge,
     selected,
     respondText,
     actionUrl,
@@ -757,22 +785,27 @@ export function viewOf(
         // or screen destination, so that row must be removed.
         return !rawUrl || isWebUrl(rawUrl);
       })
-    : mappedOptions;
+        .filter(hasVisibleContent)
+    : mappedOptions.filter(hasVisibleContent);
 
   // CHART. `pieSlices` is the only shape the catalogue sends, but `chartType`
   // decides the component: a pie is a `DonutChart` at zero thickness, anything
   // else a `Chart` over the same magnitudes.
   const rawSlices = Array.isArray(extra.slices) ? (extra.slices as { label?: unknown; value?: unknown }[]) : [];
-  const slices: WidgetSlice[] = rawSlices.map((sl) => ({
-    label: typeof sl.label === "string" ? sl.label : "",
+  // The first-party chart cycles the same palette for sectors and legend dots.
+  const chartColors = ["ariaChartBlue", "ariaChartGreen", "ariaChartPurple", "ariaChartGray"];
+  const slices: WidgetSlice[] = rawSlices.map((sl, i) => ({
+    label: typeof sl.label === "string" ? stripMarkdown(sl.label) : "Other",
     value: typeof sl.value === "number" && Number.isFinite(sl.value) ? sl.value : 0,
+    color: chartColors[i % chartColors.length],
   }));
   const chartKind = typeof extra.chartType === "string" ? extra.chartType : "";
   // "doughnut" is the spelling the reference catalogue uses; "donut" is the
   // component's. Accepting only the component's spelling classified the real
   // payload as a SERIES and drew it as bars.
   const isPie = !chartKind || chartKind === "pie" || chartKind === "donut" || chartKind === "doughnut";
-  const description = typeof extra.description === "string" ? extra.description : "";
+  const isRing = chartKind === "donut" || chartKind === "doughnut";
+  const description = typeof extra.description === "string" ? stripMarkdown(extra.description) : "";
 
   // TODO_PLAN. `status` is the service's word; `done` is what `Timeline` draws.
   const rawItems = Array.isArray(extra.items) ? (extra.items as { label?: unknown; status?: unknown }[]) : [];
@@ -811,11 +844,16 @@ export function viewOf(
     // A single-select starts with at most ONE preselected choice, whatever the
     // payload marked — a radio group showing two ticks is a state the control
     // cannot otherwise reach.
+    // A choice with nothing to show (a markup-only title and no prose) is dropped like any
+    // other empty option; the preselection seed counts only choices that are drawn, and each
+    // keeps its original index so its id is stable.
     let seeded = false;
-    const choices = raw.map((o, j) => {
+    const choices: WidgetOptionRow[] = [];
+    raw.forEach((o, j) => {
+      if (!hasVisibleContent(optionRow(o, j, false, disclose, allowPicture))) return;
       const pre = !!o.preselected && (type !== "single-select" || !seeded);
       if (pre) seeded = true;
-      return optionRow(o, j, pre, disclose, allowPicture);
+      choices.push(optionRow(o, j, pre, disclose, allowPicture));
     });
     // A question with no choices and no free-text option of its own can still
     // be answered — text is the only thing it can take — so it gets the field.
@@ -947,6 +985,15 @@ export function viewOf(
     chartIsPie: w.kind === "CHART" && isPie && slices.length > 0,
     chartIsSeries: w.kind === "CHART" && !isPie && slices.length > 0,
     chartPieHidden: !(w.kind === "CHART" && isPie && slices.length > 0),
+    chartRingHidden: !(w.kind === "CHART" && isRing && slices.length > 0),
+    chartPlainPieHidden: !(w.kind === "CHART" && isPie && !isRing && slices.length > 0),
+    // Name AND value per row: the legend is the only place a slice's magnitude
+    // is spelled out, and the a11y contract reads both. The worker formats it,
+    // not each renderer, through the shared cross-engine formatter.
+    // Only the wedges the donut actually draws: every renderer drops a slice
+    // whose value is not positive, so its legend row would name nothing.
+    chartLegend: slices.filter((s) => s.value > 0).map(({ label, color, value }) => ({ label, color, marker: "dot" as const,
+      value: formatNumber(value) })),
     chartSeriesHidden: !(w.kind === "CHART" && !isPie && slices.length > 0),
     chartKind,
     chartEmpty: w.kind === "CHART" && slices.length === 0,

package/templates/retail-store-owner/dev/index.ts

@@ -57544,6 +57544,7 @@ const SCREENS = runtimeSetting({
                                                           "title": "$item.buttonLabel",
                                                           "style": "secondary",
                                                           "size": "sm",
+                                                          "fullWidth": false,
                                                           "action": {
                                                             "actionId": "tier5.himiOwnerLiteAria.widgetRespond",
                                                             "params": {
@@ -58739,15 +58740,95 @@ const SCREENS = runtimeSetting({
                                                                 }
                                                               },
                                                               {
-                                                                "id": "",
+                                                                "id": "himi_owner_lite_aria.widget.PLANS.benefits_$item.id",
                                                                 "body": {
                                                                   "package": "himalaya",
-                                                                  "type": "Text",
+                                                                  "type": "LazyList",
                                                                   "props": {
-                                                                    "text": "$item.listText",
-                                                                    "style": "footnote",
-                                                                    "color": "textSecondary",
-                                                                    "maxLines": 8
+                                                                    "itemsPath": "$item.benefits",
+                                                                    "spacing": 4,
+                                                                    "items": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "HStack",
+                                                                          "props": {
+                                                                            "spacing": 8,
+                                                                            "children": [
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Icon",
+                                                                                  "props": {
+                                                                                    "name": "$item.icon",
+                                                                                    "size": 12,
+                                                                                    "tint": "success"
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "accessibilityRole": "decorative",
+                                                                                  "hiddenPath": "$item.successHidden"
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Icon",
+                                                                                  "props": {
+                                                                                    "name": "$item.icon",
+                                                                                    "size": 12,
+                                                                                    "tint": "textPrimary"
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "accessibilityRole": "decorative",
+                                                                                  "hiddenPath": "$item.plainHidden"
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Icon",
+                                                                                  "props": {
+                                                                                    "name": "$item.icon",
+                                                                                    "size": 12,
+                                                                                    "tint": "accentPrimary"
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "accessibilityRole": "decorative",
+                                                                                  "theme": {
+                                                                                    "colors": {
+                                                                                      "accentPrimary": "$item.colorHex"
+                                                                                    }
+                                                                                  },
+                                                                                  "hiddenPath": "$item.customHidden"
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Text",
+                                                                                  "props": {
+                                                                                    "text": "$item.text",
+                                                                                    "style": "footnote",
+                                                                                    "maxLines": 8
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "weight": 1
+                                                                                }
+                                                                              }
+                                                                            ]
+                                                                          }
+                                                                        }
+                                                                      }
+                                                                    ]
                                                                   }
                                                                 },
                                                                 "modifiers": {
@@ -59147,6 +59228,181 @@ const SCREENS = runtimeSetting({
                                           }
                                         }
                                       },
+                                      {
+                                        "id": "himi_owner_lite_aria.widget.VISUAL_DISPLAY.variants",
+                                        "body": {
+                                          "package": "himalaya",
+                                          "type": "LazyList",
+                                          "props": {
+                                            "itemsPath": "$service:himiOwnerLiteAria.widget.options",
+                                            "spacing": 6,
+                                            "items": [
+                                              {
+                                                "id": "himi_owner_lite_aria.widget.VISUAL_DISPLAY.variant_$item.id",
+                                                "body": {
+                                                  "package": "himalaya",
+                                                  "type": "Card",
+                                                  "props": {
+                                                    "children": [
+                                                      {
+                                                        "id": "",
+                                                        "body": {
+                                                          "package": "himalaya",
+                                                          "type": "VStack",
+                                                          "props": {
+                                                            "spacing": 8,
+                                                            "children": [
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Image",
+                                                                  "props": {
+                                                                    "url": "$item.pictureUrl",
+                                                                    "fillWidth": true,
+                                                                    "aspectRatio": 1.5,
+                                                                    "contentMode": "fill",
+                                                                    "contentDescription": "$item.title"
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.pictureHidden"
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "HStack",
+                                                                  "props": {
+                                                                    "spacing": 0,
+                                                                    "children": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "Text",
+                                                                          "props": {
+                                                                            "text": "$item.badge",
+                                                                            "style": "footnote",
+                                                                            "color": "surfacePrimary"
+                                                                          }
+                                                                        },
+                                                                        "modifiers": {
+                                                                          "background": {
+                                                                            "token": "textSecondary"
+                                                                          },
+                                                                          "cornerRadius": 4,
+                                                                          "padding": {
+                                                                            "leading": 8,
+                                                                            "trailing": 8,
+                                                                            "top": 2,
+                                                                            "bottom": 2
+                                                                          }
+                                                                        }
+                                                                      },
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "Spacer",
+                                                                          "props": {}
+                                                                        }
+                                                                      }
+                                                                    ]
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.badgeHidden"
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Text",
+                                                                  "props": {
+                                                                    "text": "$item.title",
+                                                                    "style": "bodyEmphasis"
+                                                                  }
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Text",
+                                                                  "props": {
+                                                                    "text": "$item.subtitle",
+                                                                    "style": "body",
+                                                                    "color": "textSecondary"
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.subtitleHidden"
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Text",
+                                                                  "props": {
+                                                                    "text": "$item.text",
+                                                                    "style": "body"
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.textHidden"
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Text",
+                                                                  "props": {
+                                                                    "text": "$item.listText",
+                                                                    "style": "body"
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.listHidden"
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "himi_owner_lite_aria.widget.VISUAL_DISPLAY.variant_$item.id.button",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Button",
+                                                                  "props": {
+                                                                    "title": "$item.buttonLabel",
+                                                                    "style": "secondary",
+                                                                    "size": "sm",
+                                                                    "action": {
+                                                                      "actionId": "tier5.himiOwnerLiteAria.widgetRespond",
+                                                                      "params": {
+                                                                        "value": "$item.id"
+                                                                      }
+                                                                    }
+                                                                  }
+                                                                },
+                                                                "modifiers": {
+                                                                  "hiddenPath": "$item.buttonHidden"
+                                                                }
+                                                              }
+                                                            ]
+                                                          }
+                                                        }
+                                                      }
+                                                    ]
+                                                  }
+                                                }
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      },
                                       {
                                         "id": "",
                                         "body": {
@@ -60378,7 +60634,23 @@ const SCREENS = runtimeSetting({
                                         },
                                         "modifiers": {
                                           "accessibilityLabel": "$service:himiOwnerLiteAria.widget.text",
-                                          "hiddenPath": "$service:himiOwnerLiteAria.widget.chartPieHidden"
+                                          "hiddenPath": "$service:himiOwnerLiteAria.widget.chartPlainPieHidden"
+                                        }
+                                      },
+                                      {
+                                        "id": "himi_owner_lite_aria.widget.CHART.doughnut",
+                                        "body": {
+                                          "package": "himalaya",
+                                          "type": "DonutChart",
+                                          "props": {
+                                            "slicesPath": "$service:himiOwnerLiteAria.widget.slices",
+                                            "thickness": 18,
+                                            "size": 160
+                                          }
+                                        },
+                                        "modifiers": {
+                                          "accessibilityLabel": "$service:himiOwnerLiteAria.widget.text",
+                                          "hiddenPath": "$service:himiOwnerLiteAria.widget.chartRingHidden"
                                         }
                                       },
                                       {
@@ -60397,6 +60669,21 @@ const SCREENS = runtimeSetting({
                                           "hiddenPath": "$service:himiOwnerLiteAria.widget.chartSeriesHidden"
                                         }
                                       },
+                                      {
+                                        "id": "himi_owner_lite_aria.widget.CHART.legend",
+                                        "body": {
+                                          "package": "himalaya",
+                                          "type": "Legend",
+                                          "props": {
+                                            "itemsPath": "$service:himiOwnerLiteAria.widget.chartLegend",
+                                            "orientation": "vertical"
+                                          }
+                                        },
+                                        "modifiers": {
+                                          "accessibilityLabel": "$service:himiOwnerLiteAria.widget.text",
+                                          "hiddenPath": "$service:himiOwnerLiteAria.widget.chartPieHidden"
+                                        }
+                                      },
                                       {
                                         "id": "",
                                         "body": {
@@ -60489,6 +60776,16 @@ const SCREENS = runtimeSetting({
                               }
                             ]
                           }
+                        },
+                        "modifiers": {
+                          "theme": {
+                            "colors": {
+                              "ariaChartBlue": "#126EFF",
+                              "ariaChartGreen": "#26A659",
+                              "ariaChartPurple": "#9926D6",
+                              "ariaChartGray": "#878AA6"
+                            }
+                          }
                         }
                       },
                       "accessibilityAnnouncement": "$service:himiOwnerLiteAria.widget.text"