@joewinke/jatui 0.60.0 → 0.62.0

package/dist/components/AmbienceToggle.svelte

@@ -32,6 +32,16 @@
 	 *     focus) get the play/pause control only. The transport joins the
 	 *     menu's roving order; a paused row stays visible (its play button is
 	 *     the resume) and a stopped one hides.
+	 *   - Playlists whose licence permits redistribution (jatui-0vxcu: CC0,
+	 *     public domain, CC-BY, CC-BY-SA — never NC/ND unless the manifest
+	 *     marks the track `downloadable: true`) also get a Download button
+	 *     next to the transport: the track url is fetched to a Blob (a plain
+	 *     cross-origin `<a download>` is ignored), saved under
+	 *     "Composer - Title.ext" so attribution travels with the file, and a
+	 *     CORS failure falls back to opening the url in a new tab. The busy
+	 *     spinner never blocks playback. Shared mode: a remote tab downloads
+	 *     the leader's published track url (`SharedAmbienceState.trackDownload`)
+	 *     — or hides the button when the leader published none.
 	 *   - A playing playlist shows its current track's attribution (title,
 	 *     composer, license) under the playlist item and its section row.
 	 *   - With a menu or submenu open, the mouse wheel over that surface
@@ -233,8 +243,18 @@
 	import { getMotionContext } from '../motion/level';
 	import { isAmbienceLink, safeAmbienceHref } from '../ambience/groups';
 	import { isPlaylistScape, type PlaylistState } from '../ambience/scapes/playlist';
+	import {
+		isTrackDownloadable,
+		trackDownloadFilename
+	} from '../ambience/scapes/playlist';
+	import IconButton from './IconButton.svelte';
+	import { safeSharedTrackDownload } from '../ambience/shared';
+	import type {
+		SharedAmbience,
+		SharedAmbienceState,
+		SharedTrackDownload
+	} from '../ambience/shared';
 	import type { Ambience, AmbienceLink, Scape } from '../ambience/types';
-	import type { SharedAmbience, SharedAmbienceState } from '../ambience/shared';
 
 	let {
 		engine,
@@ -252,6 +272,8 @@
 	const menuId = $props.id();
 	const hintId = `${menuId}-hint`;
 	const subId = `${menuId}-sub`;
+	/** The download button's licence/source description line (jatui-0vxcu). */
+	const downloadHintId = `${menuId}-dl`;
 
 	/** Long-press duration for the pointer path to the menu. */
 	const LONG_PRESS_MS = 450;
@@ -309,6 +331,14 @@
 	let sharedTitle = $state<string | null>(null);
 	let sharedPosition = $state<number | null>(null);
 	let sharedDuration = $state<number | null>(null);
+	/** The leader's published download info (jatui-0vxcu) — a remote tab's
+	 *  download button reads this; null hides the button (not published, or
+	 *  the licence forbids redistribution). */
+	let sharedDownload = $state<SharedTrackDownload | null>(null);
+	/** True while a download fetch is in flight — the button shows its busy
+	 *  spinner and refuses re-entry. The fetch runs beside playback; nothing
+	 *  here touches the engine. */
+	let downloadBusy = $state(false);
 
 	// Wheel-volume accumulator over the open surfaces (jatui-xomny): carries
 	// the pending partial notch between wheel events so trackpad pixel deltas
@@ -360,6 +390,46 @@
 	);
 	const npPercent = $derived(progressPercent(npPosition, npDuration));
 
+	// --- download button (jatui-0vxcu) ---------------------------------------
+	/** What the download button offers right now: the playing (or paused)
+	 *  playlist track's url + ready-made filename + licence, gated by the
+	 *  licence AND by `safeAmbienceHref` — the url has to be an absolute
+	 *  http(s) one, because it is fetched and (on CORS failure) opened in a
+	 *  new tab; a `javascript:`/`data:`/scheme-relative entry means no button.
+	 *  On a remote tab the leader's publication is re-validated the same way
+	 *  (the leader is another tab, not a trusted source) — null → no button.
+	 *  Generative scapes never have one. */
+	const currentDownload = $derived.by(() => {
+		if (!showNowPlaying) return null;
+		if (isRemote) return safeSharedTrackDownload(sharedDownload);
+		const t = currentIsPlaylist ? (playlist?.track ?? null) : null;
+		if (!t || !isTrackDownloadable(t)) return null;
+		const url = safeAmbienceHref(t.url);
+		if (!url) return null;
+		return {
+			url,
+			filename: trackDownloadFilename(t),
+			license: t.license,
+			sourceUrl: t.sourceUrl
+		} satisfies SharedTrackDownload;
+	});
+	/** The button's tooltip: licence + source link — CC-BY needs attribution. */
+	const downloadTooltip = $derived(
+		currentDownload
+			? `Download ${currentDownload.filename} · ${currentDownload.license}${
+					currentDownload.sourceUrl ? ` · source: ${currentDownload.sourceUrl}` : ''
+				}`
+			: ''
+	);
+	/** The sr-only line the button's aria-describedby points at. */
+	const downloadHint = $derived(
+		currentDownload
+			? `Download as ${currentDownload.filename}. Licence: ${currentDownload.license}.${
+					currentDownload.sourceUrl ? ` Source: ${currentDownload.sourceUrl}.` : ''
+				}`
+			: ''
+	);
+
 	const BUTTON_SIZE = $derived(compact ? 'size-10' : 'size-11');
 	const ICON_SIZE = $derived(compact ? 18 : 20);
 
