@articles-media/articles-dev-box 1.0.35 → 1.0.37

package/dist/{Ad-BsG4C_lR.js → Ad-DluWOnz3.js}

@@ -279,8 +279,8 @@ var useAds = (params) => {
 //#endregion
 //#region src/components/Ads/Ad.jsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
-var AdDetailsModal = lazy(() => import("./AdDetailsModal-D2-4lh9e.js"));
-var AdConfirmExitModal = lazy(() => import("./AdConfirmExitModal-heFPJNdX.js"));
+var AdDetailsModal = lazy(() => import("./AdDetailsModal-DNDxC0AS.js"));
+var AdConfirmExitModal = lazy(() => import("./AdConfirmExitModal-C4PR4e_i.js"));
 function generateRandomInteger(min, max) {
 	return Math.floor(Math.random() * (max - min + 1)) + min;
 }

package/dist/Ad.js

@@ -1,2 +1,2 @@
-import { t as Ad_default } from "./Ad-BsG4C_lR.js";
+import { t as Ad_default } from "./Ad-DluWOnz3.js";
 export { Ad_default as default };

package/dist/{GameMenu-lHVT8MdJ.js → GameMenu-CyW1MF3Y.js}

@@ -20,12 +20,15 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 		})]
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: (0, import_classnames.default)("menu-bar", {
+		className: (0, import_classnames.default)(`menu-bar ${menuBarConfig.menuBarClassName || ""}`, {
 			"card card-articles p-1 justify-content-center": menuBarConfig.style == "Bar",
 			[menuBarConfig.style.replaceAll(" ", "_")]: menuBarConfig.style,
 			[menuBarConfig.menuBarButtonPosition]: menuBarConfig.menuBarButtonPosition
 		}),
-		style: { ...menuBarConfig.style == "Bar" && { borderRadius: "0px" } },
+		style: {
+			...menuBarConfig.menuBarCssStyle,
+			...menuBarConfig.style == "Bar" && { borderRadius: "0px" }
+		},
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex-header align-items-center",
 			children: [
@@ -65,20 +68,30 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 //#endregion
 //#region src/components/Games/GameMenu/GameMenu.jsx
 /**
-* @param {Object} props
-* @param {Function} props.useStore
-* @param {React.ComponentType} props.LeftPanelContent
-* @param {"Bar" | "Corner Button"} props.menuBarStyle
-* @param {"Static Panel" | "Floating Panel"} [props.sidebarStyle]
+* @param {Object} props - The component props.
+* @param {Function} props.useStore - The Zustand store hook used for state management.
+* @param {React.ComponentType} props.LeftPanelContent - Component to render inside the sidebar and mobile-menu panel.
+* @param {Object} props.sidebarConfig - Configuration for the sidebar appearance and behavior.
+* @param {"Static Panel" | "Floating Panel"} props.sidebarConfig.style - Defines if the panel is static or floats over content.
+* @param {string} [props.sidebarConfig.className] - Additional CSS class for the sidebar container.
+* @param {Object} [props.sidebarConfig.cssStyle] - Inline styles to apply to the sidebar.
+* @param {Object} props.menuBarConfig - Configuration for the navigation menu bar.
+* @param {"Bar" | "Corner Button"} props.menuBarConfig.style - Visual style of the menu trigger (a full bar or a small corner button).
+* @param {"left" | "right"} [props.menuBarConfig.menuBarButtonPosition] - Position of the menu button when using "Corner Button" style.
+* @param {string} [props.menuBarConfig.menuBarClassName] - Additional CSS class for the menu bar.
+* @param {Object} [props.menuBarConfig.menuBarCssStyle] - Inline styles to apply to the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.leftSlotChildren] - Content to render in the left slot of the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.centerSlotChildren] - Content to render in the center slot of the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.rightSlotChildren] - Content to render in the right slot of the menu bar.
 */
 function GameMenu(props) {
-	const { useStore, LeftPanelContent, sidebarStyleConfig, sidebarStyle, menuBarConfig, menuBarStyle, menuBarButtonPosition } = props;
+	const { useStore, LeftPanelContent, sidebarConfig, menuBarConfig } = props;
 	const sidebar = useStore((state) => state.sidebar);
 	const setShowMenu = useStore((state) => state.setShowMenu);
 	useEffect(() => {
 		if (sidebar == true) setShowMenu(false);
 	}, [sidebar]);
-	const convertedSidebarStyle = sidebarStyle.replaceAll(" ", "_");
+	const convertedSidebarStyle = (sidebarConfig?.style).replaceAll(" ", "_");
 	if (!useStore) {
 		console.error("GameMenu: useStore is required");
 		return null;
@@ -86,21 +99,20 @@ function GameMenu(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
 		useStore,
 		LeftPanelContent,
-		menuBarConfig: {
-			...menuBarConfig,
-			style: menuBarConfig.style || menuBarStyle,
-			menuBarButtonPosition: menuBarConfig.menuBarButtonPosition || menuBarButtonPosition
-		}
+		menuBarConfig: { ...menuBarConfig }
 	}), /* @__PURE__ */ jsx("div", {
-		className: `panel-left card rounded-0 ${convertedSidebarStyle}`,
-		style: { ...convertedSidebarStyle == "Floating_Panel" && {
-			position: "absolute",
-			top: "0.5rem",
-			left: "0.5rem",
-			zIndex: 1,
-			height: "calc(100vh - 1rem)",
-			backgroundColor: "color-mix(in srgb, var(--bs-card-bg) 50%, transparent)"
-		} },
+		className: `panel-left card rounded-0 ${convertedSidebarStyle} ${sidebarConfig?.className || ""}`,
+		style: {
+			...sidebarConfig?.cssStyle,
+			...convertedSidebarStyle == "Floating_Panel" && {
+				position: "absolute",
+				top: "0.5rem",
+				left: "0.5rem",
+				zIndex: 1,
+				height: "calc(100vh - 1rem)",
+				backgroundColor: "color-mix(in srgb, var(--bs-card-bg) 50%, transparent)"
+			}
+		},
 		children: /* @__PURE__ */ jsx(LeftPanelContent, {})
 	})] });
 }

