@k2b/ui 0.49.0 → 0.50.0

package/dist/browser/surfaces/StatCell.js

@@ -1,29 +1,52 @@
 import { template as _$template } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__label>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__support><!$><!/><!$><!/>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__accent><i aria-hidden=true></i><!$><!/>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<a class="k2b-stat-cell k2b-stat-cell--link"><i class="ti ti-external-link k2b-stat-cell__link-icon"aria-hidden=true></i><!$><!/>`);
-import { Show } from "solid-js";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__head><!$><!/><span class=k2b-stat-cell__label>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class="k2b-stat-cell__skeleton k2b-skeleton"data-part=value aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__error><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__main>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class="k2b-stat-cell__skeleton k2b-skeleton"data-part=support aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__support>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<span class="k2b-stat-cell__icon k2b-icon-tile"aria-hidden=true><i>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub><!$><!/> <!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__accent><i aria-hidden=true></i><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__stale><i class="ti ti-clock-exclamation"aria-hidden=true></i><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<button type=button class=k2b-stat-cell__retry>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<a class="k2b-stat-cell k2b-stat-cell--link"><i class="ti ti-external-link k2b-stat-cell__link-icon"aria-hidden=true></i><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell>`);
+import { Match, Show, Switch } from "solid-js";
 import Chart from "../content/Chart";
 import { useLocale } from "../intl/locale";
+import { DeltaBadge } from "./delta-badge";
 import { useStatGridSize, useStatGridSurface } from "./StatGrid";
+import { useStatCellMessages } from "./stat-cell-messages";
+
+/**
+ * The change against a comparison period. `unit: "ratio"` (default) reads `0.082` as `+8.2 %`; `"points"` is the
+ * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone
+ * and say "better" or "worse"; without it the change stays unrated.
+ */
+
+/** The value the change compares against, shown under the figure, such as "Last month 44,560". */
+
 function Body(props) {
   const gridSize = useStatGridSize();
   const size = () => props.size ?? gridSize;
   const accent = () => props.accent;
   const locale = useLocale();
+  const t = useStatCellMessages();
   const defaultTrendTooltip = ({
     datum
   }) => {
@@ -37,171 +60,324 @@ function Body(props) {
       }]
     };
   };
