@k2b/ui 0.50.0 → 0.51.0

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport type { ChartNumberFormat } from \"../charts/description\";\nimport { ChartSparkline } from \"../content/ChartSparkline\";\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\" | \"absolute\";\n  /** Existing measures can express a change in their own unit instead of a ratio. */\n  format?: ChartNumberFormat;\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  /** Keep the figure and change on separate rows, including while loading. Defaults to beside the figure. */\n  deltaPlacement?: \"below\";\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                    <ChartSparkline\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-delta-placement={props.deltaPlacement}\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        data-delta-placement={props.deltaPlacement}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAmB,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,UAAU;AAExD,SAAS,cAAc,QAAQ,2BAA2B;AAE1D,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,UAAU,QAAQ,eAAe;AAC1C,SAA4B,eAAe,EAAE,kBAAkB,QAAQ,YAAY;AACnF,SAAS,mBAAmB,QAAQ,sBAAsB;;AAU1D;AACA;AACA;AACA;AACA;;AASA;;AA6CA,SAAS,IAAI,CAAC,KAAoB,EAAe;EAC/C,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM;EACjC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC;EAC/B,MAAM,mBAA0C,GAAG,CAAC;IAAE;EAAM,CAAC,KAAK;IAChE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAE,KAAK,IAAK,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,IAAI,EAAE;IACtE,OAAO;MACL,IAAI,EAAE,CACJ;QAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAAE,KAAK,EAAE,OAAO,CAAC,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE;UAAE,qBAAqB,EAAE;QAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;MAAE,CAAC;IAEtI,CAAC;EACH,CAAC;EACD,MAAM,YAAY,GAAG,MAAM;IACzB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,KAAK;IAClC,OAAO,OAAO,KAAK,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK;EAC1F,CAAC;EACD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE;EAC3F;IAAA;MAAA;MAAA;MAAA;IAAA,iCAGO,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,IAAI;MAAA;MAAA,UAClB,IAAI;QAAA;UAAA;QAAA;UAAA,UACuD,KAAK,CAAC,IAAI,IAAI,MAAM;YAAA,OACnE,IAAI,CAAC,CAAC;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAEnB;IAAA,sBAGA,KAAK,CAAC,KAAK;IAAA,kDADgC,IAAI,CAAC,CAAC;IAAA;EAAA;IAAA;IAAA,kCAKnD,MAAM;MAAA,IACL,QAAQ;QAAA;UAAA;UAAA;YAAA,yBAQD,KAAK,CAAC,CAAC;YAAA,aAAP,QAAU,GAAG,GAAG,KAAK,CAAC,KAAK;UAAA;UAAA;YAAA,WALrB,wBAAwB,KAAK,CAAC,UAAU,IAAI,EAAE,EAAE;cAAA,OAC5C,IAAI,CAAC,CAAC;cAAA,OACL,KAAK,CAAC,CAAC,IAAI,SAAS;cAAA,OACzB,KAAK,CAAC,KAAK;YAAA;YAAA;YAAA;YAAA;YAAA;UAAA;YAAA;YAAA;YAAA;YAAA;UAAA;UAAA;QAAA,wBAInB,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,gBAAC,KAAK,CAAC,CAAC,OAAI,KAAK,CAAC,KAAK;UAAA;UAAA,UAAI,KAAK,sBAAM,UAAU;YAAA,IAAC,KAAK;cAAA,OAAE,KAAK,CAAC,CAAC;YAAA;YAAA,IAAE,OAAO;cAAA,OAAE,KAAK,CAAC,OAAO;YAAA;UAAA;QAAI;MAAA;MAAA;QAAA,0BAI1G,KAAK;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM,KAAK,SAAS;UAAA;UAAA;YAAA;cAAA;cAAA,sBAEV,CAAC,CAAC,CAAC,CAAC,OAAO;cAAA;YAAA;UAAA;QAAA,sBAEvC,KAAK;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM,KAAK,OAAO;UAAA;UAAA;YAAA;cAAA;cAAA;cAAA;YAAA,sBAGhC,CAAC,CAAC,CAAC,CAAC,SAAS;YAAA;UAAA;QAAA;MAAA;IAAA;IAAA;EAAA;IAAA;IAAA,mCAMnB,MAAM;MAAA,IACL,QAAQ;QAAA,yBACL,IAAI;UAAA,IACH,IAAI;YAAA,OAAE,KAAK,CAAC,KAAK;UAAA;UAAA,IACjB,QAAQ;YAAA,0BAEH,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,KAAK,CAAC,OAAO;cAAA;cAAA,UACrB,OAAO;gBAAA;kBAAA;kBAAA;kBAAA;kBAAA;kBAAA;gBAAA,uBAEJ,OAAO,CAAC,CAAC,CAAC,KAAK;gBAAA,iBAAG,YAAY;gBAAA;cAAA;YAElC,sBAEF,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,KAAK,CAAC,GAAG;cAAA;cAAA,UAAI,GAAG;gBAAA;gBAAA,iBAAuC,GAAG;gBAAA;cAAA;YAAU,sBAC/E,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,MAAM,CAAC,CAAC;cAAA;cAAA,UAChB,KAAK,sBACJ,IAAI;gBAAA,IACH,IAAI;kBAAA,OAAE,KAAK,CAAC,CAAC,CAAC,IAAI;gBAAA;gBAAA,IAClB,QAAQ;kBAAA;oBAAA;oBAAA;sBAAA,WAAY,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,6BAA6B;wBAAA,OAAa,KAAK,CAAC,CAAC,CAAC,IAAI;sBAAA;sBAAA;sBAAA;oBAAA;sBAAA;sBAAA;oBAAA;oBAAA;kBAAA;gBAAA;gBAAA,UAEvF,IAAI;kBAAA;oBAAA;oBAAA;oBAAA;kBAAA,iBAGD,IAAI;kBAAA;oBAAA,WAFwC,KAAK,CAAC,CAAC,CAAC,IAAI;sBAAA,OAC/C,KAAK,CAAC,CAAC,CAAC,IAAI;oBAAA;oBAAA;oBAAA;kBAAA;oBAAA;oBAAA;kBAAA;kBAAA;gBAAA;cAGzB;YAEJ,sBAGF,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,iBAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,KAAK,QAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;cAAA;cAAA;gBAAA,yBAC1D,cAAc;kBAAA,IACb,MAAM;oBAAA,OAAE;sBAAE,gBAAgB,EAAE,KAAK,CAAC;oBAAM,CAAC;kBAAA;kBAAA,IACzC,OAAO;oBAAA,OAAE,KAAK,CAAC,YAAY,IAAI,mBAAmB;kBAAA;kBAAA;kBAAA,IAElD,IAAI;oBAAA,OAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;kBAAA;kBACnC,QAAQ;gBAAA;cAAA;YAAA;UAAA;UAAA,UAMd,KAAK;YAAA;cAAA;cAAA;cAAA;YAAA,iBAIA,KAAK;YAAA;UAAA,wBAEP,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,OAAO;YAAA;YAAA,UACrB,KAAK;cAAA;cAAA,iBACuD,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC;cAAA,uBACxE,CAAC,CAAC,CAAC,CAAC,MAAM;cAAA;cAAA;YAAA;UAEd;QAGN;MAAA;MAAA;QAAA,0BAIJ,KAAK;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM,KAAK,SAAS;UAAA;UAAA;YAAA;UAAA;QAAA,sBAGtC,KAAK;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM,KAAK,OAAO;UAAA;UAAA;YAAA,yBAClC,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,KAAK,CAAC,OAAO;cAAA;cAAA,UACrB,KAAK;gBAAA;gBAAA,iBACuD,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC;gBAAA,uBACxE,CAAC,CAAC,CAAC,CAAC,KAAK;gBAAA;gBAAA;cAAA;YAEb;UAAA;QAAA;MAAA;IAAA;IAAA;EAAA;AAOf;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,IAAI,QAAQ;EACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,CAAC;EACpC,yBACG;EACC;EAAA;IAAA,IACA,IAAI;MAAA,OAAE,qBAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,QAAI,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC;IAAA;IAAA,IACpE,QAAQ;MAAA;QAAA;QAAA,uCAIU,OAAO;QAAA,mCAMpB,IAAI,EAAK,KAAK;QAAA;UAAA,YAPJ,IAAI,CAAC,CAAC;YAAA,QAEN,KAAK,CAAC,IAAI,IAAI,SAAS;YAAA,QACZ,KAAK,CAAC,cAAc;YAAA,QAC7B,KAAK,CAAC,MAAM;YAAA,QACd,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,SAAS;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAAA;IAAA;MAAA;QAAA;QAAA;QAAA;MAAA,uCAUtC,OAAO;MAAA,mCAKpB,IAAI,EAAK,KAAK;MAAA;QAAA,WART,KAAK,CAAC,IAAI;UAAA,QAEL,IAAI,CAAC,CAAC;UAAA,QAEN,KAAK,CAAC,IAAI,IAAI,SAAS;UAAA,QACZ,KAAK,CAAC,cAAc;QAAA;QAAA;QAAA;QAAA;QAAA;MAAA;QAAA;QAAA;QAAA;QAAA;MAAA;MAAA;IAAA;EAAA;AAOlD;AAEA,eAAe,QAAQ;AAAC","ignoreList":[]}

