@spicetify/kit 0.1.0

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

@@ -0,0 +1,168 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { transformer } from "../../mixin.ts";
+
+import type { createMachine as createMachineT } from "npm:xstate";
+import { Registry } from "./registry.ts";
+
+export type StateMachine = ReturnType<typeof createMachineT>;
+export let Machine: StateMachine;
+
+const registry = new (class extends Registry<React.ReactNode> {
+	private static NodeNash = Symbol.for("NodeHash");
+
+	getHash(value: React.ReactNode) {
+		if (!this.has(value)) {
+			return null;
+		}
+		// @ts-ignore
+		const hash = value[this.constructor.NodeNash];
+		const state = `bespoke_${hash}`;
+		const event = `bespoke_${hash}_button_click`;
+		return { state, event };
+	}
+
+	override add(value: React.ReactNode, onEntry?: any, onExit?: any): this {
+		const hash = crypto.randomUUID();
+		// @ts-ignore
+		value[this.constructor.NodeNash] = hash;
+		const state = `bespoke_${hash}`;
+		const event = `bespoke_${hash}_button_click`;
+
+		stateToNode.set(state, value);
+
+		ON[event] = {
+			target: state,
+		};
+
+		STATES[state] = {
+			on: Object.setPrototypeOf(
+				{
+					[event]: {
+						target: "disabled",
+					},
+				},
+				ON,
+			),
+		};
+
+		if (onEntry) {
+			const entry = `bespoke_${hash}_entry`;
+			STATES[state].entry = [entry];
+			ACTIONS[entry] = onEntry;
+		}
+		if (onExit) {
+			const exit = `bespoke_${hash}_exit`;
+			Machine.config.states![state].exit = [exit];
+			ACTIONS[exit] = onExit;
+		}
+
+		return super.add(value);
+	}
+
+	override delete(item: React.ReactNode): boolean {
+		// @ts-ignore
+		const hash = item[this.constructor.NodeNash];
+		const state = `bespoke_${hash}`;
+		const event = `bespoke_${hash}_button_click`;
+
+		stateToNode.delete(state);
+
+		delete ON[event];
+		return super.delete(item);
+	}
+})();
+export default registry;
+
+const stateToNode = new Map<string, React.ReactNode>();
+
+declare global {
+	var __renderPanel: any;
+}
+
+globalThis.__renderPanel = (state: string) => {
+	if (!state.startsWith("bespoke_")) {
+		return null;
+	}
+
+	return stateToNode.get(state);
+};
+
+let ON: Record<string, any> = {};
+let STATES: Record<string, any> = {};
+let ACTIONS: Record<string, any> = {};
+
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(/(=\(0,[a-zA-Z_\$][\w\$]*\.[a-zA-Z_\$][\w\$]*\)\(\{id:"RightPanelState)/, "=__Machine$1");
+		Object.defineProperty(globalThis, "__Machine", {
+			set: ($: StateMachine) => {
+				Machine = $;
+
+				queueMicrotask(() => {
+					ON = {
+						...ON,
+						...Machine.config.states!.disabled.on,
+						panel_close_click: [
+							{
+								target: "disabled",
+							},
+						],
+					};
+					delete ON.playback_autoplay_context_changed;
+
+					for (const [k, v] of Object.entries(Machine.config.states! as Record<string, any>)) {
+						if (k === "puffin_activation") {
+							continue;
+						}
+						v.on = new Proxy(v.on!, {
+							get(target, p, _receiver) {
+								// @ts-ignore
+								if (p.startsWith("bespoke_")) {
+									// @ts-ignore
+									return ON[p];
+								}
+								// @ts-ignore
+								return target[p];
+							},
+						});
+					}
+
+					Object.setPrototypeOf(Machine.config.states!, STATES);
+
+					Machine._options.actions = ACTIONS;
+				});
+			},
+			get: () => Machine,
+		});
+
+		// ! HACKY ALERT
+		str = str.replace(
+			/(case [a-zA-Z_\$][\w\$]*\.[a-zA-Z_\$][\w\$]*\.Disabled:return!0;default:)/,
+			"$1return true;",
+		);
+
+		return str;
+	},
+	{
+		glob: /^\/xpui\.js/,
+	},
+);
+
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(/(\(([a-zA-Z_\$][\w\$]*),"PanelSection".+?children:\[?)/, "$1__renderPanel($2),");
+
+		return str;
+	},
+	{
+		glob: /^\/dwp\-panel\-section\.js/,
+	},
+);

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

@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { React } from "../expose/React.ts";
+import { createIconComponent } from "../createIconComponent.tsx";
+import { transformer } from "../../mixin.ts";
+import { Tooltip } from "../webpack/ReactComponents.ts";
+import { UI } from "../webpack/ComponentLibrary.ts";
+import { classnames } from "../webpack/ClassNames.ts";
+import { mountRegistryAnchor } from "./mount.ts";
+import { Registry } from "./registry.ts";
+
+const registry = new (class extends Registry<React.ReactNode> {
+	override add(value: React.ReactNode): this {
+		refresh?.();
+		return super.add(value);
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		refresh?.();
+		return super.delete(value);
+	}
+})();
+export default registry;
+
+let refresh: React.DispatchWithoutAction | undefined;
+
+declare global {
+	var __renderPlaybarBarControls: any;
+}
+
+globalThis.__renderPlaybarBarControls = () => registry.all().reverse();
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(/(children:\[)([^\[]*djJumpButtonFactory)/, "$1...__renderPlaybarBarControls(),$2");
+
+		return str;
+	},
+	{
+		glob: /^\/xpui\.js/,
+	},
+);
+
+mountRegistryAnchor({
+	className: "spicetify-playbar-buttons",
+	registry,
+	setRefresh: (cb) => {
+		refresh = cb;
+	},
+	findSlot: () => {
+		const controls = document.querySelector(".main-nowPlayingBar-extraControls");
+		return controls ? { parent: controls, before: controls.firstChild } : null;
+	},
+});
+
+export type PlaybarButtonProps = {
+	label: string;
+	isActive?: boolean;
+	isActiveNoIndicator?: boolean;
+	disabled?: boolean;
+	icon?: string;
+	onClick: () => void;
+	/** Position within the module-button group; lower renders earlier. Read by the mount sorter. */
+	order?: number;
+};
+export const PlaybarButton = ({
+	label,
+	isActive = false,
+	isActiveNoIndicator = false,
+	disabled = false,
+	icon,
+	onClick,
+}: PlaybarButtonProps) => (
+	<Tooltip label={label}>
+		<UI.ButtonTertiary
+			aria-label={label}
+			size="small"
+			className={classnames(MAP.main.playbar.buttons.button.wrapper, {
+				[MAP.main.playbar.buttons.button.wrapper__indicator]: isActive,
+				[MAP.main.playbar.buttons.button.wrapper__active]: isActive || isActiveNoIndicator,
+			})}
+			disabled={disabled}
+			iconOnly={icon && (() => createIconComponent({ icon }))}
+			onClick={onClick}
+			data-active={isActive.toString()}
+			aria-pressed={isActive}
+		/>
+	</Tooltip>
+);

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { React } from "../expose/React.ts";
+import { createIconComponent } from "../createIconComponent.tsx";
+import { transformer } from "../../mixin.ts";
+import { Tooltip } from "../webpack/ReactComponents.ts";
+import { UI } from "../webpack/ComponentLibrary.ts";
+import { mountRegistryAnchor } from "./mount.ts";
+import { Registry } from "./registry.ts";
+
+const registry = new (class extends Registry<React.ReactNode> {
+	override add(value: React.ReactNode): this {
+		refresh?.();
+		return super.add(value);
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		refresh?.();
+		return super.delete(value);
+	}
+})();
+export default registry;
+
+let refresh: React.DispatchWithoutAction | undefined;
+
+declare global {
+	var __renderNowPlayingWidgets: any;
+}
+
+globalThis.__renderNowPlayingWidgets = () => registry.all();
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(/(hideButtonFactory[^\]]*)/, "$1,...__renderNowPlayingWidgets()");
+
+		return str;
+	},
+	{
+		glob: /^\/xpui\.js/,
+	},
+);
+
+mountRegistryAnchor({
+	className: "spicetify-playbar-widgets",
+	registry,
+	setRefresh: (cb) => {
+		refresh = cb;
+	},
+	findSlot: () => {
+		const left = document.querySelector(".main-nowPlayingBar-left");
+		return left ? { parent: left } : null;
+	},
+});
+
+export type PlaybarWidgetProps = { label: string; icon?: string; onClick: () => void };
+export const PlaybarWidget = ({ label, icon, onClick }: PlaybarWidgetProps) => (
+	<Tooltip label={label}>
+		<UI.ButtonTertiary
+			size="small"
+			className={undefined}
+			aria-label={label}
+			condensed={false}
+			iconOnly={icon && (() => createIconComponent({ icon }))}
+			onClick={onClick}
+		/>
+	</Tooltip>
+);

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

