@wildwinter/app-shell 0.39.0 → 0.40.0

package/dist/index.d.cts

@@ -1,4 +1,6 @@
 export { EDIT_MENU, FILE_MENU, GO_MENU, MenuLabel, PANE_MENU, PLAY_MENU, PUBLISH_MENU, REVIEW_MENU, VIEW_MENU } from './menu.cjs';
+export { HintBarItem, KeyHintOptions, KeyPlatform, hintBar, isKeyCombo, keyHint, keyLabel, keyLegends, keyPlatform, setKeyPlatform, tipWithKey } from './keys.cjs';
+export { ProblemCopy, ProblemCopyEntry, ProblemCopyTable, ProblemLike, defaultProblemCopy, describeProblem, problemLine, problemName } from './problems.cjs';
 export { D as DefaultControlOptions, a as DupGuard, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, S as SettingsDialog, f as SettingsDialogOptions, g as SettingsSection, h as SettingsSectionHandle, i as defaultControl, j as dupGuard, k as expandableRow, l as focusNewRow, m as mountPropertyList, n as mountSettingsDialog, r as revealRow, o as revealRowWhenReady } from './property-list-D3VZCJzi.cjs';
 export { DialogFrame, DialogFrameOptions, dialogFrame } from './dialog.cjs';
 export { Floating, FloatingOptions, createFloating } from './floating.cjs';