+  const compareValue = () => {
+    const value = props.compare?.value;
+    return typeof value === "number" ? new Intl.NumberFormat(locale()).format(value) : value;
+  };
+  const empty = () => props.value === null || props.value === undefined || props.value === "";
   return [(() => {
-    var _el$ = _$getNextElement(_tmpl$);
-    _$insert(_el$, () => props.label);
-    _$effect(() => _$setAttribute(_el$, "data-size", size()));
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$3 = _el$.firstChild,
+      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+      _el$2 = _el$4.nextSibling;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.icon;
+      },
+      children: icon => (() => {
+        var _el$12 = _$getNextElement(_tmpl$8),
+          _el$13 = _el$12.firstChild;
+        _$effect(_p$ => {
+          var _v$ = props.tone ?? "zinc",
+            _v$2 = icon();
+          _v$ !== _p$.e && _$setAttribute(_el$12, "data-tone", _p$.e = _v$);
+          _v$2 !== _p$.t && _$className(_el$13, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$12;
+      })()
+    }), _el$4, _co$);
+    _$insert(_el$2, () => props.label);
+    _$effect(() => _$setAttribute(_el$2, "data-size", size()));
     return _el$;
   })(), (() => {
-    var _el$2 = _$getNextElement(_tmpl$2);
-    _$insert(_el$2, () => props.value);
-    _$effect(_p$ => {
-      var _v$ = `k2b-stat-cell__value ${props.valueClass ?? ""}`,
-        _v$2 = size(),
-        _v$3 = props.title;
-      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$2, "data-size", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$2;
-  })(), _$createComponent(Show, {
-    get when() {
-      return _$memo(() => !!props.trend)() && props.trend.length > 1;
-    },
-    get children() {
-      return _$createComponent(Chart, {
-        kind: "sparkline",
-        get labels() {
-          return {
-            interactiveChart: props.label
-          };
-        },
-        get tooltip() {
-          return props.trendTooltip ?? defaultTrendTooltip;
-        },
-        "class": "k2b-stat-cell__trend",
-        style: {
-          height: "32px"
-        },
-        get data() {
-          return Array.from(props.trend ?? []);
-        },
-        showLast: true,
-        showMinMax: true
-      });
-    }
-  }), _$createComponent(Show, {
-    get when() {
-      return props.sub || accent();
-    },
-    get children() {
-      var _el$3 = _$getNextElement(_tmpl$3),
-        _el$4 = _el$3.firstChild,
-        [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
-        _el$6 = _el$5.nextSibling,
-        [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling);
-      _$insert(_el$3, _$createComponent(Show, {
-        get when() {
-          return props.sub;
-        },
-        children: sub => (() => {
-          var _el$8 = _$getNextElement(_tmpl$4);
-          _$insert(_el$8, sub);
-          return _el$8;
-        })()
-      }), _el$5, _co$);
-      _$insert(_el$3, _$createComponent(Show, {
-        get when() {
-          return accent();
-        },
-        children: value => _$createComponent(Show, {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$insert(_el$5, _$createComponent(Switch, {
+      get fallback() {
+        return [(() => {
+          var _el$14 = _$getNextElement(_tmpl$9);
+          _$insert(_el$14, (() => {
+            var _c$ = _$memo(() => !!empty());
+            return () => _c$() ? "–" : props.value;
+          })());
+          _$effect(_p$ => {
+            var _v$3 = `k2b-stat-cell__value ${props.valueClass ?? ""}`,
+              _v$4 = size(),
+              _v$5 = empty() || undefined,
+              _v$6 = props.title;
+            _v$3 !== _p$.e && _$className(_el$14, _p$.e = _v$3);
+            _v$4 !== _p$.t && _$setAttribute(_el$14, "data-size", _p$.t = _v$4);
+            _v$5 !== _p$.a && _$setAttribute(_el$14, "data-empty", _p$.a = _v$5);
+            _v$6 !== _p$.o && _$setAttribute(_el$14, "title", _p$.o = _v$6);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          return _el$14;
+        })(), _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!!empty())() && props.delta;
+          },
+          children: delta => _$createComponent(DeltaBadge, {
+            get delta() {
+              return delta();
+            },
+            get compare() {
+              return props.compare;
+            }
+          })
+        })];
+      },
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return props.status === "loading";
+          },
+          get children() {
+            return [_$getNextElement(_tmpl$2), (() => {
+              var _el$7 = _$getNextElement(_tmpl$3);
+              _$insert(_el$7, () => t().loading);
+              return _el$7;
+            })()];
+          }
+        }), _$createComponent(Match, {
           get when() {
-            return value().text;
+            return props.status === "error";
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$4),
+              _el$9 = _el$8.firstChild,
+              _el$0 = _el$9.nextSibling,
+              [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling);
+            _$insert(_el$8, () => t().notLoaded, _el$1, _co$2);
+            return _el$8;
+          }
+        })];
+      }
+    }));
+    return _el$5;
+  })(), (() => {
+    var _el$10 = _$getNextElement(_tmpl$7);
+    _$insert(_el$10, _$createComponent(Switch, {
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return props.stale;
           },
           get fallback() {
-            return (() => {
-              var _el$9 = _$getNextElement(_tmpl$5);
-              _$effect(_p$ => {
-                var _v$4 = `${value().icon} k2b-stat-cell__accent-icon`,
-                  _v$5 = value().tone;
-                _v$4 !== _p$.e && _$className(_el$9, _p$.e = _v$4);
-                _v$5 !== _p$.t && _$setAttribute(_el$9, "data-tone", _p$.t = _v$5);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$9;
-            })();
+            return [_$createComponent(Show, {
+              get when() {
+                return props.compare;
+              },
+              children: compare => (() => {
+                var _el$15 = _$getNextElement(_tmpl$0),
+                  _el$17 = _el$15.firstChild,
+                  [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
+                  _el$16 = _el$18.nextSibling,
+                  _el$19 = _el$16.nextSibling,
+                  [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling);
+                _$insert(_el$15, () => compare().label, _el$18, _co$3);
+                _$insert(_el$15, compareValue, _el$20, _co$4);
+                return _el$15;
+              })()
+            }), _$createComponent(Show, {
+              get when() {
+                return props.sub;
+              },
+              children: sub => (() => {
+                var _el$21 = _$getNextElement(_tmpl$1);
+                _$insert(_el$21, sub);
+                return _el$21;
+              })()
+            }), _$createComponent(Show, {
+              get when() {
+                return accent();
+              },
+              children: value => _$createComponent(Show, {
+                get when() {
+                  return value().text;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$22 = _$getNextElement(_tmpl$10);
+                    _$effect(_p$ => {
+                      var _v$7 = `${value().icon} k2b-stat-cell__accent-icon`,
+                        _v$8 = value().tone;
+                      _v$7 !== _p$.e && _$className(_el$22, _p$.e = _v$7);
+                      _v$8 !== _p$.t && _$setAttribute(_el$22, "data-tone", _p$.t = _v$8);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$22;
+                  })();
+                },
+                children: text => (() => {
+                  var _el$23 = _$getNextElement(_tmpl$11),
+                    _el$24 = _el$23.firstChild,
+                    _el$25 = _el$24.nextSibling,
+                    [_el$26, _co$5] = _$getNextMarker(_el$25.nextSibling);
+                  _$insert(_el$23, text, _el$26, _co$5);
+                  _$effect(_p$ => {
+                    var _v$9 = value().tone,
+                      _v$0 = value().icon;
+                    _v$9 !== _p$.e && _$setAttribute(_el$23, "data-tone", _p$.e = _v$9);
+                    _v$0 !== _p$.t && _$className(_el$24, _p$.t = _v$0);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$23;
+                })()
+              })
+            }), _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!(!empty() && props.trend))() && props.trend.length > 1;
+              },
+              get children() {
+                return _$createComponent(Chart, {
+                  kind: "sparkline",
+                  get labels() {
+                    return {
+                      interactiveChart: props.label
+                    };
+                  },
+                  get tooltip() {
+                    return props.trendTooltip ?? defaultTrendTooltip;
+                  },
+                  "class": "k2b-stat-cell__trend",
+                  get data() {
+                    return Array.from(props.trend ?? []);
+                  },
+                  showLast: true
+                });
+              }
+            })];
+          },
+          children: stale => [(() => {
+            var _el$27 = _$getNextElement(_tmpl$12),
+              _el$28 = _el$27.firstChild,
+              _el$29 = _el$28.nextSibling,
+              [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
+            _$insert(_el$27, stale, _el$30, _co$6);
+            return _el$27;
+          })(), _$createComponent(Show, {
+            get when() {
+              return props.onRetry;
+            },
+            children: retry => (() => {
+              var _el$31 = _$getNextElement(_tmpl$13);
+              _el$31.$$click = () => retry()();
+              _$insert(_el$31, () => t().reload);
+              _$runHydrationEvents();
+              return _el$31;
+            })()
+          })]
+        });
+      },
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return props.status === "loading";
           },
-          children: text => (() => {
-            var _el$0 = _$getNextElement(_tmpl$6),
-              _el$1 = _el$0.firstChild,
-              _el$10 = _el$1.nextSibling,
-              [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
-            _$insert(_el$0, text, _el$11, _co$3);
-            _$effect(_p$ => {
-              var _v$6 = value().tone,
-                _v$7 = value().icon;
-              _v$6 !== _p$.e && _$setAttribute(_el$0, "data-tone", _p$.e = _v$6);
-              _v$7 !== _p$.t && _$className(_el$1, _p$.t = _v$7);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
+          get children() {
+            return _$getNextElement(_tmpl$6);
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return props.status === "error";
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return props.onRetry;
+              },
+              children: retry => (() => {
+                var _el$32 = _$getNextElement(_tmpl$13);
+                _el$32.$$click = () => retry()();
+                _$insert(_el$32, () => t().retry);
+                _$runHydrationEvents();
+                return _el$32;
+              })()
             });
-            return _el$0;
-          })()
-        })
-      }), _el$7, _co$2);
-      return _el$3;
-    }
-  })];
+          }
+        })];
+      }
+    }));
+    return _el$10;
+  })()];
 }