@@ -0,0 +1,12 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export class Registry<E> extends Set<E> {
+	_E!: E;
+
+	public all(): Array<E> {
+		return Array.from(this);
+	}
+}

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

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { transformer } from "../../mixin.ts";
+import { mountRegistryAnchor } from "./mount.ts";
+import { Registry } from "./registry.ts";
+import { React } from "../expose/React.ts";
+
+type Refresh = PromiseWithResolvers<() => void> & {
+	value: (() => void) | undefined;
+};
+
+class RootRegistry extends Registry<React.ReactNode> {
+	refresh = Object.assign(Promise.withResolvers<() => void>(), {
+		value: undefined as (() => void) | undefined,
+	});
+
+	static queueRefresh(refresh: Refresh) {
+		if (refresh.value) {
+			refresh.value();
+		} else {
+			refresh.promise.then((value) => value());
+		}
+	}
+
+	override add(value: React.ReactNode): this {
+		const ret = super.add(value);
+		RootRegistry.queueRefresh(this.refresh);
+		return ret;
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		const ret = super.delete(value);
+		RootRegistry.queueRefresh(this.refresh);
+		return ret;
+	}
+}
+
+const childrenRegistry = new RootRegistry();
+const providersRegistry = new RootRegistry();
+export default [childrenRegistry, providersRegistry];
+
+declare global {
+	var __renderRootChildren: () => React.ReactNode;
+	var __renderRootProviders: (providers: React.ReactElement[]) => React.ReactNode;
+}
+globalThis.__renderRootChildren = () =>
+	React.createElement(() => {
+		const [, refresh] = React.useReducer((n) => n + 1, 0);
+		if (!childrenRegistry.refresh.value) {
+			childrenRegistry.refresh.resolve(refresh);
+		}
+		childrenRegistry.refresh.value = refresh;
+		return childrenRegistry.all();
+	});
+globalThis.__renderRootProviders = (providers: React.ReactElement[]) => {
+	const MultiProvider = ({ children }) => {
+		const [, refresh] = React.useReducer((n) => n + 1, 0);
+		if (!providersRegistry.refresh.value) {
+			providersRegistry.refresh.resolve(refresh);
+		}
+		providersRegistry.refresh.value = refresh;
+		const providers = providersRegistry.all() as React.ReactElement[];
+		return providers.reduceRight(
+			(acc: React.ReactElement, e: React.ReactElement) => React.cloneElement(e, undefined, acc),
+			React.createElement(React.Fragment, undefined, children),
+		);
+	};
+
+	return React.useMemo(() => [providers, React.createElement(MultiProvider)].flat(), [providers]);
+};
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(
+			/\bproviders:([a-zA-Z_\$][\w\$]*),children:\[([^\]]+"data-testid.:.root")/,
+			"providers:__renderRootProviders($1),children:[__renderRootChildren(),$2",
+		);
+
+		return str;
+	},
+	{
+		glob: /^\/xpui\.js/,
+	},
+);
+
+// Transform-free path: root children (modals, portals) render into a
+// body-level anchor. Providers cannot wrap the client tree without a
+// transform, so they stay transform-only.
+mountRegistryAnchor({
+	className: "spicetify-root-children",
+	registry: childrenRegistry,
+	setRefresh: (cb) => {
+		if (cb && !childrenRegistry.refresh.value) childrenRegistry.refresh.resolve(cb);
+		childrenRegistry.refresh.value = cb;
+	},
+	findSlot: () => (document.body ? { parent: document.body } : null),
+});

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

