@joewinke/jatui 0.60.0 → 0.61.0

package/CLAUDE.md

@@ -84,6 +84,9 @@ Then import:
 | `ChartCard` | "Headline + period switch + chart" shell that draws NO chart (bring layerchart / d3 / SVG). The `chart` snippet gets `{ period, hover, hovered }`; call `hover({value, label, delta?})` as the pointer moves and the headline tweens to that point and the caption shows its label; `hover(null)` (or pointer leave) restores the total. Periods use SegmentedControl. | `label`, `value`, `format?`, `delta?`, `invertDelta?`, `caption?`, `periods?`, `period` (bindable), `onPeriodChange?`, `chartHeight?`, `loading?`, `chart` (snippet), `actions?`/`footer?` (snippets) |
 | `BarList` | Ranked horizontal bars ("top pages / top callers"): label + value as text, a decorative token-tinted bar sized against the max, optional `href` or `onSelect` per row, `hint`, per-row `tone`, `limit` + "Show N more". Pure HTML/CSS, no chart lib. | `items: BarListItem[]`, `sort?` (`desc`), `limit?`, `format?`, `formatValue?(item, total)`, `labelHeader?`/`valueHeader?`, `tone?`, `size?`, `onSelect?`, `label?` (snippet) |
 | `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. `fill` (default `true`) sizes the cells to the container — pure CSS (`container-type: inline-size` + cqi), clamped 8–20px (`--hm-cell-min`/`--hm-cell-max`), scrolling only below the floor and the legend parked under the grid's right edge; `fill={false}` is the legacy fixed 12px grid (and the one to pass in a shrink-to-fit host, where an inline-size container collapses). Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `fill?` (true), `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
+| `UptimeBar` | One component's 90-day status strip (status-page style): one thin bar per day, coloured by status tone (operational green, degraded amber, partial orange, outage red, `no-data` 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" (uptime % truncated to 2 decimals — never overclaims, e.g. 99.996% shows 99.99% never 100%). `role="grid"` with ONE tab stop and roving focus: arrows move by day, PgUp/PgDn by 7, Home/End to the window ends. Bars size to the container width (pure CSS cqi, clamped 3–14px, `--up-bar-min`/`--up-bar-max`); below the floor the strip scrolls horizontally inside the component, starting at the latest day. Token-only colours (`--jatui-status-*` + `color-mix`). Pure helpers exported (`buildUptime`, `moveUptimeFocus`, `uptimeWord`, `bannerStatus`, `aggregateStatus`, `defaultDownMinutes`, `formatUptimePct`). | `data` (`{date, status, downMinutes?, note?}[]`), `days?` (90), `end?`, `label?`, `formatLabel?`, `showUptime?`/`showRangeLabels?` (true), `locale?`, `class?` |
+| `StatusCard` | One measured component on a status page: name + info tooltip (what is measured), status icon at the right, the 90-day `UptimeBar` strip, and the status word (Normal / Degraded / Outage / No data — from the worst status in the window; `statusWord` overrides). | `name`, `description?`, `data`, `days?`, `end?`, `statusWord?`, `locale?`, `class?` |
+| `StatusBanner` | Status page headline banner: "All systems operational" / degraded / outage, token colours, check / warning / x icon. | `status` ('operational' \| 'degraded' \| 'outage'), `message?`, `info?`, `class?` |
 | `StatusBadge` | Status indicator with dot | `status: StatusValue`, `label` |
 | `Card` | Content card container | `title`, `children` (snippet) |
 | `Modal` | Dialog overlay. `zIndex` accepts `number` OR any CSS `z-index` string, including `"var(--z-lightbox)"`. **On open, focus goes to the first fillable field** (WAI-ARIA APG): a `[data-autofocus]`/`autofocus` element, else the first enabled **rendered** text-entry control (readOnly/disabled textareas excluded, unrendered candidates skipped), else the dialog itself — `initialFocus` overrides the order (`'dialog'` restores the old container focus); the focus landing is verified, else the container is focused. When the dialog is the fallback focus, **Escape is owned by the dialog element itself** (not the window handler), so `trapKeys`' stopPropagation can't swallow Esc; a Modal opened inside a host Drawer closes before the drawer. The component ships its own open-state `.modal-box` opacity rule, so it renders under DaisyUI 5 with no host global override. | `open` (bindable), `title`, `children` (snippet), `zIndex?: string \| number`, `trapKeys?`, `closeOnEscape?`, `initialFocus?` |

