@spicetify/kit 0.1.0 → 0.3.0

package/vendor/stdlib/src/registers/playbarButton.tsx

@@ -63,7 +63,7 @@ export type PlaybarButtonProps = {
 	isActiveNoIndicator?: boolean;
 	disabled?: boolean;
 	icon?: string;
-	onClick: () => void;
+	onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 	/** Position within the module-button group; lower renders earlier. Read by the mount sorter. */
 	order?: number;
 };

package/vendor/stdlib/src/registers/route.ts

@@ -97,11 +97,12 @@ mountRegistryAnchor({
 		const route = items.find((item: any) => {
 			const path = item?.props?.path;
 			return typeof path === "string" && matchRoute(pathname, path);
-		}) as { props: { element?: unknown; children?: unknown } } | undefined;
+		}) as { props: { path: string; element?: unknown; children?: unknown } } | undefined;
 		if (!route) return null;
 		return (React as any).createElement(
 			"div",
 			{
+				key: route.props.path,
 				className: "spicetify-route-page",
 				style: {
 					position: "absolute",

package/vendor/stdlib/src/registers/settingsRow.tsx

@@ -8,9 +8,9 @@ import { SettingsSection } from "../../lib/primitives.tsx";
 import { Registry } from "./registry.ts";
 import settingsSection from "./settingsSection.ts";
 
-// Rows from every module, rendered together under one "Spicetify" section
-// in the client's settings page. A module with a single setting registers a
-// row here instead of claiming a whole section (or a profile-menu slot) of
+// Rows from every module, rendered together under one "General" section on
+// the standalone Spicetify Settings page. A module with a single setting
+// registers a row here instead of claiming a whole section (or a menu slot) of
 // its own; SettingsToggleRow (lib/primitives.tsx) is the one-boolean case.
 const listeners = new Set<() => void>();
 
@@ -38,7 +38,7 @@ const SpicetifyGroup = () => {
 	const rows = registry.all();
 	if (rows.length === 0) return null;
 	return (
-		<SettingsSection title="Spicetify">
+		<SettingsSection title="General">
 			{rows.map((row, i) => (
 				<React.Fragment key={i}>{row}</React.Fragment>
 			))}

package/vendor/stdlib/src/registers/settingsSection.ts

@@ -3,57 +3,77 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { transformer } from "../../mixin.ts";
-import { mountRegistryAnchor } from "./mount.ts";
+import { React } from "../expose/React.ts";
+import { SETTINGS_HEADER_CLASS, SETTINGS_HEADER_CONTAINER_CLASS } from "../../lib/primitives-classes.ts";
 import { Registry } from "./registry.ts";
+import route from "./route.ts";
+import { CorsProxySettings } from "../settings/corsProxy.tsx";
 
-const registry = new (class extends Registry<React.ReactNode> {
+export const SPICETIFY_SETTINGS_ROUTE = "/bespoke/settings";
+
+const listeners = new Set<() => void>();
+const notify = () => {
+	for (const listener of listeners) listener();
+};
+
+class SettingsRegistry extends Registry<React.ReactNode> {
 	override add(value: React.ReactNode): this {
-		refresh?.();
-		return super.add(value);
+		super.add(value);
+		notify();
+		return this;
 	}
 
 	override delete(value: React.ReactNode): boolean {
-		refresh?.();
-		return super.delete(value);
+		const deleted = super.delete(value);
+		if (deleted) notify();
+		return deleted;
 	}
-})();
+}
+
+const registry = new SettingsRegistry();
 export default registry;
 
-let refresh: (() => void) | undefined;
+// Navigation and management actions belong after every module's controls.
+// Keeping them in a separate register makes the ordering structural instead
+// of dependent on module load order.
+export const settingsAction = new SettingsRegistry();
 
-declare global {
-	var __renderSettingSections: any;
-}
+const SpicetifySettingsPage = () => {
+	const [, forceRender] = React.useReducer((value: number) => value + 1, 0);
+	React.useEffect(() => {
+		listeners.add(forceRender);
+		return () => void listeners.delete(forceRender);
+	}, []);
 
-globalThis.__renderSettingSections = () => registry.all();
-transformer(
-	(emit) => (str) => {
-		emit();
+	const sections = registry.all();
+	const actions = settingsAction.all();
+	return React.createElement(
+		"main",
+		{ className: "spicetify-settings-page x-settings-container" },
+		React.createElement(
+			"div",
+			{ className: SETTINGS_HEADER_CONTAINER_CLASS },
+			React.createElement(
+				"h1",
+				{ className: SETTINGS_HEADER_CLASS, style: { paddingBlockEnd: "16px" } },
+				"Spicetify Settings",
+			),
+		),
+		...sections.map((section, index) => React.createElement(React.Fragment, { key: `section-${index}` }, section)),
+		React.createElement(CorsProxySettings, { key: "cors-proxy" }),
+		...actions.map((action, index) => React.createElement(React.Fragment, { key: `action-${index}` }, action)),
+	);
+};
 
-		str = str.replace(
-			/(\(0,[a-zA-Z_\$][\w\$]*\.jsx\)\([a-zA-Z_\$][\w\$]*,{settings:[a-zA-Z_\$][\w\$]*,setValue:[a-zA-Z_\$][\w\$]*}\))]/,
-			"$1,...__renderSettingSections()]",
+// The page belongs to stdlib rather than Manager so settings remain available
+// when the optional management UI fails or is disabled.
+if (typeof document !== "undefined") {
+	void CHUNKS.xpui.promise.then(() => {
+		route.add(
+			React.createElement("route", {
+				path: SPICETIFY_SETTINGS_ROUTE,
+				element: React.createElement(SpicetifySettingsPage),
+			}),
 		);
-
-		return str;
-	},
-	{
-		wait: false,
-		glob: /^\/xpui-routes-desktop-settings\.js/,
-	},
-);
-
-// The settings container only exists while the settings route is open; the
-// anchor keeper re-places the host every time it reappears.
-mountRegistryAnchor({
-	className: "spicetify-settings-sections",
-	registry,
-	setRefresh: (cb) => {
-		refresh = cb;
-	},
-	findSlot: () => {
-		const container = document.querySelector(".x-settings-container");
-		return container ? { parent: container } : null;
-	},
-});
+	});
+}

package/vendor/stdlib/src/registers/topbarLeftButton.tsx

@@ -64,7 +64,7 @@ mountRegistryAnchor({
 type TopbarLeftButtonProps = {
 	label: string;
 	disabled?: boolean;
-	onClick: () => void;
+	onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 	icon?: string;
 	/** Position within the module-button group; lower renders earlier. Read by the mount sorter. */
 	order?: number;

package/vendor/stdlib/src/registers/topbarRightButton.tsx

@@ -64,7 +64,7 @@ mountRegistryAnchor({
 type TopbarRightButtonProps = {
 	label: string;
 	disabled?: boolean;
-	onClick: () => void;
+	onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 	icon?: string;
 	/** Position within the module-button group; lower renders earlier. Read by the mount sorter. */
 	order?: number;
@@ -78,10 +78,8 @@ export const TopbarRightButton: TopbarRightButtonFactory = (props) => (
 			aria-label={props.label}
 			onClick={props.onClick}
 			size="small"
-			condensedAll
+			iconOnly={() => props.icon && createIconComponent({ icon: props.icon, iconSize: 16 })}
 			className={MAP.main.topbar.right.button_t.wrapper}
-		>
-			{props.icon && createIconComponent({ icon: props.icon, iconSize: 16 })}
-		</UI.ButtonTertiary>
+		/>
 	</Tooltip>
 );

package/vendor/stdlib/src/settings/corsProxy.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2026 Afonso Jorge Ramos
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { React } from "../expose/React.ts";
+import { Button, Select, SettingsRow, SettingsSection, TextInput } from "../../lib/primitives.tsx";
+import { SETTINGS_HELP_TEXT_CLASS } from "../../lib/primitives-classes.ts";
+
+const MODE_OPTIONS = [
+	{ value: "automatic", label: "Automatic" },
+	{ value: "custom", label: "Custom" },
+] as const;
+
+const SettingsLabel = (props: { title: string; description: string }) => (
+	<span className="spicetify-settings-label-copy">
+		<span>{props.title}</span>
+		<span className={SETTINGS_HELP_TEXT_CLASS}>{props.description}</span>
+	</span>
+);
+
+const CorsProxySettingsAvailable = (props: { api: typeof Spicetify.CORSProxy }) => {
+	const { api } = props;
+	const [initial] = React.useState(() => api.configuration());
+	const [mode, setMode] = React.useState<Spicetify.CORSProxy.Mode>(initial.mode);
+	const [template, setTemplate] = React.useState(initial.template ?? "");
+	const [message, setMessage] = React.useState("");
+	const valid = api.isValidTemplate(template);
+	const [daemonTemplate, hostedTemplate] = initial.automaticTemplates;
+
+	const changeMode = (next: Spicetify.CORSProxy.Mode) => {
+		setMode(next);
+		setMessage("");
+		if (next === "automatic") {
+			api.configure({ mode: "automatic" });
+			setMessage("Automatic routing is active.");
+		}
+	};
+
+	const applyCustom = () => {
+		try {
+			api.configure({ mode: "custom", template });
+			setMessage("Custom proxy is active.");
+		} catch (error) {
+			setMessage(error instanceof Error ? error.message : "The custom proxy template is invalid.");
+		}
+	};
+
+	return (
+		<SettingsSection title="CORS Proxy">
+			<SettingsRow
+				label={
+					<SettingsLabel
+						title="Routing"
+						description="Automatic tries the authenticated local daemon first, then Spicetify's hosted proxy."
+					/>
+				}
+			>
+				<Select ariaLabel="CORS proxy routing" options={MODE_OPTIONS} value={mode} onChange={changeMode} />
+			</SettingsRow>
+			{mode === "custom" ? (
+				<SettingsRow
+					label={
+						<SettingsLabel
+							title="Custom template"
+							description={
+								'Use an absolute URL containing "{url}". A custom template replaces automatic fallback.'
+							}
+						/>
+					}
+				>
+					<div className="spicetify-cors-proxy-controls">
+						<TextInput
+							ariaLabel="Custom CORS proxy template"
+							placeholder="https://proxy.example/{url}"
+							value={template}
+							onInput={setTemplate}
+						/>
+						<Button variant="secondary" disabled={!valid} onClick={applyCustom}>
+							Apply
+						</Button>
+					</div>
+				</SettingsRow>
+			) : null}
+			<span className={SETTINGS_HELP_TEXT_CLASS}>
+				{message || `Automatic chain: ${daemonTemplate} → ${hostedTemplate}`}
+			</span>
+		</SettingsSection>
+	);
+};
+
+export const CorsProxySettings = () => {
+	const api = Spicetify.CORSProxy;
+	if (
+		typeof api?.configuration !== "function" ||
+		typeof api?.configure !== "function" ||
+		typeof api?.isValidTemplate !== "function"
+	) {
+		return null;
+	}
+	return <CorsProxySettingsAvailable api={api} />;
+};