feat: implement right-click context menu for style customization and enhance real-time stats tracking

frontend/src/composables/useContextMenu.ts

@@ -0,0 +1,58 @@
+/**
+ * Global singleton for the right-click style context menu.
+ * Any component calls openContextMenu() to display the floating picker,
+ * and StyleContextMenu.vue (mounted once in App.vue) renders it.
+ */
+import { reactive } from 'vue';
+
+export interface ContextMenuItem {
+  value: string;
+  label: string;
+  swatch?: string;        // optional color swatch dot
+  isHeader?: boolean;     // non-interactive section heading
+}
+
+interface MenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}
+
+const state = reactive<MenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  items: [],
+  current: '',
+  onSelect: () => {},
+});
+
+export function openContextMenu(opts: {
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}): void {
+  state.visible = true;
+  state.x = opts.x;
+  state.y = opts.y;
+  state.title = opts.title;
+  state.items = opts.items;
+  state.current = opts.current;
+  state.onSelect = opts.onSelect;
+}
+
+export function closeContextMenu(): void {
+  state.visible = false;
+}
+
+export function useContextMenu() {
+  return { state };
+}