feat: Added skins

packages/apps/browser/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/browser
 
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.2
 
 ### Patch Changes

packages/apps/browser/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/browser",
 	"description": "A ProzillaOS application for browsing the internet.",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"homepage": "https://os.prozilla.dev/browser",
 	"author": {
 		"name": "Prozilla",

packages/apps/calculator/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/calculator
 
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.2
 
 ### Patch Changes

packages/apps/calculator/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/calculator",
 	"description": "A ProzillaOS application for making basic calculations.",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"homepage": "https://os.prozilla.dev/calculator",
 	"author": {
 		"name": "Prozilla",

packages/apps/file-explorer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/file-explorer
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.13
 
 ### Patch Changes

packages/apps/file-explorer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.0.13",
+	"version": "1.0.14",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",

packages/apps/logic-sim/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/logic-sim
 
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.2
 
 ### Patch Changes

packages/apps/logic-sim/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/logic-sim",
 	"description": "A ProzillaOS application for simulating digital logic.",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"homepage": "https://os.prozilla.dev/logic-sim",
 	"author": {
 		"name": "Prozilla",

packages/apps/media-viewer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/media-viewer
 
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.2
 
 ### Patch Changes

packages/apps/media-viewer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/media-viewer",
 	"description": "A ProzillaOS application for viewing different kinds of media.",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"homepage": "https://os.prozilla.dev/media-viewer",
 	"author": {
 		"name": "Prozilla",

packages/apps/settings/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/settings
 
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+  - @prozilla-os/file-explorer@1.0.14
+
 ## 1.0.2
 
 ### Patch Changes

packages/apps/settings/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/settings",
 	"description": "A settings app for ProzillaOS.",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"homepage": "https://os.prozilla.dev/settings",
 	"author": {
 		"name": "Prozilla",

packages/apps/terminal/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/terminal
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.6
 
 ### Patch Changes

packages/apps/terminal/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",

packages/apps/text-editor/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/text-editor
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+
 ## 1.0.6
 
 ### Patch Changes

packages/apps/text-editor/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @prozilla-os/core
 
+## 1.1.0
+
+### Minor Changes
+
+- Added skins feature
+
 ## 1.0.16
 
 ### Patch Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.16",
+	"version": "1.1.0",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
@@ -25,6 +25,7 @@
 		"@fortawesome/free-regular-svg-icons": "^6.5.2",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
+		"@prozilla-os/skins": "workspace:*",
 		"react": "^18.3.1",
 		"react-draggable": "^4.4.6",
 		"react-error-boundary": "^4.0.13",
@@ -35,6 +36,7 @@
 		"@types/node": "^20.14.5",
 		"@types/react": "^18.3.3",
 		"@vitejs/plugin-react-swc": "^3.7.0",
+		"glob": "^11.0.0",
 		"typescript": "^5.4.5",
 		"vite": "^5.3.1",
 		"vite-plugin-dts": "^3.9.1",

packages/core/src/components/_utils/button/Button.tsx

@@ -3,6 +3,7 @@ import styles from "./Button.module.css";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
 import { HTMLAttributeAnchorTarget, ReactNode } from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useClassNames } from "../../../hooks";
 
 interface ButtonProps {
 	className?: string;
@@ -27,7 +28,7 @@ export function Button({ className, href, children, icon, target, ...props }: Bu
 			target={target ?? "_blank"}
 			rel="noreferrer"
 			tabIndex={0}
-			className={classNames.join(" ")}
+			className={useClassNames(classNames, "Button", "Link")}
 		>
 			{children}
 			<FontAwesomeIcon icon={icon ?? faExternalLink}/>
@@ -36,7 +37,7 @@ export function Button({ className, href, children, icon, target, ...props }: Bu
 		return (<button
 			{...props}
 			tabIndex={0}
-			className={classNames.join(" ")}
+			className={useClassNames(classNames, "Button")}
 		>
 			{children}
 			{icon != null

packages/core/src/components/_utils/directory-list/DirectoryList.tsx

@@ -5,6 +5,7 @@ import { VirtualFile } from "../../../features/virtual-drive/file";
 import { VirtualFolder } from "../../../features/virtual-drive/folder";
 import { Vector2 } from "../../../features";
 import { Interactable } from "../interactable/Interactable";
+import { useClassNames } from "../../../hooks/_utils/classNames";
 
 export interface OnSelectionChangeParams {
 	files?: string[];
@@ -144,9 +145,12 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
 	if (fileClassName)
 		fileClassNames.push(fileClassName);
 
+	folderClassName = useClassNames(folderClassNames, "DirectoryList", "Folder");
+	fileClassName = useClassNames(fileClassNames, "DirectoryList", "File");
+
 	return <div
 		ref={ref}
-		className={classNames.join(" ")}
+		className={useClassNames(classNames, "DirectoryList")}
 		onClick={clearSelection}
 		onMouseDown={onStartRectSelect as unknown as MouseEventHandler}
 		{...props}
@@ -159,7 +163,7 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
 			<Interactable
 				key={folder.id}
 				tabIndex={0}
-				className={folderClassNames.join(" ")}
+				className={folderClassName}
 				data-selected={selectedFolders.includes(folder.id)}
 				onContextMenu={(event: MouseEvent) => {
 					onContextMenuFolder?.(event, folder);
@@ -181,7 +185,7 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
 			<Interactable
 				key={file.id}
 				tabIndex={0}
-				className={fileClassNames.join(" ")}
+				className={fileClassName}
 				data-selected={selectedFiles.includes(file.id)}
 				onContextMenu={(event: MouseEvent) => {
 					onContextMenuFile?.(event, file);

packages/core/src/components/_utils/header-menu/HeaderMenu.tsx

@@ -3,11 +3,12 @@ import { ActionsProps, Actions } from "../../actions/Actions";
 import { useZIndex } from "../../../hooks/z-index/zIndex";
 import { ZIndexManager } from "../../../features/z-index/zIndexManager";
 import { ActionsManager } from "../../../features/actions/actionsManager";
+import { useClassNames } from "../../../hooks";
 
 export function HeaderMenu({ children, ...props }: ActionsProps) {
 	const zIndex = useZIndex({ groupIndex: ZIndexManager.GROUPS.MODALS, index: 5 });
 
-	return <div className={styles.HeaderMenu} style={{ zIndex }}>
+	return <div className={useClassNames([styles.HeaderMenu], "HeaderMenu")} style={{ zIndex }}>
 		<Actions mode={ActionsManager.MODES.headerMenu} {...props}>
 			{children}
 		</Actions>

packages/core/src/components/_utils/progress-bar/ProgressBar.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import styles from "./ProgressBar.module.css";
 import { clamp } from "../../../features/_utils/math.utils";
+import { useClassNames } from "../../../hooks";
 
 interface ProgressBarProps {
 	fillPercentage: number;
@@ -10,9 +11,9 @@ interface ProgressBarProps {
 	className?: string;
 }
 
-export function ProgressBar({ fillPercentage, fillColor, backgroundColor, align = "left", className = "" }: ProgressBarProps) {
+export function ProgressBar({ fillPercentage, fillColor, backgroundColor, align = "left", className }: ProgressBarProps) {
 	return (
-		<div className={`${styles.ProgressBar} ${className}`} style={{ backgroundColor: backgroundColor }}>
+		<div className={useClassNames([styles.ProgressBar, className], "ProgressBar")} style={{ backgroundColor: backgroundColor }}>
 			<div
 				className={`${styles.Fill} ${align}`}
 				style={{ backgroundColor: fillColor, "--fill": `${clamp(fillPercentage, 0.1, 100)}%` } as CSSProperties}

packages/core/src/components/desktop/Desktop.tsx

@@ -16,6 +16,7 @@ import { VirtualFolder, VirtualFolderLink } from "../../features/virtual-drive/f
 import { useSettingsManager, useWindowsManager, useVirtualRoot, useWindowedModal, useContextMenu, useSystemManager } from "../../hooks";
 import { DirectoryList } from "../_utils";
 import { FileEventHandler, FolderEventHandler } from "../_utils/directory-list/DirectoryList";
+import { useClassNames } from "../../hooks";
 
 export const Desktop = memo(() => {
 	const { desktopConfig, appsConfig } = useSystemManager();
@@ -170,11 +171,12 @@ export const Desktop = memo(() => {
 	};
 
 	const iconScale = 1 + ((isValidInteger(iconSize) ? iconSize : desktopConfig.defaultIconSize) - 1) / 5;
+	const wallpaperClassName = useClassNames([styles.Wallpaper], "Desktop", "Wallpaper");
 
 	return <>
 		<ShortcutsListener/>
 		<div
-			className={styles.Desktop}
+			className={useClassNames([styles.Desktop], "Desktop")}
 			onContextMenu={onContextMenu as unknown as MouseEventHandler}
 		>
 			{showIcons && <DirectoryList
@@ -208,7 +210,12 @@ export const Desktop = memo(() => {
 				onContextMenuFolder={onContextMenuFolder as unknown as FolderEventHandler}
 			/>}
 			{wallpaper
-				? <img src={wallpaper} className={styles.Wallpaper} alt="Desktop wallpaper" onError={onError}/>
+				? <img
+					src={wallpaper}
+					className={wallpaperClassName}
+					alt="Desktop wallpaper"
+					onError={onError}
+				/>
 				: null
 			}
 		</div>

packages/core/src/components/modals/ModalView.tsx

@@ -3,6 +3,7 @@ import { Modal } from "../../features/modals/modal";
 import { OutsideClickListener } from "../../hooks/_utils/outsideClick";
 import styles from "./ModalView.module.css";
 import { useEffect } from "react";
+import { useClassNames } from "../../hooks";
 
 export interface ModalProps {
 	modal?: Modal;
@@ -38,7 +39,7 @@ export const ModalView: FC<ModalProps> = memo(({ modal }) => {
 	const Modal = modal.element;
 
 	const Container = () => (<div
-		className={styles.ModalView}
+		className={useClassNames([styles.ModalView], "ModalView")}
 		style={{ "--position-x": modal?.position.x, "--position-y": modal?.position.y } as CSSProperties}
 	>
 		<Modal modal={modal} {...modal?.props}/>

packages/core/src/components/modals/ModalsView.tsx

@@ -4,6 +4,7 @@ import styles from "./ModalsView.module.css";
 import { useModals } from "../../hooks/modals/modalsContext";
 import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
 import { Modal } from "../../features/modals/modal";
+import { useClassNames } from "../../hooks";
 
 export const ModalsView = memo(() => {
 	const ref = useRef<HTMLDivElement>(null);
@@ -24,7 +25,7 @@ export const ModalsView = memo(() => {
 			modalsManager.containerRef = ref as MutableRefObject<HTMLDivElement>;
 	}, [modalsManager, ref]);
 
-	return <div ref={ref} className={styles.ModalsView}>
+	return <div ref={ref} className={useClassNames([styles.ModalsView], "ModalsView")}>
 		{sortedModals?.map((modal) =>
 			<ModalView key={modal.id} modal={modal}/>
 		)}

packages/core/src/components/prozilla-os/Main.module.css

@@ -1,4 +1,4 @@
-.ProzillaOS {
+.Main {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -9,6 +9,6 @@
 	pointer-events: none;
 }
 
-.ProzillaOS > * {
+.Main > * {
 	pointer-events: auto;
 }

packages/core/src/components/prozilla-os/Main.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import styles from "./Main.module.css";
+import { useClassNames } from "../../hooks/_utils/classNames";
+
+interface MainProps {
+	children: ReactNode;
+}
+
+export function Main({ children }: MainProps) {
+	return <div
+		onContextMenu={(event) => { event.preventDefault(); }}
+		className={useClassNames([styles.Main], "Main")}
+	>
+		{children}
+	</div>;
+}

packages/core/src/components/prozilla-os/ProzillaOS.tsx

@@ -1,5 +1,4 @@
 import { memo, ReactElement, ReactNode } from "react";
-import styles from "./ProzillaOS.module.css";
 import { VirtualRootProvider } from "../../hooks/virtual-drive/virtualRootProvider";
 import { ZIndexManagerProvider } from "../../hooks/z-index/zIndexManagerProvider";
 import { WindowsManagerProvider } from "../../hooks/windows/windowsManagerProvider";
@@ -18,8 +17,10 @@ import { WindowsConfig, WindowsConfigOptions } from "../../features/system/confi
 import { OptionalInterface } from "../../types/utils";
 import { TrackingManagerProvider } from "../../hooks/tracking/trackingManagerProvider";
 import { VirtualDriveConfig, VirtualDriveConfigOptions } from "../../features/system/configs/virtualDriveConfig";
+import { Main } from "./Main";
+import { Skin } from "@prozilla-os/skins";
 
-interface ProzillaOSProps {
+export interface ProzillaOSProps {
 	systemName?: string;
 	tagLine?: string;
 	config?: {
@@ -31,16 +32,18 @@ interface ProzillaOSProps {
 		tracking?: OptionalInterface<TrackingConfigOptions>;
 		windows?: OptionalInterface<WindowsConfigOptions>;
 		virtualDrive?: OptionalInterface<VirtualDriveConfigOptions>;
-	}
+	},
+	skin?: Skin;
 	children?: ReactNode;
 }
 
 export const ProzillaOS = memo(function(props: ProzillaOSProps): ReactElement {
-	const { systemName, tagLine, config, children } = props;
+	const { systemName, tagLine, skin, config, children } = props;
 
 	const systemParams = {
 		systemName,
 		tagLine,
+		skin,
 		appsConfig: new AppsConfig(config?.apps),
 		desktopConfig: new DesktopConfig(config?.desktop),
 		miscConfig: new MiscConfig(config?.misc),
@@ -59,12 +62,9 @@ export const ProzillaOS = memo(function(props: ProzillaOSProps): ReactElement {
 						<ModalsManagerProvider>
 							<SettingsManagerProvider>
 								<ThemeProvider>
-									<div
-										onContextMenu={(event) => { event.preventDefault(); }}
-										className={styles.ProzillaOS}
-									>
+									<Main>
 										{children}
-									</div>
+									</Main>
 								</ThemeProvider>
 							</SettingsManagerProvider>
 						</ModalsManagerProvider>

packages/core/src/components/taskbar/Taskbar.tsx

@@ -18,7 +18,7 @@ import { useWindows } from "../../hooks/windows/windowsContext";
 import { ZIndexManager } from "../../features/z-index/zIndexManager";
 import { useZIndex } from "../../hooks/z-index/zIndex";
 import { Battery, Calendar, Network, Volume } from "./indicators";
-import { useSystemManager } from "../../hooks";
+import { useClassNames, useSystemManager } from "../../hooks";
 import { App, AppsConfig } from "../../features";
 
 export const Taskbar = memo(() => {
@@ -123,14 +123,14 @@ export const Taskbar = memo(() => {
 
 	return <div
 		style={{ "--taskbar-height": `${taskbarConfig.height}px`, zIndex } as CSSProperties}
-		className={styles.Taskbar}
+		className={useClassNames([styles.Taskbar], "Taskbar")}
 		data-allow-context-menu={true}
 		onContextMenu={(event) => {
 			if ((event.target as HTMLElement).getAttribute("data-allow-context-menu"))
 				onContextMenu(event as unknown as MouseEvent<HTMLElement, MouseEvent>);
 		}}
 	>
-		<div className={styles.MenuIcons}>
+		<div className={useClassNames([styles.MenuIcons], "Taskbar", "MenuIcons")}>
 			<div className={styles.HomeContainer}>
 				<OutsideClickListener onOutsideClick={() => { updateShowHome(false); }}>
 					<button
@@ -164,7 +164,7 @@ export const Taskbar = memo(() => {
 				</OutsideClickListener>
 			</div>
 		</div>
-		<div className={styles.AppIconsContainer} data-allow-context-menu={true} style={{ boxShadow }}>
+		<div className={useClassNames([styles.AppIconsContainer], "Taskbar", "AppIcons")} data-allow-context-menu={true} style={{ boxShadow }}>
 			<div
 				className={styles.AppIcons}
 				data-allow-context-menu={true}
@@ -187,7 +187,7 @@ export const Taskbar = memo(() => {
 				})}
 			</div>
 		</div>
-		<div className={styles.UtilIcons}>
+		<div className={useClassNames([styles.UtilIcons], "Taskbar", "UtilIcons")}>
 			<Battery showUtilMenu={showUtilMenu} hideUtilMenus={hideUtilMenus}/>
 			<Network showUtilMenu={showUtilMenu} hideUtilMenus={hideUtilMenus}/>
 			<Volume showUtilMenu={showUtilMenu} hideUtilMenus={hideUtilMenus}/>

packages/core/src/components/taskbar/app-icon/AppIcon.tsx

@@ -1,5 +1,5 @@
 import { FC, memo, MouseEvent } from "react";
-import { App } from "../../../features/system/configs/app";
+import { App } from "../../../features/";
 import styles from "./AppIcon.module.css";
 import { ReactSVG } from "react-svg";
 import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext";
@@ -7,6 +7,7 @@ import { useContextMenu } from "../../../hooks/modals/contextMenu";
 import { Actions } from "../../actions/Actions";
 import { ClickAction } from "../../actions/actions/ClickAction";
 import { WindowsManager } from "../../../features/windows/windowsManager";
+import { useClassNames } from "../../../hooks";
 
 interface AppButtonProps {
 	app: App;
@@ -45,6 +46,8 @@ export const AppButton: FC<AppButtonProps> = memo(({ app, windowsManager, active
 	if (!visible)
 		classNames.push(styles.Hidden);
 
+	const className = useClassNames(classNames, "Taskbar", "AppIcon");
+
 	if (!windowsManager)
 		return;
 
@@ -52,7 +55,7 @@ export const AppButton: FC<AppButtonProps> = memo(({ app, windowsManager, active
 		<button
 			key={app.id}
 			tabIndex={0}
-			className={classNames.join(" ")}
+			className={className}
 			onClick={() => {
 				const windowId =  windowsManager.getAppWindowId(app.id);
 

packages/core/src/components/taskbar/indicators/Calendar.tsx

@@ -37,17 +37,21 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
 		<button className={styles.Button} title="Date & Time" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
-			{date.toLocaleString("en-GB", {
-				hour: "numeric",
-				minute: "numeric",
-				hour12: false,
-			})}
+			<p>
+				{date.toLocaleString("en-GB", {
+					hour: "numeric",
+					minute: "numeric",
+					hour12: false,
+				})}
+			</p>
 			<br/>
-			{date.toLocaleDateString("en-GB", {
-				day: "numeric",
-				month: "short",
-				year: "numeric",
-			})}
+			<p>
+				{date.toLocaleDateString("en-GB", {
+					day: "numeric",
+					month: "short",
+					year: "numeric",
+				})}
+			</p>
 		</button>
 		<UtilMenu active={showMenu} setActive={setShowMenu} className={styles.Menu}>
 			<p className={styles.Time}>{date.toLocaleString("en-GB", {

packages/core/src/components/taskbar/menus/HomeMenu.tsx

@@ -6,7 +6,7 @@ import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawe
 import { ReactSVG } from "react-svg";
 import { useEffect, useState } from "react";
 import { AppsConfig, closeViewport, Vector2 } from "../../../features";
-import { useWindowsManager, useVirtualRoot, useKeyboardListener, useSystemManager } from "../../../hooks";
+import { useWindowsManager, useVirtualRoot, useKeyboardListener, useSystemManager, useClassNames } from "../../../hooks";
 import { utilStyles } from "../../../styles";
 
 interface HomeMenuProps {
@@ -61,7 +61,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 
 	return (
 		<div className={classNames.join(" ")}>
-			<div className={`${styles.HomeMenu} ${taskbarStyles.Menu}`}>
+			<div className={useClassNames([styles.HomeMenu, taskbarStyles.Menu], "Taskbar", "Menu", "Home")}>
 				<div className={styles.Buttons}>
 					<button tabIndex={tabIndex} onClick={() => { closeViewport(true, systemName); }}>
 						<FontAwesomeIcon icon={faPowerOff}/>

packages/core/src/components/taskbar/menus/SearchMenu.tsx

@@ -3,9 +3,9 @@ import appStyles from "./AppList.module.css";
 import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import { ChangeEventHandler, MutableRefObject, useEffect, useState } from "react";
 import { useKeyboardListener } from "../../../hooks/_utils/keyboard";
-import { App } from "../../../features/system/configs/app";
+import { App } from "../../../features/";
 import { ReactSVG } from "react-svg";
-import { useSystemManager } from "../../../hooks";
+import { useClassNames, useSystemManager } from "../../../hooks";
 
 interface SearchMenuProps {
 	active: boolean;
@@ -68,7 +68,7 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 	useKeyboardListener({ onKeyDown });
 
 	return <div className={classNames.join(" ")}>
-		<div className={styles.SearchMenu}>
+		<div className={useClassNames([styles.SearchMenu], "Taskbar", "Menu", "Search")}>
 			<div className={appStyles.AppList}>
 				{apps?.map(({ name, id }) => 
 					<button

packages/core/src/components/taskbar/menus/UtilMenu.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import styles from "./UtilMenu.module.css";
+import { useClassNames } from "../../../hooks";
 
 interface UtilMenuProps {
 	active: boolean;
@@ -16,7 +17,7 @@ export function UtilMenu({ active, setActive: _setActive, className, children }:
 		classNames.push(className);
 
 	return (<div className={classNames.join(" ")}>
-		<div className={styles.UtilMenu}>
+		<div className={useClassNames([styles.UtilMenu], "Taskbar", "Menu", "Util")}>
 			{children}
 		</div>
 	</div>);

packages/core/src/components/windows/WindowFallbackView.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { useAlert } from "../../hooks/modals/alert";
 import { Vector2 } from "../../features/math/vector2";
-import { App } from "../../features/system/configs/app";
 import { useSystemManager } from "../../hooks";
+import { App } from "../../features";
 
 export interface WindowFallbackViewProps {
 	error?: Error;

packages/core/src/components/windows/WindowView.tsx

@@ -23,7 +23,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { WindowFallbackView } from "./WindowFallbackView";
 import { WindowOptions } from "../../features/windows/windowsManager";
 import { ModalProps } from "../modals/ModalView";
-import { useSystemManager } from "../../hooks";
+import { useClassNames, useSystemManager } from "../../hooks";
 
 export interface WindowProps extends WindowOptions {
 	fullscreen?: boolean;
@@ -157,7 +157,7 @@ export const WindowView: FC<WindowProps> = memo(({ id, app, size, position, onIn
 			grid={[1, 1]}
 		>
 			<div
-				className={classNames.join(" ")}
+				className={useClassNames(classNames, "WindowView")}
 				ref={nodeRef}
 				onClick={focus as unknown as MouseEventHandler}
 			>
@@ -169,7 +169,7 @@ export const WindowView: FC<WindowProps> = memo(({ id, app, size, position, onIn
 					}}
 				>
 					<div
-						className={`${styles.Header} Window-handle`}
+						className={useClassNames([styles.Header, "Window-handle"], "WindowHeader")}
 						onContextMenu={onContextMenu as unknown as MouseEventHandler}
 						onDoubleClick={(event) => {
 							setMaximized(!maximized);
@@ -177,10 +177,10 @@ export const WindowView: FC<WindowProps> = memo(({ id, app, size, position, onIn
 						}}
 					>
 						<ReactSVG
-							className={styles["Window-icon"]}
+							className={useClassNames([styles["Window-icon"]], "WindowIcon")}
 							src={iconUrl}
 						/>
-						<p className={utilStyles.TextSemibold}>{title}</p>
+						<p className={useClassNames([utilStyles.TextSemibold], "WindowTitle")}>{title}</p>
 						<button aria-label="Minimize" className={styles["Header-button"]} tabIndex={0} id="minimize-window"
 							onClick={toggleMinimized as MouseEventHandler}
 						>
@@ -204,12 +204,9 @@ export const WindowView: FC<WindowProps> = memo(({ id, app, size, position, onIn
 							<FontAwesomeIcon icon={faXmark}/>
 						</button>
 					</div>
-					<div className={styles["Window-content"]}>
+					<div className={useClassNames([styles["Window-content"]], "WindowContent")}>
 						<ErrorBoundary
 							FallbackComponent={(props) => <WindowFallbackView app={app} closeWindow={close} {...props}/>}
-							onReset={() => {
-								// Reset the state of your app so the error doesn't happen again
-							}}
 							onError={(error) => {
 								console.error(error);
 							}}

packages/core/src/components/windows/WindowsView.tsx

@@ -2,7 +2,7 @@ import { FC, memo, useEffect, useState } from "react";
 import { WindowProps, WindowView } from "./WindowView";
 import { setViewportTitle, setViewportIcon, getViewportParams, SettingsManager, removeDuplicatesFromArray } from "../../features";
 import { WindowOptions } from "../../features/windows/windowsManager";
-import { useSettingsManager, useSystemManager, useWindowsManager } from "../../hooks";
+import { useClassNames, useSettingsManager, useSystemManager, useWindowsManager } from "../../hooks";
 import { useWindows } from "../../hooks/windows/windowsContext";
 
 export const WindowsView: FC = memo(() => {
@@ -62,7 +62,7 @@ export const WindowsView: FC = memo(() => {
 		});
 	}, [settingsManager, windowsManager]);
 
-	return (<div>
+	return (<div className={useClassNames([], "WindowsView")}>
 		{windows?.map((window: WindowProps) => {
 			const { id, app, size, position, options, minimized, fullscreen } = window;
 			const index = sortedWindows.indexOf(window);

packages/core/src/constants/branding.const.ts

@@ -0,0 +1 @@
+export const NAME = "ProzillaOS";

packages/core/src/features/apps/app.tsx

@@ -1,5 +1,5 @@
-import { Vector2 } from "../../math/vector2";
-import { WindowProps } from "../../../components/windows/WindowView";
+import { WindowProps } from "../../components";
+import { Vector2 } from "../";
 import { FC } from "react";
 
 const validIdRegex = /^[a-zA-Z0-9-]+$/;

packages/core/src/features/index.ts

@@ -2,6 +2,7 @@ export * from "./system/configs";
 export * from "./virtual-drive";
 export * from "./_utils";
 
+export { App } from "./apps/app";
 export { ModalsManager } from "./modals/modalsManager";
 export { SettingsManager } from "./settings/settingsManager";
 export { StorageManager } from "./storage/storageManager";

packages/core/src/features/system/configs/appsConfig.ts

@@ -1,4 +1,4 @@
-import { App } from ".";
+import { App } from "../../";
 import { OptionalInterface } from "../../../types/utils";
 
 export interface AppsConfigOptions {

packages/core/src/features/system/configs/index.ts

@@ -1,4 +1,3 @@
-export { App } from "./app";
 export { AppsConfig } from "./appsConfig";
 export { DesktopConfig } from "./desktopConfig";
 export { MiscConfig } from "./miscConfig";

packages/core/src/features/system/systemManager.ts

@@ -1,4 +1,5 @@
 import { formatRelativeTime } from "../_utils";
+import { Skin } from "@prozilla-os/skins";
 import { VirtualDriveConfig } from "./configs";
 import { AppsConfig } from "./configs/appsConfig";
 import { DesktopConfig } from "./configs/desktopConfig";
@@ -11,6 +12,9 @@ import { WindowsConfig } from "./configs/windowsConfig";
 export interface SystemManagerParams {
 	systemName: SystemManager["systemName"] | null;
 	tagLine: SystemManager["tagLine"] | null;
+
+	skin?: SystemManager["skin"];
+
 	desktopConfig: DesktopConfig;
 	appsConfig: AppsConfig;
 	miscConfig: MiscConfig;
@@ -26,6 +30,8 @@ export class SystemManager {
 	tagLine: string;
 	#startDate: Date;
 
+	skin?: Skin;
+
 	appsConfig: AppsConfig;
 	desktopConfig: DesktopConfig;
 	miscConfig: MiscConfig;
@@ -38,6 +44,7 @@ export class SystemManager {
 	constructor({
 		systemName,
 		tagLine,
+		skin,
 		desktopConfig,
 		appsConfig,
 		miscConfig,
@@ -50,6 +57,8 @@ export class SystemManager {
 		this.systemName = systemName ?? "ProzillaOS";
 		this.tagLine = tagLine ?? "Web-based Operating System";
 
+		this.skin = skin;
+
 		this.desktopConfig = desktopConfig;
 		this.appsConfig = appsConfig;
 		this.miscConfig = miscConfig;
@@ -59,6 +68,42 @@ export class SystemManager {
 		this.windowsConfig = windowsConfig;
 		this.virtualDriveConfig = virtualDriveConfig;
 
+		if (this.skin != null) {
+			const skin = this.skin;
+
+			if (skin.appIcons != null) {
+				const appIcons = skin.appIcons as { [key: string]: string };
+
+				this.appsConfig.apps.forEach((app) => {
+					if (Object.keys(appIcons).includes(app.id))
+						app.setIconUrl(appIcons[app.id]);
+				});
+			}
+
+			if (skin.wallpapers != null)
+				this.desktopConfig.wallpapers = this.desktopConfig.wallpapers.concat(skin.wallpapers);
+
+			if (skin.defaultWallpaper != null)
+				this.desktopConfig.defaultWallpaper = skin.defaultWallpaper;
+
+			if (skin.fileIcons != null) {
+				this.virtualDriveConfig.fileIcon = skin.fileIcons.generic;
+				this.virtualDriveConfig.infoFileIcon = skin.fileIcons.info ?? skin.fileIcons.generic;
+				this.virtualDriveConfig.textFileIcon = skin.fileIcons.text ?? skin.fileIcons.generic;
+				this.virtualDriveConfig.codeFileIcon = skin.fileIcons.code ?? skin.fileIcons.generic;
+			}
+
+			if (skin.folderIcons != null) {
+				this.virtualDriveConfig.folderIcon = skin.folderIcons.generic;
+				this.virtualDriveConfig.textFolderIcon = skin.folderIcons.text ?? skin.folderIcons.generic;
+				this.virtualDriveConfig.imagesFolderIcon = skin.folderIcons.images ?? skin.folderIcons.generic;
+				this.virtualDriveConfig.folderLinkIcon = skin.folderIcons.link ?? skin.folderIcons.generic;
+			}
+
+			if (skin.loadStyleSheet != null)
+				skin.loadStyleSheet();
+		}
+
 		this.#startDate = new Date();
 	}
 

packages/core/src/features/windows/windowsManager.ts

@@ -1,5 +1,5 @@
 import { randomRange } from "../_utils/math.utils";
-import { App } from "../system/configs/app";
+import { App } from "../";
 import { Vector2 } from "../math/vector2";
 import { SystemManager } from "../system/systemManager";
 import { TrackingManager } from "../tracking/trackingManager";

packages/core/src/hooks/_utils/classNames.ts

@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import { NAME } from "../../constants/branding.const";
+
+/**
+ * Generates static class name using BEM notation
+ */
+export function useStaticClassName(block?: string, element?: string, modifier?: string) {
+	return useMemo(() => {
+		if (block == null)
+			return null;
+
+		let className = `${NAME}-${block}`;
+
+		if (element != null)
+			className += `_${element}`;
+		if (modifier != null)
+			className += `--${modifier}`;
+
+		return className;
+	}, [block, element, modifier]);
+}
+
+/**
+ * Combine clas names and an optional static class name
+ */
+export function useClassNames(classNames: (string | undefined)[], block?: string, element?: string, modifier?: string) {
+	const staticClassName = useStaticClassName(block, element, modifier);
+
+	return useMemo(() => {
+		const resultClassNames = [...classNames];
+
+		resultClassNames.filter((className) => className != null);
+
+		if (staticClassName != null)
+			resultClassNames.unshift(staticClassName);
+
+		return resultClassNames.join(" ");
+	}, [classNames, staticClassName]);
+}

packages/core/src/hooks/_utils/index.ts

@@ -3,4 +3,5 @@ export { useKeyboardListener, useShortcuts } from "./keyboard";
 export { useMouseListener } from "./mouse";
 export { OutsideClickListener } from "./outsideClick";
 export { useScreenBounds, useScreenDimensions } from "./screen";
-export { useScrollWithShadow } from "./scrollWithShadows";
+export { useScrollWithShadow } from "./scrollWithShadows";
+export { useClassNames, useStaticClassName } from "./classNames";

packages/core/src/hooks/apps/appFolder.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { App } from "../../features/system/configs/app";
+import { App } from "../../features/";
 import { VirtualFolder } from "../../features/virtual-drive/folder";
 import { useVirtualRoot } from "../virtual-drive/virtualRootContext";
 

packages/core/vite.config.ts

@@ -11,9 +11,11 @@ export default defineConfig({
 		libInjectCss(),
 		dts({
 			include: ["src"],
-			outDir: "dist",
+			outDir: "./dist",
 			rollupTypes: true,
-			strictOutput: true
+			strictOutput: true,
+			pathsToAliases: false,
+			bundledPackages: ["@prozilla-os/*"]
 		})
 	],
 	build: {
@@ -22,12 +24,12 @@ export default defineConfig({
 			formats: ["es"],
 		},
 		rollupOptions: {
-			external: ["react", "react/jsx-runtime"],
+			external: ["react", "react/jsx-runtime", /@prozilla-os/],
 			output: {
 				assetFileNames: "assets/[name][extname]",
 				entryFileNames: "[name].js",
 			}
 		},
-		sourcemap: true
-	}
+		sourcemap: true,
+	},
 });

packages/demo/package.json

@@ -10,7 +10,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite",
-		"build": "tsc && vite build",
+		"build": "tsc --project tsconfig-build.json && vite build",
 		"preview": "vite preview --port 8080",
 		"stage": "vite-node scripts/stage",
 		"predeploy": "pnpm run build && pnpm run stage",
@@ -27,6 +27,7 @@
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@prozilla-os/logic-sim": "workspace:*",
+		"@prozilla-os/skins": "workspace:*",
 		"prozilla-os": "workspace:*",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

packages/demo/public/assets/skins/minimal/apps/file-explorer/file.svg

@@ -0,0 +1,10 @@
+<svg width="150" height="200" viewBox="0 0 150 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_418_172)">
+<path d="M0 25C0 11.2109 11.2109 0 25 0H87.5V50C87.5 56.9141 93.0859 62.5 100 62.5H150V175C150 188.789 138.789 200 125 200H25C11.2109 200 0 188.789 0 175V25ZM150 50H100V0L150 50Z" fill="#E6F2FF"/>
+</g>
+<defs>
+<clipPath id="clip0_418_172">
+<rect width="150" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/demo/public/assets/skins/minimal/apps/file-explorer/folder.svg

@@ -0,0 +1,10 @@
+<svg width="200" height="176" viewBox="0 0 200 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_418_170)">
+<path d="M25 176H175C188.789 176 200 164.789 200 151V51C200 37.2109 188.789 26 175 26H112.5C108.555 26 104.844 24.1641 102.5 21L95 11C90.2734 4.71094 82.8516 1 75 1H25C11.2109 1 0 12.2109 0 26V151C0 164.789 11.2109 176 25 176Z" fill="#E6F2FF"/>
+</g>
+<defs>
+<clipPath id="clip0_418_170">
+<rect width="200" height="175" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/browser.svg

@@ -0,0 +1,10 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_418_187)">
+<path d="M137.5 100C137.5 108.672 137.031 117.031 136.211 125H63.7891C62.9297 117.031 62.5 108.672 62.5 100C62.5 91.3281 62.9688 82.9687 63.7891 75H136.211C137.07 82.9687 137.5 91.3281 137.5 100ZM148.75 75H196.836C198.906 83.0078 200 91.3672 200 100C200 108.633 198.906 116.992 196.836 125H148.75C149.57 116.953 150 108.594 150 100C150 91.4062 149.57 83.0469 148.75 75ZM192.734 62.5H147.148C143.242 37.5391 135.508 16.6406 125.547 3.28125C156.133 11.3672 181.016 33.5547 192.695 62.5H192.734ZM134.492 62.5H65.5078C67.8906 48.2812 71.5625 35.7031 76.0547 25.5078C80.1562 16.2891 84.7266 9.60938 89.1406 5.39063C93.5156 1.25 97.1484 0 100 0C102.852 0 106.484 1.25 110.859 5.39063C115.273 9.60938 119.844 16.2891 123.945 25.5078C128.477 35.6641 132.109 48.2422 134.492 62.5ZM52.8516 62.5H7.26563C18.9844 33.5547 43.8281 11.3672 74.4531 3.28125C64.4922 16.6406 56.7578 37.5391 52.8516 62.5ZM3.16406 75H51.25C50.4297 83.0469 50 91.4062 50 100C50 108.594 50.4297 116.953 51.25 125H3.16406C1.09375 116.992 0 108.633 0 100C0 91.3672 1.09375 83.0078 3.16406 75ZM76.0547 174.453C71.5234 164.297 67.8906 151.719 65.5078 137.5H134.492C132.109 151.719 128.437 164.297 123.945 174.453C119.844 183.672 115.273 190.352 110.859 194.57C106.484 198.75 102.852 200 100 200C97.1484 200 93.5156 198.75 89.1406 194.609C84.7266 190.391 80.1562 183.711 76.0547 174.492V174.453ZM52.8516 137.5C56.7578 162.461 64.4922 183.359 74.4531 196.719C43.8281 188.633 18.9844 166.445 7.26563 137.5H52.8516ZM192.734 137.5C181.016 166.445 156.172 188.633 125.586 196.719C135.547 183.359 143.242 162.461 147.187 137.5H192.734Z" fill="#E6F2FF"/>
+</g>
+<defs>
+<clipPath id="clip0_418_187">
+<rect width="200" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/calculator.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 0C36.2109 0 25 11.2109 25 25V175C25 188.789 36.2109 200 50 200H150C163.789 200 175 188.789 175 175V25C175 11.2109 163.789 0 150 0H50ZM62.5 25H137.5C144.414 25 150 30.5859 150 37.5V50C150 56.9141 144.414 62.5 137.5 62.5H62.5C55.5859 62.5 50 56.9141 50 50V37.5C50 30.5859 55.5859 25 62.5 25ZM75 87.5C75 90.8152 73.683 93.9946 71.3388 96.3388C68.9946 98.683 65.8152 100 62.5 100C59.1848 100 56.0054 98.683 53.6612 96.3388C51.317 93.9946 50 90.8152 50 87.5C50 84.1848 51.317 81.0054 53.6612 78.6612C56.0054 76.317 59.1848 75 62.5 75C65.8152 75 68.9946 76.317 71.3388 78.6612C73.683 81.0054 75 84.1848 75 87.5ZM62.5 137.5C59.1848 137.5 56.0054 136.183 53.6612 133.839C51.317 131.495 50 128.315 50 125C50 121.685 51.317 118.505 53.6612 116.161C56.0054 113.817 59.1848 112.5 62.5 112.5C65.8152 112.5 68.9946 113.817 71.3388 116.161C73.683 118.505 75 121.685 75 125C75 128.315 73.683 131.495 71.3388 133.839C68.9946 136.183 65.8152 137.5 62.5 137.5ZM50 162.5C50 155.586 55.5859 150 62.5 150H100C106.914 150 112.5 155.586 112.5 162.5C112.5 169.414 106.914 175 100 175H62.5C55.5859 175 50 169.414 50 162.5ZM100 100C96.6848 100 93.5054 98.683 91.1612 96.3388C88.817 93.9946 87.5 90.8152 87.5 87.5C87.5 84.1848 88.817 81.0054 91.1612 78.6612C93.5054 76.317 96.6848 75 100 75C103.315 75 106.495 76.317 108.839 78.6612C111.183 81.0054 112.5 84.1848 112.5 87.5C112.5 90.8152 111.183 93.9946 108.839 96.3388C106.495 98.683 103.315 100 100 100ZM112.5 125C112.5 128.315 111.183 131.495 108.839 133.839C106.495 136.183 103.315 137.5 100 137.5C96.6848 137.5 93.5054 136.183 91.1612 133.839C88.817 131.495 87.5 128.315 87.5 125C87.5 121.685 88.817 118.505 91.1612 116.161C93.5054 113.817 96.6848 112.5 100 112.5C103.315 112.5 106.495 113.817 108.839 116.161C111.183 118.505 112.5 121.685 112.5 125ZM137.5 100C134.185 100 131.005 98.683 128.661 96.3388C126.317 93.9946 125 90.8152 125 87.5C125 84.1848 126.317 81.0054 128.661 78.6612C131.005 76.317 134.185 75 137.5 75C140.815 75 143.995 76.317 146.339 78.6612C148.683 81.0054 150 84.1848 150 87.5C150 90.8152 148.683 93.9946 146.339 96.3388C143.995 98.683 140.815 100 137.5 100ZM150 125C150 128.315 148.683 131.495 146.339 133.839C143.995 136.183 140.815 137.5 137.5 137.5C134.185 137.5 131.005 136.183 128.661 133.839C126.317 131.495 125 128.315 125 125C125 121.685 126.317 118.505 128.661 116.161C131.005 113.817 134.185 112.5 137.5 112.5C140.815 112.5 143.995 113.817 146.339 116.161C148.683 118.505 150 121.685 150 125ZM137.5 175C134.185 175 131.005 173.683 128.661 171.339C126.317 168.995 125 165.815 125 162.5C125 159.185 126.317 156.005 128.661 153.661C131.005 151.317 134.185 150 137.5 150C140.815 150 143.995 151.317 146.339 153.661C148.683 156.005 150 159.185 150 162.5C150 165.815 148.683 168.995 146.339 171.339C143.995 173.683 140.815 175 137.5 175Z" fill="#E6F2FF"/>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/file-explorer.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 188H175C188.789 188 200 176.789 200 163V63C200 49.2109 188.789 38 175 38H112.5C108.555 38 104.844 36.1641 102.5 33L95 23C90.2734 16.7109 82.8516 13 75 13H25C11.2109 13 0 24.2109 0 38V163C0 176.789 11.2109 188 25 188Z" fill="#E6F2FF"/>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/media-viewer.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.2778 23C44.0821 23 34.1667 32.8656 34.1667 45V122C34.1667 134.134 44.0821 144 56.2778 144H177.889C190.085 144 200 134.134 200 122V45C200 32.8656 190.085 23 177.889 23H56.2778ZM137.812 59.6781L170.979 109.178C172.672 111.722 172.845 114.953 171.394 117.634C169.943 120.316 167.144 122 164.069 122H114.319H97.7361H70.0972C66.9187 122 64.0167 120.178 62.6347 117.325C61.2528 114.472 61.6328 111.069 63.6366 108.594L85.7477 81.0938C87.337 79.1344 89.6863 78 92.2083 78C94.7304 78 97.1142 79.1344 98.6689 81.0938L104.646 88.5188L123.993 59.6438C125.548 57.375 128.139 56 130.903 56C133.667 56 136.258 57.375 137.812 59.6781ZM67.3333 56C67.3333 53.0826 68.4981 50.2847 70.5714 48.2218C72.6448 46.1589 75.4568 45 78.3889 45C81.321 45 84.133 46.1589 86.2063 48.2218C88.2797 50.2847 89.4444 53.0826 89.4444 56C89.4444 58.9174 88.2797 61.7153 86.2063 63.7782C84.133 65.8411 81.321 67 78.3889 67C75.4568 67 72.6448 65.8411 70.5714 63.7782C68.4981 61.7153 67.3333 58.9174 67.3333 56ZM17.5833 53.25C17.5833 48.6781 13.8866 45 9.29167 45C4.6967 45 1 48.6781 1 53.25V130.25C1 156.066 22.0401 177 47.9861 177H158.542C163.137 177 166.833 173.322 166.833 168.75C166.833 164.178 163.137 160.5 158.542 160.5H47.9861C31.1955 160.5 17.5833 146.956 17.5833 130.25V53.25Z" fill="#E6F2FF"/>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M193.711 65.0781C194.961 68.4766 193.906 72.2656 191.211 74.6875L174.297 90.0781C174.727 93.3203 174.961 96.6406 174.961 100C174.961 103.359 174.727 106.68 174.297 109.922L191.211 125.312C193.906 127.734 194.961 131.523 193.711 134.922C191.992 139.57 189.922 144.023 187.539 148.32L185.703 151.484C183.125 155.781 180.234 159.844 177.07 163.672C174.766 166.484 170.938 167.422 167.5 166.328L145.742 159.414C140.508 163.438 134.727 166.797 128.555 169.336L123.672 191.641C122.891 195.195 120.156 198.008 116.563 198.594C111.172 199.492 105.625 199.961 99.961 199.961C94.297 199.961 88.7501 199.492 83.3595 198.594C79.7657 198.008 77.0313 195.195 76.2501 191.641L71.3673 169.336C65.1954 166.797 59.4142 163.438 54.1798 159.414L32.461 166.367C29.0235 167.461 25.1954 166.484 22.8907 163.711C19.7267 159.883 16.836 155.82 14.2579 151.523L12.422 148.359C10.0392 144.062 7.96885 139.609 6.2501 134.961C5.0001 131.563 6.05479 127.773 8.7501 125.352L25.6642 109.961C25.2345 106.68 25.0001 103.359 25.0001 100C25.0001 96.6406 25.2345 93.3203 25.6642 90.0781L8.7501 74.6875C6.05479 72.2656 5.0001 68.4766 6.2501 65.0781C7.96885 60.4297 10.0392 55.9766 12.422 51.6797L14.2579 48.5156C16.836 44.2187 19.7267 40.1563 22.8907 36.3281C25.1954 33.5156 29.0235 32.5781 32.461 33.6719L54.2189 40.5859C59.4532 36.5625 65.2345 33.2031 71.4064 30.6641L76.2892 8.35937C77.0704 4.80469 79.8048 1.99219 83.3985 1.40625C88.7892 0.46875 94.336 0 100 0C105.664 0 111.211 0.46875 116.602 1.36719C120.195 1.95312 122.93 4.76562 123.711 8.32031L128.594 30.625C134.766 33.1641 140.547 36.5234 145.781 40.5469L167.539 33.6328C170.977 32.5391 174.805 33.5156 177.109 36.2891C180.274 40.1172 183.164 44.1797 185.742 48.4766L187.578 51.6406C189.961 55.9375 192.031 60.3906 193.75 65.0391L193.711 65.0781ZM100 131.25C108.288 131.25 116.237 127.958 122.097 122.097C127.958 116.237 131.25 108.288 131.25 100C131.25 91.712 127.958 83.7634 122.097 77.9029C116.237 72.0424 108.288 68.75 100 68.75C91.7121 68.75 83.7635 72.0424 77.903 77.9029C72.0425 83.7634 68.7501 91.712 68.7501 100C68.7501 108.288 72.0425 116.237 77.903 122.097C83.7635 127.958 91.7121 131.25 100 131.25Z" fill="#E6F2FF"/>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/terminal.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.23907 41.7581C-0.0796911 37.4617 -0.0796911 30.5187 4.23907 26.2223C8.55784 21.9259 15.5715 21.9259 19.8903 26.2223L86.2265 92.2149C90.5453 96.5113 90.5453 103.489 86.2265 107.785L19.8903 173.778C15.5715 178.074 8.55784 178.074 4.23907 173.778C-0.0796911 169.481 -0.0796911 162.504 4.23907 158.208L62.7324 99.9828L4.23907 41.7581ZM89.4397 154.977H188.944C195.059 154.977 200 159.892 200 165.975C200 172.059 195.059 176.974 188.944 176.974H89.4397C83.3243 176.974 78.3836 172.059 78.3836 165.975C78.3836 159.892 83.3243 154.977 89.4397 154.977Z" fill="#E6F2FF"/>
+</svg>

packages/demo/public/assets/skins/minimal/apps/icons/text-editor.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 34.0043C1 21.8676 10.9172 12 23.115 12H78.4023V56.0086C78.4023 62.0942 83.3436 67.0107 89.4598 67.0107H133.69V115.008L100.966 147.567C98.133 150.386 96.1288 153.928 95.1613 157.778L89.9781 178.442C89.1834 181.674 89.3561 184.974 90.4619 188H23.115C10.9172 188 1 178.132 1 165.996V34.0043ZM133.69 56.0086H89.4598V12L133.69 56.0086ZM190.981 93.0377L195.957 97.9887C201.348 103.352 201.348 112.051 195.957 117.449L185.798 127.557L161.264 103.146L171.423 93.0377C176.814 87.6742 185.556 87.6742 190.981 93.0377ZM108.776 155.372L153.42 110.951L177.954 135.362L133.31 179.748C131.893 181.158 130.131 182.155 128.161 182.636L107.394 187.794C105.493 188.275 103.524 187.725 102.141 186.35C100.759 184.974 100.206 183.015 100.69 181.124L105.873 160.46C106.357 158.535 107.359 156.747 108.776 155.337V155.372Z" fill="#E6F2FF"/>
+</svg>

packages/demo/src/Main.tsx

@@ -5,11 +5,13 @@ import { NAME, TAG_LINE } from "./config/branding.config";
 import { appsConfig } from "./config/apps.config";
 import { virtualDriveConfig } from "./config/virtualDrive.config";
 import { ProzillaOS } from "prozilla-os";
+import { macOsSkin } from "@prozilla-os/skins";
 
 export function Main(): ReactElement {
 	return <ProzillaOS
 		systemName={NAME}
 		tagLine={TAG_LINE}
+		skin={macOsSkin}
 		config={{
 			desktop: desktopConfig,
 			apps: appsConfig,

packages/demo/src/config/apps.config.ts

@@ -26,10 +26,14 @@ export const appsConfig = new AppsConfig({
 			.setIconUrl("/assets/apps/icons/browser.svg"),
 		calculator.setName("Maths")
 			.setDescription("Simple calculator app.")
-			.setIconUrl("/assets/apps/icons/calculator.svg"),
-		wordle.setIconUrl("/assets/apps/icons/wordle.svg"),
-		ballMaze.setIconUrl("/assets/apps/icons/ball-maze.svg"),
-		minesweeper.setIconUrl("/assets/apps/icons/minesweeper.svg"),
+			.setIconUrl("/assets/apps/icons/calculator.svg")
+			.setPinnedByDefault(true),
+		wordle.setIconUrl("/assets/apps/icons/wordle.svg")
+			.setPinnedByDefault(false),
+		ballMaze.setIconUrl("/assets/apps/icons/ball-maze.svg")
+			.setPinnedByDefault(false),
+		minesweeper.setIconUrl("/assets/apps/icons/minesweeper.svg")
+			.setPinnedByDefault(false),
 		logicSim.setName("Logic Sim (WIP)")
 			.setDescription("Create digital logic circuits using the online simulator.")
 			.setIconUrl("/assets/apps/icons/logic-sim.svg")

packages/demo/tsconfig-build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"paths": {
+			"prozilla-os": ["packages/prozilla-os/dist/main",],
+			"@prozilla-os/*": ["packages/*/dist/main", "packages/apps/*/dist/main"],
+		},
+	},
+}

packages/demo/tsconfig.json

@@ -3,8 +3,8 @@
 	"compilerOptions": {
 		"baseUrl": "../..",
 		"paths": {
-			"@prozilla-os/core": ["packages/core/dist/main"],
-			"@prozilla-os/*": ["packages/apps/*/dist/main"]
+			"prozilla-os": ["packages/prozilla-os/src/main"],
+			"@prozilla-os/*": ["packages/*/src/main", "packages/apps/*/src/main"],
 		},
 	},
 	"include": [

packages/demo/vite.config.ts

@@ -14,7 +14,7 @@ const ENABLE_ALIASES = true;
  * Enables importing local packages from their dist (build) directory instead of their src directory
  * Useful for testing builds before publishing
  */
-const USE_PACKAGE_BUILDS = true;
+const USE_PACKAGE_BUILDS = false;
 
 function generateAliases() {
 	if (!ENABLE_ALIASES) return {};
@@ -24,11 +24,17 @@ function generateAliases() {
 	const localPackages = [
 		{ name: "prozilla-os", path: resolve(__dirname, "../prozilla-os/" + entryFile) },
 		{ name: "@prozilla-os/core", path: resolve(__dirname, "../core/" + entryFile) },
-		{ name: "@prozilla-os/shared", path: resolve(__dirname, "../shared/" + entryFile) }
+		{ name: "@prozilla-os/shared", path: resolve(__dirname, "../shared/" + entryFile) },
+		{ name: "@prozilla-os/skins", path: resolve(__dirname, "../skins/" + entryFile) }
 	];
 
 	const localApps = [
+		"browser",
+		"calculator",
 		"file-explorer",
+		"logic-sim",
+		"media-viewer",
+		"settings",
 		"terminal",
 		"text-editor"
 	];

packages/prozilla-os/CHANGELOG.md

@@ -1,5 +1,23 @@
 # prozilla-os
 
+## 1.1.0
+
+### Minor Changes
+
+- Added skins feature
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.0
+  - @prozilla-os/browser@1.0.3
+  - @prozilla-os/calculator@1.0.3
+  - @prozilla-os/file-explorer@1.0.14
+  - @prozilla-os/media-viewer@1.0.3
+  - @prozilla-os/settings@1.0.3
+  - @prozilla-os/terminal@1.0.7
+  - @prozilla-os/text-editor@1.0.7
+
 ## 1.0.16
 
 ### Patch Changes

packages/prozilla-os/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "prozilla-os",
 	"description": "a React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.0.16",
+	"version": "1.1.0",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
@@ -12,7 +12,7 @@
 	"main": "dist/main.js",
 	"types": "dist/main.d.ts",
 	"scripts": {
-		"build": "tsc && vite build"
+		"build": "tsc --project tsconfig-build.json && vite build"
 	},
 	"repository": {
 		"type": "git",

packages/prozilla-os/tsconfig-build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/*": ["packages/apps/*/dist/main"]
+		}
+	},
+}

packages/prozilla-os/tsconfig.json

@@ -3,15 +3,16 @@
 	"compilerOptions": {
 		"baseUrl": "../..",
 		"composite": true,
-		"outDir": "dist",
+		"outDir": "./dist",
 		"declaration": true,
 		"emitDeclarationOnly": true,
 		"noEmit": false,
+		"rootDir": "../",
 		"paths": {
-			"@prozilla-os/core": ["packages/core/dist/main"],
-			"@prozilla-os/*": ["packages/apps/*/dist/main"]
+			"@prozilla-os/core": ["packages/core/src/main"],
+			"@prozilla-os/*": ["packages/apps/*/src/main"]
 		}
 	},
-	"include": ["src", "vite.config.ts"],
+	"include": ["src", "../core/src", "../apps/**/src", "vite.config.ts"],
 	"exclude": ["node_modules"]
 }

packages/prozilla-os/vite.config.ts

@@ -15,7 +15,8 @@ export default defineConfig({
 			rollupTypes: true,
 			strictOutput: true,
 			pathsToAliases: false,
-			bundledPackages: ["@prozilla-os/*"]
+			bundledPackages: ["@prozilla-os/*"],
+			tsconfigPath: "tsconfig-build.json"
 		})
 	],
 	build: {
@@ -24,12 +25,12 @@ export default defineConfig({
 			formats: ["es"],
 		},
 		rollupOptions: {
-			external: ["react", "react/jsx-runtime", /@prozilla-os\//g],
+			external: ["react", "react/jsx-runtime", /@prozilla-os/g],
 			output: {
 				assetFileNames: "assets/[name][extname]",
 				entryFileNames: "[name].js",
 			}
 		},
 		sourcemap: true
-	}
+	},
 });

packages/skins/README.md

@@ -0,0 +1,38 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## About 
+
+`@prozilla-os/skins` is a React library that contains skins for ProzillaOS.
+
+## Installation
+
+```sh
+$ npm install @prozilla-os/skins
+$ yarn add @prozilla-os/skins
+$ pnpm add @prozilla-os/skins
+```
+
+## Links
+
+- [Website/demo][website]
+- [GitHub][github]
+- [npm][npm]
+- [Discord][discord]
+- [Ko-fi][ko-fi]
+
+[website]: https://os.prozilla.dev/
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/skins
+[npm]: https://www.npmjs.com/package/@prozilla-os/skins
+[discord]: https://discord.gg/JwbyQP4tdz
+[ko-fi]: https://ko-fi.com/prozilla

packages/skins/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@prozilla-os/skins",
+	"description": "A React library that contains skins for ProzillaOS.",
+	"version": "1.0.0",
+	"homepage": "https://os.prozilla.dev",
+	"author": {
+		"name": "Prozilla",
+		"email": "business@prozilla.dev",
+		"url": "https://prozilla.dev/"
+	},
+	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
+	"scripts": {
+		"build": "tsc && vite build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+		"directory": "packages/skins"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"@types/react": "^18.3.3",
+		"@vitejs/plugin-react-swc": "^3.7.0",
+		"glob": "^11.0.0",
+		"typescript": "^5.4.5",
+		"vite": "^5.3.1",
+		"vite-plugin-dts": "^3.9.1",
+		"vite-plugin-lib-inject-css": "^2.1.1"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/",
+		"access": "public"
+	}
+}

packages/skins/src/core/index.ts

@@ -0,0 +1,3 @@
+export { Skin } from "./skin";
+export { macOsSkin } from "./skins/macOs";
+export { minimalSkin } from "./skins/minimal";

packages/skins/src/core/skin.ts

@@ -0,0 +1,40 @@
+interface SkinOptions {
+	appIcons?: { [key: string]: string };
+
+	wallpapers?: string[];
+	defaultWallpaper?: string;
+
+	fileIcons?: {
+		generic: string;
+		info?: string;
+		text?: string;
+		code?: string;
+	};
+
+	folderIcons?: {
+		generic: string;
+		images?: string;
+		text?: string;
+		link?: string;
+	};
+
+	loadStyleSheet?: () => void;
+}
+
+export class Skin {
+	appIcons: SkinOptions["appIcons"];
+	wallpapers: SkinOptions["wallpapers"];
+	defaultWallpaper: SkinOptions["defaultWallpaper"];
+	fileIcons: SkinOptions["fileIcons"];
+	folderIcons: SkinOptions["folderIcons"];
+	loadStyleSheet: SkinOptions["loadStyleSheet"];
+
+	constructor(options: SkinOptions) {
+		this.appIcons = options.appIcons;
+		this.wallpapers = options.wallpapers;
+		this.defaultWallpaper = options.defaultWallpaper;
+		this.fileIcons = options.fileIcons;
+		this.folderIcons = options.folderIcons;
+		this.loadStyleSheet = options.loadStyleSheet;
+	}
+}

packages/skins/src/core/skins/macOs.ts

@@ -0,0 +1,29 @@
+import { Skin } from "../skin";
+
+export const macOsSkin = new Skin({
+	appIcons: {
+		"ball-maze": "/assets/skins/mac/apps/icons/ball-maze.svg",
+		"browser": "/assets/skins/mac/apps/icons/browser.svg",
+		"calculator": "/assets/skins/mac/apps/icons/calculator.svg",
+		"file-explorer": "/assets/skins/mac/apps/icons/file-explorer.svg",
+		"media-viewer": "/assets/skins/mac/apps/icons/media-viewer.svg",
+		"minesweeper": "/assets/skins/mac/apps/icons/minesweeper.svg",
+		"settings": "/assets/skins/mac/apps/icons/settings.svg",
+		"terminal": "/assets/skins/mac/apps/icons/terminal.svg",
+		"text-editor": "/assets/skins/mac/apps/icons/text-editor.svg",
+		"wordle": "/assets/skins/mac/apps/icons/wordle.svg",
+	},
+	wallpapers: [
+		"/assets/skins/mac/wallpapers/macos-monterey.jpg"
+	],
+	defaultWallpaper: "/assets/skins/mac/wallpapers/macos-monterey.jpg",
+	fileIcons: {
+		generic: "/assets/skins/mac/apps/file-explorer/file.svg"
+	},
+	folderIcons: {
+		generic: "/assets/skins/mac/apps/file-explorer/folder.svg"
+	},
+	loadStyleSheet: () => {
+		import("../../styles/skins/macOs.css");
+	}
+});

packages/skins/src/core/skins/minimal.ts

@@ -0,0 +1,26 @@
+import { Skin } from "../skin";
+
+export const minimalSkin = new Skin({
+	appIcons: {
+		"browser": "/assets/skins/minimal/apps/icons/browser.svg",
+		"calculator": "/assets/skins/minimal/apps/icons/calculator.svg",
+		"file-explorer": "/assets/skins/minimal/apps/icons/file-explorer.svg",
+		"media-viewer": "/assets/skins/minimal/apps/icons/media-viewer.svg",
+		"settings": "/assets/skins/minimal/apps/icons/settings.svg",
+		"terminal": "/assets/skins/minimal/apps/icons/terminal.svg",
+		"text-editor": "/assets/skins/minimal/apps/icons/text-editor.svg",
+	},
+	wallpapers: [
+		"/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png"
+	],
+	defaultWallpaper: "/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
+	fileIcons: {
+		generic: "/assets/skins/minimal/apps/file-explorer/file.svg"
+	},
+	folderIcons: {
+		generic: "/assets/skins/minimal/apps/file-explorer/folder.svg"
+	},
+	loadStyleSheet: () => {
+		import("../../styles/skins/minimal.css");
+	}
+});

packages/skins/src/main.ts

@@ -0,0 +1 @@
+export { Skin, macOsSkin, minimalSkin } from "./core";

packages/skins/src/styles/skins/macOs.css

@@ -0,0 +1,114 @@
+:root {
+	--util-menu-height: 2rem;
+	--taskbar-margin: 0.5rem;
+}
+
+.ProzillaOS-Taskbar {
+	--taskbar-opacity: 0.1;
+
+	height: 100%;
+	pointer-events: none;
+}
+
+.ProzillaOS-Taskbar::before, .ProzillaOS-Taskbar::after {
+	display: none;
+}
+
+.ProzillaOS-Taskbar_MenuIcons {
+	display: none;
+}
+
+.ProzillaOS-Taskbar_AppIcons {
+	position: absolute;
+	bottom: var(--taskbar-margin);
+	left: 50%;
+	width: auto;
+	height: auto;
+	min-height: var(--taskbar-height);
+	transform: translateX(-50%);
+	border-radius: var(--border-radius-1);
+	transition: height 200ms ease-out 100ms;
+	pointer-events: auto;
+}
+
+.ProzillaOS-Taskbar_AppIcons:has(.ProzillaOS-Taskbar_AppIcon:hover) {
+	animation: expand 200ms ease-out forwards;
+}
+
+@keyframes expand {
+	0% {
+		height: var(--taskbar-height);
+	}
+	100% {
+		height: calc(var(--taskbar-height) * 150%);
+	}
+}
+
+.ProzillaOS-Taskbar_AppIcons::after,
+.ProzillaOS-Taskbar_AppIcons::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+}
+
+.ProzillaOS-Taskbar_AppIcons::after {
+	opacity: var(--taskbar-opacity);
+	background-color: var(--foreground-color-0);
+	z-index: -2;
+}
+
+.ProzillaOS-Taskbar_AppIcons::before {
+	backdrop-filter: var(--taskbar-filter);
+	z-index: -3;
+}
+
+.ProzillaOS-Taskbar_AppIcons > div {
+	position: relative;
+	width: auto;
+	height: 100%;
+	align-items: flex-end;
+}
+
+.ProzillaOS-Taskbar_AppIcon {
+	--scale: var(--taskbar-height);
+	width: var(--scale);
+	height: var(--scale);
+	padding: 0.5rem;
+	transition: width 200ms ease-out, height 200ms ease-out, background-color 100ms ease-in-out !important;
+}
+
+.ProzillaOS-Taskbar_AppIcon svg {
+	transform: none !important;
+}
+
+.ProzillaOS-Taskbar_AppIcon:hover {
+	--scale: calc(var(--taskbar-height) * 1.5);
+}
+
+.ProzillaOS-Taskbar_UtilIcons {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: var(--util-menu-height);
+	background-color: var(--taskbar-color);
+	box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem color-mix(in srgb, var(--svg-drop-shadow-color) 50%, transparent);
+	pointer-events: auto;
+}
+
+.ProzillaOS-Taskbar_UtilIcons button {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.ProzillaOS-Taskbar_UtilIcons button br {
+	display: none;
+}
+
+.ProzillaOS-Desktop .ProzillaOS-DirectoryList {
+	margin-top: var(--util-menu-height);
+}

packages/skins/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/skins/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"baseUrl": "../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false
+	},
+	"include": ["src", "vite.config.ts"],
+	"exclude": ["node_modules"]
+}

packages/skins/vite.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react-swc";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+		dts({
+			include: ["src"],
+			outDir: "./dist",
+			rollupTypes: true,
+			strictOutput: true
+		}),
+		libInjectCss(),
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "src/main.ts"),
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: ["react", "react/jsx-runtime"],
+			output: {
+				assetFileNames: "assets/[name][extname]",
+				entryFileNames: "[name].js",
+				chunkFileNames: "[name]-[hash].js",
+				manualChunks: undefined
+			},
+			plugins: [{
+				name: "test",
+				resolveId (source) {
+					if (source.endsWith(".css")) {
+						return source;
+					}
+					return null;
+				},
+				renderDynamicImport(options) {
+					const { targetModuleId } = options;
+					if (targetModuleId?.endsWith(".css")) {
+						const matches = targetModuleId.match(/(?<=\/)[a-zA-Z-]+(?=\.css$)/);
+
+						if (matches == null)
+							return;
+
+						const name = matches[0];
+						return {
+							left: "import(/*",
+							right: `*/"./assets/${name}.css")`
+						};
+					}
+					return null;
+				},
+			}]
+		},
+		sourcemap: true,
+	},
+});

pnpm-lock.yaml

@@ -383,6 +383,9 @@ importers:
       '@fortawesome/react-fontawesome':
         specifier: ^0.2.2
         version: 0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1)
+      '@prozilla-os/skins':
+        specifier: workspace:*
+        version: link:../skins
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -408,6 +411,9 @@ importers:
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.0
         version: 3.7.0(vite@5.3.1(@types/node@20.14.10)(less@4.2.0))
+      glob:
+        specifier: ^11.0.0
+        version: 11.0.0
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -435,6 +441,9 @@ importers:
       '@prozilla-os/logic-sim':
         specifier: workspace:*
         version: link:../apps/logic-sim
+      '@prozilla-os/skins':
+        specifier: workspace:*
+        version: link:../skins
       prozilla-os:
         specifier: workspace:*
         version: link:../prozilla-os
@@ -615,6 +624,34 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1(vite@5.3.1(@types/node@20.14.10)(less@4.2.0))
 
+  packages/skins:
+    dependencies:
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@vitejs/plugin-react-swc':
+        specifier: ^3.7.0
+        version: 3.7.0(vite@5.3.1(@types/node@20.14.10)(less@4.2.0))
+      glob:
+        specifier: ^11.0.0
+        version: 11.0.0
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.3.1
+        version: 5.3.1(@types/node@20.14.10)(less@4.2.0)
+      vite-plugin-dts:
+        specifier: ^3.9.1
+        version: 3.9.1(@types/node@20.14.10)(rollup@4.18.0)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.10)(less@4.2.0))
+      vite-plugin-lib-inject-css:
+        specifier: ^2.1.1
+        version: 2.1.1(vite@5.3.1(@types/node@20.14.10)(less@4.2.0))
+
 packages:
 
   '@algolia/autocomplete-core@1.9.3':
@@ -2418,6 +2455,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  glob@11.0.0:
+    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -2731,6 +2773,10 @@ packages:
     resolution: {integrity: sha512-U23pQPDnmYybVkYjObcuYMk43VRlMLLqLI+RdZy8s8WV8WsxO9SnqSroKaluuvcNOdCAlauKszDwd+umbot5Mg==}
     engines: {node: '>=18'}
 
+  jackspeak@4.0.1:
+    resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
+    engines: {node: 20 || >=22}
+
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
@@ -2853,6 +2899,10 @@ packages:
     resolution: {integrity: sha512-9/8QXrtbGeMB6LxwQd4x1tIMnsmUxMvIH/qWGsccz6bt9Uln3S+sgAaqfQNhbGA8ufzs2fHuP/yqapGgP9Hh2g==}
     engines: {node: '>=18'}
 
+  lru-cache@11.0.0:
+    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
+    engines: {node: 20 || >=22}
+
   lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
 
@@ -2922,6 +2972,10 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+
   minimatch@3.0.8:
     resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
 
@@ -3099,6 +3153,10 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -6087,6 +6145,15 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
+  glob@11.0.0:
+    dependencies:
+      foreground-child: 3.2.1
+      jackspeak: 4.0.1
+      minimatch: 10.0.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 2.0.0
+
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -6376,6 +6443,12 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jackspeak@4.0.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jju@1.4.0: {}
 
   js-tokens@4.0.0: {}
@@ -6496,6 +6569,8 @@ snapshots:
 
   lru-cache@10.3.1: {}
 
+  lru-cache@11.0.0: {}
+
   lru-cache@4.1.5:
     dependencies:
       pseudomap: 1.0.2
@@ -6565,6 +6640,10 @@ snapshots:
 
   min-indent@1.0.1: {}
 
+  minimatch@10.0.1:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@3.0.8:
     dependencies:
       brace-expansion: 1.1.11
@@ -6744,6 +6823,11 @@ snapshots:
       lru-cache: 10.3.1
       minipass: 7.1.2
 
+  path-scurry@2.0.0:
+    dependencies:
+      lru-cache: 11.0.0
+      minipass: 7.1.2
+
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}

tsconfig.json

@@ -17,6 +17,7 @@
 		
 		/* Emit */
 		"noEmit": true,
+		"noEmitOnError": true,
 		
 		/* Interop Constraints */
 		"allowSyntheticDefaultImports": true,
@@ -29,8 +30,8 @@
 		/* Module resolution */
 		"baseUrl": "./",
 		"paths": {
-			"prozilla-os": ["packages/prozilla-os/dist/main"],
-			"@prozilla-os/*": ["packages/*/dist/main", "packages/*/src/main", "packages/apps/*/dist/main"],
+			"prozilla-os": ["packages/prozilla-os/dist/main", "packages/prozilla-os/src/main"],
+			"@prozilla-os/*": ["packages/*/dist/main", "packages/*/src/main", "packages/apps/*/dist/main", "packages/apps/*/src/main"],
 		}
 	},
 	"include": [