@parallelworks/ui 0.94.0 → 0.95.0

package/README.md

@@ -121,6 +121,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | A message set into the page: guidance, a warning, an error | `Callout`; `variant="bar"` across a surface under its header |
 | A passing notice, or the progress of work in the background | `toast` |
 | How full something is, how far a task has come | `Meter`, `ProgressBar` |
+| Counts at the top of a page, such as jobs running and failed: a value, its label, a lamp, a bar, or a link to the list | `StatTile`, laid out in a `StatTileGroup`, which folds to two columns on a phone with `wide` tiles and any that would sit alone across the row |
 | Pages of a long list | `Pagination`; in a `ListPage`, as its `pager`, on the count's line under the last row, where a "Load more" button goes too |
 | A grouped page of settings | `SettingsCard` with `SettingRow`s |
 | A person or an agent | `Avatar`, colored by name without a picture, or by kind; `AvatarGroup` for an overlapping stack with a "+N" chip |
@@ -1326,3 +1327,20 @@ link; put page content inside it without nesting a second `<main>`.
 Frame styles use the `pw-ui` cascade layer. Put broad host element defaults
 (such as anchor colors and scrollbar styling) in a lower-priority layer declared
 before the package styles, so they do not replace navigation states.
+
+Applications that supply their own navigation items can load only the layout:
+
+```tsx
+import { AppFrame, AppFrameToggle } from '@parallelworks/ui/app-frame'
+import '@parallelworks/ui/app-frame/layout.css'
+```
+
+This includes the sidebar, scrolling regions, resize handle, mobile drawer,
+toggle and close buttons, focus indicators, and skip link. Style custom navigation
+items in the host, including their selected, hover, rail, and mobile states.
+
+When using `AppFrameNavItem`, also import
+`@parallelworks/ui/app-frame/navigation.css`. The existing
+`@parallelworks/ui/app-frame.css` import includes both stylesheets and continues
+to work without changes. Use either the combined import or the two separate
+imports; there is no need to load both forms.

package/dist/app-frame/app-frame.css

@@ -60,66 +60,6 @@
     flex-shrink: 0;
     padding: 8px 12px;
   }
-  .pw-frame-nav-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-height: 36px;
-    min-width: 0;
-    width: 100%;
-    border: 0;
-    border-radius: 8px;
-    padding: 8px;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    cursor: pointer;
-    text-decoration: none;
-    text-align: start;
-    transition: background-color 150ms ease-out;
-  }
-  .pw-frame-nav-item:hover,
-  .pw-frame-toggle:hover {
-    background: var(--theme-sidebar-hover, var(--theme-hover));
-  }
-  .pw-frame-nav-item[aria-current] {
-    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
-    color: var(--theme-sidebar-active-text, var(--theme-accent));
-  }
-  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .pw-frame-nav-icon {
-    display: flex;
-    flex: 0 0 18px;
-    align-items: center;
-    justify-content: center;
-  }
-  .pw-frame-nav-icon svg {
-    width: 18px;
-    height: 18px;
-  }
-  .pw-frame-nav-label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .pw-frame-nav-badge {
-    flex-shrink: 0;
-    font-size: 12px;
-    font-variant-numeric: tabular-nums;
-  }
-  [data-sidebar-mode="rail"] .pw-frame-nav-item {
-    padding-inline: 0;
-    justify-content: center;
-    height: 40px;
-  }
   .pw-frame-toggle {
     display: inline-flex;
     align-items: center;
@@ -134,6 +74,9 @@
     cursor: pointer;
     flex-shrink: 0;
   }
