@necrolab/dashboard 0.5.23 → 0.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.23",
+    "version": "0.5.24",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
@@ -9,7 +9,9 @@
         "expose": "node dev-server.js",
         "postinstall": "node postinstall.js",
         "preview": "vite preview",
-        "lint": "npx eslint src/ --fix"
+        "lint": "npx eslint src/ --fix",
+        "release": "npm version patch && npm i && npm publish",
+        "release:minor": "npm version minor && npm i && npm publish"
     },
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",

package/src/components/Editors/Account/Account.vue

@@ -30,7 +30,7 @@
             </h4>
         </div>
 
-        <div class="col-span-1 flex">
+        <div class="col-span-1 flex items-center justify-center">
             <ActionButtonGroup>
                 <li>
                     <button @click="edit">

package/src/components/Editors/Profile/CreateProfile.vue

@@ -8,8 +8,17 @@
 
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
+                <!-- Country chooser -->
+                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-4 md:col-span-2" noWrapper>
+                    <ProfileCountryChooser
+                        class="h-10"
+                        :value="formProfile.country"
+                        :onClick="chooseCountry"
+                        :disabled="true" />
+                </FormField>
+
                 <!-- Profile tag -->
-                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
+                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-8 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full`"
                         :default="ui.profile.tags[0]"
@@ -19,7 +28,7 @@
                 </FormField>
 
                 <!-- Card Number -->
-                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-8">
+                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-6">
                     <input
                         ref="cardNumberInput"
                         placeholder="Enter card number"
@@ -30,15 +39,6 @@
                         @focus="formatCardNumberDisplay" />
                 </FormField>
 
-                <!-- Country chooser -->
-                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-12 md:col-span-2" noWrapper>
-                    <ProfileCountryChooser
-                        class="h-10"
-                        :value="formProfile.country"
-                        :onClick="chooseCountry"
-                        :disabled="true" />
-                </FormField>
-
                 <!-- Exp Year -->
                 <FormField label="Expiry Year" :icon="TimerIcon" :error="errors.includes('expYear')" z-index="0" class="col-span-6 md:col-span-5" noWrapper>
                     <Dropdown

package/src/components/Tasks/Task.vue

@@ -1,24 +1,26 @@
 <template>
     <Row
-        class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12 min-h-full"
+        class="relative min-h-full grid-cols-10 gap-2 text-white lg:grid-cols-12"
         @click="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd">
-        <div class="col-span-1 flex items-center justify-start lg:col-span-2 py-2">
+        <div class="col-span-1 flex items-center justify-start py-2 lg:col-span-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <div
                 v-if="props.preferEventName && props.task.eventName"
-                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
+                class="hidden min-w-0 max-w-full cursor-pointer flex-col justify-center gap-0.5 lg:flex"
                 @click="copy(props.task.eventId, 'Copied event ID')"
                 :title="`Event ID: ${props.task.eventId}`">
-                <div class="max-w-45 truncate text-xs+ font-semibold leading-tight text-white">
+                <div class="max-w-45 text-xs+ truncate font-semibold leading-tight text-white">
                     {{ props.task.eventName }}
                 </div>
-                <EventDetailRow :content="[props.task.venueName, props.task.eventCity].filter(Boolean).join(', ')" truncate>
+                <EventDetailRow
+                    :content="[props.task.venueName, props.task.eventCity].filter(Boolean).join(', ')"
+                    truncate>
                     <template #icon>
                         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                         <circle cx="12" cy="10" r="3"></circle>
@@ -32,26 +34,46 @@
                         <line x1="3" y1="10" x2="21" y2="10"></line>
                     </template>
                 </EventDetailRow>
-                <div v-if="props.task.email" class="flex items-start gap-1 text-3xs leading-tight-sm min-h-2.75">
-                    <svg class="icon-sm" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <div v-if="props.task.email" class="text-3xs leading-tight-sm min-h-2.75 flex items-start gap-1">
+                    <svg
+                        class="icon-sm"
+                        width="10"
+                        height="10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        viewBox="0 0 24 24">
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
                     </svg>
-                    <span class="truncate text-light-500 text-3xs leading-tight-sm">{{ props.task.email }}</span>
+                    <span class="text-3xs leading-tight-sm truncate text-light-500">{{ props.task.email }}</span>
                 </div>
             </div>
             <div
                 v-else
-                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
-                @click="copy(props.task.eventId || props.task.email, props.task.eventId ? 'Copied event ID' : 'Copied email')">
-                <div class="flex-gap-1 items-center text-xs+ text-white font-semibold max-w-45 truncate leading-tight-md">
-                    <svg class="icon-sm" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+                class="hidden min-w-0 max-w-full cursor-pointer flex-col justify-center gap-0.5 lg:flex"
+                @click="
+                    copy(
+                        props.task.eventId || props.task.email,
+                        props.task.eventId ? 'Copied event ID' : 'Copied email'
+                    )
+                ">
+                <div
+                    class="flex-gap-1 text-xs+ max-w-45 leading-tight-md items-center truncate font-semibold text-white">
+                    <svg
+                        class="icon-sm"
+                        width="11"
+                        height="11"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2.5"
+                        viewBox="0 0 24 24">
                         <path d="M9 11l3 3L22 4"></path>
                         <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                     </svg>
                     <span>{{ props.task.eventId || props.task.email }}</span>
                 </div>
-                <EventDetailRow v-if="props.task.eventId && props.task.email && props.task.eventId !== props.task.email" :content="props.task.email" truncate>
+                <EventDetailRow v-if="!props.task.eventId" :content="props.task.email" truncate>
                     <template #icon>
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
@@ -60,19 +82,29 @@
             </div>
         </div>
         <div class="col-span-2 overflow-hidden lg:col-span-3 xl:col-span-2">
-            <h4 class="text-center text-light-300 text-xs leading-tight lg:text-2xs">
+            <h4 class="lg:text-2xs text-center text-xs leading-tight text-light-300">
                 <span v-if="!props.task.reservedTicketsList">-</span>
                 <div v-else class="overflow-hidden">
-                    <div v-for="(l, index) in props.task.reservedTicketsList.split('\n')" :key="`ticket-${index}`" class="truncate">
+                    <div
+                        v-for="(l, index) in props.task.reservedTicketsList.split('\n')"
+                        :key="`ticket-${index}`"
+                        class="truncate">
                         <span
                             v-if="!!l.trim()"
                             class="text-xs"
-                            :class="{ 'text-green-400 font-bold': isTotalPrice(l, index, props.task.reservedTicketsList.split('\n')) }"
-                        >{{ l.trim() }}</span>
+                            :class="{
+                                'font-bold text-green-400': isTotalPrice(
+                                    l,
+                                    index,
+                                    props.task.reservedTicketsList.split(' ')
+                                )
+                            }">
+                            {{ l.trim() }}
+                        </span>
                     </div>
                 </div>
                 <span
-                    class="block mt-1 font-bold text-xs"
+                    class="mt-1 block text-xs font-bold"
                     :class="{
                         'text-red-400':
                             props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
@@ -84,7 +116,7 @@
         <div class="col-span-6 justify-center text-center md:col-span-5 lg:col-span-4 xl:col-span-5">
             <div class="task-status-badge">
                 <div
-                    class="w-2 h-2 rounded-full flex-shrink-0"
+                    class="h-2 w-2 flex-shrink-0 rounded-full"
                     :class="
                         colorToClass(
                             props.task.active || props.task.status.toLowerCase() === 'idle'
@@ -92,10 +124,14 @@
                                 : 'red'
                         )
                     "></div>
-                <span class="truncate text-sm font-medium uppercase text-light-300 tracking-wide max-md:text-xs max-md:max-w-full max-sm:tracking-normal">{{ props.task.status }}</span>
+                <span
+                    class="max-md:text-xs max-md:max-w-full max-sm:tracking-normal truncate text-sm font-medium uppercase tracking-wide text-light-300">
+                    {{ props.task.status }}
+                </span>
             </div>
         </div>
-        <div class="col-span-1 flex md:col-span-2 lg:col-span-3 overflow-visible max-sm:min-w-0 max-sm:flex-shrink-0 max-sm:items-center max-sm:justify-end max-sm:px-0.5">
+        <div
+            class="max-sm:min-w-0 max-sm:flex-shrink-0 max-sm:items-center max-sm:justify-end max-sm:px-0.5 col-span-1 flex overflow-visible md:col-span-2 lg:col-span-3">
             <ActionButtonGroup class="overflow-visible" :allowWrap="true">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)" aria-label="Stop task">
@@ -127,8 +163,10 @@
                 </li>
             </ActionButtonGroup>
         </div>
-        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center xl:flex max-sm:left-16 max-sm:top-1 max-sm:z-10">
-            <h4 class="text-center text-xs text-light-500 bg-dark-475/40 border border-dark-500 font-semibold tracking-wide m-0 px-1.5 py-0.5 rounded text-2xs lg:text-2xs">
+        <div
+            class="max-sm:left-16 max-sm:top-1 max-sm:z-10 absolute right-5 top-4 col-span-1 hidden items-center justify-center xl:flex">
+            <h4
+                class="bg-dark-475/40 text-2xs lg:text-2xs m-0 rounded border border-dark-500 px-1.5 py-0.5 text-center text-xs font-semibold tracking-wide text-light-500">
                 {{ props.task.taskId }}
             </h4>
         </div>
@@ -137,7 +175,7 @@
             <div
                 v-if="ui.openContextMenu === task.taskId"
                 ref="contextMenuRef"
-                class="w-42 context-menu z-max fixed grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
+                class="w-42 context-menu fixed z-max grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
                 :style="contextMenuPosition">
                 <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
                     Open Event
@@ -237,10 +275,9 @@ onUnmounted(() => {
     document.removeEventListener("click", handleClickOutside);
 });
 
-
 const openViewTaskModal = () => {
     ui.selectedTaskForView = props.task;
-    ui.toggleModal('view-task');
+    ui.toggleModal("view-task");
 };
 
 const openInBrowser = (debug) => {

package/src/components/ui/StatusBadge.vue

@@ -25,7 +25,7 @@ const disabledClasses = "bg-red-500/20 border-red-500/30";
 <template>
     <div
         :class="[
-            'flex-center rounded-full border-2 transition-all duration-200',
+            'flex items-center justify-center rounded-full border-2 transition-all duration-200',
             enabled ? enabledClasses : disabledClasses,
             sizeClasses[size]
         ]">

package/src/composables/useFilterCSS.js

@@ -19,7 +19,9 @@ export function useFilterCSS(filterBuilder, svg) {
             document.head.appendChild(styleElement);
         }
 
-        const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
+        // Only use cssClasses now (permanent filter colors)
+        // temporaryCSS is no longer used - hover uses DOM classes instead
+        const combinedCSS = filterBuilder.value.cssClasses;
         if (styleElement.textContent !== combinedCSS) {
             styleElement.textContent = combinedCSS;
         }
@@ -35,17 +37,9 @@ export function useFilterCSS(filterBuilder, svg) {
             });
         };
 
-        const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
-        filterBuilder.value.highlight = (...args) => {
-            originalHighlight(...args);
-            nextTick(() => injectStyles());
-        };
-
-        const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
-        filterBuilder.value.clearHighlight = () => {
-            originalClearHighlight();
-            nextTick(() => injectStyles());
-        };
+        // NOTE: highlight() and clearHighlight() now use DOM class manipulation
+        // They don't modify CSS, so we don't wrap them to inject styles
+        // This eliminates the flicker caused by style element updates
     };
 
     const cleanupStyles = () => {

package/src/libs/Filter.js

@@ -199,6 +199,8 @@ export default class FilterBuilder {
         };
         this.cssClasses = "";
         this.temporaryCSS = "";
+        this._highlightedElements = null;
+        this._currentlyHighlightedSection = null;
 
         this.filterTypes = {
             INVALID: -1,
@@ -252,7 +254,11 @@ export default class FilterBuilder {
     }
 
     addRowHandlers() {
-        let lastHighlightedSection = null;
+        // Track the currently highlighted section across all handlers
+        // This prevents flicker when moving mouse between rows
+        if (!this.lastHighlightedSection) {
+            this.lastHighlightedSection = null;
+        }
 
         for (let i = 0; i < this.rows.length; i++) {
             const row = this.rows[i];
@@ -306,14 +312,14 @@ export default class FilterBuilder {
                 const sectionKey = `${parsed.section}`;
 
                 // Skip if already highlighting this section - prevents flickering
-                if (lastHighlightedSection === sectionKey) return;
+                if (this.lastHighlightedSection === sectionKey) return;
 
                 // Only clear if switching sections
-                if (lastHighlightedSection && lastHighlightedSection !== sectionKey) {
+                if (this.lastHighlightedSection && this.lastHighlightedSection !== sectionKey) {
                     this.clearHighlight();
                 }
 
-                lastHighlightedSection = sectionKey;
+                this.lastHighlightedSection = sectionKey;
 
                 const matchingFilter = this.filters.find(
                     (f) =>
@@ -328,22 +334,101 @@ export default class FilterBuilder {
                 else this.highlight({ section: matchingFilter.section });
             };
 
-            row.onmouseout = () => {
-                lastHighlightedSection = null;
-                if (!this.isDragging) this.clearHighlight();
-            };
+            // Don't use onmouseout - it causes flicker when moving between rows in the same section
+            // clearHighlight is already handled when switching to a different section (line 312-314)
         }
     }
 
     reload(eventId) {
         const paths = document.querySelectorAll("path");
-        this.rows = [...paths].filter((r) => r.id.startsWith("s_"));
+        // Include ALL paths that have a section attribute, not just rows
+        // This includes section containers, backgrounds, and any other paths
+        this.rows = [...paths].filter((r) => {
+            const hasSection = r.attributes['section'];
+            const isNotGA = !r.attributes['generaladmission'];
+            return hasSection && isNotGA;
+        });
 
         this.addLabelHandlers();
         this.addGAHandlers();
         this.addRowHandlers();
         this.currentEventId = eventId;
 
+        // Handle mouse events on the SVG wrapper
+        const svgWrapper = document.querySelector('.svg-wrapper');
+        if (svgWrapper) {
+            // Clear highlight when mouse leaves the entire SVG area
+            svgWrapper.onmouseleave = () => {
+                this.lastHighlightedSection = null;
+                if (!this.isDragging) this.clearHighlight();
+            };
+
+            // When hovering on SVG background (between rows), maintain current highlight
+            svgWrapper.onmouseover = (e) => {
+                const target = e.target;
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    e.stopPropagation();
+                    return;
+                }
+            };
+
+            // CRITICAL: Handle clicks on SVG background (empty space)
+            // When user clicks empty space, create filter for currently highlighted section
+            svgWrapper.onclick = (e) => {
+                const target = e.target;
+                // Only handle clicks on background (not on path elements)
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    // If we have a highlighted section, create filter for it
+                    if (this._currentlyHighlightedSection) {
+                        const matchingFilter = this.filters.find(
+                            (f) => this.isForCurrentEvent(f) && f.section === this._currentlyHighlightedSection
+                        );
+
+                        if (matchingFilter) {
+                            // Toggle expanded state
+                            if (this.expandedFilter === matchingFilter.id) {
+                                this.setExpandedFilter(null);
+                            } else {
+                                this.setExpandedFilter(matchingFilter.id);
+                            }
+                        } else {
+                            // Create new filter
+                            this.addFilter({
+                                section: this._currentlyHighlightedSection,
+                                event: this.currentEventId
+                            });
+                        }
+                    }
+                }
+            };
+
+            // Support touch events on background too
+            svgWrapper.ontouchend = (e) => {
+                const target = e.target;
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    e.preventDefault();
+                    if (this._currentlyHighlightedSection) {
+                        const matchingFilter = this.filters.find(
+                            (f) => this.isForCurrentEvent(f) && f.section === this._currentlyHighlightedSection
+                        );
+
+                        if (matchingFilter) {
+                            if (this.expandedFilter === matchingFilter.id) {
+                                this.setExpandedFilter(null);
+                            } else {
+                                this.setExpandedFilter(matchingFilter.id);
+                            }
+                        } else {
+                            this.addFilter({
+                                section: this._currentlyHighlightedSection,
+                                event: this.currentEventId
+                            });
+                        }
+                    }
+                }
+            };
+        }
+
         this.updateCss();
     }
 
@@ -494,6 +579,11 @@ export default class FilterBuilder {
             this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
         });
 
+        // CRITICAL: Add hover styles AFTER filter styles so they win specificity battle
+        // Use BOTH stroke and fill to cover entire section area, not just row lines
+        this.cssClasses += `.svg-wrapper path.hover-highlight-stroke {stroke: ${colors.HIGHLIGHT} !important; fill: ${colors.HIGHLIGHT} !important; fill-opacity: 0.3 !important;}\n`;
+        this.cssClasses += `.svg-wrapper path.hover-highlight-fill {fill: ${colors.HIGHLIGHT} !important;}\n`;
+
         log("Generated CSS:", this.cssClasses);
     }
 
@@ -561,6 +651,36 @@ export default class FilterBuilder {
                 e.preventDefault();
                 labelClickHandler();
             };
+
+            // Add hover handler to highlight section when hovering over label
+            label.onmouseover = () => {
+                const matchingFilter = this.filters.find((f) => {
+                    if (!this.isForCurrentEvent(f)) return false;
+                    if (f.section !== section && f.section !== gaSectionNameMapping[section]) return false;
+                    return true;
+                });
+
+                if (!matchingFilter) return;
+
+                const sectionKey = matchingFilter.section;
+
+                // Skip if already highlighting this section
+                if (this.lastHighlightedSection === sectionKey) return;
+
+                // Clear if switching sections
+                if (this.lastHighlightedSection && this.lastHighlightedSection !== sectionKey) {
+                    this.clearHighlight();
+                }
+
+                this.lastHighlightedSection = sectionKey;
+
+                // Highlight the section
+                if (Array.isArray(matchingFilter.rows)) {
+                    matchingFilter.rows.forEach((row) => this.highlight({ section: matchingFilter.section, row: row }));
+                } else {
+                    this.highlight({ section: matchingFilter.section });
+                }
+            };
         }
     }
 
@@ -644,21 +764,43 @@ export default class FilterBuilder {
     highlight(filter, isGA = false) {
         if (filter.row && this.isUnselectable(filter.sec, filter.row)) return;
 
-        let newCSS = "";
+        // Check if we're already highlighting this exact section
+        const sectionKey = filter.section || filter.name;
+        if (this._currentlyHighlightedSection === sectionKey) {
+            return; // Already highlighting this section
+        }
+
+        // Clear previous highlight first
+        this.clearHighlight();
+        this._currentlyHighlightedSection = sectionKey;
 
+        // Use direct DOM manipulation instead of CSS injection
+        // This is MUCH faster and prevents flicker
         if (isGA) {
             if (this.filters.find((f) => f.section === filter.name)) return;
-            newCSS += `.svg-wrapper path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[name="${filter.section || filter.name}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-fill'));
+            this._highlightedElements = Array.from(paths);
         } else if (filter.row) {
-            newCSS += `.svg-wrapper path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[section="${filter.section}"][row="${filter.row}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-stroke'));
+            this._highlightedElements = Array.from(paths);
         } else {
-            newCSS += `.svg-wrapper path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[section="${filter.section}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-stroke'));
+            this._highlightedElements = Array.from(paths);
         }
-        this.temporaryCSS += newCSS;
     }
 
     clearHighlight() {
-        this.temporaryCSS = "";
+        // Remove classes from previously highlighted elements
+        if (this._highlightedElements) {
+            this._highlightedElements.forEach(el => {
+                el.classList.remove('hover-highlight-stroke', 'hover-highlight-fill');
+            });
+            this._highlightedElements = null;
+        }
+        this._currentlyHighlightedSection = null;
     }
 
     isUnselectable(section, row) {

package/src/libs/tm-renderer/axs/renderer.js

@@ -82,11 +82,11 @@ class AXSRenderer extends BaseRenderer {
     }
 
     async getEventData() {
-        return await getEventData(this.eventId, this.options.proxy, this.logger);
+        return await getEventData(this.eventId, this.logger);
     }
 
     async getEventDataUrl() {
-        return await getEventDataUrl(this.eventId, this.options.proxy, this.logger);
+        return await getEventDataUrl(this.eventId, this.logger);
     }
 
     async fetchBackgroundImage() {

package/src/libs/tm-renderer/axs/requests.js

@@ -9,7 +9,7 @@ function buildAXSEventDataUrl(eventId, data) {
     return `${base}maps/main/master_full.json?Policy=${policy}_&Signature=${sig}&Key-Pair-Id=${keypair}&v=${version}`;
 }
 
-async function getEventDataUrl(eventId, proxy, logger) {
+async function getEventDataUrl(eventId, logger) {
     const url = `https://contentdistribution.3ddvapis.com/api/v1/dvm/token/venue/${eventId}`;
     const customHeaders = {
         "referer": "https://tickets-de.axs.com/",
@@ -17,17 +17,17 @@ async function getEventDataUrl(eventId, proxy, logger) {
             "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36",
     };
 
-    return await getJsonDataWithHeaders(url, customHeaders, proxy, 0, logger);
+    return await getJsonDataWithHeaders(url, customHeaders, 0, logger);
 }
 
-async function getEventData(eventId, proxy, logger) {
-    const urlData = await getEventDataUrl(eventId, proxy, logger);
+async function getEventData(eventId, logger) {
+    const urlData = await getEventDataUrl(eventId, logger);
     if (!urlData) {
         throw new Error("Failed to get event data URL");
     }
 
     const url = buildAXSEventDataUrl(eventId, urlData);
-    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+    return await getJsonDataWithHeaders(url, {}, 0, logger);
 }
 
 export {

package/src/libs/tm-renderer/base-renderer.js

@@ -12,16 +12,11 @@ class BaseRenderer {
 
         this.logger = createLogger([this.constructor.name, this.eventId]);
         this.storage = null;
-        this.sharp = null;
-        this.fs = null;
         this.svg = null;
-        this.bgImg = null;
     }
 
     init(dependencies) {
         this.storage = dependencies.storage;
-        this.sharp = dependencies.sharp;
-        this.fs = dependencies.fs;
         return this;
     }
 
@@ -90,82 +85,9 @@ class BaseRenderer {
         throw new Error("renderSeatmap() method must be implemented by subclass");
     }
 
-    async outputToSVG(path) {
-        if (!this.svg || !this.fs) {
-            this.logger.Error("No SVG data available or fs not initialized");
-            return this;
-        }
-        this.fs.writeFileSync(path, this.svg);
-        return this;
-    }
-
-    async outputToPNG(filePath) {
-        if (!this.svg || !this.sharp) {
-            this.logger.Error("No SVG data available or sharp not initialized");
-            return this;
-        }
-        const s = await this._png();
-        await s.toFile(filePath);
-        return this;
-    }
-
-    async outputToPNGBuffer() {
-        if (!this.svg || !this.sharp) {
-            return Buffer.from([0x00]);
-        }
-        const s = await this._png();
-        return s.toBuffer();
-    }
-
-    async _png() {
-        let background = await this.storage.getItem(`renderer.background.${this.eventId}`);
-        if (!background) {
-            try {
-                background = await this._fetchSaveBgImage();
-            } catch (e) {
-                this.logger.Error(e.message);
-            }
-        } else if (background) {
-            if (typeof background === "string" && background.startsWith("{")) {
-                background = JSON.parse(background);
-            }
-            background = Buffer.from(background);
-            const bgData = await this.sharp(background).metadata();
-            if (bgData.width !== this.config.outputWidth) {
-                this.config.outputWidth = bgData.width;
-            }
-        }
-
-        const svgBuffer = Buffer.from(this.svg);
-        const png = await this.sharp(svgBuffer).png().resize(this.config.outputWidth).toBuffer();
-
-        if (background) {
-            const foreground = await this.sharp(png).toBuffer();
-            return this.sharp(background).composite([
-                {
-                    input: foreground,
-                    gravity: "southeast",
-                },
-            ]);
-        } else {
-            return this.sharp(png);
-        }
-    }
-
-    async _fetchSaveBgImage() {
-        const bgImgData = await this.fetchBackgroundImage();
-        const background = await this.sharp(bgImgData).png().resize(this.config.outputWidth).toBuffer();
-        await this.storage.setItem(`renderer.background.${this.eventId}`, background);
-        return background;
-    }
-
     createElement(tag, attrs, body = "") {
         return utils.createElement(tag, attrs, body);
     }
-
-    async fetchBackgroundImage() {
-        throw new Error("fetchBackgroundImage() method must be implemented by subclass");
-    }
 }
 
 export default BaseRenderer;

package/src/libs/tm-renderer/factory.js

@@ -1,14 +1,15 @@
 import TMRenderer from "./tm/renderer.js";
 import AXSRenderer from "./axs/renderer.js";
+import WebPersistance from "./dependencies/web.persist.js";
 import { createLogger } from "./dependencies/logger.js";
 
 class RendererFactory {
     constructor() {
         this.logger = createLogger("RENDERER-FACTORY");
+        this.storage = null;
     }
+
     async init() {
-        // Browser-only version - always use WebPersistance
-        const { default: WebPersistance } = await import("./dependencies/web.persist.js");
         this.storage = new WebPersistance();
         this.logger.Info("Renderer initialized for browser");
     }
@@ -20,11 +21,7 @@ class RendererFactory {
         }
 
         const renderer = new TMRenderer(eventId, options);
-        renderer.init({
-            storage: this.storage,
-            sharp: this.sharp,
-            fs: this.fs,
-        });
+        renderer.init({ storage: this.storage });
         return renderer;
     }
 
@@ -35,11 +32,7 @@ class RendererFactory {
         }
 
         const renderer = new AXSRenderer(eventId, options);
-        renderer.init({
-            storage: this.storage,
-            sharp: this.sharp,
-            fs: this.fs,
-        });
+        renderer.init({ storage: this.storage });
         return renderer;
     }
 }

package/src/libs/tm-renderer/index.js

@@ -1,21 +1,3 @@
 import RendererFactory from "./factory.js";
 
-if (typeof process !== "undefined" && process.env) {
-    process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
-
-    if (process.removeAllListeners) {
-        process.removeAllListeners("warning");
-    }
-
-    if (process.emitWarning) {
-        const originalEmitWarning = process.emitWarning;
-        process.emitWarning = function (warning, type, code, ctor) {
-            const suppressedTypes = ["ExperimentalWarning", "DeprecationWarning", "UnhandledPromiseRejectionWarning"];
-            if (suppressedTypes.includes(type)) return;
-
-            return originalEmitWarning.call(process, warning, type, code, ctor);
-        };
-    }
-}
-
 export default RendererFactory;

package/src/libs/tm-renderer/request-utils.js

@@ -21,22 +21,12 @@ const headers = {
     "accept-language": "en-US,en;q=0.9",
 };
 
-async function createProxyAgent(proxy) {
-    // Browser-only version - no proxy support
-    return undefined;
-}
-
-async function getFetchOptions(targetUrl, proxy = null, customHeaders = {}) {
-    // Browser-only version with minimal headers for maximum compatibility
-    const options = {
-        headers: {
-            ...customHeaders,
-        },
+async function getFetchOptions(targetUrl, customHeaders = {}) {
+    return {
+        headers: { ...customHeaders },
         mode: "cors",
         cache: "default"
     };
-
-    return options;
 }
 
 async function makeRequest(url, options = {}, retries = 0, logger = null) {
@@ -70,26 +60,20 @@ async function getJsonData(url, options = {}, retries = 0, logger = null) {
 async function getBinaryData(url, options = {}, retries = 0, logger = null) {
     const response = await makeRequest(url, options, retries, logger);
     const arrayBuffer = await response.arrayBuffer();
-
-    // Use Buffer in Node.js, Uint8Array in browser
-    if (typeof Buffer !== 'undefined') {
-        return Buffer.from(arrayBuffer);
-    }
     return new Uint8Array(arrayBuffer);
 }
 
-async function getJsonDataWithHeaders(url, customHeaders = {}, proxy = null, retries = 0, logger = null) {
-    const options = await getFetchOptions(url, proxy, customHeaders);
+async function getJsonDataWithHeaders(url, customHeaders = {}, retries = 0, logger = null) {
+    const options = await getFetchOptions(url, customHeaders);
     return await getJsonData(url, options, retries, logger);
 }
 
-async function getBinaryDataWithHeaders(url, customHeaders = {}, proxy = null, retries = 0, logger = null) {
-    const options = await getFetchOptions(url, proxy, customHeaders);
+async function getBinaryDataWithHeaders(url, customHeaders = {}, retries = 0, logger = null) {
+    const options = await getFetchOptions(url, customHeaders);
     return await getBinaryData(url, options, retries, logger);
 }
 
 export {
-    createProxyAgent,
     getFetchOptions,
     makeRequest,
     getJsonData,

package/src/libs/tm-renderer/tm/renderer.js

@@ -550,18 +550,18 @@ class TMRenderer extends BaseRenderer {
 
     // Request methods
     async getEventData() {
-        return await getEventData(this.eventId, this.options.country, this.options.proxy, this.logger);
+        return await getEventData(this.eventId, this.options.country, this.logger);
     }
 
     async getSeatData() {
-        return await getSeatData(this.eventId, this.options.country, this.options.proxy, this.logger);
+        return await getSeatData(this.eventId, this.options.country, this.logger);
     }
 
     async fetchBackgroundImage() {
         if (!this.bgImg) {
             throw new Error("Background image URL not available");
         }
-        return await fetchBackgroundImage(this.bgImg, this.options.proxy, this.logger);
+        return await fetchBackgroundImage(this.bgImg, this.logger);
     }
 }
 

package/src/libs/tm-renderer/tm/requests.js

@@ -24,18 +24,18 @@ function buildTMSeatDataUrl(eventId, country = null) {
     return url;
 }
 
-async function getEventData(eventId, country, proxy, logger) {
+async function getEventData(eventId, country, logger) {
     const url = buildTMEventDataUrl(eventId, country);
-    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+    return await getJsonDataWithHeaders(url, {}, 0, logger);
 }
 
-async function getSeatData(eventId, country, proxy, logger) {
+async function getSeatData(eventId, country, logger) {
     const url = buildTMSeatDataUrl(eventId, country);
-    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+    return await getJsonDataWithHeaders(url, {}, 0, logger);
 }
 
-async function fetchBackgroundImage(bgImgUrl, proxy, logger) {
-    return await getBinaryDataWithHeaders(bgImgUrl, {}, proxy, 0, logger);
+async function fetchBackgroundImage(bgImgUrl, logger) {
+    return await getBinaryDataWithHeaders(bgImgUrl, {}, 0, logger);
 }
 
 export {

package/src/views/FilterBuilder.vue

@@ -177,7 +177,23 @@ const panzoomOptions = {
     bounds: true,
     boundsPadding: 0.1, // Add padding to ensure it stays within bounds
     transformOrigin: { x: 0.5, y: 0.5 }, // Center the zoom
-    contain: true // Force the image to stay within the parent container
+    contain: true, // Force the image to stay within the parent container
+    beforeMouseDown: function(e) {
+        // Don't intercept clicks on interactive SVG paths - let them handle clicks directly
+        const target = e.target;
+        if (target && target.tagName && (target.tagName.toLowerCase() === 'path' || target.tagName.toLowerCase() === 'tspan')) {
+            return true; // Return true to prevent panzoom from handling this event
+        }
+        return false; // Allow panzoom to handle other clicks
+    },
+    onTouch: function(e) {
+        // Don't intercept touches on interactive SVG paths - let them handle touches directly
+        const target = e.target;
+        if (target && target.tagName && (target.tagName.toLowerCase() === 'path' || target.tagName.toLowerCase() === 'tspan')) {
+            return false; // Return false to prevent panzoom from handling this touch
+        }
+        return true; // Allow panzoom to handle other touches
+    }
 };
 let panzoomInstance;
 

package/vite.config.js

@@ -10,7 +10,6 @@ export default defineConfig({
     cacheDir: "./node_modules/.vite",
     build: {
         rollupOptions: {
-            external: ['sharp', 'node-persist', 'undici'],
             output: {
                 manualChunks: {
                     vue: ["vue", "vue-router", "pinia"],
@@ -26,8 +25,7 @@ export default defineConfig({
         emptyOutDir: false
     },
     optimizeDeps: {
-        include: ["vue", "vue-router", "pinia", "@vueuse/core"],
-        exclude: ["sharp"]
+        include: ["vue", "vue-router", "pinia", "@vueuse/core"]
     },
     define: {
         __APP_VERSION__: JSON.stringify(pkg.version),

package/src/libs/tm-renderer/dependencies/node.persist.js

@@ -1,100 +0,0 @@
-import { createLogger } from "./logger.js";
-import { sleep } from "../utils.js";
-
-// eslint-disable-next-line no-unused-vars
-const logger = createLogger("TM-RENDERER");
-
-class NodePersistProxy {
-    constructor(db) {
-        this.db = db;
-        this.retryLimit = 3;
-        this.sleepTime = 1000;
-    }
-
-    async init(options) {
-        logger.Success("Initialized local DB");
-        return this.db.init(options);
-    }
-
-    async keys(retries = 0) {
-        if (retries == this.retryLimt) return;
-
-        try {
-            return this.db.keys().catch((ex) => {
-                throw ex;
-            });
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .keys() (${ex.message})`);
-            await sleep(this.sleepTime);
-            return this.keys(++retries);
-        }
-    }
-
-    async getItem(key, retries = 0) {
-        if (!key) return;
-        if (retries == this.retryLimt) return;
-
-        try {
-            return this.db.getItem(key).catch(() => {});
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .getItem() (${ex.message})`);
-            await sleep(this.sleepTime);
-            return this.getItem(key, ++retries);
-        }
-    }
-
-    async getMultiple(keys, retries = 0) {
-        if (!keys) return;
-        if (retries == this.retryLimt) return;
-
-        try {
-            const results = [];
-            for (let i = 0; i < keys.length; i++) {
-                results.push(await this.getItem(keys[i]));
-            }
-            return results;
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .getMultiple() (${ex.message})`);
-            await sleep(this.sleepTime);
-            return this.getMultiple(keys, ++retries);
-        }
-    }
-
-    async setItem(key, value, retries = 0) {
-        if (retries == this.retryLimt) return;
-
-        try {
-            return this.db.setItem(key, value).catch(() => {});
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .setItem() (${ex.message})`);
-            await sleep(this.sleepTime);
-            return this.setItem(key, value, ++retries);
-        }
-    }
-
-    async removeItem(key, retries = 0) {
-        if (retries == this.retryLimt) return;
-
-        try {
-            return this.db.removeItem(key).catch(() => {});
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .removeItem() (${ex.message})`);
-            await sleep(this.sleepTime);
-            return this.removeItem(key, ++retries);
-        }
-    }
-
-    async updateItem(key, value, opts = {}, retries = 0) {
-        if (retries == this.retryLimt) return;
-
-        try {
-            return this.db.updateItem(key, value, opts).catch(() => {});
-        } catch (ex) {
-            logger.Error(`PERSIST: Retrying .updateItem() (${ex.message})`, key, value);
-            await sleep(this.sleepTime);
-            return this.updateItem(key, opts, value, ++retries);
-        }
-    }
-}
-
-export default NodePersistProxy;

package/src/libs/tm-renderer/dependencies/persist.js

@@ -1,23 +0,0 @@
-import { createLogger } from "./logger.js";
-import NodePersistance from "./node.persist.js";
-
-const logger = createLogger("TM-RENDERER");
-
-export default async () => {
-    logger.Info("Using node-persist");
-    const path = await import("node:path");
-    const os = await import("node:os");
-    const storage = await import("node-persist");
-    const fullPath = `${os.homedir()}/.renderer-store/`;
-    const p = path.relative(process.cwd(), fullPath);
-
-    let storageProxy = new NodePersistance(storage);
-    await storageProxy.init({
-        forgiveParseErrors: true,
-        writeQueue: true,
-        writeQueueIntervalMs: 1000,
-        writeQueueWriteOnlyLast: true,
-        dir: p,
-    });
-    return storageProxy;
-};