classicy 0.5.2 → 0.5.4

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,75 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ *  Spatial Plugin - Adds support for stereo and 3D audio where Web Audio is supported.
+ *  
+ *  howler.js v2.2.4
+ *  howlerjs.com
+ *
+ *  (c) 2013-2020, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+/*!
+ *  howler.js v2.2.4
+ *  howlerjs.com
+ *
+ *  (c) 2013-2020, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "classicy",
+  "version": "0.5.3",
+  "description": "A UI framework in React, replicating the user interface of Classic MacOS 8 (called Platinum).",
+  "exports": {
+    ".": {
+      "types": "./custom.d.ts",
+      "import": "./index.d.ts",
+      "require": "./index.js"
+    }
+  },
+  "imports": {
+    "@/*": "./dist/*.ts"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "index.js",
+    "types.d.ts"
+  ],
+  "keywords": [
+    "react",
+    "typescript",
+    "nextjs",
+    "platinum",
+    "macos-classic",
+    "typescript-react"
+  ],
+  "author": "Robbie Byrd <me@robbiebyrd.com>",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf dist && mkdir dist",
+    "build": "npm run build-prod",
+    "build-audio": "./scripts/build_sprites.sh",
+    "build-watch": "webpack --mode development --stats-error-details --watch",
+    "build-dev": "webpack --mode development --stats-error-details",
+    "build-prod": "npm run setup-dist && npm run build-audio && webpack --mode production",
+    "setup-dist": "npm run clean && cp package.json ./dist/package.json && cp README.md ./dist/README.md",
+    "serve": "npx http-server dist/ -p 3000"
+  },
+  "dependencies": {
+    "@analytics/google-tag-manager": "^0.6.0",
+    "@mdxeditor/editor": "^3.39.1",
+    "@plussub/srt-vtt-parser": "^2.0.5",
+    "@tanstack/react-table": "^8.21.3",
+    "analytics": "^0.8.19",
+    "classnames": "^2.5.1",
+    "howler": "^2.2.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-ga4": "^2.1.0",
+    "react-json-tree": "^0.20.0",
+    "react-player": "^3.3.1",
+    "screenfull": "^6.0.2",
+    "sha512-crypt-ts": "^0.1.27",
+    "use-analytics": "^1.1.0"
+  },
+  "devDependencies": {
+    "@analytics/google-analytics": "^1.1.0",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@svgr/webpack": "^8.1.0",
+    "@types/howler": "^2.2.12",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/use-analytics": "^0.0.3",
+    "@types/webpack": "^5.28.5",
+    "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.2",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.4",
+    "node-sass": "^9.0.0",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.8.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-shell-plugin-next": "^2.3.3"
+  },
+  "volta": {
+    "node": "24.11.0",
+    "yarn": "1.19.2"
+  }
+}

package/package.json

@@ -1,9 +1,31 @@
 {
   "name": "classicy",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "A UI framework in React, replicating the user interface of Classic MacOS 8 (called Platinum).",
-  "main": "index.js",
-  "keywords": ["react", "typescript", "nextjs", "platinum", "macos-classic", "typescript-react"],
+  "exports": {
+    ".": {
+      "types": "./custom.d.ts",
+      "import": "./index.d.ts",
+      "require": "./index.js"
+    }
+  },
+  "imports": {
+    "@/*": "./dist/*.ts"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "index.js",
+    "types.d.ts"
+  ],
+  "keywords": [
+    "react",
+    "typescript",
+    "nextjs",
+    "platinum",
+    "macos-classic",
+    "typescript-react"
+  ],
   "author": "Robbie Byrd <me@robbiebyrd.com>",
   "license": "MIT",
   "scripts": {
@@ -17,29 +39,36 @@
     "serve": "npx http-server dist/ -p 3000"
   },
   "dependencies": {
+    "@analytics/google-tag-manager": "^0.6.0",
     "@mdxeditor/editor": "^3.39.1",
     "@plussub/srt-vtt-parser": "^2.0.5",
     "@tanstack/react-table": "^8.21.3",
+    "analytics": "^0.8.19",
     "classnames": "^2.5.1",
     "howler": "^2.2.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-ga4": "^2.1.0",
     "react-json-tree": "^0.20.0",
     "react-player": "^3.3.1",
     "screenfull": "^6.0.2",
-    "sha512-crypt-ts": "^0.1.27"
+    "sha512-crypt-ts": "^0.1.27",
+    "use-analytics": "^1.1.0"
   },
   "devDependencies": {
+    "@analytics/google-analytics": "^1.1.0",
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@svgr/webpack": "^8.1.0",
     "@types/howler": "^2.2.12",
-    "@types/node": "^24.0.14",
+    "@types/node": "^24.10.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/use-analytics": "^0.0.3",
     "@types/webpack": "^5.28.5",
     "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.4",
@@ -49,10 +78,16 @@
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.8.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.2",
+    "webpack-shell-plugin-next": "^2.3.3"
+  },
+  "volta": {
+    "node": "24.11.0",
+    "yarn": "1.19.2"
   }
 }

package/src/SystemFolder/ControlPanels/AppManager/ClassicyAppManager.ts

@@ -263,7 +263,7 @@ export const classicyDesktopStateEventReducer = (ds: ClassicyStore, action: Acti
     return {...ds}
 }
 
-export const DefaultDesktopState: ClassicyStore = {
+export const DefaultAppManagerState: ClassicyStore = {
     System: {
         Manager: {
             DateAndTime: {

package/src/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext.tsx

@@ -1,47 +1,73 @@
-import { ClassicySoundManagerProvider } from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import React, {createContext, type Dispatch, ReactNode, useContext, useEffect, useReducer} from 'react'
-import { classicyDesktopStateEventReducer, ClassicyStore, DefaultDesktopState } from './ClassicyAppManager'
+import {ClassicySoundManagerProvider} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
+import googleAnalytics from '@analytics/google-analytics'
+import googleTagManager from '@analytics/google-tag-manager'
+import Analytics, {AnalyticsPlugin} from 'analytics'
+import React, {createContext, type Dispatch, useContext, useEffect, useMemo, useReducer} from 'react'
+import {AnalyticsProvider} from 'use-analytics'
+import {classicyDesktopStateEventReducer, ClassicyStore, DefaultAppManagerState} from './ClassicyAppManager'
 
-const ClassicyDesktopContext = createContext<ClassicyStore>(DefaultDesktopState)
-const ClassicyDesktopDispatchContext = createContext<Dispatch<any>>((() => undefined) as Dispatch<any>)
+const ClassicyAppManagerContext = createContext<ClassicyStore>(DefaultAppManagerState)
+const ClassicyAppManagerDispatchContext = createContext<Dispatch<any>>((() => undefined) as Dispatch<any>)
 
-type ClassicyDesktopProviderProps = {
-    children: ReactNode
+type ClassicyAppManagerProviderProps = {
+    gaMeasurementIds?: string[];
+    gtmContainerId?: string;
+    appName?: string;
 }
 
-export const ClassicyDesktopProvider: React.FC<ClassicyDesktopProviderProps> = ({children}) => {
-    let desktopState: ClassicyStore
+export const ClassicyAppManagerProvider: React.FC<React.PropsWithChildren<ClassicyAppManagerProviderProps>> = (
+    {children, gtmContainerId, gaMeasurementIds, appName = "classicy"}
+) => {
+    let appManagerState: ClassicyStore = DefaultAppManagerState
 
-    if (typeof window !== 'undefined') {
-        try {
-            const storedState = localStorage.getItem('classicyDesktopState')
-            desktopState = storedState ? JSON.parse(storedState) : DefaultDesktopState
-        } catch (error) {
-            desktopState = DefaultDesktopState
+    const [appManager, dispatch] = useReducer(classicyDesktopStateEventReducer, appManagerState)
+
+    const analytics = useMemo(() => {
+        const plugins: AnalyticsPlugin[] = []
+
+        if (gaMeasurementIds && gaMeasurementIds.length > 0) {
+            plugins.push(googleAnalytics({measurementIds: gaMeasurementIds}))
+        }
+
+        if (gtmContainerId) {
+            plugins.push(googleTagManager({containerId: gtmContainerId}))
         }
-    } else {
-        desktopState = DefaultDesktopState
-    }
 
-    const [desktop, dispatch] = useReducer(classicyDesktopStateEventReducer, desktopState)
+        return Analytics({app: appName, plugins: plugins})
+    }, [])
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            try {
+                const storedState = localStorage.getItem('classicyDesktopState')
+                appManagerState = storedState ? JSON.parse(storedState) : DefaultAppManagerState
+            } catch (error) {
+                appManagerState = DefaultAppManagerState
+            }
+        } else {
+            appManagerState = DefaultAppManagerState
+        }
+    }, [])
 
     useEffect(() => {
-        localStorage.setItem('classicyDesktopState', JSON.stringify(desktop))
-    }, [desktop])
+        localStorage.setItem('classicyDesktopState', JSON.stringify(appManager))
+    }, [appManager])
 
     return (
-        <ClassicyDesktopContext.Provider value={desktop}>
-            <ClassicyDesktopDispatchContext.Provider value={dispatch}>
-                <ClassicySoundManagerProvider>{children}</ClassicySoundManagerProvider>
-            </ClassicyDesktopDispatchContext.Provider>
-        </ClassicyDesktopContext.Provider>
+        <AnalyticsProvider instance={analytics}>
+            <ClassicyAppManagerContext.Provider value={appManager}>
+                <ClassicyAppManagerDispatchContext.Provider value={dispatch}>
+                    <ClassicySoundManagerProvider>{children}</ClassicySoundManagerProvider>
+                </ClassicyAppManagerDispatchContext.Provider>
+            </ClassicyAppManagerContext.Provider>
+        </AnalyticsProvider>
     )
 }
 
-export function useDesktop() {
-    return useContext(ClassicyDesktopContext)
+export function useAppManager() {
+    return useContext(ClassicyAppManagerContext)
 }
 
-export function useDesktopDispatch() {
-    return useContext(ClassicyDesktopDispatchContext)
+export function useAppManagerDispatch() {
+    return useContext(ClassicyAppManagerDispatchContext)
 }

package/src/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearanceManager.tsx

@@ -49,7 +49,7 @@ import WavesAzul from 'img/wallpapers/waves_azul.png'
 import WavesBondi from 'img/wallpapers/waves_bondi.png'
 import WavesSunny from 'img/wallpapers/waves_sunny.png'
 import {getTheme} from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import {getClassicyAboutWindow} from '@/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow'
 import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
@@ -71,8 +71,8 @@ export const ClassicyAppearanceManager: React.FC = () => {
     const appName: string = 'Appearance Manager'
     const appId: string = 'AppearanceManager.app'
 
-    const desktopContext = useDesktop(),
-        desktopEventDispatch = useDesktopDispatch(),
+    const desktopContext = useAppManager(),
+        desktopEventDispatch = useAppManagerDispatch(),
         player = useSoundDispatch()
 
     const [showAbout, setShowAbout] = useState(false)

package/src/SystemFolder/ControlPanels/DateAndTimeManager/ClassicyDateAndTimeManager.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import {ActionMessage, ClassicyStore} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManager'
-import { useDesktop, useDesktopDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import { useAppManager, useAppManagerDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import { getClassicyAboutWindow } from '@/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow'
 import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
 import { quitAppHelper, quitMenuItemHelper } from '@/SystemFolder/SystemResources/App/ClassicyAppUtils'
@@ -21,8 +21,8 @@ export const ClassicyDateAndTimeManager: React.FC = () => {
 
     const [period, setPeriod] = useState<string>('am')
 
-    const desktopContext = useDesktop(),
-        desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager(),
+        desktopEventDispatch = useAppManagerDispatch()
 
     const [showAbout, setShowAbout] = useState(false)
 

package/src/SystemFolder/ControlPanels/SoundManager/ClassicySoundManager.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import {useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import './ClassicySoundManager.scss'
 import {
     ClassicySoundInfo,
@@ -20,7 +20,7 @@ import React, {useState} from 'react'
 import appIcon from 'img/icons/control-panels/sound-manager/app.png'
 
 export const ClassicySoundManager: React.FC = () => {
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const playerState = useSound()
     const player = useSoundDispatch()

package/src/SystemFolder/Finder/Finder.tsx

@@ -1,4 +1,4 @@
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyAboutWindow} from '@/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow'
 import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
 import {ClassicyFileBrowser} from '@/SystemFolder/SystemResources/File/ClassicyFileBrowser'
@@ -17,8 +17,8 @@ type PathSettingsProps = {
 export const Finder = () => {
     const appName: string = 'Finder'
     const appId: string = 'Finder.app'
-    const desktopEventDispatch = useDesktopDispatch()
-    const desktop = useDesktop()
+    const desktopEventDispatch = useAppManagerDispatch()
+    const desktop = useAppManager()
 
     const [pathSettings, setPathSettings] = useState<Record<string, PathSettingsProps>>({})
     const [showAbout, setShowAbout] = useState(false)

package/src/SystemFolder/QuickTime/MoviePlayer/MoviePlayer.tsx

@@ -1,4 +1,4 @@
-import { useDesktop, useDesktopDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import { useAppManager, useAppManagerDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
 import { quitMenuItemHelper } from '@/SystemFolder/SystemResources/App/ClassicyAppUtils'
 import { QuickTimeVideoEmbed } from '@/SystemFolder/SystemResources/QuickTime/QuickTimeMovieEmbed'
@@ -25,10 +25,12 @@ export const MoviePlayerAppInfo = {
 export const MoviePlayer: React.FC = () => {
     const { name: appName, id: appId, icon: appIcon } = MoviePlayerAppInfo
 
-    const desktopEventDispatch = useDesktopDispatch()
-    const desktop = useDesktop()
+    const desktopEventDispatch = useAppManagerDispatch()
+    const desktop = useAppManager()
 
-    const openDocuments: QuickTimeMovieDocument[] = desktop.System.Manager.App.apps[appId]?.data && desktop.System.Manager.App.apps[appId].data['openFiles']
+    const openDocuments: QuickTimeMovieDocument[] = (
+        desktop.System.Manager.App.apps[appId]?.data && desktop.System.Manager.App.apps[appId].data['openFiles']
+    )
 
     // Load Default Demo documents on open
     useEffect(() => {

package/src/SystemFolder/QuickTime/PictureViewer/PictureViewer.tsx

@@ -1,4 +1,4 @@
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
 import {quitMenuItemHelper} from '@/SystemFolder/SystemResources/App/ClassicyAppUtils'
 import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
@@ -21,8 +21,8 @@ export const PictureViewerAppInfo = {
 export const QuickTimePictureViewer: React.FC = () => {
     const {name: appName, id: appId, icon: appIcon} = PictureViewerAppInfo
 
-    const desktopEventDispatch = useDesktopDispatch()
-    const desktop = useDesktop()
+    const desktopEventDispatch = useAppManagerDispatch()
+    const desktop = useAppManager()
 
     const appData = desktop.System.Manager.App.apps[appId]?.data
 

package/src/SystemFolder/QuickTime/PictureViewer/PictureViewerContext.tsx

@@ -1,11 +1,6 @@
 import { classicyAppEventHandler, ClassicyStore } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManager'
 import { PictureViewerAppInfo } from '@/SystemFolder/QuickTime/PictureViewer/PictureViewer'
-
-export type ClassicyQuickTimeDocument = {
-    url: string
-    name?: string
-    icon?: string
-}
+import {ClassicyQuickTimeDocument} from '@/SystemFolder/QuickTime/MoviePlayer/MoviePlayerContext'
 
 type classicyQuickTimeEvent = {
     type: string

package/src/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.tsx

@@ -1,23 +1,32 @@
 import './ClassicyAboutWindow.scss'
 import {ClassicyButton} from '@/SystemFolder/SystemResources/Button/ClassicyButton'
+import {ClassicyMenuItem} from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
 import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
-import { ClassicyMenuItem } from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
-import React from "react";
+import React, {useEffect} from "react";
+import {useAnalytics} from "use-analytics";
 
-type ClassicyAboutWindowProps = {
+export type ClassicyAboutWindowProps = {
     appId: string
     appName: string
     appIcon: string
     hideFunc: any
     appMenu?: ClassicyMenuItem[]
 }
+
 export const ClassicyAboutWindow: React.FC<ClassicyAboutWindowProps> = ({
-    appId,
-    appName,
-    appIcon,
-    hideFunc,
-    appMenu,
-}) => {
+                                                                            appId,
+                                                                            appName,
+                                                                            appIcon,
+                                                                            hideFunc,
+                                                                            appMenu,
+                                                                        }) => {
+    const {track} = useAnalytics()
+    const analyticsArgs = {type: "ClassicyAboutWindow", appId, appName, appIcon}
+
+    useEffect(() => {
+        track("open", analyticsArgs)
+    }, []);
+
     return (
         <ClassicyWindow
             id="AppearanceManager_about"
@@ -33,7 +42,7 @@ export const ClassicyAboutWindow: React.FC<ClassicyAboutWindowProps> = ({
             appMenu={appMenu}
         >
             <div className={"aboutWindow"}>
-                <img src={appIcon} alt="About" />
+                <img src={appIcon} alt="About"/>
                 <h1>{appName}</h1>
                 <h5>Not Copyright &copy; 1997 Apple Computer, Inc.</h5>
                 <ClassicyButton onClickFunc={hideFunc}>OK</ClassicyButton>

package/src/SystemFolder/SystemResources/App/ClassicyApp.tsx

@@ -1,10 +1,10 @@
 import {intToHex} from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyColors'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
 import React, {useEffect} from 'react'
 import {JSONTree} from 'react-json-tree'
 
-interface ClassicyAppProps {
+export interface ClassicyAppProps {
     id: string
     name: string
     icon: string
@@ -27,8 +27,8 @@ export const ClassicyApp: React.FC<ClassicyAppProps> = ({
                                                             debug = false,
                                                             children,
                                                         }) => {
-    const desktopContext = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const themeData = desktopContext.System.Manager.Appearance.activeTheme
     const debuggerJSONTheme = {

package/src/SystemFolder/SystemResources/Button/ClassicyButton.tsx

@@ -1,29 +1,37 @@
 import './ClassicyButton.scss'
-import { useSoundDispatch } from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
+import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import classNames from 'classnames'
 import React from 'react'
+import {useAnalytics} from "use-analytics";
 
-type ClassicyButtonProps = {
+type ClassicyButtonProps = React.PropsWithChildren<{
     isDefault?: boolean
     disabled?: boolean
-    onClickFunc?: any
-    children?: any
+    onClickFunc?: React.MouseEventHandler<HTMLButtonElement>
     buttonShape?: 'rectangle' | 'square'
     buttonSize?: 'medium' | 'small'
     buttonType?: 'button' | 'submit' | 'reset'
-}
+}>
 
 export const ClassicyButton: React.FC<ClassicyButtonProps> = ({
-    isDefault = false,
-    buttonType = 'button',
-    buttonShape = 'rectangle',
-    buttonSize,
-    disabled = false,
-    onClickFunc = null,
-    children,
-}) => {
+                                                                  isDefault = false,
+                                                                  buttonType = 'button',
+                                                                  buttonShape = 'rectangle',
+                                                                  buttonSize,
+                                                                  disabled = false,
+                                                                  onClickFunc,
+                                                                  children,
+                                                              }) => {
     const player = useSoundDispatch()
 
+    const {track} = useAnalytics()
+    const analyticsArgs = {type: "ClassicyButton", isDefault, disabled}
+
+    const onHandleFunc = (e: React.MouseEvent<HTMLButtonElement>) => {
+        track('click', {...analyticsArgs})
+        onClickFunc && onClickFunc(e)
+    }
+
     return (
         <button
             type={buttonType}
@@ -35,12 +43,12 @@ export const ClassicyButton: React.FC<ClassicyButtonProps> = ({
                 buttonShape === 'square' ? "classicyButtonShapeSquare" : '',
                 buttonSize === 'small' ? "classicyButtonSmall" : ''
             )}
-            onClick={onClickFunc}
+            onClick={onHandleFunc}
             onMouseDown={() => {
-                player({ type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickDown' })
+                player({type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickDown'})
             }}
             onMouseUp={() => {
-                player({ type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickUp' })
+                player({type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickUp'})
             }}
             disabled={disabled}
         >