@k2b/ui 0.51.0 → 0.52.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 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":"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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                {/* A missing figure is the shared empty dash, named for screen readers instead of read as a dash. */}\n                <Show\n                  when={!empty()}\n                  fallback={\n                    <span role=\"img\" aria-label={t().noValue}>\n                      —\n                    </span>\n                  }\n                >\n                  {props.value}\n                </Show>\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":"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","ignoreList":[]}

package/dist/browser/surfaces/stat-cell-messages.js

@@ -13,7 +13,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Not loaded",
       retry: "Try again",
       reload: "Reload",
-      loading: "Loading"
+      loading: "Loading",
+      noValue: "No value"
     },
     de: {
       points: "Pkt.",
@@ -25,7 +26,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Nicht geladen",
       retry: "Erneut versuchen",
       reload: "Neu laden",
-      loading: "Wird geladen"
+      loading: "Wird geladen",
+      noValue: "Kein Wert"
     }
   }
 });

package/dist/browser/surfaces/stat-cell-messages.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n      noValue: \"No value\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n      noValue: \"Kein Wert\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE,cAAc;MACvB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

package/dist/browser/widgets/DashboardFrame.js

@@ -12,7 +12,7 @@ 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$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>`),
@@ -90,15 +90,11 @@ export function DashboardFrame(props) {
           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$5 = _el$3.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);
+              _el$4 = _el$6.nextSibling,
+              _el$8 = _el$3.nextSibling,
+              [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling);
             _$insert(_el$3, _$createComponent(Dynamic, {
               get component() {
                 return `h${props.headingLevel ?? 3}`;
@@ -106,26 +102,21 @@ export function DashboardFrame(props) {
               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);
+            }), _el$6, _co$);
+            _$insert(_el$4, (() => {
+              var _c$ = _$memo(() => !!(state() === "stale" && props.onRetry));
+              return () => _c$() ? [status(), " · ", retryLink()] : status();
+            })());
             _$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;
+                var _el$7 = _$getNextElement(_tmpl$2);
+                _$insert(_el$7, tools);
+                return _el$7;
               }
-            }), _el$11, _co$4);
+            }), _el$9, _co$2);
             _$effect(() => _$className(_el$4, state() === "stale" ? "k2b-dashboard-frame__stale" : undefined));
             return _el$2;
           })(), _$createComponent(Show, {
@@ -134,8 +125,8 @@ export function DashboardFrame(props) {
             },
             get fallback() {
               return (() => {
-                var _el$17 = _$getNextElement(_tmpl$8);
-                _$insert(_el$17, _$createComponent(Switch, {
+                var _el$13 = _$getNextElement(_tmpl$8);
+                _$insert(_el$13, _$createComponent(Switch, {
                   get fallback() {
                     return props.children;
                   },
@@ -152,45 +143,45 @@ export function DashboardFrame(props) {
                         return _$memo(() => !!(failed() || empty()))() && props.compact;
                       },
                       get children() {
-                        var _el$19 = _$getNextElement(_tmpl$7),
-                          _el$20 = _el$19.firstChild,
+                        var _el$15 = _$getNextElement(_tmpl$7),
+                          _el$16 = _el$15.firstChild,
+                          _el$17 = _el$16.nextSibling,
+                          [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
+                          _el$19 = _el$18.nextSibling,
+                          [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
                           _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, {
+                          [_el$22, _co$6] = _$getNextMarker(_el$21.nextSibling);
+                        _$insert(_el$15, (() => {
+                          var _c$2 = _$memo(() => !!failed());
+                          return () => _c$2() ? chart().chartLoadFailed : sentence();
+                        })(), _el$18, _co$4);
+                        _$insert(_el$15, _$createComponent(Show, {
                           get when() {
                             return _$memo(() => !!failed())() && props.onRetry;
                           },
                           get children() {
                             return retryLink();
                           }
-                        }), _el$24, _co$7);
-                        _$insert(_el$19, _$createComponent(Show, {
+                        }), _el$20, _co$5);
+                        _$insert(_el$15, _$createComponent(Show, {
                           get when() {
                             return empty();
                           },
                           get children() {
                             return props.emptyAction;
                           }
-                        }), _el$26, _co$8);
+                        }), _el$22, _co$6);
                         _$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);
+                          var _v$4 = failed() ? "alert" : undefined,
+                            _v$5 = failed() ? "ti ti-alert-circle" : props.emptyIcon ?? "ti ti-chart-bar-off";
+                          _v$4 !== _p$.e && _$setAttribute(_el$15, "role", _p$.e = _v$4);
+                          _v$5 !== _p$.t && _$className(_el$16, _p$.t = _v$5);
                           return _p$;
                         }, {
                           e: undefined,
                           t: undefined
                         });
-                        return _el$19;
+                        return _el$15;
                       }
                     }), _$createComponent(Match, {
                       get when() {
@@ -203,27 +194,27 @@ export function DashboardFrame(props) {
                   }
                 }));
                 _$effect(_p$ => {
-                  var _v$3 = props.height ? {
+                  var _v$6 = 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);
+                    _v$7 = busy();
+                  _p$.e = _$style(_el$13, _v$6, _p$.e);
+                  _v$7 !== _p$.t && _$setAttribute(_el$13, "aria-busy", _p$.t = _v$7);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$17;
+                return _el$13;
               })();
             },
             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, {
+              var _el$0 = _$getNextElement(_tmpl$5),
+                _el$1 = _el$0.firstChild,
+                _el$11 = _el$1.nextSibling,
+                [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
+              _$insert(_el$1, reserve);
+              _$insert(_el$0, _$createComponent(Show, {
                 get when() {
                   return shown();
                 },
@@ -231,13 +222,27 @@ export function DashboardFrame(props) {
                   return _$createComponent(Message, {});
                 },
                 get children() {
-                  var _el$14 = _$getNextElement(_tmpl$4);
-                  _$insert(_el$14, () => props.children);
-                  return _el$14;
+                  var _el$10 = _$getNextElement(_tmpl$4);
+                  _$insert(_el$10, () => props.children);
+                  return _el$10;
                 }
-              }), _el$16, _co$5);
-              _$effect(() => _$setAttribute(_el$12, "aria-busy", busy()));
-              return _el$12;
+              }), _el$12, _co$3);
+              _$effect(_p$ => {
+                var _v$ = props.height ? "" : undefined,
+                  _v$2 = props.height ? {
+                    height: props.height
+                  } : undefined,
+                  _v$3 = busy();
+                _v$ !== _p$.e && _$setAttribute(_el$0, "data-height", _p$.e = _v$);
+                _p$.t = _$style(_el$0, _v$2, _p$.t);
+                _v$3 !== _p$.a && _$setAttribute(_el$0, "aria-busy", _p$.a = _v$3);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$0;
             }
           })];
         }
@@ -246,30 +251,30 @@ export function DashboardFrame(props) {
   });
   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, {
+      var _el$23 = _$getNextElement(_tmpl$1),
+        _el$28 = _el$23.firstChild,
+        [_el$29, _co$7] = _$getNextMarker(_el$28.nextSibling),
+        _el$26 = _el$29.nextSibling,
+        _el$30 = _el$26.nextSibling,
+        [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
+        _el$32 = _el$31.nextSibling,
+        [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling);
+      _$insert(_el$23, _$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;
+          var _el$24 = _$getNextElement(_tmpl$9),
+            _el$25 = _el$24.firstChild;
+          _$effect(() => _$className(_el$25, failed() ? "ti ti-alert-circle" : props.emptyIcon ?? "ti ti-chart-bar-off"));
+          return _el$24;
         }
-      }), _el$33, _co$9);
-      _$insert(_el$30, (() => {
-        var _c$2 = _$memo(() => !!failed());
-        return () => _c$2() ? chart().chartLoadFailed : _$memo(() => state() === "loading")() ? "" : sentence();
+      }), _el$29, _co$7);
+      _$insert(_el$26, (() => {
+        var _c$3 = _$memo(() => !!failed());
+        return () => _c$3() ? chart().chartLoadFailed : _$memo(() => state() === "loading")() ? "" : sentence();
       })());
-      _$insert(_el$27, _$createComponent(Show, {
+      _$insert(_el$23, _$createComponent(Show, {
         get when() {
           return _$memo(() => !!failed())() && props.onRetry;
         },
@@ -283,26 +288,26 @@ export function DashboardFrame(props) {
             }
           });
         }
-      }), _el$35, _co$0);
-      _$insert(_el$27, _$createComponent(Show, {
+      }), _el$31, _co$8);
+      _$insert(_el$23, _$createComponent(Show, {
         get when() {
           return empty();
         },
         get children() {
           return props.emptyAction;
         }
-      }), _el$37, _co$1);
+      }), _el$33, _co$9);
       _$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);
+        var _v$8 = state(),
+          _v$9 = failed() ? "alert" : undefined;
+        _v$8 !== _p$.e && _$setAttribute(_el$23, "data-state", _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$23, "role", _p$.t = _v$9);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$27;
+      return _el$23;
     })();
   }
 }

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

@@ -1 +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":[]}
+{"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  /**\n   * Height of the body, a CSS length. Every state keeps it. With `reserve`, the content fills it and scrolls inside, so\n   * a table keeps its header in view; without it, the hidden copy sets the height.\n   */\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. The\n                line is one expression: a trailing conditional anchor would change WebKit's rendered text after the\n                first client render. */}\n            <p role=\"status\" class={state() === \"stale\" ? \"k2b-dashboard-frame__stale\" : undefined}>\n              {state() === \"stale\" && props.onRetry ? [status(), \" · \", retryLink()] : status()}\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\n            class=\"k2b-dashboard-frame__stack\"\n            data-height={props.height ? \"\" : undefined}\n            style={props.height ? { height: props.height } : undefined}\n            aria-busy={busy()}\n          >\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/ssr/actions/Toolbar.js

@@ -1,8 +1,8 @@
 import { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 var _tmpl$ = ["<i", " aria-hidden=\"true\"></i>"],
   _tmpl$2 = ["<span class=\"", "\">", "</span>"],
   _tmpl$3 = ["<div class=\"", "\" role=\"group\"", ">", "</div>"],
@@ -95,6 +95,9 @@ const ToolbarAction = props => {
     get ["aria-keyshortcuts"]() {
       return ariaShortcut(props.keys, platform());
     },
+    get ["aria-pressed"]() {
+      return _$memo(() => props.pressed === undefined)() ? undefined : props.pressed ? "true" : "false";
+    },
     get ["data-priority"]() {
       return props.priority;
     },
@@ -140,7 +143,10 @@ const rovingFocus = (root, orientation) => {
   });
   const items = () => controls().filter(item => !item.matches(":disabled") && !item.closest('[data-overflow="hidden"]') && item.getClientRects().length > 0);
   const sync = () => {
-    const available = items();
+    // A toolbar that is still hidden, such as a SelectionToolbar about to show, keeps one stop: otherwise Tab right
+    // after it shows would pass it before the next measure.
+    const shown = items();
+    const available = shown.length ? shown : controls().filter(item => !item.matches(":disabled") && !item.closest('[data-overflow="hidden"]'));
     if (!last || !available.includes(last)) setLast(available[0]);
     for (const item of controls()) item.tabIndex = item === last ? 0 : -1;
   };