+
+/**
+ * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison
+ * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.
+ */
 export function StatCell(props) {
   const gridSize = useStatGridSize();
   const size = () => props.size ?? gridSize;
   const surface = useStatGridSurface();
-  return _$createComponent(Show, {
+  return _$createComponent(Show
+  // A tile that offers a retry is no link: the button must not sit inside it.
+  , {
     get when() {
-      return props.href;
+      return _$memo(() => !!(props.href && !props.status))() && !(props.stale && props.onRetry);
     },
     get fallback() {
       return (() => {
-        var _el$12 = _$getNextElement(_tmpl$7);
-        _$setAttribute(_el$12, "data-surface", surface);
-        _$insert(_el$12, _$createComponent(Body, props));
+        var _el$37 = _$getNextElement(_tmpl$15);
+        _$setAttribute(_el$37, "data-surface", surface);
+        _$insert(_el$37, _$createComponent(Body, props));
         _$effect(_p$ => {
-          var _v$8 = size(),
-            _v$9 = props.wrap || undefined;
-          _v$8 !== _p$.e && _$setAttribute(_el$12, "data-size", _p$.e = _v$8);
-          _v$9 !== _p$.t && _$setAttribute(_el$12, "data-wrap", _p$.t = _v$9);
+          var _v$12 = size(),
+            _v$13 = props.wrap || undefined,
+            _v$14 = props.status,
+            _v$15 = props.status === "loading" || undefined;
+          _v$12 !== _p$.e && _$setAttribute(_el$37, "data-size", _p$.e = _v$12);
+          _v$13 !== _p$.t && _$setAttribute(_el$37, "data-wrap", _p$.t = _v$13);
+          _v$14 !== _p$.a && _$setAttribute(_el$37, "data-status", _p$.a = _v$14);
+          _v$15 !== _p$.o && _$setAttribute(_el$37, "aria-busy", _p$.o = _v$15);
           return _p$;
         }, {
           e: undefined,
-          t: undefined
+          t: undefined,
+          a: undefined,
+          o: undefined
         });
-        return _el$12;
+        return _el$37;
       })();
     },
-    children: href => (() => {
-      var _el$13 = _$getNextElement(_tmpl$8),
-        _el$14 = _el$13.firstChild,
-        _el$15 = _el$14.nextSibling,
-        [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling);
-      _$setAttribute(_el$13, "data-surface", surface);
-      _$insert(_el$13, _$createComponent(Body, props), _el$16, _co$4);
+    get children() {
+      var _el$33 = _$getNextElement(_tmpl$14),
+        _el$34 = _el$33.firstChild,
+        _el$35 = _el$34.nextSibling,
+        [_el$36, _co$7] = _$getNextMarker(_el$35.nextSibling);
+      _$setAttribute(_el$33, "data-surface", surface);
+      _$insert(_el$33, _$createComponent(Body, props), _el$36, _co$7);
       _$effect(_p$ => {
-        var _v$0 = href(),
-          _v$1 = size(),
-          _v$10 = props.wrap || undefined;
-        _v$0 !== _p$.e && _$setAttribute(_el$13, "href", _p$.e = _v$0);
-        _v$1 !== _p$.t && _$setAttribute(_el$13, "data-size", _p$.t = _v$1);
-        _v$10 !== _p$.a && _$setAttribute(_el$13, "data-wrap", _p$.a = _v$10);
+        var _v$1 = props.href,
+          _v$10 = size(),
+          _v$11 = props.wrap || undefined;
+        _v$1 !== _p$.e && _$setAttribute(_el$33, "href", _p$.e = _v$1);
+        _v$10 !== _p$.t && _$setAttribute(_el$33, "data-size", _p$.t = _v$10);
+        _v$11 !== _p$.a && _$setAttribute(_el$33, "data-wrap", _p$.a = _v$11);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined
       });
-      return _el$13;
-    })()
+      return _el$33;
+    }
   });
 }
 export default StatCell;
+_$delegateEvents(["click"]);
 //# sourceMappingURL=StatCell.js.map

package/dist/browser/surfaces/StatCell.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\nexport type StatCellProps = {\n  label: string;\n  value: string | number | JSX.Element;\n  sub?: string;\n  valueClass?: string;\n  accent?: StatCellAccent;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatGridSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  return (\n    <>\n      <span class=\"k2b-stat-cell__label\" data-size={size()}>\n        {props.label}\n      </span>\n      <span class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`} data-size={size()} title={props.title}>\n        {props.value}\n      </span>\n      <Show when={props.trend && props.trend.length > 1}>\n        <Chart\n          kind=\"sparkline\"\n          labels={{ interactiveChart: props.label }}\n          tooltip={props.trendTooltip ?? defaultTrendTooltip}\n          class=\"k2b-stat-cell__trend\"\n          style={{ height: \"32px\" }}\n          data={Array.from(props.trend ?? [])}\n          showLast\n          showMinMax\n        />\n      </Show>\n      <Show when={props.sub || accent()}>\n        <div class=\"k2b-stat-cell__support\">\n          <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n          <Show when={accent()}>\n            {(value) => (\n              <Show\n                when={value().text}\n                fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n              >\n                {(text) => (\n                  <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                    <i class={value().icon} aria-hidden=\"true\" />\n                    {text()}\n                  </span>\n                )}\n              </Show>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      when={props.href}\n      fallback={\n        <div class=\"k2b-stat-cell\" data-size={size()} data-surface={surface} data-wrap={props.wrap || undefined}>\n          <Body {...props} />\n        </div>\n      }\n    >\n      {(href) => (\n        <a\n          href={href()}\n          class=\"k2b-stat-cell k2b-stat-cell--link\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n        >\n          <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n          <Body {...props} />\n        </a>\n      )}\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { DeltaBadge } from \"./delta-badge\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\nimport { useStatCellMessages } from \"./stat-cell-messages\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\n/**\n * The change against a comparison period. `unit: \"ratio\"` (default) reads `0.082` as `+8.2 %`; `\"points\"` is the\n * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone\n * and say \"better\" or \"worse\"; without it the change stays unrated.\n */\nexport type StatCellDelta = {\n  value: number;\n  unit?: \"ratio\" | \"points\";\n  better?: \"up\" | \"down\";\n};\n\n/** The value the change compares against, shown under the figure, such as \"Last month 44,560\". */\nexport type StatCellCompare = {\n  label: string;\n  value: string | number;\n};\n\nexport type StatCellSize = StatGridSize;\n\nexport type StatCellProps = {\n  label: string;\n  /** The figure. `null` shows the empty dash; `sub` then says why. */\n  value: string | number | JSX.Element | null;\n  sub?: string;\n  valueClass?: string;\n  /** An icon in a chip before the label, in `tone`. `\"in\"` and `\"out\"` are the money colours of `FlowAmount`. */\n  icon?: string;\n  /** The chip colour of `icon`. Defaults to zinc. */\n  tone?: StatCellTone | \"in\" | \"out\";\n  accent?: StatCellAccent;\n  delta?: StatCellDelta;\n  compare?: StatCellCompare;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatCellSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n  /** `\"loading\"` keeps the tile's size with placeholders; `\"error\"` says the figure did not load. */\n  status?: \"loading\" | \"error\";\n  /** Offers \"Try again\" after an error and \"Reload\" beside `stale`. */\n  onRetry?: () => void;\n  /** The figure is not current: a short note such as \"As of 09:12 · not current\" replaces the support line. */\n  stale?: string;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  const compareValue = () => {\n    const value = props.compare?.value;\n    return typeof value === \"number\" ? new Intl.NumberFormat(locale()).format(value) : value;\n  };\n  const empty = () => props.value === null || props.value === undefined || props.value === \"\";\n  return (\n    <>\n      <div class=\"k2b-stat-cell__head\">\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-stat-cell__icon k2b-icon-tile\" data-tone={props.tone ?? \"zinc\"} aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <span class=\"k2b-stat-cell__label\" data-size={size()}>\n          {props.label}\n        </span>\n      </div>\n      <div class=\"k2b-stat-cell__main\">\n        <Switch\n          fallback={\n            <>\n              <span\n                class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`}\n                data-size={size()}\n                data-empty={empty() || undefined}\n                title={props.title}\n              >\n                {empty() ? \"–\" : props.value}\n              </span>\n              <Show when={!empty() && props.delta}>{(delta) => <DeltaBadge delta={delta()} compare={props.compare} />}</Show>\n            </>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\" />\n            <span class=\"k2b-sr-only\">{t().loading}</span>\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <span class=\"k2b-stat-cell__error\">\n              <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" />\n              {t().notLoaded}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <div class=\"k2b-stat-cell__support\">\n        <Switch\n          fallback={\n            <Show\n              when={props.stale}\n              fallback={\n                <>\n                  <Show when={props.compare}>\n                    {(compare) => (\n                      <span class=\"k2b-stat-cell__sub\">\n                        {compare().label} {compareValue()}\n                      </span>\n                    )}\n                  </Show>\n                  <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n                  <Show when={accent()}>\n                    {(value) => (\n                      <Show\n                        when={value().text}\n                        fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n                      >\n                        {(text) => (\n                          <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                            <i class={value().icon} aria-hidden=\"true\" />\n                            {text()}\n                          </span>\n                        )}\n                      </Show>\n                    )}\n                  </Show>\n                  {/* No figure, no trend: an empty tile says why in `sub` and keeps the size of its other states. */}\n                  <Show when={!empty() && props.trend && props.trend.length > 1}>\n                    <Chart\n                      kind=\"sparkline\"\n                      labels={{ interactiveChart: props.label }}\n                      tooltip={props.trendTooltip ?? defaultTrendTooltip}\n                      class=\"k2b-stat-cell__trend\"\n                      data={Array.from(props.trend ?? [])}\n                      showLast\n                    />\n                  </Show>\n                </>\n              }\n            >\n              {(stale) => (\n                <>\n                  <span class=\"k2b-stat-cell__stale\">\n                    <i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\" />\n                    {stale()}\n                  </span>\n                  <Show when={props.onRetry}>\n                    {(retry) => (\n                      <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                        {t().reload}\n                      </button>\n                    )}\n                  </Show>\n                </>\n              )}\n            </Show>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\" />\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <Show when={props.onRetry}>\n              {(retry) => (\n                <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                  {t().retry}\n                </button>\n              )}\n            </Show>\n          </Match>\n        </Switch>\n      </div>\n    </>\n  );\n}\n\n/**\n * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison\n * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.\n */\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      // A tile that offers a retry is no link: the button must not sit inside it.\n      when={props.href && !props.status && !(props.stale && props.onRetry)}\n      fallback={\n        <div\n          class=\"k2b-stat-cell\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n          data-status={props.status}\n          aria-busy={props.status === \"loading\" || undefined}\n        >\n          <Body {...props} />\n        </div>\n      }\n    >\n      <a\n        href={props.href}\n        class=\"k2b-stat-cell k2b-stat-cell--link\"\n        data-size={size()}\n        data-surface={surface}\n        data-wrap={props.wrap || undefined}\n      >\n        <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n        <Body {...props} />\n      </a>\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}