@@ -399,6 +469,7 @@
 			sharedTitle = s.trackTitle;
 			sharedPosition = s.trackPosition;
 			sharedDuration = s.trackDuration;
+			sharedDownload = s.trackDownload ?? null;
 		});
 	});
 
@@ -416,12 +487,25 @@
 		return item.subscribe((s) => {
 			playlist = s;
 			track = s.status === 'playing' ? s.track : null;
+			// The download rides the same publication (jatui-0vxcu): only a track
+			// whose licence permits redistribution AND whose url survives
+			// safeAmbienceHref (absolute http/https) is offered to the other tabs.
+			const t = s.status === 'playing' ? s.track : null;
+			const dlUrl = t && isTrackDownloadable(t) ? safeAmbienceHref(t.url) : null;
 			engine.setNowPlaying?.(
-				s.status === 'playing' && s.track ? nowPlayingLine(s.track) : null,
+				s.status === 'playing' && t ? nowPlayingLine(t) : null,
 				s.index,
 				s.status === 'playing' ? s.position : null,
 				s.status === 'playing' ? s.duration : null,
-				s.track?.title ?? null
+				s.track?.title ?? null,
+				t && dlUrl
+					? {
+							url: dlUrl,
+							filename: trackDownloadFilename(t),
+							license: t.license,
+							...(t.sourceUrl ? { sourceUrl: t.sourceUrl } : {})
+						}
+					: null
 			);
 		});
 	});
@@ -682,6 +766,47 @@
 		if (isPlaylistScape(currentItem)) currentItem.skip();
 	}
 
+	/**
+	 * The download button (jatui-0vxcu). A cross-origin `<a download>` is
+	 * ignored by browsers, so the file is fetched to a Blob and saved through
+	 * an object URL — the attribution filename was built by the pure helper.
+	 * A failed fetch (CORS) falls back to opening the url in a new tab. Both
+	 * the fetch and the fallback go through `safeAmbienceHref` — a url that
+	 * is not absolute http(s) (a hostile manifest, or a hostile shared-mode
+	 * leader) never reaches `window.open`. The fetch runs beside the engine —
+	 * playback is never blocked or touched.
+	 */
+	async function onDownloadClick() {
+		const info = currentDownload;
+		const href = safeAmbienceHref(info?.url);
+		if (!info || !href || downloadBusy) return;
+		downloadBusy = true;
+		try {
+			const res = await fetch(href);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const blob = await res.blob();
+			const objectUrl = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = objectUrl;
+			a.download = info.filename;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			// The browser has the blob reference the moment it accepts the
+			// download; the revoke is belt-and-braces housekeeping.
+			setTimeout(() => URL.revokeObjectURL(objectUrl), 10_000);
+		} catch {
+			// CORS refused or the network failed — the url still opens.
+			try {
+				window.open(href, '_blank', 'noopener,noreferrer');
+			} catch {
+				/* a blocked popup is not worth crashing over */
+			}
+		} finally {
+			downloadBusy = false;
+		}
+	}
+
 	// --- wheel volume over the open surfaces (jatui-xomny) -------------------
 	// While the menu (or one of its submenus) is open the wheel adjusts volume
 	// instead of scrolling the page — EXCEPT over a scrollable list that can
@@ -1064,7 +1189,67 @@
 								</svg>
 							</button>
 						{/if}