package/dist/browser/surfaces/delta-badge.js

@@ -12,14 +12,28 @@ import { useStatCellMessages } from "./stat-cell-messages";
 // The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.
 
 /** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */
-const shownDelta = delta => Math.round(delta.value * 1000) / 1000 || 0;
+const shownDelta = delta => delta.unit === "absolute" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;
 const deltaTone = delta => {
   const value = shownDelta(delta);
   return !delta.better || value === 0 ? "neutral" : value > 0 === (delta.better === "up") ? "good" : "bad";
 };
 
 /** Signed with a true minus sign (U+2212), as figures are typeset. */
-export const deltaText = (delta, locale, t) => (delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
+export const deltaText = (delta, locale, t) => (delta.unit === "absolute" ? `${new Intl.NumberFormat(locale, {
+  ...(!delta.format ? {
+    maximumSignificantDigits: 15
+  } : {}),
+  style: delta.format?.style === "number" ? "decimal" : delta.format?.style,
+  currency: delta.format?.currency,
+  ...(delta.format?.decimals === undefined ? {} : {
+    minimumFractionDigits: delta.format.decimals,
+    maximumFractionDigits: delta.format.decimals
+  }),
+  ...(delta.format?.compact ? {
+    notation: "compact"
+  } : {}),
+  signDisplay: "exceptZero"
+}).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : ""}` : delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
   minimumFractionDigits: 1,
   maximumFractionDigits: 1,
   signDisplay: "exceptZero"

package/dist/browser/surfaces/delta-badge.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number => Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"points\"\n    ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n    : new Intl.NumberFormat(locale, {\n        style: \"percent\",\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n        signDisplay: \"exceptZero\",\n      }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAgC,mBAAmB,QAAQ,sBAAsB;;AAEjF;;AAEA;AACA,MAAM,UAAU,GAAI,KAAoB,IAAa,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC;AAE/F,MAAM,SAAS,GAAI,KAAoB,IAAiC;EACtE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;EAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK;AAC1G,CAAC;;AAED;AACA,OAAO,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,MAAc,EAAE,CAAmB,KACjF,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,GACpB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAAE,qBAAqB,EAAE,CAAC;EAAE,qBAAqB,EAAE,CAAC;EAAE,WAAW,EAAE;AAAa,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,GACjK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAC5B,KAAK,EAAE,SAAS;EAChB,qBAAqB,EAAE,CAAC;EACxB,qBAAqB,EAAE,CAAC;EACxB,WAAW,EAAE;AACf,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAC9B,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC;;AAE1B;AACA,OAAO,SAAS,UAAU,CAAC,KAA0D,EAAe;EAClG,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC;EAC/B,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;EACzC,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACxD,MAAM,KAAK,GAAG,MACZ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;EAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACxG,IAAI,CAAC,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;EACpF,MAAM,IAAI,GAAG,MAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,kBAAkB,GAAG,UAAW;EACnI;IAAA;MAAA;MAAA;MAAA;IAAA,eAGK,IAAI;IAAA;MAAA,UAFuC,IAAI,CAAC,CAAC;QAAA,OAAyB,KAAK,CAAC,CAAC;QAAA,OACxE,MAAM,IAAI,CAAC,CAAC,EAAE;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAI9B","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number =>\n  delta.unit === \"absolute\" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"absolute\"\n    ? `${new Intl.NumberFormat(locale, {\n        ...(!delta.format ? { maximumSignificantDigits: 15 } : {}),\n        style: delta.format?.style === \"number\" ? \"decimal\" : delta.format?.style,\n        currency: delta.format?.currency,\n        ...(delta.format?.decimals === undefined\n          ? {}\n          : { minimumFractionDigits: delta.format.decimals, maximumFractionDigits: delta.format.decimals }),\n        ...(delta.format?.compact ? { notation: \"compact\" } : {}),\n        signDisplay: \"exceptZero\",\n      }).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : \"\"}`\n    : delta.unit === \"points\"\n      ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n      : new Intl.NumberFormat(locale, {\n          style: \"percent\",\n          minimumFractionDigits: 1,\n          maximumFractionDigits: 1,\n          signDisplay: \"exceptZero\",\n        }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/widgets/DashboardFrame.js

@@ -0,0 +1,310 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-dashboard-frame__link>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-dashboard-frame__tools>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<header class=k2b-dashboard-frame__header><div><!$><!/><p role=status><!$><!/><!$><!/></p></div><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-dashboard-frame__content>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-dashboard-frame__stack><div class=k2b-dashboard-frame__reserve aria-hidden=true inert></div><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-dashboard-frame__skeleton aria-hidden=true><span></span><span>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<p class=k2b-dashboard-frame__inline-state><i aria-hidden=true></i><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-dashboard-frame__body>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-chart-explorer__state-icon aria-hidden=true><i>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-refresh"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__state><!$><!/><p></p><!$><!/><!$><!/>`);
+import { children, Match, Show, Switch } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { Button } from "../actions/Button";
+import { useChartMessages } from "../content/chart-messages";
+import { useUiMessages } from "../intl/messages";
+import { Paper } from "../surfaces/Paper";
+
+/**
+ * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),
+ * a failed first read (`error`), or content whose refresh failed (`stale`).
+ */
+
+/**
+ * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and
+ * stale in the same place and at the same height.
+ */
+export function DashboardFrame(props) {
+  const ui = useUiMessages();
+  const chart = useChartMessages();
+  const state = () => props.state ?? "ready";
+  const failed = () => state() === "error";
+  const read = () => state() === "ready" || state() === "stale";
+  const shown = () => read() && !props.emptyContent;
+  const empty = () => state() === "empty" || read() && props.emptyContent === true;
+  // Slots resolve once: checking a slot and then rendering it must not mount its components twice.
+  const tools = children(() => props.tools);
+  const reserve = children(() => props.reserve);
+  const busy = () => state() === "loading" ? "true" : undefined;
+  const className = () => props.class ? `k2b-dashboard-frame ${props.class}` : "k2b-dashboard-frame";
+  const retryLink = () => (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _el$.$$click = () => props.onRetry?.();
+    _$insert(_el$, () => ui().tryAgain);
+    _$runHydrationEvents();
+    return _el$;
+  })();
+  const status = () => state() === "loading" ? chart().chartLoading : state() === "stale" ? [props.asOf ? chart().chartAsOf({
+    time: props.asOf
+  }) : undefined, chart().chartRefreshFailed].filter(Boolean).join(" · ") : props.subtitle;
+  const sentence = () => props.empty ?? ui().noData;
+  return _$createComponent(Show, {
+    get when() {
+      return props.title !== undefined;
+    },
+    get fallback() {
+      return _$createComponent(Paper, {
+        get ["class"]() {
+          return className();
+        },
+        get ["data-width"]() {
+          return props.width ?? "third";
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(Paper, {
+        get ["class"]() {
+          return className();
+        },
+        get ["data-width"]() {
+          return props.width ?? "third";
+        },
+        get children() {
+          return [(() => {
+            var _el$2 = _$getNextElement(_tmpl$3),
+              _el$3 = _el$2.firstChild,
+              _el$9 = _el$3.firstChild,
+              [_el$0, _co$3] = _$getNextMarker(_el$9.nextSibling),
+              _el$4 = _el$0.nextSibling,
+              _el$5 = _el$4.firstChild,
+              [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+              _el$7 = _el$6.nextSibling,
+              [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
+              _el$10 = _el$3.nextSibling,
+              [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling);
+            _$insert(_el$3, _$createComponent(Dynamic, {
+              get component() {
+                return `h${props.headingLevel ?? 3}`;
+              },
+              get children() {
+                return props.title;
+              }
+            }), _el$0, _co$3);
+            _$insert(_el$4, status, _el$6, _co$);
+            _$insert(_el$4, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => state() === "stale")() && props.onRetry;
+              },
+              get children() {
+                return [" · ", _$memo(() => retryLink())];
+              }
+            }), _el$8, _co$2);
+            _$insert(_el$2, _$createComponent(Show, {
+              get when() {
+                return tools() !== undefined;
+              },
+              get children() {
+                var _el$1 = _$getNextElement(_tmpl$2);
+                _$insert(_el$1, tools);
+                return _el$1;
+              }
+            }), _el$11, _co$4);
+            _$effect(() => _$className(_el$4, state() === "stale" ? "k2b-dashboard-frame__stale" : undefined));
+            return _el$2;
+          })(), _$createComponent(Show, {
+            get when() {
+              return reserve() !== undefined;
+            },
+            get fallback() {
+              return (() => {
+                var _el$17 = _$getNextElement(_tmpl$8);
+                _$insert(_el$17, _$createComponent(Switch, {
+                  get fallback() {
+                    return props.children;
+                  },
+                  get children() {
+                    return [_$createComponent(Match, {
+                      get when() {
+                        return _$memo(() => state() === "loading")() && props.compact;
+                      },
+                      get children() {
+                        return _$getNextElement(_tmpl$6);
+                      }
+                    }), _$createComponent(Match, {
+                      get when() {
+                        return _$memo(() => !!(failed() || empty()))() && props.compact;
+                      },
+                      get children() {
+                        var _el$19 = _$getNextElement(_tmpl$7),
+                          _el$20 = _el$19.firstChild,
+                          _el$21 = _el$20.nextSibling,
+                          [_el$22, _co$6] = _$getNextMarker(_el$21.nextSibling),
+                          _el$23 = _el$22.nextSibling,
+                          [_el$24, _co$7] = _$getNextMarker(_el$23.nextSibling),
+                          _el$25 = _el$24.nextSibling,
+                          [_el$26, _co$8] = _$getNextMarker(_el$25.nextSibling);
+                        _$insert(_el$19, (() => {
+                          var _c$ = _$memo(() => !!failed());
+                          return () => _c$() ? chart().chartLoadFailed : sentence();
+                        })(), _el$22, _co$6);
+                        _$insert(_el$19, _$createComponent(Show, {
+                          get when() {
+                            return _$memo(() => !!failed())() && props.onRetry;
+                          },
+                          get children() {
+                            return retryLink();
+                          }
+                        }), _el$24, _co$7);
+                        _$insert(_el$19, _$createComponent(Show, {
+                          get when() {
+                            return empty();
+                          },
+                          get children() {
+                            return props.emptyAction;
+                          }
+                        }), _el$26, _co$8);
+                        _$effect(_p$ => {
+                          var _v$ = failed() ? "alert" : undefined,
+                            _v$2 = failed() ? "ti ti-alert-circle" : props.emptyIcon ?? "ti ti-chart-bar-off";
+                          _v$ !== _p$.e && _$setAttribute(_el$19, "role", _p$.e = _v$);
+                          _v$2 !== _p$.t && _$className(_el$20, _p$.t = _v$2);
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined
+                        });
+                        return _el$19;
+                      }
+                    }), _$createComponent(Match, {
+                      get when() {
+                        return !shown();
+                      },
+                      get children() {
+                        return _$createComponent(Message, {});
+                      }
+                    })];
+                  }
+                }));
+                _$effect(_p$ => {
+                  var _v$3 = props.height ? {
+                      height: props.height
+                    } : undefined,
+                    _v$4 = busy();
+                  _p$.e = _$style(_el$17, _v$3, _p$.e);
+                  _v$4 !== _p$.t && _$setAttribute(_el$17, "aria-busy", _p$.t = _v$4);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$17;
+              })();
+            },
+            get children() {
+              var _el$12 = _$getNextElement(_tmpl$5),
+                _el$13 = _el$12.firstChild,
+                _el$15 = _el$13.nextSibling,
+                [_el$16, _co$5] = _$getNextMarker(_el$15.nextSibling);
+              _$insert(_el$13, reserve);
+              _$insert(_el$12, _$createComponent(Show, {
+                get when() {
+                  return shown();
+                },
+                get fallback() {
+                  return _$createComponent(Message, {});
+                },
+                get children() {
+                  var _el$14 = _$getNextElement(_tmpl$4);
+                  _$insert(_el$14, () => props.children);
+                  return _el$14;
+                }
+              }), _el$16, _co$5);
+              _$effect(() => _$setAttribute(_el$12, "aria-busy", busy()));
+              return _el$12;
+            }
+          })];
+        }
+      });
+    }
+  });
+  function Message() {
+    return (() => {
+      var _el$27 = _$getNextElement(_tmpl$1),
+        _el$32 = _el$27.firstChild,
+        [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling),
+        _el$30 = _el$33.nextSibling,
+        _el$34 = _el$30.nextSibling,
+        [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling),
+        _el$36 = _el$35.nextSibling,
+        [_el$37, _co$1] = _$getNextMarker(_el$36.nextSibling);
+      _$insert(_el$27, _$createComponent(Show, {
+        get when() {
+          return state() !== "loading";
+        },
+        get children() {
+          var _el$28 = _$getNextElement(_tmpl$9),
+            _el$29 = _el$28.firstChild;
+          _$effect(() => _$className(_el$29, failed() ? "ti ti-alert-circle" : props.emptyIcon ?? "ti ti-chart-bar-off"));
+          return _el$28;
+        }
+      }), _el$33, _co$9);
+      _$insert(_el$30, (() => {
+        var _c$2 = _$memo(() => !!failed());
+        return () => _c$2() ? chart().chartLoadFailed : _$memo(() => state() === "loading")() ? "" : sentence();
+      })());
+      _$insert(_el$27, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!failed())() && props.onRetry;
+        },
+        get children() {
+          return _$createComponent(Button, {
+            variant: "secondary",
+            size: "sm",
+            onClick: () => props.onRetry?.(),
+            get children() {
+              return [_$getNextElement(_tmpl$0), _$memo(() => ui().tryAgain)];
+            }
+          });
+        }
+      }), _el$35, _co$0);
+      _$insert(_el$27, _$createComponent(Show, {
+        get when() {
+          return empty();
+        },
+        get children() {
+          return props.emptyAction;
+        }
+      }), _el$37, _co$1);
+      _$effect(_p$ => {
+        var _v$5 = state(),
+          _v$6 = failed() ? "alert" : undefined;
+        _v$5 !== _p$.e && _$setAttribute(_el$27, "data-state", _p$.e = _v$5);
+        _v$6 !== _p$.t && _$setAttribute(_el$27, "role", _p$.t = _v$6);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$27;
+    })();
+  }
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=DashboardFrame.js.map

package/dist/browser/widgets/DashboardFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["widgets/DashboardFrame.tsx"],"sourcesContent":["import { children, type JSX, Match, Show, Switch } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button } from \"../actions/Button\";\nimport { useChartMessages } from \"../content/chart-messages\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport type { DashboardWidth } from \"./Dashboard\";\n\n/**\n * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),\n * a failed first read (`error`), or content whose refresh failed (`stale`).\n */\nexport type DashboardFrameState = \"ready\" | \"loading\" | \"empty\" | \"error\" | \"stale\";\n\nexport type DashboardFrameProps = {\n  /**\n   * Heading of the frame. Without it the frame is only the surface, for content that brings its own head and states,\n   * such as `ChartExplorer` with `inset=\"1rem\"`.\n   */\n  title?: string;\n  /** One line under the title; loading and stale notes take its place, so nothing moves. */\n  subtitle?: JSX.Element;\n  /** Level of the title heading; defaults to 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** Controls at the right of the head, such as a search field or a grouping chip. */\n  tools?: JSX.Element;\n  /** Defaults to `ready`. */\n  state?: DashboardFrameState;\n  /** When the shown content was read, formatted by the host (\"09:12\"); a stale note names it. */\n  asOf?: string;\n  /** Try again after a failure; without it a failure has no button. */\n  onRetry?: () => void;\n  /** The empty sentence, such as \"No campaign in this period.\" */\n  empty?: JSX.Element;\n  /** Tabler icon of the empty state; defaults to `ti ti-chart-bar-off`. */\n  emptyIcon?: string;\n  /** An action under the empty sentence, such as \"Clear search\". */\n  emptyAction?: JSX.Element;\n  /**\n   * The content has nothing to show right now although the read succeeded, such as a search without matches: the body\n   * shows the empty sentence and action while the head keeps its state, so a stale note stays.\n   */\n  emptyContent?: boolean;\n  /** Height of the body, a CSS length. Every state keeps it. */\n  height?: string;\n  /**\n   * A hidden copy of the full content that holds the body's height in every state, such as every row of a table. The\n   * body then reaches the frame's left, right and bottom edges, like a table that brings its own rows.\n   */\n  reserve?: JSX.Element;\n  /** States as one quiet line instead of a centred message, for short content such as an amount or one bar. */\n  compact?: boolean;\n  /**\n   * Share of a `DashboardSection`'s six columns, like `DashboardPanel`: the frame is the grid cell itself, so it never\n   * sits in a second frame. Defaults to a third there; ignored elsewhere.\n   */\n  width?: DashboardWidth;\n  class?: string;\n  children?: JSX.Element;\n};\n\n/**\n * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and\n * stale in the same place and at the same height.\n */\nexport function DashboardFrame(props: DashboardFrameProps): JSX.Element {\n  const ui = useUiMessages();\n  const chart = useChartMessages();\n  const state = () => props.state ?? \"ready\";\n  const failed = () => state() === \"error\";\n  const read = () => state() === \"ready\" || state() === \"stale\";\n  const shown = () => read() && !props.emptyContent;\n  const empty = () => state() === \"empty\" || (read() && props.emptyContent === true);\n  // Slots resolve once: checking a slot and then rendering it must not mount its components twice.\n  const tools = children(() => props.tools);\n  const reserve = children(() => props.reserve);\n  const busy = () => (state() === \"loading\" ? \"true\" : undefined);\n  const className = () => (props.class ? `k2b-dashboard-frame ${props.class}` : \"k2b-dashboard-frame\");\n  const retryLink = () => (\n    <button type=\"button\" class=\"k2b-dashboard-frame__link\" onClick={() => props.onRetry?.()}>\n      {ui().tryAgain}\n    </button>\n  );\n  const status = () =>\n    state() === \"loading\"\n      ? chart().chartLoading\n      : state() === \"stale\"\n        ? [props.asOf ? chart().chartAsOf({ time: props.asOf }) : undefined, chart().chartRefreshFailed].filter(Boolean).join(\" · \")\n        : props.subtitle;\n  const sentence = () => props.empty ?? ui().noData;\n  return (\n    <Show\n      when={props.title !== undefined}\n      fallback={\n        <Paper class={className()} data-width={props.width ?? \"third\"}>\n          {props.children}\n        </Paper>\n      }\n    >\n      <Paper class={className()} data-width={props.width ?? \"third\"}>\n        <header class=\"k2b-dashboard-frame__header\">\n          <div>\n            <Dynamic component={`h${props.headingLevel ?? 3}`}>{props.title}</Dynamic>\n            {/* One reserved line and a polite live region: loading and stale replace the subtitle without moving. */}\n            <p role=\"status\" class={state() === \"stale\" ? \"k2b-dashboard-frame__stale\" : undefined}>\n              {status()}\n              <Show when={state() === \"stale\" && props.onRetry}>\n                {\" · \"}\n                {retryLink()}\n              </Show>\n            </p>\n          </div>\n          <Show when={tools() !== undefined}>\n            <div class=\"k2b-dashboard-frame__tools\">{tools()}</div>\n          </Show>\n        </header>\n        <Show\n          when={reserve() !== undefined}\n          fallback={\n            <div class=\"k2b-dashboard-frame__body\" style={props.height ? { height: props.height } : undefined} aria-busy={busy()}>\n              <Switch fallback={props.children}>\n                <Match when={state() === \"loading\" && props.compact}>\n                  <div class=\"k2b-dashboard-frame__skeleton\" aria-hidden=\"true\">\n                    <span />\n                    <span />\n                  </div>\n                </Match>\n                <Match when={(failed() || empty()) && props.compact}>\n                  <p class=\"k2b-dashboard-frame__inline-state\" role={failed() ? \"alert\" : undefined}>\n                    <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} aria-hidden=\"true\" />\n                    {failed() ? chart().chartLoadFailed : sentence()}\n                    <Show when={failed() && props.onRetry}>{retryLink()}</Show>\n                    <Show when={empty()}>{props.emptyAction}</Show>\n                  </p>\n                </Match>\n                <Match when={!shown()}>\n                  <Message />\n                </Match>\n              </Switch>\n            </div>\n          }\n        >\n          <div class=\"k2b-dashboard-frame__stack\" aria-busy={busy()}>\n            {/* The full content, hidden: the body's height in every state. */}\n            <div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>\n              {reserve()}\n            </div>\n            <Show when={shown()} fallback={<Message />}>\n              <div class=\"k2b-dashboard-frame__content\">{props.children}</div>\n            </Show>\n          </div>\n        </Show>\n      </Paper>\n    </Show>\n  );\n\n  function Message(): JSX.Element {\n    return (\n      <div class=\"k2b-chart-explorer__state\" data-state={state()} role={failed() ? \"alert\" : undefined}>\n        <Show when={state() !== \"loading\"}>\n          <span class=\"k2b-chart-explorer__state-icon\" aria-hidden=\"true\">\n            <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} />\n          </span>\n        </Show>\n        <p>{failed() ? chart().chartLoadFailed : state() === \"loading\" ? \"\" : sentence()}</p>\n        <Show when={failed() && props.onRetry}>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => props.onRetry?.()}>\n            <i class=\"ti ti-refresh\" aria-hidden=\"true\" />\n            {ui().tryAgain}\n          </Button>\n        </Show>\n        <Show when={empty()}>{props.emptyAction}</Show>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/widgets/index.js

@@ -1,4 +1,5 @@
 export * from "./Dashboard";
+export * from "./DashboardFrame";
 export * from "./Widget";
 export * from "./WidgetHero";
 export * from "./WidgetList";

package/dist/browser/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Dashboard\";\nexport * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Dashboard\";\nexport * from \"./DashboardFrame\";\nexport * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}