+  .pw-frame-toggle:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
   .pw-frame-toggle svg {
     width: 18px;
     height: 18px;
@@ -249,7 +192,6 @@
   .pw-frame-drawer .pw-frame-brand {
     padding-top: 0;
   }
-  .pw-frame-drawer .pw-frame-nav-item,
   .pw-app-frame[data-mobile] .pw-frame-toggle {
     min-height: 44px;
   }
@@ -273,7 +215,75 @@
   @media (prefers-reduced-motion: reduce) {
     .pw-frame-sidebar,
     .pw-frame-backdrop,
-    .pw-frame-drawer,
+    .pw-frame-drawer {
+      transition: none;
+    }
+  }
+}
+@layer pw-ui {
+  .pw-frame-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    padding: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: start;
+    transition: background-color 150ms ease-out;
+  }
+  .pw-frame-nav-item:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-nav-item[aria-current] {
+    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
+    color: var(--theme-sidebar-active-text, var(--theme-accent));
+  }
+  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .pw-frame-nav-icon {
+    display: flex;
+    flex: 0 0 18px;
+    align-items: center;
+    justify-content: center;
+  }
+  .pw-frame-nav-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-nav-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pw-frame-nav-badge {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  [data-sidebar-mode="rail"] .pw-frame-nav-item {
+    padding-inline: 0;
+    justify-content: center;
+    height: 40px;
+  }
+  .pw-frame-drawer .pw-frame-nav-item {
+    min-height: 44px;
+  }
+  @media (prefers-reduced-motion: reduce) {
     .pw-frame-nav-item {
       transition: none;
     }

package/dist/app-frame/layout.css

@@ -0,0 +1,222 @@
+@layer pw-ui {
+  /* The frame uses the same sidebar tokens as the theme generator. */
+  .pw-app-frame {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    min-height: 0;
+    isolation: isolate;
+    background: var(--theme-sidebar-bg, var(--theme-muted-panel-bg));
+    color: var(--theme-app);
+  }
+  .pw-frame-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    overflow: hidden;
+  }
+  .pw-frame-sidebar,
+  .pw-frame-drawer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    min-height: 0;
+    background: var(--theme-sidebar-bg, var(--theme-muted-panel-bg));
+    color: var(--theme-sidebar-text, var(--theme-app));
+  }
+  .pw-frame-sidebar {
+    position: relative;
+    transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-sidebar[data-resizing] {
+    transition: none;
+    user-select: none;
+  }
+  .pw-frame-brand {
+    padding: 12px 12px 4px;
+    flex-shrink: 0;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .pw-frame-links {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 12px;
+    min-width: 0;
+    min-height: 0;
+    scrollbar-width: none;
+  }
+  .pw-frame-links::-webkit-scrollbar {
+    display: none;
+  }
+  .pw-frame-links nav {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+  .pw-frame-footer {
+    flex-shrink: 0;
+    padding: 8px 12px;
+  }
+  .pw-frame-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: 8px;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .pw-frame-toggle:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-toggle svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-sidebar :focus-visible,
+  .pw-frame-drawer :focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  .pw-frame-resize {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: -4px;
+    width: 8px;
+    cursor: col-resize;
+    touch-action: none;
+  }
+  .pw-frame-resize::after {
+    content: "";
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 3px;
+    width: 2px;
+    border-radius: 2px;
+  }
+  .pw-frame-resize:hover::after,
+  .pw-frame-resize:focus-visible::after {
+    background: var(--theme-sidebar-text, var(--theme-accent));
+    opacity: 0.5;
+  }
+  .pw-frame-surface-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    padding: 8px;
+    padding-inline-start: 0;
+  }
+  .pw-frame-surface {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    isolation: isolate;
+    border: 1px solid var(--theme-border);
+    border-radius: 12px;
+    background: var(--theme-app-bg);
+    background-clip: padding-box;
+  }
+  .pw-frame-header,
+  .pw-frame-banner {
+    flex-shrink: 0;
+  }
+  .pw-frame-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+  .pw-app-frame[data-full-bleed] .pw-frame-surface-wrap {
+    padding: 0;
+  }
+  .pw-app-frame[data-full-bleed] .pw-frame-surface {
+    border: 0;
+    border-radius: 0;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-surface-wrap {
+    padding: 8px;
+  }
+  .pw-app-frame[data-mobile][data-full-bleed] .pw-frame-surface-wrap {
+    padding: 0;
+  }
+  .pw-frame-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: var(--layer-drawer, 1100);
+    background: var(--theme-backdrop, rgb(0 0 0 / 0.35));
+    transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-backdrop[data-starting-style],
+  .pw-frame-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  .pw-frame-drawer {
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 8px;
+    max-width: calc(100% - 48px);
+    z-index: var(--layer-drawer, 1100);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgb(0 0 0 / 0.2);
+    outline: none;
+    transform: translateX(0);
+    transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-drawer[data-starting-style],
+  .pw-frame-drawer[data-ending-style] {
+    transform: translateX(calc(-100% - 16px));
+  }
+  .pw-frame-drawer:dir(rtl)[data-starting-style],
+  .pw-frame-drawer:dir(rtl)[data-ending-style] {
+    transform: translateX(calc(100% + 16px));
+  }
+  .pw-frame-mobile-close {
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 4px 0;
+  }
+  .pw-frame-drawer .pw-frame-brand {
+    padding-top: 0;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-toggle {
+    min-height: 44px;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-toggle {
+    width: 44px;
+    height: 44px;
+  }
+  .pw-frame-skip {
+    position: fixed;
+    inset-block-start: -100px;
+    inset-inline-start: 8px;
+    padding: 8px 16px;
+    border-radius: 6px;
+    background: var(--theme-panel-bg);
+    color: var(--theme-app);
+    z-index: var(--layer-popover, 1400);
+  }
+  .pw-frame-skip:focus {
+    inset-block-start: 8px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pw-frame-sidebar,
+    .pw-frame-backdrop,
+    .pw-frame-drawer {
+      transition: none;
+    }
+  }
+}

package/dist/app-frame/navigation.css

@@ -0,0 +1,69 @@
+@layer pw-ui {
+  .pw-frame-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    padding: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: start;
+    transition: background-color 150ms ease-out;
+  }
+  .pw-frame-nav-item:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-nav-item[aria-current] {
+    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
+    color: var(--theme-sidebar-active-text, var(--theme-accent));
+  }
+  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .pw-frame-nav-icon {
+    display: flex;
+    flex: 0 0 18px;
+    align-items: center;
+    justify-content: center;
+  }
+  .pw-frame-nav-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-nav-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pw-frame-nav-badge {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  [data-sidebar-mode="rail"] .pw-frame-nav-item {
+    padding-inline: 0;
+    justify-content: center;
+    height: 40px;
+  }
+  .pw-frame-drawer .pw-frame-nav-item {
+    min-height: 44px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pw-frame-nav-item {
+      transition: none;
+    }
+  }
+}

package/dist/components/StatTile.d.ts

@@ -0,0 +1,76 @@
+import { type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
+import type { LinkTarget } from './AppLink.js';
+import { type BarTone, type ProgressSegment } from './Meter.js';
+import { type BadgeVariant } from './StatusBadge.js';
+/** A tile's lamp, as a status's: lit in a tone, unlit with `off`, or an icon in its place. Its
+ *  tone says what the state means, as every status lamp's does: work under way is `info` with
+ *  `pulse`, something waiting its turn or off (pending jobs, idle nodes) is `off`, a failure is
+ *  `error`, work done is `success`, and `warning` is only for a state that needs a look. */
+export interface StatTileLamp {
+    variant?: BadgeVariant | undefined;
+    /** Unlit, a hollow ring, for a count of something waiting or off, such as pending jobs or idle
+     *  nodes. */
+    off?: boolean | undefined;
+    /** A ping from the lamp, for work under way. It pings only while the count is above zero. */
+    pulse?: boolean | undefined;
+    /** An icon in place of the lamp, such as a `RunStatusIcon`. */
+    icon?: ReactNode | undefined;
+}
+/** A tile's bar: a `ProgressBar` in one or more stretches, such as nodes in use, then partly in
+ *  use, then down, on a track whose empty rest is the idle ones. */
+export interface StatTileBar {
+    value: number;
+    max?: number;
+    tone?: BarTone;
+    segments?: ReadonlyArray<ProgressSegment> | undefined;
+    /** What the bar shows, read by assistive technology, such as "60 of 102 nodes in use". */
+    'aria-label': string;
+    getAriaValueText?: ((formatted: string | null, value: number | null) => string) | undefined;
+}
+export interface StatTileProps extends LinkTarget {
+    /** The count. A number reads in the app's locale, grouped as it groups digits; anything else,
+     *  such as a dash for a count not known, shows as given. */
+    value: ReactNode;
+    /** Quieter text after the value, such as "/ 102 free". */
+    suffix?: ReactNode;
+    /** What the value counts, under it, such as "Running". A long one wraps. */
+    label: ReactNode;
+    /** A status lamp level with the label, for a count of things in one state. */
+    lamp?: StatTileLamp | undefined;
+    /** A bar under the label: a `ProgressBar`'s value and stretches, or a bar of the host's own,
+     *  such as one in a tooltip. */
+    bar?: StatTileBar | ReactElement | undefined;
+    /** How a number is written, such as `{ notation: 'compact' }` for 1.3M; whole and grouped
+     *  by default. */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** What assistive technology reads for the tile, when the value, suffix and label in a row
+     *  don't read well, such as "35 of 102 nodes free". */
+    spoken?: string | undefined;
+    /** Makes the tile a button. With `href` it is a link instead. */
+    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+    /** In a `StatTileGroup`, the tile takes a row of its own on a phone, such as one with a bar. */
+    wide?: boolean | undefined;
+    /** Sketches the value while it loads; the label shows, since it is known. */
+    loading?: boolean | undefined;
+    /** The locale numbers are written in; the provider's `locale`, then the browser's, without it. */
+    locale?: string | undefined;
+    className?: string | undefined;
+}
+/** A count and what it counts, as a tile at the top of a page, such as a queue's running jobs:
+ *  a large value, a label under it, and optionally a status lamp beside the label and a bar
+ *  under it. With `href` or `onClick`, the whole tile is a link or a button, such as to the list
+ *  the count is of. Lay several out with `StatTileGroup`.
+ *
+ *  Assistive technology reads the value and label as one phrase, such as "3 Running", not as two
+ *  lines; `spoken` words it otherwise. */
+export declare function StatTile({ value, suffix, label, lamp, bar, format, spoken, onClick, wide, loading, locale: localeProp, href, reloadDocument, target, className, }: StatTileProps): import("react").JSX.Element;
+export interface StatTileGroupProps {
+    /** `StatTile`s, each a direct child, so the group reads their `wide`. */
+    children: ReactNode;
+    className?: string | undefined;
+}
+/** Tiles in a row as wide as the content around them, edge to edge with it. Where the row is
+ *  too narrow for them, such as on a phone, they take two columns, with a `wide` tile across
+ *  both, and any tile that would sit alone in half a row across both too:
+ *  four counts and a wide tile read as two rows of two and the wide one under them. */
+export declare function StatTileGroup({ children, className }: StatTileGroupProps): import("react").JSX.Element;

package/dist/components/StatTile.js

@@ -0,0 +1,141 @@
+import { cx } from "../cx.js";
+import { useLocale, useStrings } from "./Provider.js";
+import { Skeleton } from "./Skeleton.js";
+import { Card } from "./Card.js";
+import { ProgressBar } from "./Meter.js";
+import { formatInteger } from "../format.js";
+import { StatusDot } from "./StatusBadge.js";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatTile.tsx
+var PhoneSpanContext = createContext(false);
+var numberFormats = /* @__PURE__ */ new Map();
+function formatValue(value, locale, format) {
+	if (!format) return formatInteger(value, locale);
+	const key = `${locale ?? ""}|${JSON.stringify(format)}`;
+	let formatter = numberFormats.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, format);
+		numberFormats.set(key, formatter);
+	}
+	return formatter.format(value);
+}
+/** A count and what it counts, as a tile at the top of a page, such as a queue's running jobs:
+*  a large value, a label under it, and optionally a status lamp beside the label and a bar
+*  under it. With `href` or `onClick`, the whole tile is a link or a button, such as to the list
+*  the count is of. Lay several out with `StatTileGroup`.
+*
+*  Assistive technology reads the value and label as one phrase, such as "3 Running", not as two
+*  lines; `spoken` words it otherwise. */
+function StatTile({ value, suffix, label, lamp, bar, format, spoken, onClick, wide, loading = false, locale: localeProp, href, reloadDocument, target, className }) {
+	const providerLocale = useLocale();
+	const { loading: loadingText } = useStrings().common;
+	const locale = localeProp ?? providerLocale;
+	const groupSpan = useContext(PhoneSpanContext);
+	const shown = typeof value === "number" ? formatValue(value, locale, format) : value;
+	const pulse = lamp?.pulse === true && !(typeof value === "number" && value <= 0);
+	return /* @__PURE__ */ jsxs(Card, {
+		size: "fill",
+		href,
+		reloadDocument,
+		target,
+		render: href === void 0 && onClick ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick
+		}) : void 0,
+		className: cx("flex h-full min-w-0 flex-col px-4 py-3", (groupSpan || wide) && "col-span-2 @2xl/stat-tiles:col-span-1", className),
+		children: [
+			loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: loadingText
+			})] }) : /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: spoken ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					shown,
+					suffix != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", suffix] }),
+					" ",
+					label
+				] })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "flex min-w-0 items-baseline gap-1.5",
+				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+					width: "3ch",
+					height: 24,
+					className: "my-1 text-2xl"
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-2xl leading-8 font-semibold tracking-tight text-(--theme-app)",
+					children: shown
+				}), suffix != null && /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-sm text-(--theme-muted-text-color)",
+					children: suffix
+				})] })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "flex min-w-0 items-start gap-1.5 text-[13px] leading-5 text-(--theme-muted-text-color)",
+				children: [lamp && (lamp.icon != null ? /* @__PURE__ */ jsx("span", {
+					className: "inline-flex h-lh shrink-0 items-center",
+					children: lamp.icon
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "inline-flex h-lh shrink-0 items-center",
+					children: /* @__PURE__ */ jsx(StatusDot, {
+						variant: lamp.variant,
+						off: lamp.off,
+						pulse
+					})
+				})), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 break-words",
+					children: label
+				})]
+			}),
+			bar !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-2",
+				children: isValidElement(bar) ? bar : /* @__PURE__ */ jsx(ProgressBar, {
+					...bar,
+					size: "sm",
+					showValue: "none",
+					locale
+				})
+			})
+		]
+	});
+}
+/** Which tiles, by place, would sit alone in half a row of two, laid out in order with each wide
+*  one on a row of its own. */
+function loneTiles(wide) {
+	const lone = /* @__PURE__ */ new Set();
+	let second = false;
+	wide.forEach((isWide, index) => {
+		if (isWide) second = false;
+		else if (second) second = false;
+		else if (index === wide.length - 1 || wide[index + 1]) lone.add(index);
+		else second = true;
+	});
+	return lone;
+}
+/** Tiles in a row as wide as the content around them, edge to edge with it. Where the row is
+*  too narrow for them, such as on a phone, they take two columns, with a `wide` tile across
+*  both, and any tile that would sit alone in half a row across both too:
+*  four counts and a wide tile read as two rows of two and the wide one under them. */
+function StatTileGroup({ children, className }) {
+	const tiles = Children.toArray(children).filter(isValidElement);
+	const lone = loneTiles(tiles.map((tile) => tile.props.wide === true));
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("@container/stat-tiles w-full", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-3 @2xl/stat-tiles:grid-cols-(--stat-tile-columns)",
+			style: { "--stat-tile-columns": `repeat(${Math.max(tiles.length, 1)}, minmax(0, 1fr))` },
+			children: tiles.map((tile, index) => /* @__PURE__ */ jsx(PhoneSpanContext.Provider, {
+				value: lone.has(index),
+				children: tile
+			}, tile.key))
+		})
+	});
+}
+//#endregion
+export { StatTile, StatTileGroup };