@necrolab/dashboard 0.5.16 → 0.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.16",
+    "version": "0.5.18",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",

package/src/App.vue

@@ -36,101 +36,31 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
 import Splash from "@/components/ui/Splash.vue";
 import ReconnectIndicator from "@/components/ui/ReconnectIndicator.vue";
-import { DEBUG } from "@/utils/debug";
-import { useDeviceDetection } from "@/composables/useDeviceDetection";
+import { useZoomPrevention } from "@/composables/useZoomPrevention";
+import { useIOSViewportHandling } from "@/composables/useIOSViewportHandling";
+import { useNotchHandling } from "@/composables/useNotchHandling";
 
 const ui = useUIStore();
 const { showSpinner: spinner } = storeToRefs(ui);
 const router = useRouter();
 const isLoading = ref(false);
-const showLandscapeLock = ref(false);
 
-const { isIOS, isIpadOS } = useDeviceDetection();
+// Initialize zoom prevention (all browsers)
+const { KEY_CODES } = useZoomPrevention();
 
-// Prevent pinch-to-zoom gestures
-document.addEventListener('touchstart', (e) => {
-    if (e.touches.length > 1) {
-        e.preventDefault();
-    }
-}, { passive: false });
-
-document.addEventListener('touchmove', (e) => {
-    if (e.touches.length > 1) {
-        e.preventDefault();
-    }
-}, { passive: false });
-
-document.addEventListener('gesturestart', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-document.addEventListener('gesturechange', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-document.addEventListener('gestureend', (e) => {
-    e.preventDefault();
-}, { passive: false });
-
-// Prevent double-tap zoom
-let lastTouchEnd = 0;
-document.addEventListener('touchend', (e) => {
-    const now = Date.now();
-    if (now - lastTouchEnd <= 300) {
-        e.preventDefault();
-    }
-    lastTouchEnd = now;
-}, { passive: false });
-
-if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
-
-// Handle iPhone landscape lock
-function updateLandscapeLock() {
-    if (isIOS() && !isIpadOS()) {
-        showLandscapeLock.value = isLandscapeMode();
-    }
-}
+// Initialize iOS viewport handling
+useIOSViewportHandling();
 
-// Update on orientation/resize
-window.addEventListener("orientationchange", updateLandscapeLock);
-window.addEventListener("resize", updateLandscapeLock);
-updateLandscapeLock();
-
-// Ensure notch handling runs when Vue app mounts
-onMounted(() => {
-    // Optimized: Single debounced handler instead of multiple setTimeouts
-    let attempts = 0;
-    const maxAttempts = 5;
-    const delays = [0, 50, 150, 300, 500];
-
-    const scheduleNextAttempt = (index) => {
-        if (index >= maxAttempts) return;
-        setTimeout(() => {
-            handleNotch();
-            scheduleNextAttempt(index + 1);
-        }, delays[index]);
-    };
-
-    scheduleNextAttempt(0);
-});
-
-// Keyboard key codes
-const KEY_CODES = {
-    ESCAPE: 27,
-    EQUAL: 61,
-    NUMPAD_PLUS: 107,
-    FIREFOX_MINUS: 173,
-    NUMPAD_MINUS: 109,
-    CHROME_EQUAL: 187,
-    MINUS: 189
-};
+// Initialize notch handling (iPhone-specific)
+const { showLandscapeLock } = useNotchHandling(ui.logger);
 
+// ESC key handling for modals
 document.onkeydown = function (evt) {
     evt = evt || window.event;
     let isEscape = false;
@@ -144,408 +74,12 @@ document.onkeydown = function (evt) {
     }
 };
 
-// Prevent ALL keyboard zoom combinations
-document.addEventListener("keydown", function (event) {
-    // Prevent Ctrl/Cmd + Plus/Minus/0 (various keycodes for different browsers)
-    if (
-        (event.ctrlKey || event.metaKey) &&
-        (event.which === KEY_CODES.EQUAL ||
-            event.which === KEY_CODES.NUMPAD_PLUS ||
-            event.which === KEY_CODES.FIREFOX_MINUS ||
-            event.which === KEY_CODES.NUMPAD_MINUS ||
-            event.which === KEY_CODES.CHROME_EQUAL ||
-            event.which === KEY_CODES.MINUS ||
-            event.keyCode === KEY_CODES.EQUAL ||
-            event.keyCode === KEY_CODES.NUMPAD_PLUS ||
-            event.keyCode === KEY_CODES.FIREFOX_MINUS ||
-            event.keyCode === KEY_CODES.NUMPAD_MINUS ||
-            event.keyCode === KEY_CODES.CHROME_EQUAL ||
-            event.keyCode === KEY_CODES.MINUS ||
-            event.key === '+' ||
-            event.key === '-' ||
-            event.key === '=' ||
-            event.key === '0')
-    ) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Prevent Ctrl/Cmd + Mouse wheel zoom (desktop)
-document.addEventListener("wheel", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Also block mousewheel for older browsers
-document.addEventListener("mousewheel", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-
-// Block DOMMouseScroll for Firefox
-document.addEventListener("DOMMouseScroll", function (event) {
-    if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-    }
-}, { passive: false });
-// Nuclear iOS keyboard prevention - lock everything down
-let isIOSDevice =
-    /iPad|iPhone|iPod/.test(navigator.platform) ||
-    (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
-
-if (isIOSDevice) {
-    const handleViewportResize = () => {
-        if (isIpadOS()) {
-            // For iPad, allow natural viewport behavior
-            return;
-        }
-
-        // For iPhone, maintain viewport stability
-        const vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty("--vh", `${vh}px`);
-    };
-
-    // Initial setup
-    handleViewportResize();
-
-    // Listen for viewport changes
-    window.addEventListener("resize", handleViewportResize);
-    if (window.visualViewport) {
-        window.visualViewport.addEventListener("resize", handleViewportResize);
-    }
-}
-
-// Simplified scroll control - let scrollable elements handle their own scrolling
-// Page scroll is already prevented by overflow: hidden on html/body
-
-
-
-// Precise scroll control - only allow scrolling within specific scrollable elements
-window.addEventListener(
-    "touchmove",
-    function (event) {
-        // Check if we're touching a scrollable element directly
-        const isScrollableTextarea =
-            event.target.tagName === "TEXTAREA" &&
-            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
-
-        // Check if we're in a scrollable container
-        const isInScrollableContainer =
-            event.target.closest(".stop-pan") ||
-            event.target.closest(".overflow-y-auto") ||
-            event.target.closest(".vue-recycle-scroller") ||
-            event.target.closest(".scroller") ||
-            event.target.closest(".scrollable");
-
-        // Check if we're in a table but only allow scrolling on actual scrollable content
-        const isInTable = event.target.closest(".table-component");
-        const isScrollableTableContent =
-            isInTable &&
-            (event.target.closest(".grid") || // Table rows
-                event.target.closest(".table-row") ||
-                isInScrollableContainer ||
-                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
-
-        // Allow scrolling in navbar and modals (they handle their own boundaries)
-        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
-        const isInModal = event.target.closest('[role="dialog"]');
-
-        // Only allow these specific cases
-        if (isScrollableTextarea || isScrollableTableContent || isInScrollableContainer || isInNavbar || isInModal) {
-            // For table content, ensure we stop propagation to prevent page scroll
-            if (isScrollableTableContent || isScrollableTextarea || isInScrollableContainer) {
-                event.stopPropagation();
-            }
-            return;
-        }
-
-        // Prevent everything else
-        event.preventDefault();
-    },
-    { passive: false }
-);
-
-let notchTimeout;
-let isNotchBusy = false;
-let lastNotchState = null;
-
-function isLandscapeMode() {
-    // Check orientation first
-    let orientationLandscape = false;
-
-    if (typeof window.orientation !== "undefined") {
-        orientationLandscape = Math.abs(window.orientation) === 90;
-    } else if (screen.orientation && typeof screen.orientation.angle !== "undefined") {
-        orientationLandscape = Math.abs(screen.orientation.angle) === 90;
-    }
-
-    // Always also check dimensions as backup
-    const dimensionLandscape = window.innerWidth > window.innerHeight;
-    const hasStrongLandscapeRatio = window.innerWidth / window.innerHeight > 1.5;
-
-    // For iPhones, if dimensions clearly indicate landscape, trust that
-    if (isIOS() && !isIpadOS() && dimensionLandscape && hasStrongLandscapeRatio) {
-        return true;
-    }
-
-    // Otherwise use orientation if available, fallback to dimensions
-    return orientationLandscape || (dimensionLandscape && hasStrongLandscapeRatio);
-}
-
-function hasDeviceNotch() {
-    // Only check for notch on actual devices that might have one
-    if (!isIOS() || isIpadOS()) return false;
-
-    return (
-        CSS.supports("padding-left: env(safe-area-inset-left)") &&
-        CSS.supports("padding-right: env(safe-area-inset-right)")
-    );
-}
-
-function handleNotch(force = false) {
-    // Simple debouncing
-    if (isNotchBusy && !force) return;
-
-    try {
-        // Only for iPhone (not iPad)
-        if (!isIOS() || isIpadOS()) return;
-
-        const wrappers = document.querySelectorAll(".ios-wrapper");
-        if (wrappers.length === 0) {
-            setTimeout(() => handleNotch(force), 100);
-            return;
-        }
-
-        const isLandscape = isLandscapeMode();
-        const hasNotch = hasDeviceNotch();
-
-        // Get orientation
-        let orientation = window.orientation;
-        if (typeof orientation === "undefined" && screen.orientation) {
-            orientation = screen.orientation.angle;
-        }
-
-        // Create state signature to prevent redundant updates
-        const currentState = `${isLandscape}-${hasNotch}-${orientation}-${window.innerWidth}x${window.innerHeight}`;
-        if (lastNotchState === currentState && !force) {
-            return;
-        }
-        lastNotchState = currentState;
-
-        isNotchBusy = true;
-
-        if (DEBUG) {
-            ui.logger.Debug("🔥 Notch Debug:", {
-                isLandscape,
-                hasNotch,
-                orientation,
-                dimensions: `${window.innerWidth}x${window.innerHeight}`,
-                state: currentState
-            });
-        }
-
-        if (hasNotch && isLandscape) {
-            // Test actual safe area values to determine notch side
-            const testDiv = document.createElement("div");
-            testDiv.style.position = "fixed";
-            testDiv.style.top = "0";
-            testDiv.style.left = "0";
-            testDiv.style.visibility = "hidden";
-            testDiv.style.paddingLeft = "env(safe-area-inset-left)";
-            testDiv.style.paddingRight = "env(safe-area-inset-right)";
-            document.body.appendChild(testDiv);
-
-            const computedStyle = getComputedStyle(testDiv);
-            const leftInset = parseFloat(computedStyle.paddingLeft) || 0;
-            const rightInset = parseFloat(computedStyle.paddingRight) || 0;
-
-            document.body.removeChild(testDiv);
-
-            if (DEBUG) ui.logger.Debug("🔍 Safe area insets:", { leftInset, rightInset });
-
-            // Apply styles instantly - NO ANIMATION
-            wrappers.forEach((wrapper) => {
-                if (leftInset > 0) {
-                    // Notch on left
-                    wrapper.style.paddingLeft = "env(safe-area-inset-left)";
-                    wrapper.style.paddingRight = "0.5rem";
-                } else if (rightInset > 0) {
-                    // Notch on right
-                    wrapper.style.paddingLeft = "0.5rem";
-                    wrapper.style.paddingRight = "env(safe-area-inset-right)";
-                } else {
-                    // Fallback - no detectable notch
-                    wrapper.style.paddingLeft = "0.5rem";
-                    wrapper.style.paddingRight = "0.5rem";
-                }
-            });
-        } else {
-            // Portrait or no notch - Responsive padding constants
-            const RESPONSIVE_PADDING = {
-                XL: { minWidth: 1280, padding: "2.5rem" },
-                LG: { minWidth: 1030, padding: "1.5rem" },
-                MD: { minWidth: 768, padding: "0.5rem" },
-                DEFAULT: { padding: "0.5rem" }
-            };
-
-            const padding =
-                window.innerWidth > RESPONSIVE_PADDING.XL.minWidth
-                    ? RESPONSIVE_PADDING.XL.padding
-                    : window.innerWidth > RESPONSIVE_PADDING.LG.minWidth
-                    ? RESPONSIVE_PADDING.LG.padding
-                    : window.innerWidth > RESPONSIVE_PADDING.MD.minWidth
-                    ? RESPONSIVE_PADDING.MD.padding
-                    : RESPONSIVE_PADDING.DEFAULT.padding;
-
-            // Apply styles instantly - NO ANIMATION
-            wrappers.forEach((wrapper) => {
-                wrapper.style.paddingLeft = padding;
-                wrapper.style.paddingRight = padding;
-            });
-        }
-
-        isNotchBusy = false;
-    } catch (error) {
-        if (DEBUG) ui.logger.Yellow("Notch error:", error);
-        isNotchBusy = false;
-    }
-}
-
-function triggerNotch() {
-    clearTimeout(notchTimeout);
-    notchTimeout = setTimeout(handleNotch, 50);
-}
-
-// Event listeners
-window.addEventListener("orientationchange", triggerNotch);
-window.addEventListener("resize", triggerNotch);
-if (screen.orientation) {
-    screen.orientation.addEventListener("change", triggerNotch);
-}
-
-// Aggressive initial setup to handle all scenarios
-function initNotchHandling() {
-    handleNotch(true); // Force first execution
-    setTimeout(() => handleNotch(true), 50);
-    setTimeout(() => handleNotch(true), 150);
-    setTimeout(() => handleNotch(true), 300);
-    setTimeout(() => handleNotch(true), 500);
-    setTimeout(() => handleNotch(true), 1000);
-    setTimeout(() => handleNotch(true), 2000); // Extra long delay for slow loads
-}
-
-// Multiple initialization points
-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initNotchHandling);
-} else {
-    initNotchHandling();
-}
-
-window.addEventListener("load", initNotchHandling);
-
-// Also run when page becomes visible (handles app switching)
-document.addEventListener("visibilitychange", () => {
-    if (!document.hidden) {
-        setTimeout(handleNotch, 100);
-    }
-});
-
-// Run on focus (when returning to app)
-window.addEventListener("focus", () => {
-    setTimeout(handleNotch, 100);
-});
-
-// Watch for ios-wrapper elements appearing in DOM
-const observer = new MutationObserver((mutations) => {
-    let shouldTrigger = false;
-
-    mutations.forEach((mutation) => {
-        if (mutation.type === "childList") {
-            mutation.addedNodes.forEach((node) => {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    if (node.classList?.contains("ios-wrapper") || node.querySelector?.(".ios-wrapper")) {
-                        shouldTrigger = true;
-                    }
-                }
-            });
-        }
-    });
-
-    if (shouldTrigger) {
-        setTimeout(() => handleNotch(true), 10);
-        setTimeout(() => handleNotch(true), 100);
-    }
-});
-
-// Start observing
-if (document.body) {
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-} else {
-    document.addEventListener("DOMContentLoaded", () => {
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-    });
-}
-
-// Navigation handling
-const originalPushState = history.pushState;
-const originalReplaceState = history.replaceState;
-
-history.pushState = function (...args) {
-    originalPushState.apply(this, args);
-    triggerNotch();
-};
-
-history.replaceState = function (...args) {
-    originalReplaceState.apply(this, args);
-    triggerNotch();
-};
-
-window.addEventListener("popstate", triggerNotch);
-
-// Expose for manual triggering
-window.simulateRotate = handleNotch;
-
-// Pull-to-refresh removed per user request
-// Vue router integration - aggressive triggering on route changes
-watch(
-    () => router.currentRoute.value.name,
-    () => {
-        // Immediate triggers
-        handleNotch();
-        triggerNotch();
-
-        // Staggered attempts
-        setTimeout(handleNotch, 10);
-        setTimeout(handleNotch, 50);
-        setTimeout(handleNotch, 150);
-        setTimeout(handleNotch, 300);
-        setTimeout(handleNotch, 500);
-    }
-);
-
-watch(
-    () => router.currentRoute.value.path,
-    () => {
-        // Immediate triggers
-        handleNotch();
-        triggerNotch();
+// Start spinner unless in development
+if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
-        // Staggered attempts
-        setTimeout(handleNotch, 25);
-        setTimeout(handleNotch, 100);
-        setTimeout(handleNotch, 250);
-    }
-);
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
+
 <style lang="scss">
 /* iPhone Landscape Lock Overlay */
 .iphone-landscape-lock {

package/src/assets/css/components/buttons.scss

@@ -5,10 +5,8 @@
 @use "../base/mixins" as *;
 
 .btn-primary {
-    @apply font-medium transition-all duration-150;
-    @apply bg-accent-green text-white;
-    @apply px-4 py-2 rounded-md;
-    @apply shadow-sm border-2 border-accent-green;
+    @apply font-medium bg-accent-green text-white px-4 py-2 rounded-md shadow-sm border-2 border-accent-green;
+    @include transition-standard;
 
     &:hover {
         @apply bg-green-400 border-green-400;
@@ -20,58 +18,10 @@
     }
 }
 
-.btn-secondary {
-    @apply font-medium transition-all duration-150;
-    @apply bg-transparent text-accent-green;
-    @apply px-4 py-2 rounded-md;
-    @apply border-2 border-accent-green;
-
-    &:hover {
-        @apply bg-accent-green text-white border-accent-green;
-    }
-
-    &:active {
-        @apply bg-green-400 border-accent-green;
-        @include focus-ring-accent;
-    }
-}
-
-.btn-ghost {
-    @apply font-medium transition-all duration-150;
-    @apply bg-transparent text-light-400;
-    @apply px-4 py-2 rounded-md;
-    @apply border-none;
-
-    &:hover {
-        @apply bg-dark-450 text-light-300;
-    }
-
-    &:active {
-        @apply bg-dark-350;
-    }
-}
-
-.btn-danger,
-.btn-destructive {
-    @apply font-medium transition-all duration-150;
-    @apply bg-error-500 text-white;
-    @apply px-4 py-2 rounded-md;
-    @apply shadow-sm border-none;
-
-    &:hover {
-        @apply bg-error-400;
-    }
-
-    &:active {
-        @apply bg-red-500;
-    }
-}
 
 .btn-icon {
-    @apply flex items-center justify-center transition-all duration-150;
-    @apply p-1 rounded-md;
-    @apply bg-transparent text-light-400;
-    @apply border-none;
+    @apply flex items-center justify-center p-1 rounded-md bg-transparent text-light-400 border-none;
+    @include transition-standard;
 
     &:hover {
         @apply bg-dark-450 text-white;
@@ -83,11 +33,8 @@
 }
 
 .btn-action {
-    @apply font-medium flex items-center justify-center gap-x-2 transition-all duration-150;
-    @apply bg-transparent text-accent-green;
-    @apply px-4 h-10 rounded-md;
-    @apply border-2 border-accent-green;
-    @apply text-xs;
+    @apply font-medium flex items-center justify-center gap-x-2 bg-transparent text-accent-green px-4 h-10 rounded-md border-2 border-accent-green text-xs;
+    @include transition-standard;
 
     &:hover {
         @apply bg-accent-green text-white border-accent-green;
@@ -100,8 +47,8 @@
 }
 
 .button-default {
-    @apply font-medium transition-all duration-150 flex items-center justify-center gap-x-2;
-    @apply h-14 rounded-lg text-white border-2 border-dark-550 text-sm px-6 w-48;
+    @apply font-medium flex items-center justify-center gap-x-2 h-14 rounded-lg text-white border-2 border-dark-550 text-sm px-6 w-48;
+    @include transition-standard;
 
     svg {
         @apply w-4 h-4 flex-shrink-0;
@@ -146,10 +93,8 @@
 }
 
 .login-btn {
-    @apply flex items-center justify-center gap-2;
-    @apply h-12 rounded-lg font-semibold tracking-wider uppercase;
-    @apply bg-accent-green border-2 border-accent-green text-white;
-    @apply transition-all duration-150;
+    @apply flex items-center justify-center gap-2 h-12 rounded-lg font-semibold tracking-wider uppercase bg-accent-green border-2 border-accent-green text-white;
+    @include transition-standard;
     font-size: theme('fontSize.base-');
 
     &:hover:enabled {
@@ -198,9 +143,8 @@
    ========================================================================== */
 
 .btn-modal {
-    @apply h-10 rounded-md text-xs flex items-center justify-center;
-    @apply font-medium px-4;
-    @apply hover:border-dark-700 transition-all duration-150 btn-focus-ring;
+    @apply h-10 rounded-md text-xs flex items-center justify-center font-medium px-4 hover:border-dark-700 btn-focus-ring;
+    @include transition-standard;
     @include dark-button-base;
     @include scale-hover;
 }

package/src/assets/css/components/headers.scss

@@ -77,7 +77,7 @@
         padding-top: 1rem;
 
         .page-header-card {
-            gap: 2.5;
+            gap: 0.625rem;
             padding: 0.5rem 0.875rem;
 
             svg, img {