+						{#if currentDownload}
+							<!-- Download (jatui-0vxcu): only for tracks whose licence
+							     permits redistribution (or the leader's published url
+							     on a remote tab). aria-describedby points at the
+							     licence line below — the tooltip's own action also
+							     rewrites describedby while it shows, so the line stays
+							     in the row as readable content either way. -->
+							<IconButton
+								label="Download {npTitle}"
+								variant="ghost"
+								size="sm"
+								shape="circle"
+								tooltip={downloadTooltip}
+								tooltipPlacement="top"
+								aria-describedby={downloadHintId}
+								tabindex={-1}
+								data-ambience-nav
+								disabled={downloadBusy}
+								onclick={onDownloadClick}
+							>
+								{#if downloadBusy}
+									<!-- busy: the fetch is in flight (playback unaffected) -->
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										class="jatui-dl-spin size-4"
+										aria-hidden="true"
+									>
+										<circle cx="12" cy="12" r="9" opacity="0.25" />
+										<path d="M21 12a9 9 0 0 0-9-9" />
+									</svg>
+								{:else}
+									<!-- download, lucide geometry -->
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="size-4"
+										aria-hidden="true"
+									>
+										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+										<polyline points="7 10 12 15 17 10" />
+										<line x1="12" y1="15" x2="12" y2="3" />
+									</svg>
+								{/if}
+							</IconButton>
+						{/if}
 					</div>
+					{#if currentDownload}
+						<!-- The licence + source the download carries — CC-BY needs
+						     attribution, so the filename alone is not enough. -->
+						<p id={downloadHintId} class="sr-only">{downloadHint}</p>
+					{/if}
 				</div>
 			{/if}
 
@@ -1315,5 +1500,20 @@
 		.now-progress-fill {
 			transition: none;
 		}
+		.jatui-dl-spin {
+			animation: none;
+		}
+	}
+
+	/* The download button's busy spinner — task feedback, not ambient motion,
+	 * but it still holds still under reduced motion. */
+	.jatui-dl-spin {
+		animation: jatui-dl-rotate 900ms linear infinite;
+	}
+
+	@keyframes jatui-dl-rotate {
+		to {
+			transform: rotate(360deg);
+		}
 	}
 </style>

package/dist/components/AmbienceToggle.svelte.d.ts

@@ -31,6 +31,16 @@
  *     focus) get the play/pause control only. The transport joins the
  *     menu's roving order; a paused row stays visible (its play button is
  *     the resume) and a stopped one hides.
+ *   - Playlists whose licence permits redistribution (jatui-0vxcu: CC0,
+ *     public domain, CC-BY, CC-BY-SA — never NC/ND unless the manifest
+ *     marks the track `downloadable: true`) also get a Download button
+ *     next to the transport: the track url is fetched to a Blob (a plain
+ *     cross-origin `<a download>` is ignored), saved under
+ *     "Composer - Title.ext" so attribution travels with the file, and a
+ *     CORS failure falls back to opening the url in a new tab. The busy
+ *     spinner never blocks playback. Shared mode: a remote tab downloads
+ *     the leader's published track url (`SharedAmbienceState.trackDownload`)
+ *     — or hides the button when the leader published none.
  *   - A playing playlist shows its current track's attribution (title,
  *     composer, license) under the playlist item and its section row.
  *   - With a menu or submenu open, the mouse wheel over that surface
