dsh-coding-subscription-oauth 0.5.8 → 0.6.0

package/src/client/components/SettingsTabs.tsx

@@ -1,75 +1,75 @@
-/** Accessible segmented tablist for Coding OAuth settings. */
-
-import type { KeyboardEvent } from "react";
-import { SETTINGS_TABS } from "../constants.ts";
-import { segmentedNavStyle, segmentedTabActiveStyle, segmentedTabStyle } from "../styles.ts";
-import type { GrokBuildSettingsInjected, SettingsTabId } from "../types.ts";
-
-export interface SettingsTabHint {
-	id: SettingsTabId;
-	suffix?: string;
-}
-
-export interface SettingsTabsProps {
-	t: GrokBuildSettingsInjected["t"];
-	activeTab: SettingsTabId;
-	onChange: (tab: SettingsTabId) => void;
-	hints?: readonly SettingsTabHint[];
-}
-
-export function SettingsTabs({ t, activeTab, onChange, hints }: SettingsTabsProps) {
-	const hintFor = (id: SettingsTabId): string | undefined => hints?.find((entry) => entry.id === id)?.suffix;
-
-	const focusTab = (index: number): void => {
-		const tab = SETTINGS_TABS[index];
-		if (tab === undefined) return;
-		onChange(tab.id);
-		const button = document.getElementById(`coding-oauth-tab-${tab.id}`);
-		button?.focus();
-	};
-
-	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-		const current = SETTINGS_TABS.findIndex((tab) => tab.id === activeTab);
-		if (current < 0) return;
-		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-			event.preventDefault();
-			focusTab((current + 1) % SETTINGS_TABS.length);
-		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-			event.preventDefault();
-			focusTab((current - 1 + SETTINGS_TABS.length) % SETTINGS_TABS.length);
-		} else if (event.key === "Home") {
-			event.preventDefault();
-			focusTab(0);
-		} else if (event.key === "End") {
-			event.preventDefault();
-			focusTab(SETTINGS_TABS.length - 1);
-		}
-	};
-
-	return (
-		<div role="tablist" aria-label={t("title")} style={segmentedNavStyle} onKeyDown={onKeyDown}>
-			{SETTINGS_TABS.map((tab) => {
-				const selected = activeTab === tab.id;
-				const suffix = hintFor(tab.id);
-				const label = suffix === undefined ? t(tab.label) : `${t(tab.label)} (${suffix})`;
-				return (
-					<button
-						key={tab.id}
-						id={`coding-oauth-tab-${tab.id}`}
-						type="button"
-						role="tab"
-						aria-selected={selected}
-						aria-controls={`coding-oauth-panel-${tab.id}`}
-						tabIndex={selected ? 0 : -1}
-						style={selected ? segmentedTabActiveStyle : segmentedTabStyle}
-						onClick={() => {
-							onChange(tab.id);
-						}}
-					>
-						{label}
-					</button>
-				);
-			})}
-		</div>
-	);
-}
+/** Accessible segmented tablist for Coding OAuth settings. */
+
+import type { KeyboardEvent } from "react";
+import { SETTINGS_TABS } from "../constants.ts";
+import { segmentedNavStyle, segmentedTabActiveStyle, segmentedTabStyle } from "../styles.ts";
+import type { GrokBuildSettingsInjected, SettingsTabId } from "../types.ts";
+
+export interface SettingsTabHint {
+	id: SettingsTabId;
+	suffix?: string;
+}
+
+export interface SettingsTabsProps {
+	t: GrokBuildSettingsInjected["t"];
+	activeTab: SettingsTabId;
+	onChange: (tab: SettingsTabId) => void;
+	hints?: readonly SettingsTabHint[];
+}
+
+export function SettingsTabs({ t, activeTab, onChange, hints }: SettingsTabsProps) {
+	const hintFor = (id: SettingsTabId): string | undefined => hints?.find((entry) => entry.id === id)?.suffix;
+
+	const focusTab = (index: number): void => {
+		const tab = SETTINGS_TABS[index];
+		if (tab === undefined) return;
+		onChange(tab.id);
+		const button = document.getElementById(`coding-oauth-tab-${tab.id}`);
+		button?.focus();
+	};
+
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		const current = SETTINGS_TABS.findIndex((tab) => tab.id === activeTab);
+		if (current < 0) return;
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			focusTab((current + 1) % SETTINGS_TABS.length);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			focusTab((current - 1 + SETTINGS_TABS.length) % SETTINGS_TABS.length);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusTab(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusTab(SETTINGS_TABS.length - 1);
+		}
+	};
+
+	return (
+		<div role="tablist" aria-label={t("title")} style={segmentedNavStyle} onKeyDown={onKeyDown}>
+			{SETTINGS_TABS.map((tab) => {
+				const selected = activeTab === tab.id;
+				const suffix = hintFor(tab.id);
+				const label = suffix === undefined ? t(tab.label) : `${t(tab.label)} (${suffix})`;
+				return (
+					<button
+						key={tab.id}
+						id={`coding-oauth-tab-${tab.id}`}
+						type="button"
+						role="tab"
+						aria-selected={selected}
+						aria-controls={selected ? `coding-oauth-panel-${tab.id}` : undefined}
+						tabIndex={selected ? 0 : -1}
+						style={selected ? segmentedTabActiveStyle : segmentedTabStyle}
+						onClick={() => {
+							onChange(tab.id);
+						}}
+					>
+						{label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/client/components/ToggleSwitch.tsx

@@ -1,62 +1,71 @@
-/** Accessible toggle switch replacing native checkboxes for capability settings. */
-
-import type { CSSProperties } from "react";
-import { TRANSITION } from "../styles.ts";
-
-export interface ToggleSwitchProps {
-	checked: boolean;
-	disabled?: boolean;
-	onChange: (checked: boolean) => void;
-	/** Accessible label (visually hidden when label prop is rendered externally). */
-	ariaLabel?: string;
-	id?: string;
-}
-
-const trackStyle = (checked: boolean, disabled: boolean): CSSProperties => ({
-	position: "relative",
-	width: 40,
-	height: 22,
-	borderRadius: 11,
-	flex: "0 0 auto",
-	background: checked
-		? "var(--dsw-alias-button-primary-fill)"
-		: "var(--dsw-alias-border-l4, rgba(127, 127, 127, 0.45))",
-	opacity: disabled ? 0.5 : 1,
-	cursor: disabled ? "not-allowed" : "pointer",
-	transition: TRANSITION,
-	border: "none",
-	padding: 0,
-});
-
-const thumbStyle = (checked: boolean): CSSProperties => ({
-	position: "absolute",
-	top: 2,
-	left: checked ? 20 : 2,
-	width: 18,
-	height: 18,
-	borderRadius: "50%",
-	// Match DSH primary fill/foreground pairing so the thumb stays visible when
-	// dark theme inverts brand-primary to near-white.
-	background: checked ? "var(--dsw-alias-label-primary-foreground)" : "var(--dsw-alias-button-elevated-fill)",
-	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.25)",
-	transition: TRANSITION,
-});
-
-export function ToggleSwitch({ checked, disabled = false, onChange, ariaLabel, id }: ToggleSwitchProps) {
-	return (
-		<button
-			id={id}
-			type="button"
-			role="switch"
-			aria-checked={checked}
-			aria-label={ariaLabel}
-			disabled={disabled}
-			style={trackStyle(checked, disabled)}
-			onClick={() => {
-				if (!disabled) onChange(!checked);
-			}}
-		>
-			<span aria-hidden="true" style={thumbStyle(checked)} />
-		</button>
-	);
-}
+/** Accessible toggle switch replacing native checkboxes for capability settings. */
+
+import type { CSSProperties } from "react";
+import { TRANSITION } from "../styles.ts";
+
+export interface ToggleSwitchProps {
+	checked: boolean;
+	disabled?: boolean;
+	onChange: (checked: boolean) => void;
+	/** Accessible label (visually hidden when label prop is rendered externally). */
+	ariaLabel?: string;
+	ariaDescribedBy?: string;
+	id?: string;
+}
+
+const trackStyle = (checked: boolean, disabled: boolean): CSSProperties => ({
+	position: "relative",
+	width: 40,
+	height: 22,
+	borderRadius: 11,
+	flex: "0 0 auto",
+	background: checked
+		? "var(--dsw-alias-button-primary-fill)"
+		: "var(--dsw-alias-border-l4, rgba(127, 127, 127, 0.45))",
+	opacity: disabled ? 0.5 : 1,
+	cursor: disabled ? "not-allowed" : "pointer",
+	transition: TRANSITION,
+	border: "none",
+	padding: 0,
+});
+
+const thumbStyle = (checked: boolean): CSSProperties => ({
+	position: "absolute",
+	top: 2,
+	left: checked ? 20 : 2,
+	width: 18,
+	height: 18,
+	borderRadius: "50%",
+	// Match DSH primary fill/foreground pairing so the thumb stays visible when
+	// dark theme inverts brand-primary to near-white.
+	background: checked ? "var(--dsw-alias-label-primary-foreground)" : "var(--dsw-alias-button-elevated-fill)",
+	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.25)",
+	transition: TRANSITION,
+});
+
+export function ToggleSwitch({
+	checked,
+	disabled = false,
+	onChange,
+	ariaLabel,
+	ariaDescribedBy,
+	id,
+}: ToggleSwitchProps) {
+	return (
+		<button
+			id={id}
+			type="button"
+			role="switch"
+			aria-checked={checked}
+			aria-label={ariaLabel}
+			aria-describedby={ariaDescribedBy}
+			disabled={disabled}
+			style={trackStyle(checked, disabled)}
+			onClick={() => {
+				if (!disabled) onChange(!checked);
+			}}
+		>
+			<span aria-hidden="true" style={thumbStyle(checked)} />
+		</button>
+	);
+}