dsh-coding-subscription-oauth 0.6.2 → 0.6.3

package/src/client/components/NoticeBanner.tsx

@@ -1,46 +1,46 @@
-/** Dismissible notice banner with optional auto-hide. */
-
-import { useEffect } from "react";
-import { bodyStyle, buttonStyle, noticeStyle } from "../styles.ts";
-
-export interface NoticeBannerProps {
-	message: string;
-	dismissLabel?: string;
-	onDismiss?: () => void;
-	autoHideMs?: number;
-	tone?: "info" | "success";
-}
-
-export function NoticeBanner({ message, dismissLabel, onDismiss, autoHideMs, tone = "info" }: NoticeBannerProps) {
-	useEffect(() => {
-		if (autoHideMs === undefined || onDismiss === undefined) return;
-		const timer = window.setTimeout(onDismiss, autoHideMs);
-		return () => {
-			window.clearTimeout(timer);
-		};
-	}, [autoHideMs, onDismiss]);
-
-	const borderColor =
-		tone === "success" ? "var(--dsw-alias-state-success-primary, #22a06b)" : "var(--dsw-alias-brand-primary, #1677ff)";
-
-	return (
-		<div
-			style={{
-				...noticeStyle,
-				display: "flex",
-				alignItems: "flex-start",
-				justifyContent: "space-between",
-				gap: 12,
-				borderLeft: `3px solid ${borderColor}`,
-			}}
-			role="status"
-		>
-			<p style={{ ...bodyStyle, margin: 0, color: "var(--dsw-alias-label-primary)" }}>{message}</p>
-			{onDismiss === undefined || dismissLabel === undefined ? null : (
-				<button type="button" style={buttonStyle} onClick={onDismiss}>
-					{dismissLabel}
-				</button>
-			)}
-		</div>
-	);
-}
+/** Dismissible notice banner with optional auto-hide. */
+
+import { useEffect } from "react";
+import { bodyStyle, buttonStyle, noticeStyle } from "../styles.ts";
+
+export interface NoticeBannerProps {
+	message: string;
+	dismissLabel?: string;
+	onDismiss?: () => void;
+	autoHideMs?: number;
+	tone?: "info" | "success";
+}
+
+export function NoticeBanner({ message, dismissLabel, onDismiss, autoHideMs, tone = "info" }: NoticeBannerProps) {
+	useEffect(() => {
+		if (autoHideMs === undefined || onDismiss === undefined) return;
+		const timer = window.setTimeout(onDismiss, autoHideMs);
+		return () => {
+			window.clearTimeout(timer);
+		};
+	}, [autoHideMs, onDismiss]);
+
+	const borderColor =
+		tone === "success" ? "var(--dsw-alias-state-success-primary, #22a06b)" : "var(--dsw-alias-brand-primary, #1677ff)";
+
+	return (
+		<div
+			style={{
+				...noticeStyle,
+				display: "flex",
+				alignItems: "flex-start",
+				justifyContent: "space-between",
+				gap: 12,
+				borderLeft: `3px solid ${borderColor}`,
+			}}
+			role="status"
+		>
+			<p style={{ ...bodyStyle, margin: 0, color: "var(--dsw-alias-label-primary)" }}>{message}</p>
+			{onDismiss === undefined || dismissLabel === undefined ? null : (
+				<button type="button" style={buttonStyle} onClick={onDismiss}>
+					{dismissLabel}
+				</button>
+			)}
+		</div>
+	);
+}

package/src/client/components/ProgressBar.tsx

@@ -1,53 +1,53 @@
-/** Usage quota progress bar with threshold-based color. */
-
-import { hintStyle } from "../styles.ts";
-
-export interface ProgressBarProps {
-	/** 0–100 used percentage. */
-	value: number;
-	label?: string;
-	meta?: string;
-}
-
-function barColor(percent: number): string {
-	if (percent >= 90) return "var(--dsw-alias-state-error-primary, #d92d20)";
-	if (percent >= 75) return "var(--dsw-alias-state-warn-primary, #e06c00)";
-	// Prefer info fill over brand-primary: dark theme inverts brand-primary to near-white.
-	return "var(--dsw-alias-button-info-fill, var(--dsw-static-deepseek-500, #4f6ef7))";
-}
-
-export function ProgressBar({ value, label, meta }: ProgressBarProps) {
-	const clamped = Math.max(0, Math.min(100, value));
-	return (
-		<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-			{label === undefined ? null : (
-				<div style={{ display: "flex", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
-					<span style={{ ...hintStyle, color: "var(--dsw-alias-label-primary)" }}>{label}</span>
-					{meta === undefined ? null : <span style={hintStyle}>{meta}</span>}
-				</div>
-			)}
-			<div
-				role="progressbar"
-				aria-valuenow={clamped}
-				aria-valuemin={0}
-				aria-valuemax={100}
-				style={{
-					height: 8,
-					borderRadius: 4,
-					background: "var(--dsw-alias-border-l2)",
-					overflow: "hidden",
-				}}
-			>
-				<div
-					style={{
-						width: `${String(clamped)}%`,
-						height: "100%",
-						borderRadius: 4,
-						background: barColor(clamped),
-						transition: "width 0.3s ease, background 0.3s ease",
-					}}
-				/>
-			</div>
-		</div>
-	);
-}
+/** Usage quota progress bar with threshold-based color. */
+
+import { hintStyle } from "../styles.ts";
+
+export interface ProgressBarProps {
+	/** 0–100 used percentage. */
+	value: number;
+	label?: string;
+	meta?: string;
+}
+
+function barColor(percent: number): string {
+	if (percent >= 90) return "var(--dsw-alias-state-error-primary, #d92d20)";
+	if (percent >= 75) return "var(--dsw-alias-state-warn-primary, #e06c00)";
+	// Prefer info fill over brand-primary: dark theme inverts brand-primary to near-white.
+	return "var(--dsw-alias-button-info-fill, var(--dsw-static-deepseek-500, #4f6ef7))";
+}
+
+export function ProgressBar({ value, label, meta }: ProgressBarProps) {
+	const clamped = Math.max(0, Math.min(100, value));
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+			{label === undefined ? null : (
+				<div style={{ display: "flex", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
+					<span style={{ ...hintStyle, color: "var(--dsw-alias-label-primary)" }}>{label}</span>
+					{meta === undefined ? null : <span style={hintStyle}>{meta}</span>}
+				</div>
+			)}
+			<div
+				role="progressbar"
+				aria-valuenow={clamped}
+				aria-valuemin={0}
+				aria-valuemax={100}
+				style={{
+					height: 8,
+					borderRadius: 4,
+					background: "var(--dsw-alias-border-l2)",
+					overflow: "hidden",
+				}}
+			>
+				<div
+					style={{
+						width: `${String(clamped)}%`,
+						height: "100%",
+						borderRadius: 4,
+						background: barColor(clamped),
+						transition: "width 0.3s ease, background 0.3s ease",
+					}}
+				/>
+			</div>
+		</div>
+	);
+}