@@ -141,8 +151,8 @@ export declare function wheelVolumeSteps(acc: {
  * slider itself would produce for the same value.
  */
 export declare function volumeAfterSteps(volume: number, steps: number, stepPct?: number): number;
-import type { Ambience } from '../ambience/types';
 import type { SharedAmbience } from '../ambience/shared';
+import type { Ambience } from '../ambience/types';
 type $$ComponentProps = {
     /** The engine instance (from `createAmbience()`). The component never creates one, and never kills it — the host owns the engine's lifecycle. Section order/labels come from the engine's `groups` option. With the cross-tab shared player (jatui-lm1mf, `createAmbience({ shared: true })`) a plain `Ambience` is also accepted: the shared now-playing line is only read when the engine publishes one. */
     engine: Ambience | SharedAmbience;

package/dist/components/stats/StatusBanner.svelte

@@ -0,0 +1,119 @@
+<!--
+  StatusBanner: the overall status page headline (jatui-i3vxo). "All systems
+  operational" / degraded / outage, token colours, check / warning / x icon.
+  Token-only colours: the tint comes from the status tokens, never a hex.
+-->
+<script lang="ts" module>
+	export type BannerStatus = 'operational' | 'degraded' | 'outage';
+</script>
+
+<script lang="ts">
+	import { tooltip } from '../../actions/tooltip';
+
+	interface Props {
+		/** 'operational' | 'degraded' | 'outage' (see aggregateStatus for a pure helper). */
+		status: BannerStatus;
+		/** Override the message. */
+		message?: string;
+		/** Extra detail behind an (i) info button. */
+		info?: string;
+		class?: string;
+	}
+
+	let { status, message, info, class: className = '' }: Props = $props();
+
+	const text = $derived(
+		message ?? (status === 'operational' ? 'All systems operational' : status === 'degraded' ? 'Some systems degraded' : 'Partial outage')
+	);
+</script>
+
+<div class="jatui-status-banner {className}" role="status" data-status={status}>
+	{#if status === 'operational'}
+		<svg viewBox="0 0 16 16" aria-hidden="true">
+			<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+			<path d="M5.2 8.2 7.1 10l3.7-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+		</svg>
+	{:else if status === 'outage'}
+		<svg viewBox="0 0 16 16" aria-hidden="true">
+			<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+			<path d="M5.8 5.8l4.4 4.4M10.2 5.8 5.8 10.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+		</svg>
+	{:else}
+		<svg viewBox="0 0 16 16" aria-hidden="true">
+			<path d="M8 2 14.5 13h-13Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+			<path d="M8 6.4v3.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+			<circle cx="8" cy="11.3" r="0.9" fill="currentColor" />
+		</svg>
+	{/if}
+	<span class="sb-text">{text}</span>
+	{#if info}
+		<button
+			type="button"
+			class="sb-info"
+			aria-label="More about this status"
+			use:tooltip={{ text: info, placement: 'top', delayMs: 0 }}
+		>
+			<svg viewBox="0 0 16 16" aria-hidden="true">
+				<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+				<path d="M8 7.2v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+				<circle cx="8" cy="4.8" r="0.9" fill="currentColor" />
+			</svg>
+		</button>
+	{/if}
+</div>
+
+<style>
+	.jatui-status-banner {
+		--_st: var(--jatui-status-positive, var(--color-success));
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+		padding: var(--jatui-space-base, 8px) var(--jatui-space-lg, 16px);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: color-mix(in oklch, var(--_st) 12%, var(--color-base-100));
+		border: 1px solid color-mix(in oklch, var(--_st) 30%, transparent);
+		color: var(--_st);
+		font-size: 0.9375rem;
+		font-weight: 600;
+	}
+	.jatui-status-banner[data-status='degraded'] {
+		--_st: var(--jatui-status-caution, var(--color-warning));
+	}
+	.jatui-status-banner[data-status='outage'] {
+		--_st: var(--jatui-status-negative, var(--color-error));
+	}
+	.jatui-status-banner svg {
+		width: 16px;
+		height: 16px;
+		flex: none;
+	}
+	.sb-text {
+		flex: 1;
+		min-width: 0;
+	}
+	.sb-info {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: inherit;
+		opacity: 0.75;
+		cursor: help;
+	}
+	.sb-info svg {
+		width: 14px;
+		height: 14px;
+	}
+	.sb-info:hover {
+		opacity: 1;
+	}
+	.sb-info:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+</style>

package/dist/components/stats/StatusBanner.svelte.d.ts

@@ -0,0 +1,13 @@
+export type BannerStatus = 'operational' | 'degraded' | 'outage';
+interface Props {
+    /** 'operational' | 'degraded' | 'outage' (see aggregateStatus for a pure helper). */
+    status: BannerStatus;
+    /** Override the message. */
+    message?: string;
+    /** Extra detail behind an (i) info button. */
+    info?: string;
+    class?: string;
+}
+declare const StatusBanner: import("svelte").Component<Props, {}, "">;
+type StatusBanner = ReturnType<typeof StatusBanner>;
+export default StatusBanner;

package/dist/components/stats/StatusCard.svelte

@@ -0,0 +1,176 @@
+<!--
+  StatusCard: one measured component on a status page (jatui-i3vxo). Name +
+  info tooltip (what is measured), the status icon at the right, the
+  UptimeBar strip, and the status word (Normal / Degraded / Outage / …).
+  Data in: `{ date, status, downMinutes?, note? }[]`. Composes with
+  StatusBanner on top of a status page grid.
+-->
+<script lang="ts">
+	import { tooltip } from '../../actions/tooltip';
+	import { buildUptime, formatUptimePct, uptimeWord, type UptimeDayInput } from './uptime';
+	import UptimeBar from './UptimeBar.svelte';
+
+	interface Props {
+		/** Name of the measured thing (e.g. "API"). */
+		name: string;
+		/** What is measured, shown behind an (i) info button. */
+		description?: string;
+		data: readonly UptimeDayInput[];
+		/** Window length in days. Default 90. */
+		days?: number;
+		end?: string | Date;
+		/** Override the status word. */
+		statusWord?: string;
+		locale?: string;
+		class?: string;
+	}
+
+	let {
+		name,
+		description,
+		data,
+		days = 90,
+		end,
+		statusWord,
+		locale,
+		class: className = ''
+	}: Props = $props();
+
+	const layout = $derived(buildUptime({ data, days, end }));
+	const word = $derived(statusWord ?? uptimeWord(layout.worst));
+
+	const totalDown = $derived(layout.bars.reduce((s, b) => s + b.downMinutes, 0));
+	// Truncating formatter — never overclaims (see formatUptimePct).
+	const uptimeText = $derived(
+		layout.uptimePct == null
+			? 'No data'
+			: `${formatUptimePct(layout.uptimePct, locale, totalDown)} uptime`
+	);
+
+	/** "operational" | "degraded" | "partial" | "outage" | "no-data" — for the tone classes. */
+	const heading = $derived(layout.worst);
+</script>
+
+<section class="jatui-status-card st-{heading} {className}" aria-label={name}>
+	<header class="sc-head">
+		<h3 class="sc-name">
+			<span>{name}</span>
+			{#if description}
+				<button
+					type="button"
+					class="sc-info"
+					aria-label={`About ${name}`}
+					use:tooltip={{ text: description, placement: 'top', delayMs: 0 }}
+				>
+					<svg viewBox="0 0 16 16" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+						<path d="M8 7.2v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+						<circle cx="8" cy="4.8" r="0.9" fill="currentColor" />
+					</svg>
+				</button>
+			{/if}
+		</h3>
+		<span class="sc-status">
+			{#if heading === 'operational'}
+				<svg viewBox="0 0 16 16" aria-hidden="true">
+					<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+					<path d="M5.2 8.2 7.1 10l3.7-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			{:else if heading === 'outage'}
+				<svg viewBox="0 0 16 16" aria-hidden="true">
+					<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+					<path d="M5.8 5.8l4.4 4.4M10.2 5.8 5.8 10.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+				</svg>
+			{:else if heading === 'no-data'}
+				<svg viewBox="0 0 16 16" aria-hidden="true">
+					<circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+					<path d="M5.6 8h4.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+				</svg>
+			{:else}
+				<svg viewBox="0 0 16 16" aria-hidden="true">
+					<path d="M8 2 14.5 13h-13Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+					<path d="M8 6.4v3.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+					<circle cx="8" cy="11.3" r="0.9" fill="currentColor" />
+				</svg>
+			{/if}
+			<span class="sc-word">{word}</span>
+		</span>
+	</header>
+
+	<UptimeBar {data} {days} {end} {locale} label={name} />
+
+	<!-- Screen-reader text per bar group: the strip's aria-label already
+		carries the summary; this paragraph is the visible fallback for the
+		heading structure. -->
+	<p class="sr-only">{name}: {word}, {uptimeText}</p>
+</section>
+
+<style>
+	.jatui-status-card {
+		--_st: var(--jatui-status-positive, var(--color-success));
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		padding: var(--jatui-space-lg, 16px);
+		border: 1px solid var(--jatui-separator, color-mix(in oklch, var(--color-base-content) 12%, transparent));
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: var(--color-base-100);
+	}
+	.st-operational { --_st: var(--jatui-status-positive, var(--color-success)); }
+	.st-degraded { --_st: var(--jatui-status-caution, var(--color-warning)); }
+	.st-partial { --_st: color-mix(in oklch, var(--color-warning) 55%, var(--color-error)); }
+	.st-outage { --_st: var(--jatui-status-negative, var(--color-error)); }
+	.st-no-data { --_st: var(--jatui-status-neutral, color-mix(in oklab, var(--color-base-content) 40%, transparent)); }
+
+	.sc-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.sc-name {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+	.sc-info {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		cursor: help;
+	}
+	.sc-info svg {
+		width: 14px;
+		height: 14px;
+	}
+	.sc-info:hover {
+		color: var(--color-base-content);
+	}
+	.sc-info:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.sc-status {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		color: var(--_st);
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+	.sc-status svg {
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/dist/components/stats/StatusCard.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type UptimeDayInput } from './uptime';
+interface Props {
+    /** Name of the measured thing (e.g. "API"). */
+    name: string;
+    /** What is measured, shown behind an (i) info button. */
+    description?: string;
+    data: readonly UptimeDayInput[];
+    /** Window length in days. Default 90. */
+    days?: number;
+    end?: string | Date;
+    /** Override the status word. */
+    statusWord?: string;
+    locale?: string;
+    class?: string;
+}
+declare const StatusCard: import("svelte").Component<Props, {}, "">;
+type StatusCard = ReturnType<typeof StatusCard>;
+export default StatusCard;