@metricinsights/pp-dev 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/client/client.js

@@ -130,7 +130,14 @@ function createPPDevHotContext() {
     return context;
 }
 
-/// <reference types="vite/client" />
+// localStorage helpers guarded against environments where storage is unavailable
+// (e.g. sandboxed iframes). Keys follow the original `pp-dev-info-closed` naming.
+const STORAGE_KEYS = {
+    closed: 'pp-dev-info-closed',
+    position: 'pp-dev-info-position',
+    autoHide: 'pp-dev-info-auto-hide',
+    hidden: 'pp-dev-info-hidden',
+};
 function checkLocalStorage() {
     try {
         localStorage.setItem('test', 'test');
@@ -152,6 +159,412 @@ function getStorageItem(key) {
     }
     return null;
 }
+function removeStorageItem(key) {
+    if (checkLocalStorage()) {
+        localStorage.removeItem(key);
+    }
+}
+
+const CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const POSITION_CLASS_PREFIX = 'pp-dev-info--';
+const AUTO_HIDE_CLASS = 'pp-dev-info--auto-hide';
+const HIDDEN_CLASS = 'pp-dev-info--hidden';
+const CLOSED_CLASS$1 = 'closed';
+const NO_TRANSITION_CLASS = 'is-dragging';
+function isCorner(value) {
+    return typeof value === 'string' && CORNERS.includes(value);
+}
+function stateFromDataAttrs($panel) {
+    return {
+        position: isCorner($panel.dataset.position) ? $panel.dataset.position : 'bottom-right',
+        autoHide: $panel.dataset.autoHide === 'true',
+        hidden: $panel.dataset.hidden === 'true',
+    };
+}
+/**
+ * Resolve the effective panel state. Precedence per setting:
+ * localStorage (runtime user choice) → data-* attribute (config) → built-in default.
+ * The `?pp-dev-panel=show|hide` URL param writes a persistent localStorage override
+ * before resolution, so it both restores a hidden panel and survives reloads.
+ */
+function resolvePanelState($panel) {
+    const param = new URLSearchParams(window.location.search).get('pp-dev-panel');
+    if (param === 'show') {
+        setStorageItem(STORAGE_KEYS.hidden, 'false');
+    }
+    else if (param === 'hide') {
+        setStorageItem(STORAGE_KEYS.hidden, 'true');
+    }
+    const defaults = stateFromDataAttrs($panel);
+    const storedPosition = getStorageItem(STORAGE_KEYS.position);
+    const storedAutoHide = getStorageItem(STORAGE_KEYS.autoHide);
+    const storedHidden = getStorageItem(STORAGE_KEYS.hidden);
+    return {
+        position: isCorner(storedPosition) ? storedPosition : defaults.position,
+        autoHide: storedAutoHide !== null ? storedAutoHide === 'true' : defaults.autoHide,
+        hidden: storedHidden !== null ? storedHidden === 'true' : defaults.hidden,
+    };
+}
+function applyPanelState($panel, state, opts) {
+    const apply = () => {
+        for (const corner of CORNERS) {
+            $panel.classList.toggle(POSITION_CLASS_PREFIX + corner, corner === state.position);
+        }
+        $panel.classList.toggle(AUTO_HIDE_CLASS, state.autoHide);
+        $panel.classList.toggle(HIDDEN_CLASS, state.hidden);
+    };
+    if (opts?.instant) {
+        // No-transition guard: when localStorage differs from the server-rendered corner,
+        // the panel must not visibly slide across the screen on load. `is-dragging`
+        // disables transitions; a reflow makes the class swap land before it is removed.
+        $panel.classList.add(NO_TRANSITION_CLASS);
+        apply();
+        const unlock = () => $panel.classList.remove(NO_TRANSITION_CLASS);
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(unlock);
+        }
+        else {
+            setTimeout(unlock, 0);
+        }
+    }
+    else {
+        apply();
+    }
+}
+function clearClosed($panel) {
+    $panel.classList.remove(CLOSED_CLASS$1);
+    $panel.querySelector('.pp-dev-info__wrap-btn svg')?.classList.remove(CLOSED_CLASS$1);
+    removeStorageItem(STORAGE_KEYS.closed);
+}
+function createPanelStateController($panel) {
+    let state = resolvePanelState($panel);
+    const listeners = [];
+    if (state.autoHide) {
+        // Auto-hide and minimize are mutually exclusive; a stale persisted `closed`
+        // state must not combine with the auto-hide transform.
+        clearClosed($panel);
+    }
+    applyPanelState($panel, state, { instant: true });
+    const commit = () => {
+        applyPanelState($panel, state);
+        for (const cb of listeners) {
+            cb(state);
+        }
+    };
+    return {
+        getState: () => state,
+        setPosition(corner) {
+            state = { ...state, position: corner };
+            setStorageItem(STORAGE_KEYS.position, corner);
+            commit();
+        },
+        setAutoHide(on) {
+            state = { ...state, autoHide: on };
+            setStorageItem(STORAGE_KEYS.autoHide, String(on));
+            if (on) {
+                clearClosed($panel);
+            }
+            commit();
+        },
+        setHidden(on) {
+            state = { ...state, hidden: on };
+            setStorageItem(STORAGE_KEYS.hidden, String(on));
+            commit();
+        },
+        reset() {
+            removeStorageItem(STORAGE_KEYS.position);
+            removeStorageItem(STORAGE_KEYS.autoHide);
+            removeStorageItem(STORAGE_KEYS.hidden);
+            clearClosed($panel);
+            // Re-resolve purely from the server-rendered config (bypass the URL param,
+            // which would immediately re-write its localStorage override).
+            state = stateFromDataAttrs($panel);
+            commit();
+        },
+        onChange(cb) {
+            listeners.push(cb);
+        },
+    };
+}
+
+const AUTO_HIDE_SHOW_DELAY = 300;
+const AUTO_HIDE_HIDE_DELAY = 500;
+const PEEKING_CLASS = 'is-peeking';
+const DRAGGING_CLASS = 'is-dragging';
+/** Nearest screen corner for a viewport point; ties resolve toward bottom-right. */
+function nearestCorner(x, y, viewportWidth, viewportHeight) {
+    const left = x < viewportWidth / 2;
+    const top = y < viewportHeight / 2;
+    if (top) {
+        return left ? 'top-left' : 'top-right';
+    }
+    return left ? 'bottom-left' : 'bottom-right';
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Drag the panel by its handle and snap to the nearest corner on release.
+ * Pointer capture keeps the drag tracking over iframes and outside the window.
+ */
+function initDrag($panel, $handle, onSnap) {
+    let dragging = false;
+    let pointerId = -1;
+    let offsetX = 0;
+    let offsetY = 0;
+    let panelWidth = 0;
+    let panelHeight = 0;
+    const onKeyDown = (ev) => {
+        if (ev.key === 'Escape') {
+            stop(false);
+        }
+    };
+    const stop = (snap, ev) => {
+        if (!dragging) {
+            return;
+        }
+        dragging = false;
+        try {
+            $handle.releasePointerCapture(pointerId);
+        }
+        catch {
+            // pointer already released
+        }
+        document.body.style.userSelect = '';
+        document.removeEventListener('keydown', onKeyDown, true);
+        // Re-enable transitions before clearing the inline placement so the snap animates.
+        $panel.classList.remove(DRAGGING_CLASS);
+        $panel.style.left = '';
+        $panel.style.top = '';
+        $panel.style.right = '';
+        $panel.style.bottom = '';
+        $panel.style.transform = '';
+        if (snap && ev) {
+            onSnap(nearestCorner(ev.clientX, ev.clientY, window.innerWidth, window.innerHeight));
+        }
+    };
+    const moveTo = (ev) => {
+        const x = clamp(ev.clientX - offsetX, 0, Math.max(0, window.innerWidth - panelWidth));
+        const y = clamp(ev.clientY - offsetY, 0, Math.max(0, window.innerHeight - panelHeight));
+        $panel.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    };
+    $handle.addEventListener('pointerdown', (ev) => {
+        if (ev.pointerType === 'mouse' && ev.button !== 0) {
+            return;
+        }
+        const rect = $panel.getBoundingClientRect();
+        dragging = true;
+        pointerId = ev.pointerId;
+        offsetX = ev.clientX - rect.left;
+        offsetY = ev.clientY - rect.top;
+        panelWidth = rect.width;
+        panelHeight = rect.height;
+        $handle.setPointerCapture(ev.pointerId);
+        $panel.classList.add(DRAGGING_CLASS);
+        // Anchor to the top-left origin so translate3d coordinates are viewport-absolute;
+        // inline styles override the corner-class placement for the duration of the drag.
+        $panel.style.left = '0';
+        $panel.style.top = '0';
+        $panel.style.right = 'auto';
+        $panel.style.bottom = 'auto';
+        moveTo(ev);
+        document.body.style.userSelect = 'none';
+        document.addEventListener('keydown', onKeyDown, true);
+        ev.preventDefault();
+    });
+    $handle.addEventListener('pointermove', (ev) => {
+        if (dragging) {
+            moveTo(ev);
+        }
+    });
+    $handle.addEventListener('pointerup', (ev) => stop(true, ev));
+    $handle.addEventListener('pointercancel', () => stop(false));
+}
+/**
+ * Hover-reveal behavior for the auto-hide mode: pointer over the exposed strip for
+ * AUTO_HIDE_SHOW_DELAY slides the panel out; leaving re-hides it after a grace period.
+ * Keyboard focus inside the panel also keeps it revealed.
+ */
+function initAutoHide($panel, isActive) {
+    let showTimer;
+    let hideTimer;
+    let popoverOpen = false;
+    const shouldStayPeeked = () => popoverOpen || $panel.matches(':focus-within') || $panel.classList.contains(DRAGGING_CLASS);
+    const scheduleHide = () => {
+        window.clearTimeout(hideTimer);
+        hideTimer = window.setTimeout(() => {
+            if (!shouldStayPeeked() && !$panel.matches(':hover')) {
+                $panel.classList.remove(PEEKING_CLASS);
+            }
+        }, AUTO_HIDE_HIDE_DELAY);
+    };
+    $panel.addEventListener('pointerenter', () => {
+        if (!isActive()) {
+            return;
+        }
+        window.clearTimeout(hideTimer);
+        showTimer = window.setTimeout(() => $panel.classList.add(PEEKING_CLASS), AUTO_HIDE_SHOW_DELAY);
+    });
+    $panel.addEventListener('pointerleave', () => {
+        if (!isActive()) {
+            return;
+        }
+        window.clearTimeout(showTimer);
+        scheduleHide();
+    });
+    $panel.addEventListener('focusin', () => {
+        if (isActive()) {
+            window.clearTimeout(hideTimer);
+            $panel.classList.add(PEEKING_CLASS);
+        }
+    });
+    $panel.addEventListener('focusout', () => {
+        if (isActive()) {
+            scheduleHide();
+        }
+    });
+    return {
+        keepPeeked(on) {
+            popoverOpen = on;
+            if (!isActive()) {
+                return;
+            }
+            if (on) {
+                window.clearTimeout(showTimer);
+                window.clearTimeout(hideTimer);
+                $panel.classList.add(PEEKING_CLASS);
+            }
+            else {
+                scheduleHide();
+            }
+        },
+    };
+}
+
+const CORNER_TITLES = {
+    'top-left': 'Top left',
+    'top-right': 'Top right',
+    'bottom-left': 'Bottom left',
+    'bottom-right': 'Bottom right',
+};
+function buildPopover(controller) {
+    const state = controller.getState();
+    const $popover = document.createElement('div');
+    $popover.classList.add('pp-dev-info__settings');
+    const cornerButtons = CORNERS.map((corner) => {
+        const active = corner === state.position ? ' active' : '';
+        return `<button type="button" class="pp-dev-info__corner-btn pp-dev-info__corner-btn--${corner}${active}" data-corner="${corner}" title="${CORNER_TITLES[corner]}" aria-pressed="${corner === state.position}"></button>`;
+    }).join('');
+    $popover.innerHTML = `
+    <div class="pp-dev-info__settings-title">Panel settings</div>
+    <div class="pp-dev-info__settings-row">
+      <span class="pp-dev-info__settings-label">Position</span>
+      <div class="pp-dev-info__corner-grid">${cornerButtons}</div>
+    </div>
+    <div class="pp-dev-info__settings-row">
+      <label class="pp-dev-info__settings-label" for="pp-dev-auto-hide-toggle">Auto-hide</label>
+      <input
+        type="checkbox"
+        id="pp-dev-auto-hide-toggle"
+        class="pp-dev-info__settings-toggle"
+        ${state.autoHide ? 'checked' : ''}
+      />
+    </div>
+    <button type="button" class="pp-dev-info__settings-hide-btn">Hide panel</button>
+    <div class="pp-dev-info__settings-hint">Restore with <code>?pp-dev-panel=show</code> in the URL</div>
+    <span class="pp-dev-info__settings-reset" role="button" tabindex="0">Reset to config defaults</span>
+  `;
+    return $popover;
+}
+function syncPopover($popover, controller) {
+    const state = controller.getState();
+    $popover.querySelectorAll('.pp-dev-info__corner-btn').forEach(($btn) => {
+        const active = $btn.dataset.corner === state.position;
+        $btn.classList.toggle('active', active);
+        $btn.setAttribute('aria-pressed', String(active));
+    });
+    const $toggle = $popover.querySelector('.pp-dev-info__settings-toggle');
+    if ($toggle) {
+        $toggle.checked = state.autoHide;
+    }
+}
+/** Settings popover: corner picker, auto-hide toggle, hide button, reset. */
+function initPanelSettings($panel, controller, hooks) {
+    const $btn = $panel.querySelector('.pp-dev-info__settings-btn');
+    if (!$btn) {
+        return;
+    }
+    let $popover = null;
+    const onDocClick = (ev) => {
+        const target = ev.target;
+        if ($popover && !$popover.contains(target) && !$btn.contains(target)) {
+            close();
+        }
+    };
+    const onKeyDown = (ev) => {
+        if (ev.key === 'Escape') {
+            close();
+        }
+    };
+    const close = () => {
+        if (!$popover) {
+            return;
+        }
+        $popover.remove();
+        $popover = null;
+        document.removeEventListener('click', onDocClick, true);
+        document.removeEventListener('keydown', onKeyDown, true);
+        hooks?.onOpenChange?.(false);
+    };
+    const open = () => {
+        $popover = buildPopover(controller);
+        $popover.querySelectorAll('.pp-dev-info__corner-btn').forEach(($cornerBtn) => {
+            $cornerBtn.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                controller.setPosition($cornerBtn.dataset.corner);
+            });
+        });
+        $popover.querySelector('.pp-dev-info__settings-toggle')?.addEventListener('change', (ev) => {
+            controller.setAutoHide(ev.target.checked);
+        });
+        $popover.querySelector('.pp-dev-info__settings-hide-btn')?.addEventListener('click', (ev) => {
+            ev.preventDefault();
+            close();
+            controller.setHidden(true);
+        });
+        const $reset = $popover.querySelector('.pp-dev-info__settings-reset');
+        $reset?.addEventListener('click', (ev) => {
+            ev.preventDefault();
+            controller.reset();
+        });
+        $reset?.addEventListener('keydown', (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                controller.reset();
+            }
+        });
+        $panel.appendChild($popover);
+        document.addEventListener('click', onDocClick, true);
+        document.addEventListener('keydown', onKeyDown, true);
+        hooks?.onOpenChange?.(true);
+    };
+    $btn.addEventListener('click', (ev) => {
+        ev.preventDefault();
+        if ($popover) {
+            close();
+        }
+        else {
+            open();
+        }
+    });
+    controller.onChange(() => {
+        if ($popover) {
+            syncPopover($popover, controller);
+        }
+    });
+}
+
+/// <reference types="vite/client" />
 const POPUP_OFFSET = 10;
 const POPUP_HEIGHT = 100;
 const ANIMATION_DURATION = 300;
