@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/blocks/time-series-chart.svelte

@@ -0,0 +1,492 @@
+<script lang="ts" module>
+	export type {
+		TimePoint,
+		TimeSeries,
+	} from "./time-series-chart/scale.js";
+	export type { TimeSeriesChartMessages } from "./time-series-chart/messages.js";
+
+	export type TimeSeriesKind = "line" | "area" | "bar";
+</script>
+
+<script lang="ts">
+	import DataTable from "./time-series-chart/data-table.svelte";
+	import Legend from "./time-series-chart/legend.svelte";
+	import Marks from "./time-series-chart/marks.svelte";
+	import {
+		defaultMessages,
+		type TimeSeriesChartMessages,
+	} from "./time-series-chart/messages.js";
+	import Readout from "./time-series-chart/readout.svelte";
+	import {
+		barPath,
+		columnsOf,
+		medianSpacing,
+		nearestIndex,
+		niceTicks,
+		scaleLinear,
+		segmentsOf,
+		type TimeSeries,
+		valueExtent,
+		valueMap,
+	} from "./time-series-chart/scale.js";
+	import {
+		formatInstant,
+		formatTick,
+		timeTicks,
+	} from "./time-series-chart/time.js";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		series: TimeSeries[];
+		title: string;
+		description?: string;
+		kind?: TimeSeriesKind;
+		format?: (value: number) => string;
+		height?: number;
+		messages?: Partial<TimeSeriesChartMessages>;
+		class?: string;
+	}
+
+	const {
+		series,
+		title,
+		description,
+		kind = "line",
+		format,
+		height = 240,
+		messages = {},
+		class: className,
+	}: Props = $props();
+
+	const id = $props.id();
+	const numberFormat = new Intl.NumberFormat();
+	const compactFormat = new Intl.NumberFormat(undefined, {
+		notation: "compact",
+	});
+
+	let width = $state(0);
+	let activeIndex = $state<number | null>(null);
+	let placement = $state<"floating" | "above">("floating");
+	let tableVisible = $state(false);
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const formatValue = $derived(
+		format ?? ((value: number) => numberFormat.format(value)),
+	);
+	const formatAxis = $derived(
+		format ?? ((value: number) => compactFormat.format(value)),
+	);
+	const colors = $derived(
+		series.map((_, index) =>
+			index < 4 ? `var(--series-${index + 1})` : "var(--series-other)",
+		),
+	);
+
+	const columns = $derived(columnsOf(series));
+	const maps = $derived(series.map((entry) => valueMap(entry)));
+	const extent = $derived(valueExtent(series));
+	const spacing = $derived(medianSpacing(columns));
+	const first = $derived(columns[0] ?? 0);
+	const last = $derived(columns.at(-1) ?? 0);
+
+	const top = 10;
+	const bottom = 28;
+	const plotHeight = $derived(Math.max(40, height - top - bottom));
+	const yTicks = $derived(
+		extent
+			? niceTicks(
+					extent[0],
+					extent[1],
+					Math.max(2, Math.floor(plotHeight / 44)),
+				)
+			: [0, 1],
+	);
+	const y = $derived(
+		scaleLinear([yTicks[0] ?? 0, yTicks.at(-1) ?? 1], [top + plotHeight, top]),
+	);
+	const baseline = $derived(y(0));
+	const left = $derived(
+		Math.max(...yTicks.map((tick) => formatAxis(tick).length)) * 7 + 10,
+	);
+
+	const ends = $derived(
+		series.map((entry) => {
+			const segment = segmentsOf(entry.points).at(-1);
+			const point = segment?.at(-1);
+			return point && point.value !== null
+				? { time: point.at.getTime(), value: point.value }
+				: null;
+		}),
+	);
+	const directLabels = $derived.by(() => {
+		if (kind === "bar" || series.length > 4 || width < 360) {
+			return false;
+		}
+		const heights = ends
+			.filter((end) => end !== null)
+			.map((end) => y(end.value))
+			.sort((above, below) => above - below);
+		return heights.every(
+			(value, index) => index === 0 || value - (heights[index - 1] ?? 0) >= 14,
+		);
+	});
+	const right = $derived(
+		directLabels
+			? Math.max(
+					...ends.map((end) => (end ? formatValue(end.value).length : 0)),
+				) *
+					7 +
+					16
+			: 8,
+	);
+
+	const plotWidth = $derived(Math.max(0, width - left - right));
+	const slot = $derived(plotWidth / Math.max(1, columns.length));
+	const xRange = $derived<[number, number]>(
+		kind === "bar"
+			? [left + slot / 2, left + plotWidth - slot / 2]
+			: [left, left + plotWidth],
+	);
+	const x = $derived(scaleLinear([first, last], xRange));
+	const xTicks = $derived(
+		timeTicks(
+			new Date(first),
+			new Date(last),
+			Math.max(2, Math.floor(plotWidth / 84)),
+		),
+	);
+
+	const lines = $derived(
+		series.map((entry, index) => {
+			const end = ends[index];
+			return {
+				color: colors[index] ?? "",
+				segments: segmentsOf(entry.points).map((segment) =>
+					segment.map((point) => ({
+						x: x(point.at.getTime()),
+						y: y(point.value ?? 0),
+					})),
+				),
+				end: end
+					? { x: x(end.time), y: y(end.value), label: formatValue(end.value) }
+					: null,
+			};
+		}),
+	);
+	const bars = $derived.by(() => {
+		if (kind !== "bar") {
+			return [];
+		}
+		const count = Math.max(1, series.length);
+		const gap = slot >= 4 ? 2 : 0;
+		const group = Math.min(slot - gap, count * 24 + (count - 1) * gap);
+		const barWidth = Math.max(0.5, (group - (count - 1) * gap) / count);
+		return series.map((entry, index) => ({
+			color: colors[index] ?? "",
+			bars: entry.points
+				.filter((point) => point.value !== null)
+				.map((point) => {
+					const column = point.at.getTime();
+					const barLeft = x(column) - group / 2 + index * (barWidth + gap);
+					return {
+						column,
+						path: barPath(barLeft, barWidth, y(point.value ?? 0), baseline),
+					};
+				}),
+		}));
+	});
+
+	const activeColumn = $derived(
+		activeIndex === null ? null : (columns[activeIndex] ?? null),
+	);
+	const activeRows = $derived(
+		series.map((entry, index) => {
+			const value =
+				activeColumn === null ? null : (maps[index]?.get(activeColumn) ?? null);
+			return {
+				name: entry.name,
+				color: colors[index] ?? "",
+				raw: value,
+				value: value === null ? text.noValue : formatValue(value),
+			};
+		}),
+	);
+	const activeDots = $derived(
+		activeColumn === null || kind === "bar"
+			? []
+			: activeRows
+					.filter((row) => row.raw !== null)
+					.map((row) => ({
+						x: x(activeColumn),
+						y: y(row.raw ?? 0),
+						color: row.color,
+					})),
+	);
+	const activeLabel = $derived(
+		activeColumn === null ? "" : formatInstant(new Date(activeColumn), spacing),
+	);
+	const valueText = $derived(
+		activeColumn === null
+			? text.keyboardHint
+			: `${activeLabel}: ${activeRows.map((row) => `${row.name} ${row.value}`).join(", ")}`,
+	);
+
+	const summary = $derived.by(() => {
+		if (!extent) {
+			return title;
+		}
+		const parts = series.map((entry, index) => {
+			const values = entry.points
+				.map((point) => point.value)
+				.filter((value) => value !== null);
+			const end = ends[index];
+			return values.length && end
+				? text.seriesSummary(
+						entry.name,
+						formatValue(Math.min(...values)),
+						formatValue(Math.max(...values)),
+						formatValue(end.value),
+					)
+				: "";
+		});
+		return [
+			text.summary(
+				title,
+				formatInstant(new Date(first), spacing),
+				formatInstant(new Date(last), spacing),
+			),
+			...parts,
+		]
+			.filter(Boolean)
+			.join(" ");
+	});
+	const headline = $derived.by(() => {
+		const values = (series[0]?.points ?? [])
+			.map((point) => point.value)
+			.filter((value) => value !== null);
+		if (series.length !== 1 || !values.length) {
+			return "";
+		}
+		const average =
+			values.reduce((total, value) => total + value, 0) / values.length;
+		return `${text.peak} ${formatValue(Math.max(...values))} · ${text.average} ${formatValue(Math.round(average * 10) / 10)}`;
+	});
+	const tableRows = $derived(
+		columns.map((time) => ({
+			time,
+			date: formatInstant(new Date(time), spacing),
+			values: maps.map((map) => {
+				const value = map.get(time) ?? null;
+				return value === null ? text.noValue : formatValue(value);
+			}),
+		})),
+	);
+
+	function indexAt(event: PointerEvent): number {
+		const target = event.currentTarget as HTMLElement;
+		const offset = event.clientX - target.getBoundingClientRect().left + left;
+		const [rangeStart, rangeEnd] = xRange;
+		const ratio =
+			rangeEnd === rangeStart
+				? 0
+				: (offset - rangeStart) / (rangeEnd - rangeStart);
+		return nearestIndex(columns, first + ratio * (last - first));
+	}
+
+	function onpointer(event: PointerEvent) {
+		placement = event.pointerType === "touch" ? "above" : "floating";
+		activeIndex = indexAt(event);
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		const current = activeIndex ?? columns.length - 1;
+		const next = {
+			ArrowLeft: current - 1,
+			ArrowDown: current - 1,
+			ArrowRight: current + 1,
+			ArrowUp: current + 1,
+			Home: 0,
+			End: columns.length - 1,
+		}[event.key];
+		if (next === undefined) {
+			return;
+		}
+		event.preventDefault();
+		placement = "floating";
+		activeIndex = Math.min(columns.length - 1, Math.max(0, next));
+	}
+
+	function onfocus() {
+		if (activeIndex === null) {
+			placement = "floating";
+			activeIndex = columns.length - 1;
+		}
+	}
+</script>
+
+<figure class={cn("time-series-chart w-full min-w-0", className)}>
+	<figcaption
+		class="mb-3 flex flex-wrap items-baseline justify-between gap-x-4"
+	>
+		<span class="grid gap-0.5">
+			<span class="text-sm font-medium">{title}</span>
+			{#if description}
+				<span class="text-muted-foreground text-sm">{description}</span>
+			{/if}
+		</span>
+		{#if headline}
+			<span class="text-muted-foreground text-xs tabular">{headline}</span>
+		{/if}
+	</figcaption>
+	{#if !extent}
+		<div
+			class="text-muted-foreground flex items-center justify-center rounded-xl border border-dashed text-sm"
+			style:height="{height}px"
+		>
+			{text.empty}
+		</div>
+	{:else}
+		<div class="relative" style:height="{height}px" bind:clientWidth={width}>
+			{#if width > 0}
+				<svg
+					{width}
+					{height}
+					viewBox="0 0 {width} {height}"
+					role="img"
+					aria-label={summary}
+					class="block overflow-visible"
+				>
+					{#each yTicks as tick (tick)}
+						{@const level = Math.round(y(tick)) + 0.5}
+						<line
+							x1={left}
+							x2={left + plotWidth}
+							y1={level}
+							y2={level}
+							class={tick === 0
+								? "stroke-muted-foreground/40"
+								: "stroke-border"}
+						/>
+						<text
+							x={left - 8}
+							y={level}
+							text-anchor="end"
+							dominant-baseline="middle"
+							class="fill-muted-foreground text-[11px] tabular"
+							>{formatAxis(tick)}</text
+						>
+					{/each}
+					{#each xTicks.ticks as tick (tick.getTime())}
+						{@const position = x(tick.getTime())}
+						<text
+							x={position}
+							y={top + plotHeight + 18}
+							text-anchor={position - left < 24
+								? "start"
+								: left + plotWidth - position < 24
+									? "end"
+									: "middle"}
+							class="fill-muted-foreground text-[11px] tabular"
+							>{formatTick(tick, xTicks.unit)}</text
+						>
+					{/each}
+					{#if activeColumn !== null && kind !== "bar"}
+						{@const position = Math.round(x(activeColumn)) + 0.5}
+						<line
+							x1={position}
+							x2={position}
+							y1={top}
+							y2={top + plotHeight}
+							class="stroke-muted-foreground/60"
+						/>
+					{/if}
+					<Marks
+						{kind}
+						{lines}
+						{bars}
+						{baseline}
+						{activeColumn}
+						{activeDots}
+						{directLabels}
+					/>
+				</svg>
+				<div
+					role="slider"
+					tabindex="0"
+					aria-label={title}
+					aria-valuemin={0}
+					aria-valuemax={Math.max(0, columns.length - 1)}
+					aria-valuenow={activeIndex ?? Math.max(0, columns.length - 1)}
+					aria-valuetext={valueText}
+					class="focus-visible:ring-ring/50 absolute cursor-crosshair touch-pan-y rounded-md outline-none select-none focus-visible:ring-3"
+					style:left="{left}px"
+					style:top="{top}px"
+					style:width="{plotWidth}px"
+					style:height="{plotHeight}px"
+					onpointerdown={onpointer}
+					onpointermove={onpointer}
+					onpointerleave={() => (activeIndex = null)}
+					onpointercancel={() => (activeIndex = null)}
+					{onkeydown}
+					{onfocus}
+					onblur={() => (activeIndex = null)}
+				></div>
+				{#if activeColumn !== null}
+					<Readout
+						label={activeLabel}
+						rows={activeRows}
+						{placement}
+						x={x(activeColumn)}
+						{width}
+					/>
+				{/if}
+			{/if}
+		</div>
+		<div class="mt-3 flex flex-wrap items-center justify-between gap-2">
+			{#if series.length > 1}
+				<Legend
+					entries={series.map((entry, index) => ({
+						name: entry.name,
+						color: colors[index] ?? "",
+					}))}
+					{kind}
+				/>
+			{:else}
+				<span></span>
+			{/if}
+			<button
+				type="button"
+				aria-expanded={tableVisible}
+				aria-controls="{id}-table"
+				class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -mr-2 h-11 rounded-md px-2 text-xs outline-none focus-visible:ring-3 md:h-8"
+				onclick={() => (tableVisible = !tableVisible)}
+				>{tableVisible ? text.hideTable : text.showTable}</button
+			>
+		</div>
+		<DataTable
+			id="{id}-table"
+			caption={title}
+			dateHeading={text.date}
+			names={series.map((entry) => entry.name)}
+			rows={tableRows}
+			visible={tableVisible}
+		/>
+	{/if}
+</figure>
+
+<style>
+	.time-series-chart {
+		--series-1: oklch(0.58 0.16 var(--hue));
+		--series-2: oklch(0.75 0.16 calc(var(--hue) + 255));
+		--series-3: oklch(0.5 0.16 calc(var(--hue) + 75));
+		--series-4: oklch(0.69 0.16 calc(var(--hue) + 135));
+		--series-other: var(--muted-foreground);
+	}
+
+	:global(.dark) .time-series-chart {
+		--series-1: oklch(0.66 0.16 var(--hue));
+		--series-2: oklch(0.66 0.16 calc(var(--hue) + 255));
+		--series-3: oklch(0.5 0.16 calc(var(--hue) + 75));
+		--series-4: oklch(0.66 0.16 calc(var(--hue) + 135));
+	}
+</style>

package/dist/components/blocks/time-series-chart.svelte.d.ts

@@ -0,0 +1,18 @@
+export type { TimePoint, TimeSeries, } from "./time-series-chart/scale.js";
+export type { TimeSeriesChartMessages } from "./time-series-chart/messages.js";
+export type TimeSeriesKind = "line" | "area" | "bar";
+import { type TimeSeriesChartMessages } from "./time-series-chart/messages.js";
+import { type TimeSeries } from "./time-series-chart/scale.js";
+interface Props {
+    series: TimeSeries[];
+    title: string;
+    description?: string;
+    kind?: TimeSeriesKind;
+    format?: (value: number) => string;
+    height?: number;
+    messages?: Partial<TimeSeriesChartMessages>;
+    class?: string;
+}
+declare const TimeSeriesChart: import("svelte").Component<Props, {}, "">;
+type TimeSeriesChart = ReturnType<typeof TimeSeriesChart>;
+export default TimeSeriesChart;

package/dist/components/blocks/top-loading-bar.svelte

@@ -38,7 +38,7 @@
 {#if visible}
 	<div
 		class="pointer-events-none fixed inset-x-0 top-0 z-60 h-0.5"
-		style="top: env(safe-area-inset-top)"
+		style="top: var(--safe-top)"
 		role="progressbar"
 		aria-label={label}
 		aria-valuemin={0}

package/dist/components/blocks/video-player/center-controls.svelte

@@ -17,7 +17,7 @@
 	const { player, paused, text }: Props = $props();
 
 	const side =
-		"bg-chrome text-foreground ring-border pointer-events-auto flex size-11 items-center justify-center rounded-full ring-1 backdrop-blur-xl transition-transform active:scale-90 sm:size-14";
+		"pointer-events-auto flex size-14 items-center justify-center rounded-full bg-black/25 text-white ring-1 ring-white/10 backdrop-blur-md transition hover:scale-105 hover:bg-black/45 active:scale-90 [&_svg]:size-7";
 </script>
 
 <div class="flex items-center justify-center gap-8 sm:gap-12">
@@ -27,20 +27,20 @@
 		class={side}
 		onclick={() => player.seek(-SEEK_SECONDS)}
 	>
-		<RotateCcwIcon class="size-5 sm:size-6" />
+		<RotateCcwIcon />
 	</button>
 	<button
 		type="button"
 		aria-label={player.ended ? text.replay : paused ? text.play : text.pause}
-		class="bg-primary text-primary-foreground glow pointer-events-auto flex size-14 items-center justify-center rounded-full transition-transform active:scale-90 sm:size-18"
+		class="pointer-events-auto flex size-16 items-center justify-center rounded-full bg-black/40 text-white shadow-lg ring-1 ring-white/20 backdrop-blur-md transition hover:scale-105 hover:bg-black/55 active:scale-90 sm:size-18 [&_svg]:size-11 sm:[&_svg]:size-12"
 		onclick={player.togglePlay}
 	>
 		{#if player.ended}
-			<RotateCcwIcon class="size-7 sm:size-8" />
+			<RotateCcwIcon />
 		{:else if paused}
-			<PlayIcon class="size-7 fill-current sm:size-8" />
+			<PlayIcon class="fill-current" />
 		{:else}
-			<PauseIcon class="size-7 fill-current sm:size-8" />
+			<PauseIcon class="fill-current" />
 		{/if}
 	</button>
 	<button
@@ -49,6 +49,6 @@
 		class={side}
 		onclick={() => player.seek(SEEK_SECONDS)}
 	>
-		<RotateCwIcon class="size-5 sm:size-6" />
+		<RotateCwIcon />
 	</button>
 </div>

package/dist/components/blocks/video-player/control-bar.svelte

@@ -58,10 +58,12 @@
 </script>
 
 <div
-	class="glass pointer-events-auto mx-2 mb-2 rounded-2xl px-3 pt-1.5 pb-1 sm:mx-3 sm:mb-3"
+	class="pointer-events-auto mx-3 mb-3 flex flex-col gap-2 rounded-3xl bg-linear-to-b from-white/12 to-black/55 px-4 pt-3.5 pb-2.5 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.15),0_24px_60px_-12px_rgb(0_0_0/0.7)] ring-1 ring-white/10 backdrop-blur-2xl backdrop-saturate-150 sm:mx-auto sm:mb-4 sm:w-[min(64rem,calc(100%-3rem))] sm:px-5"
 >
-	<div class="flex items-center gap-3 text-xs font-medium tabular">
-		<span class="w-11 shrink-0">{formatTime(currentTime)}</span>
+	<div
+		class="flex items-center gap-3 text-xs font-medium text-white/80 tabular"
+	>
+		<span class="w-12 shrink-0">{formatTime(currentTime)}</span>
 		<div class="min-w-0 flex-1">
 			<ScrubBar
 				{currentTime}
@@ -72,54 +74,58 @@
 				onseek={player.seekTo}
 			/>
 		</div>
-		<span class="text-muted-foreground w-11 shrink-0 text-right"
+		<span class="w-12 shrink-0 text-right text-white/55"
 			>-{formatTime(Math.max(0, player.duration - currentTime))}</span
 		>
 	</div>
-	<div class="flex items-center gap-0.5">
+	<div class="flex items-center gap-2 sm:gap-3">
 		<ControlButton
 			label={playLabel}
 			shortcut="K"
 			{portalTarget}
 			onclick={player.togglePlay}
-			class="bg-primary text-primary-foreground hover:bg-primary/85 hover:text-primary-foreground dark:hover:bg-primary/85 glow"
+			class="size-10 bg-white text-black shadow-[0_0_20px_rgb(255_255_255/0.25)] transition-transform hover:scale-105 hover:bg-white/85 hover:text-black md:size-10 dark:hover:bg-white/85"
 		>
 			{#if player.ended}
 				<RotateCcwIcon />
 			{:else if paused}
-				<PlayIcon class="size-5 fill-current" />
+				<PlayIcon class="fill-current" />
 			{:else}
-				<PauseIcon class="size-5 fill-current" />
+				<PauseIcon class="fill-current" />
 			{/if}
 		</ControlButton>
-		<ControlButton
-			label={silent ? text.unmute : text.mute}
-			shortcut="M"
-			{portalTarget}
-			onclick={player.toggleMute}
+		<div class="flex items-center gap-1.5">
+			<ControlButton
+				label={silent ? text.unmute : text.mute}
+				shortcut="M"
+				{portalTarget}
+				onclick={player.toggleMute}
+			>
+				{#if silent}
+					<VolumeXIcon />
+				{:else if player.volume < 0.5}
+					<Volume1Icon />
+				{:else}
+					<Volume2Icon />
+				{/if}
+			</ControlButton>
+			<input
+				type="range"
+				min="0"
+				max="1"
+				step="0.05"
+				value={player.muted ? 0 : player.volume}
+				aria-label={text.volume}
+				oninput={(event) => {
+					player.volume = Number(event.currentTarget.value);
+					player.muted = player.volume === 0;
+				}}
+				class="pointer-fine:block hidden h-1 w-20 cursor-pointer appearance-none rounded-full bg-white/20 accent-white [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"
+			/>
+		</div>
+		<div
+			class="ml-auto flex items-center gap-0.5 rounded-full bg-white/5 p-1 ring-1 ring-white/10 sm:gap-1"
 		>
-			{#if silent}
-				<VolumeXIcon />
-			{:else if player.volume < 0.5}
-				<Volume1Icon />
-			{:else}
-				<Volume2Icon />
-			{/if}
-		</ControlButton>
-		<input
-			type="range"
-			min="0"
-			max="1"
-			step="0.05"
-			value={player.muted ? 0 : player.volume}
-			aria-label={text.volume}
-			oninput={(event) => {
-				player.volume = Number(event.currentTarget.value);
-				player.muted = player.volume === 0;
-			}}
-			class="accent-primary pointer-fine:block hidden h-1 w-20 cursor-pointer"
-		/>
-		<div class="ml-auto flex items-center gap-0.5">
 			{#if subtitles.length > 0}
 				<OptionMenu
 					label={text.subtitles}

package/dist/components/blocks/video-player/control-button.svelte

@@ -37,7 +37,7 @@
 				aria-pressed={pressed}
 				{onclick}
 				class={cn(
-					"size-11 rounded-full md:size-9 [&_svg:not([class*='size-'])]:size-5",
+					"size-11 rounded-full hover:bg-white/15 hover:text-white md:size-9 dark:hover:bg-white/15 [&_svg:not([class*='size-'])]:size-5",
 					className,
 				)}
 			>

package/dist/components/blocks/video-player/option-menu.svelte

@@ -43,7 +43,7 @@
 							size="icon"
 							aria-label={label}
 							class={cn(
-								"size-11 rounded-full md:size-9 [&_svg]:size-5",
+								"size-11 rounded-full hover:bg-white/15 hover:text-white md:size-9 dark:hover:bg-white/15 [&_svg:not([class*='size-'])]:size-5",
 								active && "text-primary",
 							)}
 						>