@@ -0,0 +1,123 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { transformer } from "../../mixin.ts";
+import { Platform } from "../expose/Platform.ts";
+import { React } from "../expose/React.ts";
+import { mountRegistryAnchor } from "./mount.ts";
+import { Registry } from "./registry.ts";
+
+const registry = new (class extends Registry<React.ReactNode> {
+	override add(value: React.ReactNode): this {
+		refresh?.();
+		return super.add(value);
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		refresh?.();
+		return super.delete(value);
+	}
+})();
+export default registry;
+
+let refresh: (() => void) | undefined;
+let historyHooked = false;
+
+declare global {
+	var __renderRoutes: any;
+}
+
+globalThis.__renderRoutes = () => registry.all();
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		str = str.replace(
+			/(\(0,[a-zA-Z_$][\w$]*\.jsx\)\([a-zA-Z_$][\w$]*\.[a-zA-Z_$][\w$]*,\{[^{]*path:"\/search\/\*")/,
+			"...__renderRoutes(),$1",
+		);
+
+		return str;
+	},
+	{
+		glob: /^\/xpui\.js/,
+	},
+);
+
+// Transform-free path: the client router never learns module routes, so a
+// history-driven overlay covers the main view whenever the current path
+// matches a registered <Route>. The client renders its own not-found page
+// underneath; back/forward keep working because only real history is used.
+const matchRoute = (pathname: string, pattern: string): boolean => {
+	const path = pathname.split("/").filter(Boolean);
+	const parts = pattern.split("/").filter(Boolean);
+	for (let i = 0; i < parts.length; i++) {
+		if (parts[i] === "*") return true;
+		if (parts[i].startsWith(":")) {
+			if (path[i] === undefined) return false;
+			continue;
+		}
+		if (parts[i] !== path[i]) return false;
+	}
+	return path.length === parts.length;
+};
+
+mountRegistryAnchor({
+	className: "spicetify-route-overlay",
+	registry,
+	setRefresh: (cb) => {
+		refresh = cb;
+		if (cb && !historyHooked) {
+			historyHooked = true;
+			try {
+				Platform.getHistory().listen(() => refresh?.());
+			} catch (e) {
+				console.warn("[stdlib] route overlay cannot follow history:", e);
+			}
+		}
+	},
+	findSlot: () => {
+		const main = document.querySelector(".main-view-container");
+		return main ? { parent: main } : null;
+	},
+	renderItems: (items) => {
+		const pathname = (() => {
+			try {
+				return Platform.getHistory().location.pathname as string;
+			} catch {
+				return null;
+			}
+		})();
+		if (!pathname) return null;
+		// Items are react-router <Route path element> elements; a Route
+		// cannot render outside the client's <Routes>, so the overlay
+		// renders the element's content directly.
+		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;
+		if (!route) return null;
+		return (React as any).createElement(
+			"div",
+			{
+				className: "spicetify-route-page",
+				style: {
+					position: "absolute",
+					inset: 0,
+					// Just high enough to cover the client's own view (its
+					// positioned children top out at 2) and no higher: this page
+					// is opaque, so anything above it in the stack disappears.
+					// Theme chrome drawn over the view — panel borders, labels —
+					// sits above that and must keep showing.
+					zIndex: 2,
+					overflow: "auto",
+					// The opaque background lives in index.scss so a theme can
+					// restyle it without fighting an inline declaration.
+				},
+			},
+			(route.props.element ?? route.props.children) as never,
+		);
+	},
+});

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2026 spicetify
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { React } from "../expose/React.ts";
+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
+// its own; SettingsToggleRow (lib/primitives.tsx) is the one-boolean case.
+const listeners = new Set<() => void>();
+
+const registry = new (class extends Registry<React.ReactNode> {
+	override add(value: React.ReactNode): this {
+		super.add(value);
+		for (const l of listeners) l();
+		return this;
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		const deleted = super.delete(value);
+		for (const l of listeners) l();
+		return deleted;
+	}
+})();
+export default registry;
+
+const SpicetifyGroup = () => {
+	const [, force] = React.useReducer((n: number) => n + 1, 0);
+	React.useEffect(() => {
+		listeners.add(force);
+		return () => void listeners.delete(force);
+	}, []);
+	const rows = registry.all();
+	if (rows.length === 0) return null;
+	return (
+		<SettingsSection title="Spicetify">
+			{rows.map((row, i) => (
+				<React.Fragment key={i}>{row}</React.Fragment>
+			))}
+		</SettingsSection>
+	);
+};
+
+// The group element must not be created at import time: this module is also
+// evaluated during the mixin phase, before the client React instance exists,
+// and the jsx runtime would call into a React that is not there yet.
+if (typeof document !== "undefined") {
+	void CHUNKS.xpui.promise.then(() => {
+		settingsSection.add(React.createElement(SpicetifyGroup));
+	});
+}

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

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2024 Delusoire
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { transformer } from "../../mixin.ts";
+import { mountRegistryAnchor } from "./mount.ts";
+import { Registry } from "./registry.ts";
+
+const registry = new (class extends Registry<React.ReactNode> {
+	override add(value: React.ReactNode): this {
+		refresh?.();
+		return super.add(value);
+	}
+
+	override delete(value: React.ReactNode): boolean {
+		refresh?.();
+		return super.delete(value);
+	}
+})();
+export default registry;
+
+let refresh: (() => void) | undefined;
+
+declare global {
+	var __renderSettingSections: any;
+}
+
+globalThis.__renderSettingSections = () => registry.all();
+transformer(
+	(emit) => (str) => {
+		emit();
+
+		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()]",
+		);
+
+		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;
+	},
+});