@@ -254,6 +256,29 @@ declare function stageChips(holder: {
  * var(--accent)` pair is the family's look).
  */
 declare function wireReorder(el: HTMLElement, id: string, axis: "x" | "y", onMove: (id: string, before: boolean, targetId: string) => void): void;
+/**
+ * A metadata line: `parts` as spans in a flex row, separated by a drawn
+ * 3px disc (a `::before` on every part after the first, in controls.css),
+ * so `metaLine(["6 runs", "200 max steps", "seed 4"])` is what
+ * "6 runs · 200 max steps · seed 4" used to be, without the typed dot.
+ * Empty, null and undefined parts are skipped, so a caller can pass an
+ * optional segment without branching.
+ */
+declare function metaLine(parts: (string | Node | null | undefined)[]): HTMLElement;
+interface Crumb {
+    label: string;
+    /** Makes the crumb a button. Ignored on the last crumb, which is where the
+     *  reader already is. */
+    onClick?: (event: MouseEvent) => void;
+}
+/**
+ * A breadcrumb trail: each crumb a span, or a button when it carries
+ * `onClick` and is not the last, with `iconNode("forward", 12)` drawn between
+ * them. `breadcrumb(["Box", "Deck", "Card"])` is what "Box › Deck › Card"
+ * used to be; the chevrons are the family's own drawing, not a symbol-font
+ * character.
+ */
+declare function breadcrumb(parts: (string | Crumb)[]): HTMLElement;
 
 /** Curated colour slots; must match the `--char-*` set defined per theme. */
 declare const PALETTE_SIZE = 12;
@@ -276,7 +301,10 @@ interface PaneSideConfig {
     resizable?: boolean;
     /** Noun for the toggle's tooltip/aria, e.g. "navigator" / "inspector". */
     label?: string;
-    /** Shortcut hint appended to the tooltip, e.g. "Cmd+1". */
+    /** The key that toggles the pane, bracketed after the tooltip. A combo in
+     *  the portable spelling ("Mod+1") is drawn for the platform through
+     *  `tipWithKey`: "(⌘1)" on a Mac, "(Ctrl+1)" elsewhere. Anything else is a
+     *  literal and goes in verbatim, as it always has ("Cmd+1" stays "Cmd+1"). */
     shortcutHint?: string;
     /** false = the pane is not offered at all: no toggle, togglePane ignored,
      *  forced closed whatever the remembered state says. For a slot a host has
@@ -298,8 +326,9 @@ interface PaneShellOptions {
     onChange?: (state: PaneShellState) => void;
     /** The toggle's rollover for a side in a given state. Default: "Show
      *  navigator" / "Hide navigator" from the side's `label`, with the
-     *  `shortcutHint` in brackets. Written as `data-tip` (the themed tooltip)
-     *  and as the accessible name; never as `title`. */
+     *  `shortcutHint` in brackets (platform-true when it is a combo). Written as
+     *  `data-tip` (the themed tooltip) and as the accessible name; never as
+     *  `title`. */
     tipFor?: (side: PaneSide, open: boolean) => string;
     /** An extra class per side, toggled on the `.panes` grid whenever that side
      *  is collapsed, beside the shell's own `no-nav` / `no-inspector`. For an
@@ -1031,8 +1060,12 @@ interface StepperItem {
     /** An extra class on the kind chip, so an app can colour its own kinds
      *  (Storyletter's `sev-error`, and `done` for a resolved thread). */
     kindClass?: string;
-    /** Where it is, in the app's own address. Set in the mono face. */
-    where?: string;
+    /** Where it is. A string is the app's own address, set in the mono face; a
+     *  Node is a made element, a `breadcrumb(["Box", "Deck", "Card"])` say,
+     *  drawn as it is. Give the bar plain crumbs: the whole entry is already
+     *  the button that goes there, so a crumb with its own click has nowhere
+     *  else to take you. */
+    where?: string | Node;
     /** The entry itself, in one line. Overflow is clipped, not wrapped: the bar
      *  is one row high and stays that way however long the sentence is. */
     text: string;
@@ -1118,4 +1151,4 @@ declare function historyNav(onBack: () => void, onForward: () => void): {
     set(canBack: boolean, canForward: boolean): void;
 };
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type ElProps, type FollowButton, type FollowButtonOptions, type GameIdEditorOptions, ICON_NAMES, ICON_SIZE, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobBeginOptions, type JobProgressOptions, type JobProgressView, type NavHistory, type NavHistoryOptions, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, PROPERTY_NAME_HINT, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButton, type PinButtonOptions, type PropertyRefOptions, RESERVED_PROPERTY_NAMES, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type ToastKind, type ToastOptions, type ToolWindowHeadOptions, type TooltipOptions, type VcBadge, type VcMap, askIdentity, bindPropertyName, bindPropertyRef, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, el, firstIllegalPropertyName, foldVc, followButton, gameIdify, hideTip, historyNav, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isCaseOnlyPropertyName, isIconName, isValidGameId, isValidPropertyName, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, propertyNameProblem, propertyNameify, propertyRefProblem, renderStepperBar, revalidatePropertyRefs, saveIndicator, showAbout, stageChips, staleBar, tagChips, tipAt, tipBold, toast, toolWindowHead, vcBadgeFor, wireReorder };
+export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type Crumb, type DocLine, type ElProps, type FollowButton, type FollowButtonOptions, type GameIdEditorOptions, ICON_NAMES, ICON_SIZE, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobBeginOptions, type JobProgressOptions, type JobProgressView, type NavHistory, type NavHistoryOptions, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, PROPERTY_NAME_HINT, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButton, type PinButtonOptions, type PropertyRefOptions, RESERVED_PROPERTY_NAMES, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type ToastKind, type ToastOptions, type ToolWindowHeadOptions, type TooltipOptions, type VcBadge, type VcMap, askIdentity, bindPropertyName, bindPropertyRef, breadcrumb, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, el, firstIllegalPropertyName, foldVc, followButton, gameIdify, hideTip, historyNav, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isCaseOnlyPropertyName, isIconName, isValidGameId, isValidPropertyName, labelled, lockControls, lockNotice, metaLine, mountJobProgress, mountPaneShell, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, propertyNameProblem, propertyNameify, propertyRefProblem, renderStepperBar, revalidatePropertyRefs, saveIndicator, showAbout, stageChips, staleBar, tagChips, tipAt, tipBold, toast, toolWindowHead, vcBadgeFor, wireReorder };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { EDIT_MENU, FILE_MENU, GO_MENU, MenuLabel, PANE_MENU, PLAY_MENU, PUBLISH_MENU, REVIEW_MENU, VIEW_MENU } from './menu.js';
+export { HintBarItem, KeyHintOptions, KeyPlatform, hintBar, isKeyCombo, keyHint, keyLabel, keyLegends, keyPlatform, setKeyPlatform, tipWithKey } from './keys.js';
+export { ProblemCopy, ProblemCopyEntry, ProblemCopyTable, ProblemLike, defaultProblemCopy, describeProblem, problemLine, problemName } from './problems.js';
 export { D as DefaultControlOptions, a as DupGuard, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, S as SettingsDialog, f as SettingsDialogOptions, g as SettingsSection, h as SettingsSectionHandle, i as defaultControl, j as dupGuard, k as expandableRow, l as focusNewRow, m as mountPropertyList, n as mountSettingsDialog, r as revealRow, o as revealRowWhenReady } from './property-list-D3VZCJzi.js';
 export { DialogFrame, DialogFrameOptions, dialogFrame } from './dialog.js';
 export { Floating, FloatingOptions, createFloating } from './floating.js';
@@ -254,6 +256,29 @@ declare function stageChips(holder: {
  * var(--accent)` pair is the family's look).
  */
 declare function wireReorder(el: HTMLElement, id: string, axis: "x" | "y", onMove: (id: string, before: boolean, targetId: string) => void): void;
+/**
+ * A metadata line: `parts` as spans in a flex row, separated by a drawn
+ * 3px disc (a `::before` on every part after the first, in controls.css),
+ * so `metaLine(["6 runs", "200 max steps", "seed 4"])` is what
+ * "6 runs · 200 max steps · seed 4" used to be, without the typed dot.
+ * Empty, null and undefined parts are skipped, so a caller can pass an
+ * optional segment without branching.
+ */
+declare function metaLine(parts: (string | Node | null | undefined)[]): HTMLElement;
+interface Crumb {
+    label: string;
+    /** Makes the crumb a button. Ignored on the last crumb, which is where the
+     *  reader already is. */
+    onClick?: (event: MouseEvent) => void;
+}
+/**
+ * A breadcrumb trail: each crumb a span, or a button when it carries
+ * `onClick` and is not the last, with `iconNode("forward", 12)` drawn between
+ * them. `breadcrumb(["Box", "Deck", "Card"])` is what "Box › Deck › Card"
+ * used to be; the chevrons are the family's own drawing, not a symbol-font
+ * character.
+ */
+declare function breadcrumb(parts: (string | Crumb)[]): HTMLElement;
 
 /** Curated colour slots; must match the `--char-*` set defined per theme. */
 declare const PALETTE_SIZE = 12;
@@ -276,7 +301,10 @@ interface PaneSideConfig {
     resizable?: boolean;
     /** Noun for the toggle's tooltip/aria, e.g. "navigator" / "inspector". */
     label?: string;
-    /** Shortcut hint appended to the tooltip, e.g. "Cmd+1". */
+    /** The key that toggles the pane, bracketed after the tooltip. A combo in
+     *  the portable spelling ("Mod+1") is drawn for the platform through
+     *  `tipWithKey`: "(⌘1)" on a Mac, "(Ctrl+1)" elsewhere. Anything else is a
+     *  literal and goes in verbatim, as it always has ("Cmd+1" stays "Cmd+1"). */
     shortcutHint?: string;
     /** false = the pane is not offered at all: no toggle, togglePane ignored,
      *  forced closed whatever the remembered state says. For a slot a host has
@@ -298,8 +326,9 @@ interface PaneShellOptions {
     onChange?: (state: PaneShellState) => void;
     /** The toggle's rollover for a side in a given state. Default: "Show
      *  navigator" / "Hide navigator" from the side's `label`, with the
-     *  `shortcutHint` in brackets. Written as `data-tip` (the themed tooltip)
-     *  and as the accessible name; never as `title`. */
+     *  `shortcutHint` in brackets (platform-true when it is a combo). Written as
+     *  `data-tip` (the themed tooltip) and as the accessible name; never as
+     *  `title`. */
     tipFor?: (side: PaneSide, open: boolean) => string;
     /** An extra class per side, toggled on the `.panes` grid whenever that side
      *  is collapsed, beside the shell's own `no-nav` / `no-inspector`. For an
@@ -1031,8 +1060,12 @@ interface StepperItem {
     /** An extra class on the kind chip, so an app can colour its own kinds
      *  (Storyletter's `sev-error`, and `done` for a resolved thread). */
     kindClass?: string;
-    /** Where it is, in the app's own address. Set in the mono face. */
-    where?: string;
+    /** Where it is. A string is the app's own address, set in the mono face; a
+     *  Node is a made element, a `breadcrumb(["Box", "Deck", "Card"])` say,
+     *  drawn as it is. Give the bar plain crumbs: the whole entry is already
+     *  the button that goes there, so a crumb with its own click has nowhere
+     *  else to take you. */
+    where?: string | Node;
     /** The entry itself, in one line. Overflow is clipped, not wrapped: the bar
      *  is one row high and stays that way however long the sentence is. */
     text: string;
@@ -1118,4 +1151,4 @@ declare function historyNav(onBack: () => void, onForward: () => void): {
     set(canBack: boolean, canForward: boolean): void;
 };
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type ElProps, type FollowButton, type FollowButtonOptions, type GameIdEditorOptions, ICON_NAMES, ICON_SIZE, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobBeginOptions, type JobProgressOptions, type JobProgressView, type NavHistory, type NavHistoryOptions, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, PROPERTY_NAME_HINT, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButton, type PinButtonOptions, type PropertyRefOptions, RESERVED_PROPERTY_NAMES, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type ToastKind, type ToastOptions, type ToolWindowHeadOptions, type TooltipOptions, type VcBadge, type VcMap, askIdentity, bindPropertyName, bindPropertyRef, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, el, firstIllegalPropertyName, foldVc, followButton, gameIdify, hideTip, historyNav, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isCaseOnlyPropertyName, isIconName, isValidGameId, isValidPropertyName, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, propertyNameProblem, propertyNameify, propertyRefProblem, renderStepperBar, revalidatePropertyRefs, saveIndicator, showAbout, stageChips, staleBar, tagChips, tipAt, tipBold, toast, toolWindowHead, vcBadgeFor, wireReorder };
+export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type Crumb, type DocLine, type ElProps, type FollowButton, type FollowButtonOptions, type GameIdEditorOptions, ICON_NAMES, ICON_SIZE, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobBeginOptions, type JobProgressOptions, type JobProgressView, type NavHistory, type NavHistoryOptions, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, PROPERTY_NAME_HINT, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButton, type PinButtonOptions, type PropertyRefOptions, RESERVED_PROPERTY_NAMES, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type ToastKind, type ToastOptions, type ToolWindowHeadOptions, type TooltipOptions, type VcBadge, type VcMap, askIdentity, bindPropertyName, bindPropertyRef, breadcrumb, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createNavHistory, createSaveController, dismissToast, el, firstIllegalPropertyName, foldVc, followButton, gameIdify, hideTip, historyNav, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isCaseOnlyPropertyName, isIconName, isValidGameId, isValidPropertyName, labelled, lockControls, lockNotice, metaLine, mountJobProgress, mountPaneShell, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, propertyNameProblem, propertyNameify, propertyRefProblem, renderStepperBar, revalidatePropertyRefs, saveIndicator, showAbout, stageChips, staleBar, tagChips, tipAt, tipBold, toast, toolWindowHead, vcBadgeFor, wireReorder };

package/dist/index.js

@@ -1,17 +1,20 @@
-export { mountWelcome } from './chunk-C6UVQYKI.js';
-export { feedUpdaterDownloadProgress, showUpdaterDialog } from './chunk-S4KWQLYN.js';
-export { linkAddress, linkStatusClass, linkStatusTip, mountLinkStatus } from './chunk-KGAMP5LW.js';
+export { mountWelcome } from './chunk-SEWJLUOD.js';
+export { feedUpdaterDownloadProgress, showUpdaterDialog } from './chunk-OPZPFOPS.js';
+import { isKeyCombo, tipWithKey } from './chunk-YWMSQFXX.js';
+export { hintBar, isKeyCombo, keyHint, keyLabel, keyLegends, keyPlatform, setKeyPlatform, tipWithKey } from './chunk-YWMSQFXX.js';
+export { linkAddress, linkStatusClass, linkStatusTip, mountLinkStatus } from './chunk-SDOKZTAR.js';
 import { isEditableTarget } from './chunk-P6WLAEKZ.js';
 export { copyWithFeedback, debounce, formatCount, isEditableTarget, plural, relativeTime } from './chunk-P6WLAEKZ.js';
 export { EDIT_MENU, FILE_MENU, GO_MENU, PANE_MENU, PLAY_MENU, PUBLISH_MENU, REVIEW_MENU, VIEW_MENU } from './chunk-2ECJUTSX.js';
-export { PROPERTY_NAME_HINT, PROPERTY_TYPES, RESERVED_PROPERTY_NAMES, bindPropertyName, bindPropertyRef, defaultControl, dupGuard, expandableRow, firstIllegalPropertyName, focusNewRow, isCaseOnlyPropertyName, isValidPropertyName, mountPropertyList, mountSettingsDialog, propertyNameProblem, propertyNameify, propertyRefProblem, revalidatePropertyRefs, revealRow, revealRowWhenReady } from './chunk-L5HOBEKL.js';
-import { dialogFrame } from './chunk-2NMVIM54.js';
-export { dialogFrame } from './chunk-2NMVIM54.js';
+export { defaultProblemCopy, describeProblem, problemLine, problemName } from './chunk-DS4XXAZS.js';
+export { PROPERTY_NAME_HINT, PROPERTY_TYPES, RESERVED_PROPERTY_NAMES, bindPropertyName, bindPropertyRef, defaultControl, dupGuard, expandableRow, firstIllegalPropertyName, focusNewRow, isCaseOnlyPropertyName, isValidPropertyName, mountPropertyList, mountSettingsDialog, propertyNameProblem, propertyNameify, propertyRefProblem, revalidatePropertyRefs, revealRow, revealRowWhenReady } from './chunk-R3NXPHRZ.js';
+import { dialogFrame } from './chunk-YRFJLJUH.js';
+export { dialogFrame } from './chunk-YRFJLJUH.js';
 export { createFloating } from './chunk-P4G4ERG6.js';
 export { JOB_PROGRESS } from './chunk-MDGOIT3O.js';
-export { openContextMenu, openPopover } from './chunk-K2AOLQW4.js';
-import { ensureTooltipHost, el, iconNode, labelled, icon } from './chunk-XZYZXY7I.js';
-export { ICON_NAMES, ICON_SIZE, el, hideTip, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isIconName, labelled, moveItem, stageChips, tagChips, tipAt, tipBold, wireReorder } from './chunk-XZYZXY7I.js';
+export { openContextMenu, openPopover } from './chunk-EHR2KBZC.js';
+import { ensureTooltipHost, el, iconNode, labelled, icon } from './chunk-UG2P777F.js';
+export { ICON_NAMES, ICON_SIZE, breadcrumb, el, hideTip, icon, iconBtn, iconHtml, iconNameOfGlyph, iconNode, iconSvg, initTooltips, isIconName, labelled, metaLine, moveItem, stageChips, tagChips, tipAt, tipBold, wireReorder } from './chunk-UG2P777F.js';
 import { closeWithExit } from './chunk-IU7EY6BI.js';
 export { closeWithExit } from './chunk-IU7EY6BI.js';
 
@@ -80,9 +83,10 @@ function mountPaneShell(host, opts) {
   if (!offered("nav")) navToggle.remove();
   if (!offered("inspector")) inspToggle.remove();
   const defaultTip = (side, isOpen) => {
-    const noun = cfg[side].label ?? side;
-    const hint = cfg[side].shortcutHint ? ` (${cfg[side].shortcutHint})` : "";
-    return `${isOpen ? "Hide" : "Show"} ${noun}${hint}`;
+    const text = `${isOpen ? "Hide" : "Show"} ${cfg[side].label ?? side}`;
+    const hint = cfg[side].shortcutHint;
+    if (!hint) return text;
+    return isKeyCombo(hint) ? tipWithKey(text, hint) : `${text} (${hint})`;
   };
   const tipFor = opts.tipFor ?? defaultTip;
   function applyToggleGlyph(side, button) {
@@ -1169,7 +1173,7 @@ function renderStepperBar(host, opts) {
       "button",
       { className: "stepbar-cur", tip: opts.tips?.go ?? "Go to this", onClick: () => opts.onGo(index) },
       item.kind === void 0 ? null : el("span", { className: `stepbar-cat${item.kindClass ? ` ${item.kindClass}` : ""}`, text: item.kind }),
-      item.where === void 0 ? null : el("span", { className: "stepbar-where", text: item.where }),
+      item.where === void 0 ? null : typeof item.where === "string" ? el("span", { className: "stepbar-where", text: item.where }) : el("span", "stepbar-where", item.where),
       el("span", { className: "stepbar-msg", text: item.text })
     ),
     ...actions,