package/dist/actions/tooltip.d.ts

@@ -15,12 +15,19 @@
  * Accessibility: sets aria-describedby on the host element.
  * Escape key hides the active tooltip.
  * Focus events (focusin/focusout) trigger alongside mouse hover.
+ * Touch/pen: a tap shows the tooltip immediately — only when the host sets
+ * `tapToShow` (default false, so plain buttons and badges don't pop on tap);
+ * the next tap elsewhere hides it.
  */
 export interface TooltipOptions {
     text: string;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** ms to wait before showing (default 400). 0 = instant. */
     delayMs?: number;
+    /** Show the tooltip on a touch/pen TAP (default false — only components
+     * that ask for it, e.g. UptimeBar's day bars, pop a tooltip on tap; plain
+     * buttons and badges must not). */
+    tapToShow?: boolean;
 }
 export declare function tooltip(node: HTMLElement, options: TooltipOptions): {
     update(next: TooltipOptions): void;

package/dist/actions/tooltip.js

@@ -15,6 +15,9 @@
  * Accessibility: sets aria-describedby on the host element.
  * Escape key hides the active tooltip.
  * Focus events (focusin/focusout) trigger alongside mouse hover.
+ * Touch/pen: a tap shows the tooltip immediately — only when the host sets
+ * `tapToShow` (default false, so plain buttons and badges don't pop on tap);
+ * the next tap elsewhere hides it.
  */
 const COOL_WINDOW_MS = 500;
 const GAP = 8;
@@ -173,10 +176,29 @@ export function tooltip(node, options) {
         if (e.key === 'Escape')
             hide();
     }
+    let outTap = null;
+    function handlePointerdown(e) {
+        // Touch/pen: there is no hover — a TAP shows the tooltip. Only when the
+        // host asks for it (tapToShow): plain buttons and badges must not pop a
+        // tooltip on every tap. The next tap anywhere else hides it again (the
+        // tooltip itself has pointer-events: none, so the tap always reaches
+        // whatever is under it).
+        if (!opts.tapToShow)
+            return;
+        if (e.pointerType !== 'touch' && e.pointerType !== 'pen')
+            return;
+        scheduleShow();
+        outTap = (e2) => {
+            if (!node.contains(e2.target))
+                hide();
+        };
+        document.addEventListener('pointerdown', outTap, { capture: true, once: true });
+    }
     node.addEventListener('mouseenter', scheduleShow);
     node.addEventListener('mouseleave', hide);
     node.addEventListener('focusin', scheduleShow);
     node.addEventListener('focusout', hide);
+    node.addEventListener('pointerdown', handlePointerdown);
     document.addEventListener('keydown', handleKeydown);
     return {
         update(next) {
@@ -188,10 +210,16 @@ export function tooltip(node, options) {
         },
         destroy() {
             hide();
+            if (outTap) {
+                // The once-listener can outlive the node — remove it explicitly.
+                document.removeEventListener('pointerdown', outTap, { capture: true });
+                outTap = null;
+            }
             node.removeEventListener('mouseenter', scheduleShow);
             node.removeEventListener('mouseleave', hide);
             node.removeEventListener('focusin', scheduleShow);
             node.removeEventListener('focusout', hide);
+            node.removeEventListener('pointerdown', handlePointerdown);
             document.removeEventListener('keydown', handleKeydown);
         },
     };

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;

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';

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';

package/package.json

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