@@ -207,22 +620,30 @@ function createPopupElement(opts) {
     $popup.innerHTML = template;
     return $popup;
 }
+let panelController = null;
 function updatePopupPositions() {
     const popups = document.querySelectorAll('.pp-dev-info-namespace:not(.pp-dev-info)');
-    const $devPanel = document.querySelector('.pp-dev-info');
-    // Update popup positions
+    const position = panelController?.getState().position ?? 'bottom-right';
+    const isLeft = position === 'top-left' || position === 'bottom-left';
+    const isTop = position === 'top-left' || position === 'top-right';
+    // Anchor popups to the panel's horizontal side and stack them from the vertically
+    // opposite edge so they never cover the panel.
     popups.forEach((popup, index) => {
-        const top = POPUP_OFFSET + index * (POPUP_HEIGHT + POPUP_OFFSET);
+        const offset = POPUP_OFFSET + index * (POPUP_HEIGHT + POPUP_OFFSET);
         const $popupContent = popup.querySelector('.pp-dev-info__popup');
-        if ($popupContent) {
-            $popupContent.style.top = `${top}px`;
+        if (!$popupContent) {
+            return;
+        }
+        $popupContent.classList.toggle('pp-dev-info__popup--left', isLeft);
+        if (isTop) {
+            $popupContent.style.top = 'auto';
+            $popupContent.style.bottom = `${offset}px`;
+        }
+        else {
+            $popupContent.style.bottom = 'auto';
+            $popupContent.style.top = `${offset}px`;
         }
     });
-    // Ensure dev panel stays at the bottom
-    if ($devPanel) {
-        $devPanel.style.top = 'auto';
-        $devPanel.style.bottom = '0';
-    }
 }
 function animatePopup($popup, type) {
     return new Promise((resolve) => {
@@ -349,12 +770,59 @@ function confirmModal(opts) {
     const url = window.location.origin + '/@pp-dev/inspector';
     console.log('%cpp-dev%c  🔍 Request Inspector  →  %c%s', 'background:#6e8efb;color:#fff;padding:2px 8px;border-radius:4px;font-weight:700;font-size:11px', 'color:#a0a0b8;font-size:11px', 'color:#a78bfa;font-size:11px;text-decoration:underline', url);
 })();
+// ── Panel UI: position, auto-hide, hide, minimize ─────────────────────────────
+// Initialized outside the hot-context guard — panel placement and visibility must
+// not depend on the WebSocket transport being available.
+const CLOSED_CLASS = 'closed';
+const $infoPanel = document.querySelector('.pp-dev-info');
+if ($infoPanel) {
+    panelController = createPanelStateController($infoPanel);
+    const $dragHandle = $infoPanel.querySelector('.pp-dev-info__drag-handle');
+    if ($dragHandle) {
+        initDrag($infoPanel, $dragHandle, (corner) => panelController.setPosition(corner));
+    }
+    const autoHide = initAutoHide($infoPanel, () => panelController.getState().autoHide);
+    initPanelSettings($infoPanel, panelController, {
+        onOpenChange: (open) => autoHide.keepPeeked(open),
+    });
+    panelController.onChange((state) => {
+        if (!state.autoHide) {
+            $infoPanel.classList.remove('is-peeking');
+        }
+        updatePopupPositions();
+    });
+    // Minimize button; in auto-hide mode it acts as "pin" (disables auto-hide).
+    const $minimizeButtonWrap = $infoPanel.querySelector('.pp-dev-info__wrap-btn');
+    const $minimizeButtonSVG = $minimizeButtonWrap?.querySelector('svg');
+    if ($minimizeButtonWrap && $minimizeButtonSVG) {
+        let isClosed = getStorageItem(STORAGE_KEYS.closed) === 'true' && !panelController.getState().autoHide;
+        const updateTitle = () => {
+            $minimizeButtonWrap.title = panelController.getState().autoHide ? 'Pin panel' : 'Minimize';
+        };
+        updateTitle();
+        panelController.onChange(updateTitle);
+        if (isClosed) {
+            $infoPanel.classList.add(CLOSED_CLASS);
+            $minimizeButtonSVG.classList.add(CLOSED_CLASS);
+        }
+        $minimizeButtonWrap.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (panelController.getState().autoHide) {
+                isClosed = false;
+                panelController.setAutoHide(false);
+                return;
+            }
+            $infoPanel.classList.toggle(CLOSED_CLASS);
+            $minimizeButtonSVG.classList.toggle(CLOSED_CLASS);
+            isClosed = !isClosed;
+            setStorageItem(STORAGE_KEYS.closed, isClosed ? 'true' : 'false');
+        });
+    }
+}
 // Use Vite's HMR context when available; otherwise fall back to a raw-WebSocket
 // shim so the dev panel also works under the `pp-dev next` server (no Vite HMR).
 const hot = import.meta.hot ?? createPPDevHotContext();
 if (hot) {
-    const CLOSED_CLASS = 'closed';
-    const CLOSED_CLASS_STORAGE_KEY = 'pp-dev-info-closed';
     hot.on('redirect', (data) => {
         window.location.href = data.url;
     });
@@ -378,23 +846,6 @@ if (hot) {
             }
         }
     });
-    let isClosed = getStorageItem(CLOSED_CLASS_STORAGE_KEY) === 'true' || false;
-    const $infoPanel = document.querySelector('.pp-dev-info');
-    const $minimizeButtonWrap = document.querySelector('.pp-dev-info__wrap-btn');
-    const $minimizeButtonSVG = $minimizeButtonWrap?.querySelector('svg');
-    if ($infoPanel && $minimizeButtonWrap && $minimizeButtonSVG) {
-        if (isClosed) {
-            $infoPanel.classList.add(CLOSED_CLASS);
-            $minimizeButtonSVG.classList.add(CLOSED_CLASS);
-        }
-        $minimizeButtonWrap.addEventListener('click', (e) => {
-            e.preventDefault();
-            $infoPanel.classList.toggle(CLOSED_CLASS);
-            $minimizeButtonSVG.classList.toggle(CLOSED_CLASS);
-            isClosed = !isClosed;
-            setStorageItem(CLOSED_CLASS_STORAGE_KEY, isClosed ? 'true' : 'false');
-        });
-    }
     const $syncButton = document.getElementById('sync-template');
     if ($syncButton) {
         hot.on('template:sync:action-required', async (payload) => {