@oh-my-pi-zen/omp-stats 16.3.6-zen.1

package/src/client/ui/SegmentedControl.tsx

@@ -0,0 +1,36 @@
+export interface SegmentedControlOption<T> {
+	value: T;
+	label: string;
+	title?: string;
+}
+
+export interface SegmentedControlProps<T> {
+	options: SegmentedControlOption<T>[];
+	value: T;
+	onChange: (value: T) => void;
+	className?: string;
+}
+
+export function SegmentedControl<T>({ options, value, onChange, className = "" }: SegmentedControlProps<T>) {
+	return (
+		<div className={`stats-segmented-control ${className}`} role="radiogroup">
+			{options.map(opt => {
+				const isActive = opt.value === value;
+				return (
+					<button
+						key={String(opt.value)}
+						type="button"
+						role="radio"
+						aria-checked={isActive}
+						data-active={isActive ? "true" : "false"}
+						className="stats-segmented-control-btn"
+						title={opt.title}
+						onClick={() => onChange(opt.value)}
+					>
+						{opt.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/client/ui/Skeleton.tsx

@@ -0,0 +1,17 @@
+import type React from "react";
+
+export interface SkeletonProps {
+	variant?: "text" | "rect" | "circle";
+	width?: string | number;
+	height?: string | number;
+	className?: string;
+}
+
+export function Skeleton({ variant = "text", width, height, className = "" }: SkeletonProps) {
+	const style: React.CSSProperties = {
+		width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+		height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+	};
+
+	return <div className={`stats-skeleton ${className}`} data-variant={variant} style={style} />;
+}

package/src/client/ui/StatusPill.tsx

@@ -0,0 +1,15 @@
+import type React from "react";
+
+export interface StatusPillProps {
+	variant: "success" | "danger" | "warning" | "info" | "default";
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function StatusPill({ variant, children, className = "" }: StatusPillProps) {
+	return (
+		<span className={`stats-status-pill ${className}`} data-variant={variant}>
+			{children}
+		</span>
+	);
+}

package/src/client/ui/index.ts

@@ -0,0 +1,11 @@
+export * from "./AsyncBoundary";
+export * from "./DataTable";
+export * from "./EmptyState";
+export * from "./ErrorState";
+export * from "./JsonBlock";
+export * from "./MetricCluster";
+export * from "./Panel";
+export * from "./RequestDrawer";
+export * from "./SegmentedControl";
+export * from "./Skeleton";
+export * from "./StatusPill";

package/src/client/useSystemTheme.ts

@@ -0,0 +1,87 @@
+import { useSyncExternalStore } from "react";
+
+export type SystemTheme = "light" | "dark";
+export type ThemePreference = "system" | "light" | "dark";
+
+const STORAGE_KEY = "omp-stats-theme";
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+
+function readStoredPreference(): ThemePreference {
+	if (typeof localStorage === "undefined") return "system";
+	const stored = localStorage.getItem(STORAGE_KEY);
+	return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+}
+
+function getSystemTheme(): SystemTheme {
+	if (typeof window === "undefined") return "dark";
+	return window.matchMedia(DARK_SCHEME_QUERY).matches ? "dark" : "light";
+}
+
+// Module-level store shared by the toggle (writer) and every chart (reader) so
+// an explicit override and the system default resolve through one source.
+let preference: ThemePreference = readStoredPreference();
+let resolved: SystemTheme = preference === "system" ? getSystemTheme() : preference;
+const listeners = new Set<() => void>();
+
+function emit(): void {
+	for (const listener of listeners) listener();
+}
+
+function applyResolvedTheme(): void {
+	resolved = preference === "system" ? getSystemTheme() : preference;
+	if (typeof document !== "undefined") {
+		document.documentElement.dataset.theme = resolved;
+		document.documentElement.style.colorScheme = resolved;
+	}
+}
+
+if (typeof window !== "undefined") {
+	applyResolvedTheme();
+	window.matchMedia(DARK_SCHEME_QUERY).addEventListener("change", () => {
+		// System changes only move the needle while following the system.
+		if (preference === "system") {
+			applyResolvedTheme();
+			emit();
+		}
+	});
+}
+
+export function setThemePreference(next: ThemePreference): void {
+	preference = next;
+	if (typeof localStorage !== "undefined") localStorage.setItem(STORAGE_KEY, next);
+	applyResolvedTheme();
+	emit();
+}
+
+function subscribe(callback: () => void): () => void {
+	listeners.add(callback);
+	return () => listeners.delete(callback);
+}
+
+/** Reader for the active resolved theme. Reflects system default and overrides. */
+export function useSystemTheme(): SystemTheme {
+	return useSyncExternalStore(
+		subscribe,
+		() => resolved,
+		() => "dark" as SystemTheme,
+	);
+}
+
+/** Reader + writer for the theme preference (powers the toggle). */
+export function useThemePreference(): {
+	preference: ThemePreference;
+	resolved: SystemTheme;
+	setPreference: (next: ThemePreference) => void;
+} {
+	const pref = useSyncExternalStore(
+		subscribe,
+		() => preference,
+		() => "system" as ThemePreference,
+	);
+	const res = useSyncExternalStore(
+		subscribe,
+		() => resolved,
+		() => "dark" as SystemTheme,
+	);
+	return { preference: pref, resolved: res, setPreference: setThemePreference };
+}