@joewinke/jatui 0.60.0 → 0.62.0

package/dist/components/stats/UptimeBar.svelte

@@ -0,0 +1,254 @@
+<!--
+  UptimeBar: one component's 90-day status strip (jatui-i3vxo). One thin bar
+  per day, coloured by status tone (operational / degraded / partial /
+  outage / no-data — no-data is hatched neutral, never coloured as up), a
+  hover/touch/focus tooltip with date + minutes down + incident note, and the
+  footer "90 days ago ——— 99.97% uptime ——— Today" (truncated to 2 decimals,
+  never overclaims — see formatUptimePct).
+
+  Bars are a role="grid" with ONE tab stop and roving focus (arrows move by
+  day, PageUp/Down by 7, Home/End to the window ends). Pure CSS sizing:
+  the component is an inline-size container and --up-bar is derived from
+  the container width (cqi), clamped 3–14px — on a phone the strip scrolls
+  horizontally inside the component, starting at the latest day. All colour
+  comes from theme tokens (status tokens + color-mix), no hex.
+-->
+<script lang="ts">
+	import { tooltip } from '../../actions/tooltip';
+	import {
+		buildUptime,
+		formatUptimePct,
+		moveUptimeFocus,
+		parseDay,
+		uptimeWord,
+		type UptimeBar as UptimeBarDay,
+		type UptimeDayInput
+	} from './uptime';
+
+	interface Props {
+		/** One entry per day: `{ date, status, downMinutes?, note? }`. */
+		data: readonly UptimeDayInput[];
+		/** Window length in days. Default 90. */
+		days?: number;
+		/** Inclusive window end. Default: today. */
+		end?: string | Date;
+		/** Name of the measured thing, for the screen-reader label. */
+		label?: string;
+		/** Custom tooltip / accessible label for a day. */
+		formatLabel?: (bar: UptimeBarDay) => string;
+		showUptime?: boolean;
+		showRangeLabels?: boolean;
+		locale?: string;
+		class?: string;
+	}
+
+	let {
+		data,
+		days = 90,
+		end,
+		label = 'Uptime',
+		formatLabel,
+		showUptime = true,
+		showRangeLabels = true,
+		locale,
+		class: className = ''
+	}: Props = $props();
+
+	const layout = $derived(buildUptime({ data, days, end }));
+	const byDate = $derived(new Map(layout.bars.map((b) => [b.date, b])));
+
+	const nf = $derived(new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }));
+	const df = $derived(
+		new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })
+	);
+
+	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`
+	);
+	const gridLabel = $derived(`${label}, last ${layout.days} days: ${uptimeText}`);
+
+	const labelFor = (bar: UptimeBarDay) => {
+		if (formatLabel) return formatLabel(bar);
+		const parts = [`${df.format(parseDay(bar.date))}: ${uptimeWord(bar.status)}`];
+		if (bar.downMinutes > 0) parts.push(`${nf.format(bar.downMinutes)} min down`);
+		if (bar.note) parts.push(bar.note);
+		return parts.join(' · ');
+	};
+
+	// Roving focus: the focused day, else the last day in range.
+	let focusDate = $state<string | null>(null);
+	const tabDate = $derived(focusDate && byDate.has(focusDate) ? focusDate : layout.end);
+
+	let gridEl: HTMLDivElement | undefined = $state();
+	let scrollEl: HTMLDivElement | undefined = $state();
+
+	function cellEl(date: string): HTMLElement | null {
+		return gridEl?.querySelector<HTMLElement>(`[data-date="${date}"]`) ?? null;
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const t = e.target as HTMLElement;
+		const date = t.dataset.date;
+		if (!date) return;
+		const next = moveUptimeFocus(date, e.key, layout);
+		if (!next) return;
+		e.preventDefault();
+		focusDate = next;
+		queueMicrotask(() => {
+			const el = cellEl(next);
+			el?.focus();
+			el?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+		});
+	}
+
+	// The latest day is the interesting one: start scrolled to the end.
+	$effect(() => {
+		void layout.bars;
+		if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;
+	});
+
+</script>
+
+<div class="jatui-uptime {className}" style:--days={layout.days}>
+	<div class="up-scroll" bind:this={scrollEl}>
+		<div
+			class="up-grid"
+			role="grid"
+			aria-label={gridLabel}
+			tabindex="-1"
+			bind:this={gridEl}
+			onkeydown={onKeydown}
+		>
+			<div class="up-row" role="row">
+				{#each layout.bars as bar (bar.date)}
+					<!-- Keys are handled on the grid (roving focus); click focuses the day. -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="gridcell"
+						class="up-bar st-{bar.status}"
+						data-date={bar.date}
+						tabindex={bar.date === tabDate ? 0 : -1}
+						aria-label={labelFor(bar)}
+						use:tooltip={{ text: labelFor(bar), placement: 'top', delayMs: 0, tapToShow: true }}
+						onfocus={() => {
+							focusDate = bar.date;
+						}}
+						onclick={() => {
+							focusDate = bar.date;
+						}}
+					></div>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	{#if showUptime || showRangeLabels}
+		<div class="up-foot" aria-hidden="true">
+			{#if showRangeLabels}<span class="up-range">{layout.days} days ago</span>{/if}
+			{#if showUptime && showRangeLabels}<span class="up-rule"></span>{/if}
+			{#if showUptime}<strong class="up-uptime">{uptimeText}</strong>{/if}
+			{#if showUptime && showRangeLabels}<span class="up-rule"></span>{/if}
+			{#if showRangeLabels}<span class="up-range">Today</span>{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.jatui-uptime {
+		--up-bar-min: 3px;
+		--up-bar-max: 14px;
+		--up-gap: 2px;
+		--up-pad: 2px;
+		--up-fs: 0.75rem;
+		--up-empty: color-mix(in oklch, var(--color-base-content) 8%, var(--color-base-100));
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-width: 0;
+		max-width: 100%;
+		font-size: var(--up-fs);
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		container-type: inline-size;
+	}
+
+	/* Bars size to the width the host gives: (container - focus padding) /
+	 * days - gap, clamped 3–14px. Below the 3px floor the strip overflows and
+	 * .up-scroll scrolls horizontally inside the component. */
+	.jatui-uptime .up-scroll {
+		--up-bar: clamp(
+			var(--up-bar-min),
+			calc((100cqi - 2 * var(--up-pad)) / var(--days) - var(--up-gap)),
+			var(--up-bar-max)
+		);
+		overflow-x: auto;
+		overscroll-behavior-x: contain;
+		scrollbar-width: thin;
+		padding: var(--up-pad);
+	}
+	.up-grid {
+		display: flex;
+		outline: none;
+	}
+	.up-row {
+		display: flex;
+		gap: var(--up-gap);
+	}
+	.up-bar {
+		flex: none;
+		width: var(--up-bar);
+		height: var(--up-h, 0.875rem);
+		border-radius: calc(var(--up-bar) * 0.25);
+		background: var(--up-empty);
+		outline: none;
+		cursor: default;
+	}
+
+	/* Status tones — token-only. 'partial' is warning mixed toward error
+	 * (orange), never a hardcoded hex. */
+	.st-operational { background: var(--jatui-status-positive, var(--color-success)); }
+	.st-degraded { background: var(--jatui-status-caution, var(--color-warning)); }
+	.st-partial {
+		background: color-mix(in oklch, var(--color-warning) 55%, var(--color-error));
+	}
+	.st-outage { background: var(--jatui-status-negative, var(--color-error)); }
+	/* No-data: hatched neutral — clearly different from any incident colour. */
+	.st-no-data {
+		background: repeating-linear-gradient(
+			135deg,
+			var(--up-empty) 0 2px,
+			color-mix(in oklch, var(--up-empty) 55%, transparent) 2px 4px
+		);
+	}
+
+	.up-bar:focus-visible {
+		box-shadow:
+			0 0 0 1.5px var(--color-base-100),
+			0 0 0 3px var(--color-primary);
+	}
+
+	.up-foot {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		white-space: nowrap;
+	}
+	.up-range {
+		flex: none;
+	}
+	.up-rule {
+		flex: 1 1 0;
+		min-width: 0;
+		height: 1px;
+		background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
+	}
+	.up-uptime {
+		flex: none;
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import { type UptimeBar as UptimeBarDay, type UptimeDayInput } from './uptime';
+interface Props {
+    /** One entry per day: `{ date, status, downMinutes?, note? }`. */
+    data: readonly UptimeDayInput[];
+    /** Window length in days. Default 90. */
+    days?: number;
+    /** Inclusive window end. Default: today. */
+    end?: string | Date;
+    /** Name of the measured thing, for the screen-reader label. */
+    label?: string;
+    /** Custom tooltip / accessible label for a day. */
+    formatLabel?: (bar: UptimeBarDay) => string;
+    showUptime?: boolean;
+    showRangeLabels?: boolean;
+    locale?: string;
+    class?: string;
+}
+declare const UptimeBar: import("svelte").Component<Props, {}, "">;
+type UptimeBar = ReturnType<typeof UptimeBar>;
+export default UptimeBar;

package/dist/components/stats/uptime.d.ts

@@ -0,0 +1,105 @@
+/**
+ * UptimeBar / StatusHistory layout + keyboard math (jatui-i3vxo). Pure and
+ * DOM-free.
+ *
+ * One thin bar per day over a 90-day (default) window, coloured by status
+ * tone (operational / degraded / partial / outage — `no-data` is never
+ * coloured as up). Days are local calendar dates, keyed "YYYY-MM-DD".
+ *
+ * Uptime % is minute-based: a day with no `downMinutes` uses a default
+ * (outage = full day, partial = half day, degraded = still up), so a feed
+ * that only carries statuses still gets a sensible percentage. `no-data`
+ * days are excluded from the percentage entirely.
+ */
+export type DayStatus = 'operational' | 'degraded' | 'partial' | 'outage' | 'no-data';
+/** Incidents rank worst-first. `no-data` is not an incident — it is the LOWEST rank. */
+export declare const DAY_SEVERITY: readonly DayStatus[];
+export interface UptimeDayInput {
+    date: string | Date;
+    status: DayStatus;
+    /** Minutes down that day. Optional — a default is used per status. */
+    downMinutes?: number;
+    /** Incident note (e.g. "Scheduled maintenance"), shown in the tooltip. */
+    note?: string;
+}
+export interface UptimeBar {
+    /** "YYYY-MM-DD" (local). */
+    date: string;
+    status: DayStatus;
+    /** Minutes down that day (0 when up). */
+    downMinutes: number;
+    /** Incident note, if any. */
+    note?: string;
+}
+export interface UptimeLayout {
+    /** Every day in the window, oldest → newest. */
+    bars: UptimeBar[];
+    /** Window length in days (30 / 90 …). */
+    days: number;
+    /** Days with a status (no-data days excluded). */
+    dataDays: number;
+    /** Fraction of uptime over days with data, 0..1 — null when there is no data. */
+    uptimePct: number | null;
+    /** Worst incident status in the window ('operational' when none). */
+    worst: DayStatus;
+    start: string;
+    end: string;
+}
+export interface BuildUptimeOptions<T> {
+    data: readonly T[];
+    getDate?: (d: T) => string | Date;
+    getStatus?: (d: T) => DayStatus;
+    getDownMinutes?: (d: T) => number | undefined;
+    getNote?: (d: T) => string | undefined;
+    /** Window length in days. Default 90. */
+    days?: number;
+    /** Inclusive window end. Default: today. */
+    end?: string | Date;
+}
+/** Local "YYYY-MM-DD". */
+export declare function isoDay(d: Date): string;
+/** Parse a day as LOCAL noon (DST-safe arithmetic). */
+export declare function parseDay(input: string | Date): Date;
+export declare function addDays(day: string, n: number): string;
+/** Whole days from a to b (b - a). */
+export declare function daysBetween(a: string, b: string): number;
+/** Rank of a status in DAY_SEVERITY (higher = worse). */
+export declare function statusRank(status: DayStatus): number;
+/** The worse of two statuses. */
+export declare function worstStatus(a: DayStatus, b: DayStatus): DayStatus;
+/** Default downtime minutes per status when the feed doesn't carry them. */
+export declare function defaultDownMinutes(status: DayStatus): number;
+/** One-word status: 'Normal' / 'Degraded' / 'Partial' / 'Outage' / 'No data'. */
+export declare function uptimeWord(status: DayStatus): string;
+/**
+ * Format the uptime % for display. TRUNCATED toward zero to 2 decimals — a
+ * status page must never overclaim (99.996% shows as 99.99%, never 100% when
+ * real downtime exists). Formatted with Intl `style: 'percent'` so the locale
+ * places the sign and spacing correctly ("99.99%" in en, "99,99 %" in de).
+ * `downMinutes > 0` forces a 99.99 cap even when the fraction is exactly 1
+ * (defensive: a feed with inconsistent data must not claim perfection).
+ * Returns "No data" for null.
+ */
+export declare function formatUptimePct(pct: number | null, locale?: string, downMinutes?: number): string;
+/** Roll a status up to the banner's three states: operational / degraded / outage. */
+export declare function bannerStatus(status: DayStatus): 'operational' | 'degraded' | 'outage';
+/** Worst of many statuses, rolled up to the banner's three states. */
+export declare function aggregateStatus(statuses: readonly DayStatus[]): 'operational' | 'degraded' | 'outage';
+/**
+ * Build the window: `days` (default 90) ending at `end` (default today).
+ * Days without data become `no-data` bars. Several entries for one day are
+ * merged: worst status wins, downMinutes are summed, the first note kept.
+ */
+export declare function buildUptime<T>(opts: BuildUptimeOptions<T>): UptimeLayout;
+/**
+ * Keyboard move along the 1-row strip. Returns the new focused day clamped
+ * to [start, end], or null for keys it does not handle.
+ *
+ *   ArrowLeft/Right  previous / next day
+ *   PageUp/PageDown  7 days back / forward
+ *   Home / End       first / last day in range
+ */
+export declare function moveUptimeFocus(date: string, key: string, layout: {
+    start: string;
+    end: string;
+}): string | null;

package/dist/components/stats/uptime.js

@@ -0,0 +1,213 @@
+/**
+ * UptimeBar / StatusHistory layout + keyboard math (jatui-i3vxo). Pure and
+ * DOM-free.
+ *
+ * One thin bar per day over a 90-day (default) window, coloured by status
+ * tone (operational / degraded / partial / outage — `no-data` is never
+ * coloured as up). Days are local calendar dates, keyed "YYYY-MM-DD".
+ *
+ * Uptime % is minute-based: a day with no `downMinutes` uses a default
+ * (outage = full day, partial = half day, degraded = still up), so a feed
+ * that only carries statuses still gets a sensible percentage. `no-data`
+ * days are excluded from the percentage entirely.
+ */
+/** Incidents rank worst-first. `no-data` is not an incident — it is the LOWEST rank. */
+export const DAY_SEVERITY = ['no-data', 'operational', 'degraded', 'partial', 'outage'];
+const pad = (n) => String(n).padStart(2, '0');
+/** Local "YYYY-MM-DD". */
+export function isoDay(d) {
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+/** Parse a day as LOCAL noon (DST-safe arithmetic). */
+export function parseDay(input) {
+    if (input instanceof Date)
+        return new Date(input.getFullYear(), input.getMonth(), input.getDate(), 12);
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(input);
+    if (m)
+        return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12);
+    const d = new Date(input);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12);
+}
+export function addDays(day, n) {
+    const d = parseDay(day);
+    d.setDate(d.getDate() + n);
+    return isoDay(d);
+}
+/** Whole days from a to b (b - a). */
+export function daysBetween(a, b) {
+    return Math.round((parseDay(b).getTime() - parseDay(a).getTime()) / 86_400_000);
+}
+/** Rank of a status in DAY_SEVERITY (higher = worse). */
+export function statusRank(status) {
+    return DAY_SEVERITY.indexOf(status);
+}
+/** The worse of two statuses. */
+export function worstStatus(a, b) {
+    return statusRank(a) >= statusRank(b) ? a : b;
+}
+/** Default downtime minutes per status when the feed doesn't carry them. */
+export function defaultDownMinutes(status) {
+    switch (status) {
+        case 'outage':
+            return 1440;
+        case 'partial':
+            return 720;
+        default:
+            return 0;
+    }
+}
+/** One-word status: 'Normal' / 'Degraded' / 'Partial' / 'Outage' / 'No data'. */
+export function uptimeWord(status) {
+    switch (status) {
+        case 'operational':
+            return 'Normal';
+        case 'degraded':
+            return 'Degraded';
+        case 'partial':
+            return 'Partial';
+        case 'outage':
+            return 'Outage';
+        default:
+            return 'No data';
+    }
+}
+/**
+ * Format the uptime % for display. TRUNCATED toward zero to 2 decimals — a
+ * status page must never overclaim (99.996% shows as 99.99%, never 100% when
+ * real downtime exists). Formatted with Intl `style: 'percent'` so the locale
+ * places the sign and spacing correctly ("99.99%" in en, "99,99 %" in de).
+ * `downMinutes > 0` forces a 99.99 cap even when the fraction is exactly 1
+ * (defensive: a feed with inconsistent data must not claim perfection).
+ * Returns "No data" for null.
+ */
+export function formatUptimePct(pct, locale, downMinutes = 0) {
+    if (pct == null)
+        return 'No data';
+    // Truncate to 2 decimals — never round up past real downtime.
+    let n = Math.trunc(pct * 10000) / 100;
+    if (downMinutes > 0)
+        n = Math.min(n, 99.99);
+    return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 2 }).format(n / 100);
+}
+/** Roll a status up to the banner's three states: operational / degraded / outage. */
+export function bannerStatus(status) {
+    switch (status) {
+        case 'outage':
+            return 'outage';
+        case 'degraded':
+        case 'partial':
+            return 'degraded';
+        default:
+            return 'operational';
+    }
+}
+/** Worst of many statuses, rolled up to the banner's three states. */
+export function aggregateStatus(statuses) {
+    let worst = 'operational';
+    for (const s of statuses) {
+        if (s === 'no-data')
+            continue;
+        worst = worstStatus(worst, s);
+    }
+    return bannerStatus(worst);
+}
+/**
+ * Build the window: `days` (default 90) ending at `end` (default today).
+ * Days without data become `no-data` bars. Several entries for one day are
+ * merged: worst status wins, downMinutes are summed, the first note kept.
+ */
+export function buildUptime(opts) {
+    const getDate = opts.getDate ?? ((d) => d.date);
+    const getStatus = opts.getStatus ?? ((d) => d.status);
+    const getDownMinutes = opts.getDownMinutes ?? ((d) => d.downMinutes);
+    const getNote = opts.getNote ?? ((d) => d.note);
+    const days = Math.max(1, opts.days ?? 90);
+    const end = isoDay(parseDay(opts.end ?? new Date()));
+    const start = addDays(end, -(days - 1));
+    const merged = new Map();
+    for (const d of opts.data) {
+        const key = isoDay(parseDay(getDate(d)));
+        if (daysBetween(start, key) < 0 || daysBetween(key, end) < 0)
+            continue; // outside the window
+        const status = getStatus(d);
+        const minutes = Math.max(0, Number(getDownMinutes(d)) || 0);
+        const note = getNote(d);
+        const prev = merged.get(key);
+        if (!prev) {
+            merged.set(key, { date: key, status, downMinutes: minutes, note });
+        }
+        else {
+            merged.set(key, {
+                date: key,
+                status: worstStatus(prev.status, status),
+                downMinutes: prev.downMinutes + minutes,
+                note: prev.note ?? note
+            });
+        }
+    }
+    const bars = [];
+    const cursor = parseDay(start);
+    for (let i = 0; i < days; i++) {
+        const date = isoDay(cursor);
+        const entry = merged.get(date);
+        bars.push(entry ?? { date, status: 'no-data', downMinutes: 0 });
+        cursor.setDate(cursor.getDate() + 1);
+    }
+    const dataDays = bars.filter((b) => b.status !== 'no-data').length;
+    const totalMinutes = bars.reduce((sum, b) => sum + (b.downMinutes || defaultDownMinutes(b.status)), 0);
+    const cap = dataDays * 1440;
+    let worst = 'operational';
+    for (const b of bars) {
+        if (b.status === 'no-data')
+            continue;
+        worst = worstStatus(worst, b.status);
+    }
+    // No data at all: the card shows the neutral 'No data' state, not 'Normal'.
+    if (dataDays === 0)
+        worst = 'no-data';
+    return {
+        bars,
+        days,
+        dataDays,
+        uptimePct: dataDays === 0 ? null : Math.min(1, Math.max(0, 1 - totalMinutes / cap)),
+        worst,
+        start,
+        end
+    };
+}
+/**
+ * Keyboard move along the 1-row strip. Returns the new focused day clamped
+ * to [start, end], or null for keys it does not handle.
+ *
+ *   ArrowLeft/Right  previous / next day
+ *   PageUp/PageDown  7 days back / forward
+ *   Home / End       first / last day in range
+ */
+export function moveUptimeFocus(date, key, layout) {
+    let next;
+    switch (key) {
+        case 'ArrowLeft':
+            next = addDays(date, -1);
+            break;
+        case 'ArrowRight':
+            next = addDays(date, 1);
+            break;
+        case 'PageUp':
+            next = addDays(date, -7);
+            break;
+        case 'PageDown':
+            next = addDays(date, 7);
+            break;
+        case 'Home':
+            return layout.start;
+        case 'End':
+            return layout.end;
+        default:
+            return null;
+    }
+    if (daysBetween(layout.start, next) < 0)
+        return layout.start;
+    if (daysBetween(next, layout.end) < 0)
+        return layout.end;
+    return next;
+}

package/dist/index.d.ts

@@ -401,6 +401,12 @@ export type { BarListItem } from './components/stats/BarList.svelte';
 export { default as ActivityHeatmap } from './components/stats/ActivityHeatmap.svelte';
 export { buildHeatmap, moveHeatFocus, isoDay as heatmapIsoDay, defaultLevelOf as heatmapLevelOf } from './components/stats/heatmap';
 export type { HeatDay, HeatmapLayout, BuildHeatmapOptions } from './components/stats/heatmap';
+export { default as UptimeBar } from './components/stats/UptimeBar.svelte';
+export { default as StatusCard } from './components/stats/StatusCard.svelte';
+export { default as StatusBanner } from './components/stats/StatusBanner.svelte';
+export type { BannerStatus } from './components/stats/StatusBanner.svelte';
+export { buildUptime, formatUptimePct, moveUptimeFocus, isoDay as uptimeIsoDay, aggregateStatus, bannerStatus, defaultDownMinutes, uptimeWord, worstStatus } from './components/stats/uptime';
+export type { DayStatus, UptimeBar as UptimeBarDay, UptimeDayInput, UptimeLayout, BuildUptimeOptions } from './components/stats/uptime';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 export type { SegmentedOption } from './components/SegmentedControl.svelte';
 export { default as SettingsSection } from './components/settings/SettingsSection.svelte';
@@ -417,4 +423,5 @@ export type { SharedAmbience, SharedAmbienceState, SharedAmbienceOptions } from
 export type { Ambience, AmbienceGroupDef, AmbienceItem, AmbienceLink, AmbienceOptions, AmbienceState, BreathState, Scape, ScapeContext, ScapeGroup, ScapeInstance } from './ambience';
 export { createPlaylistScape } from './ambience';
 export { isPlaylistScape, trackAttribution } from './ambience';
+export { trackLicenseAllowsRedistribution, isTrackDownloadable, trackDownloadFilename } from './ambience';
 export type { PlaylistScape, PlaylistScapeOptions, PlaylistManifest, PlaylistState, PlaylistStatus, PlaylistTrack } from './ambience';

package/dist/index.js

@@ -449,6 +449,10 @@ export { default as ChartCard } from './components/stats/ChartCard.svelte';
 export { default as BarList } from './components/stats/BarList.svelte';
 export { default as ActivityHeatmap } from './components/stats/ActivityHeatmap.svelte';
 export { buildHeatmap, moveHeatFocus, isoDay as heatmapIsoDay, defaultLevelOf as heatmapLevelOf } from './components/stats/heatmap';
+export { default as UptimeBar } from './components/stats/UptimeBar.svelte';
+export { default as StatusCard } from './components/stats/StatusCard.svelte';
+export { default as StatusBanner } from './components/stats/StatusBanner.svelte';
+export { buildUptime, formatUptimePct, moveUptimeFocus, isoDay as uptimeIsoDay, aggregateStatus, bannerStatus, defaultDownMinutes, uptimeWord, worstStatus } from './components/stats/uptime';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 export { default as SettingsSection } from './components/settings/SettingsSection.svelte';
 export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
@@ -465,3 +469,7 @@ export { createAmbience, createAmbienceLocal, createSharedAmbience, AMBIENCE_CHA
 // createPlaylistScape() and register on the engine yourself.
 export { createPlaylistScape } from './ambience';
 export { isPlaylistScape, trackAttribution } from './ambience';
+// Download gate + filename builder (jatui-0vxcu) — the licence allowlist
+// (CC0 / public domain / CC-BY / CC-BY-SA), the per-track override and the
+// "Composer - Title.ext" name attribution travels under.
+export { trackLicenseAllowsRedistribution, isTrackDownloadable, trackDownloadFilename } from './ambience';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",