package/dist/GameMenu.js

@@ -1,2 +1,2 @@
-import { t as GameMenu } from "./GameMenu-lHVT8MdJ.js";
+import { t as GameMenu } from "./GameMenu-CyW1MF3Y.js";
 export { GameMenu as default };

package/dist/GameScoreboard.js

@@ -1,2 +1,2 @@
-import { t as GameScoreboard } from "./GameScoreboard-DVoXXDnM.js";
+import { t as GameScoreboard } from "./GameScoreboard-CYuTBE_E.js";
 export { GameScoreboard as default };

package/dist/GlobalBody.js

@@ -1,11 +1,11 @@
 "use client";
 import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
-import { n as useMainSiteStatus, t as useAuthSiteStatus } from "./useAuthSiteStatus-ZK1GbPBV.js";
+import { n as useMainSiteStatus, t as useAuthSiteStatus } from "./useAuthSiteStatus-D-D-KwEN.js";
 import { Suspense, lazy, memo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Global/GlobalBody.jsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
-var StatusModal = lazy(() => import("./StatusModal-BXRbJQ10.js"));
+var StatusModal = lazy(() => import("./StatusModal-DkHAimHp.js"));
 function GlobalBody(props) {
 	const [statusModal, setStatusModal] = useState(false);
 	const { data: mainSiteStatus, error: mainSiteStatusError, isLoading: mainSiteStatusLoading, mutate: mainSiteStatusMutate } = useMainSiteStatus({ disable: process.env.NODE_ENV !== "development" });

package/dist/SessionButton-D3cupnzD.js

@@ -0,0 +1,102 @@
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import SignInButton from "./SignInButton.js";
+import useUserDetails from "./useUserDetails.js";
+import useUserToken from "./useUserToken.js";
+import { t as ViewUserModal } from "./ViewUserModal-Dgo1C4sR.js";
+import FriendsList from "./FriendsList.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Modal } from "react-bootstrap";
+//#region src/components/User/SignOutModal.jsx
+function SignOutModal({ show, setShow, action }) {
+	return /* @__PURE__ */ jsxs(Modal, {
+		show,
+		size: "md",
+		className: `articles-modal`,
+		centered: true,
+		onHide: () => setShow(false),
+		children: [
+			/* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Confirm Sign Out" }) }),
+			/* @__PURE__ */ jsx(Modal.Body, { children: "Are you sure you want to sign out? This will also sign you out on https://articles.media and other Articles Media services." }),
+			/* @__PURE__ */ jsxs(Modal.Footer, {
+				className: "justify-content-between",
+				children: [/* @__PURE__ */ jsxs(ArticlesButton, {
+					variant: "articles",
+					onClick: () => {
+						setShow(false);
+					},
+					children: [/* @__PURE__ */ jsx("i", { className: "fad fa-redo me-2" }), /* @__PURE__ */ jsx("span", { children: "Cancel" })]
+				}), /* @__PURE__ */ jsxs(ArticlesButton, {
+					variant: "articles",
+					onClick: () => {
+						action();
+						setShow(false);
+					},
+					children: [/* @__PURE__ */ jsx("i", { className: "fad fa-times me-2" }), "Confirm"]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/User/SessionButton.jsx
+function SessionButton({ port, friendsButton }) {
+	const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(port);
+	const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
+	const [showFriendsModal, setShowFriendsModal] = useState(false);
+	const [confirmSignOut, setConfirmSignOut] = useState(false);
+	return /* @__PURE__ */ jsx(Fragment, { children: !userDetails ? /* @__PURE__ */ jsx(SignInButton, { className: "mb-2" }) : /* @__PURE__ */ jsxs("div", {
+		className: "w-100 d-flex align-items-stretch mb-2",
+		children: [
+			/* @__PURE__ */ jsx(ViewUserModal, {
+				buttonType: "Link",
+				className: "w-100",
+				children: /* @__PURE__ */ jsxs(ArticlesButton, {
+					className: "w-100",
+					small: true,
+					onClick: () => {
+						console.log("userDetails", userDetails);
+					},
+					children: [
+						/* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" }),
+						"Logged in as ",
+						userDetails?.display_name || "Unknown User"
+					]
+				})
+			}),
+			confirmSignOut && /* @__PURE__ */ jsx(SignOutModal, {
+				show: confirmSignOut,
+				setShow: setConfirmSignOut,
+				action: () => {
+					const logoutLink = `/api/signout?redirect=${encodeURIComponent(window.location.href)}`;
+					window.location.assign(logoutLink);
+				}
+			}),
+			showFriendsModal && /* @__PURE__ */ jsx(FriendsList, {
+				show: showFriendsModal,
+				setShow: setShowFriendsModal,
+				componentType: "modal"
+			}),
+			friendsButton && /* @__PURE__ */ jsx(ArticlesButton, {
+				className: "",
+				small: true,
+				title: "My Friends",
+				onClick: () => {
+					setShowFriendsModal(true);
+				},
+				children: /* @__PURE__ */ jsx("i", { className: "fad fa-users" })
+			}),
+			/* @__PURE__ */ jsx(ArticlesButton, {
+				className: "",
+				small: true,
+				title: "Sign out",
+				onClick: () => {
+					setConfirmSignOut(true);
+				},
+				children: /* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" })
+			})
+		]
+	}) });
+}
+//#endregion
+export { SessionButton as t };

package/dist/SessionButton.js

@@ -1,70 +1,7 @@
-import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
-import SignInButton from "./SignInButton.js";
-import useUserDetails from "./useUserDetails.js";
-import useUserToken from "./useUserToken.js";
-import { t as ViewUserModal } from "./ViewUserModal-Dgo1C4sR.js";
-import FriendsList from "./FriendsList.js";
-import { useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/User/SessionButton.jsx
-function SessionButton({ port, friendsButton }) {
-	const { data: userToken, error: userTokenError, isLoading: userTokenLoading, mutate: userTokenMutate } = useUserToken(port);
-	const { data: userDetails, error: userDetailsError, isLoading: userDetailsLoading, mutate: userDetailsMutate } = useUserDetails({ token: userToken });
-	const logoutLink = `/api/signout`;
-	const [showFriendsModal, setShowFriendsModal] = useState(false);
-	return /* @__PURE__ */ jsx(Fragment, { children: !userDetails ? /* @__PURE__ */ jsx(SignInButton, { className: "mb-2" }) : /* @__PURE__ */ jsxs("div", {
-		className: "w-100 d-flex align-items-stretch mb-2",
-		children: [
-			/* @__PURE__ */ jsx(ViewUserModal, {
-				buttonType: "Link",
-				className: "w-100",
-				children: /* @__PURE__ */ jsxs(ArticlesButton, {
-					className: "w-100",
-					small: true,
-					onClick: () => {
-						console.log("userDetails", userDetails);
-					},
-					children: [
-						/* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" }),
-						"Logged in as ",
-						userDetails?.display_name || "Unknown User"
-					]
-				})
-			}),
-			showFriendsModal && /* @__PURE__ */ jsx(FriendsList, {
-				show: showFriendsModal,
-				setShow: setShowFriendsModal,
-				componentType: "modal"
-			}),
-			friendsButton && /* @__PURE__ */ jsx(ArticlesButton, {
-				className: "",
-				small: true,
-				title: "My Friends",
-				onClick: () => {
-					setShowFriendsModal(true);
-				},
-				children: /* @__PURE__ */ jsx("i", { className: "fad fa-users" })
-			}),
-			/* @__PURE__ */ jsx(ArticlesButton, {
-				className: "",
-				small: true,
-				title: "Sign out",
-				onClick: () => {
-					fetch(logoutLink, {
-						method: "GET",
-						headers: {}
-					}).then((response) => response.json()).then((data) => {
-						console.log("Logout successful:", data);
-						userTokenMutate(null);
-						userDetailsMutate(null);
-					}).catch((error) => {
-						console.error("Logout error:", error);
-					});
-				},
-				children: /* @__PURE__ */ jsx("i", { className: "fad fa-sign-out" })
-			})
-		]
-	}) });
-}
-//#endregion
+"use client";
+import "./SignInButton.js";
+import "./useUserDetails.js";
+import "./useUserToken.js";
+import "./FriendsList.js";
+import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
 export { SessionButton as default };

package/dist/{SettingsModal-yJTqjsyc.js → SettingsModal-DJ5jCjVW.js}

@@ -232,7 +232,7 @@ function OtherTab({ useStore, config }) {
 var package_default = {
 	name: "@articles-media/articles-dev-box",
 	description: "Shared code, functions, and components for different Articles Media projects.",
-	version: "1.0.35",
+	version: "1.0.37",
 	type: "module",
 	imports: { "#root/src/*": "./src/*" },
 	main: "./dist/index.js",
@@ -300,25 +300,10 @@ var package_default = {
 //#endregion
 //#region src/components/Games/Settings/DebugTab.jsx
 function DebugTab({ useStore, config }) {
-	useStore((state) => state?.debug);
-	useStore((state) => state?.setDebug);
-	useStore((state) => state?.toontownMode);
-	useStore((state) => state?.setToontownMode);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "mb-3",
-			children: ["dev-box version: ", package_default.version]
-		}),
-		/* @__PURE__ */ jsx("div", { children: "Future Thing" }),
-		/* @__PURE__ */ jsx("div", {
-			className: "mb-3",
-			children: [false, true].map((level, i) => /* @__PURE__ */ jsx(ArticlesButton, {
-				onClick: () => {},
-				children: "Placeholder"
-			}, i))
-		}),
-		config?.tabs?.Debug?.children
-	] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: ["dev-box version: ", package_default.version]
+	}), config?.tabs?.Debug?.children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", {}), config?.tabs?.Debug?.children] })] });
 }
 //#endregion
 //#region src/components/Games/Settings/SettingsModal.jsx

package/dist/SettingsModal.js

@@ -1,2 +1,2 @@
-import { t as SettingsModal } from "./SettingsModal-yJTqjsyc.js";
+import { t as SettingsModal } from "./SettingsModal-DJ5jCjVW.js";
 export { SettingsModal as default };

package/dist/{StatusModal-BXRbJQ10.js → StatusModal-DkHAimHp.js}

@@ -1,5 +1,5 @@
 import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
-import { n as useMainSiteStatus, t as useAuthSiteStatus } from "./useAuthSiteStatus-ZK1GbPBV.js";
+import { n as useMainSiteStatus, t as useAuthSiteStatus } from "./useAuthSiteStatus-D-D-KwEN.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Modal } from "react-bootstrap";

package/dist/index.js

@@ -3,16 +3,16 @@ import SignInButton from "./SignInButton.js";
 import useUserDetails from "./useUserDetails.js";
 import useUserToken from "./useUserToken.js";
 import { t as ViewUserModal } from "./ViewUserModal-Dgo1C4sR.js";
-import { t as Ad_default } from "./Ad-BsG4C_lR.js";
+import { t as Ad_default } from "./Ad-DluWOnz3.js";
 import useUserFriends from "./useUserFriends.js";
 import FriendsList from "./FriendsList.js";
-import SessionButton from "./SessionButton.js";
+import { t as SessionButton } from "./SessionButton-D3cupnzD.js";
 import ArticlesAd from "./ArticlesAd.js";
-import { t as GameMenu } from "./GameMenu-lHVT8MdJ.js";
-import { t as GameScoreboard } from "./GameScoreboard-DVoXXDnM.js";
+import { t as GameMenu } from "./GameMenu-CyW1MF3Y.js";
+import { t as GameScoreboard } from "./GameScoreboard-CYuTBE_E.js";
 import GlobalHead from "./GlobalHead.js";
 import GlobalBody_default from "./GlobalBody.js";
-import { t as SettingsModal } from "./SettingsModal-yJTqjsyc.js";
+import { t as SettingsModal } from "./SettingsModal-DJ5jCjVW.js";
 import CreditsModal from "./CreditsModal.js";
 import DarkModeHandler from "./DarkModeHandler.js";
 import ToontownModeHandler from "./ToontownModeHandler.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@articles-media/articles-dev-box",
   "description": "Shared code, functions, and components for different Articles Media projects.",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"