bedrock-flows 0.7.1

package/template/public/bedrock/font-size-overlay.js

@@ -0,0 +1,590 @@
+/**
+ * Typography Debug Overlay Utility
+ *
+ * Two modes:
+ *   1. Font Size Mode (Ctrl+Shift+F) - Shows font info on hover
+ *   2. Distance Mode (Ctrl+Shift+D) - Shows vertical distance between elements
+ *
+ * State is persisted in localStorage
+ */
+(function() {
+    const STORAGE_KEY_FONT = 'typographyOverlayFont';
+    const STORAGE_KEY_DISTANCE = 'typographyOverlayDistance';
+    const TOOLTIP_ID = 'typography-tooltip';
+    const TOAST_ID = 'typography-toast';
+
+    let fontModeEnabled = false;
+    let distanceModeEnabled = false;
+    let tooltip = null;
+    let distanceOverlays = [];
+
+    // Text elements to track
+    const TEXT_SELECTORS = 'h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, input, textarea, blockquote, figcaption, cite';
+    const BLOCK_SELECTORS = 'h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, pre, table, hr, div.o-prose > *';
+
+    // Inject styles
+    function injectStyles() {
+        if (document.getElementById('typography-overlay-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'typography-overlay-styles';
+        style.textContent = `
+            #${TOOLTIP_ID} {
+                position: fixed;
+                background: #2196F3;
+                color: white;
+                font-size: 11px;
+                font-family: monospace;
+                padding: 4px 8px;
+                border-radius: 3px;
+                z-index: 99999;
+                pointer-events: none;
+                white-space: nowrap;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+                opacity: 0;
+                transition: opacity 0.15s ease;
+            }
+            #${TOOLTIP_ID}.visible {
+                opacity: 1;
+            }
+            #${TOOLTIP_ID}.distance-mode {
+                background: #FF5722;
+            }
+            .typography-highlight {
+                outline: 1px dashed #2196F3 !important;
+                outline-offset: 1px;
+            }
+            .distance-marker {
+                position: absolute;
+                pointer-events: none;
+                z-index: 99998;
+            }
+            .distance-marker__line {
+                position: absolute;
+                left: 50%;
+                width: 2px;
+                background: #FF5722;
+                transform: translateX(-50%);
+            }
+            .distance-marker__label {
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                background: #FF5722;
+                color: white;
+                font-size: 10px;
+                font-family: monospace;
+                padding: 2px 6px;
+                border-radius: 3px;
+                white-space: nowrap;
+            }
+            .distance-marker__tags {
+                opacity: 0.75;
+                font-size: 9px;
+            }
+            .distance-marker__bracket {
+                position: absolute;
+                left: calc(50% - 8px);
+                width: 16px;
+                height: 6px;
+                border: 2px solid #FF5722;
+                border-top: none;
+            }
+            .distance-marker__bracket--top {
+                border: 2px solid #FF5722;
+                border-bottom: none;
+            }
+            .distance-element-highlight {
+                outline: 2px solid #FF5722 !important;
+                outline-offset: 0px;
+            }
+            #${TOAST_ID} {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%) translateY(100px);
+                background: #1A1A2E;
+                color: white;
+                font-size: 13px;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                padding: 10px 20px;
+                border-radius: 6px;
+                z-index: 100000;
+                pointer-events: none;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                opacity: 0;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+            }
+            #${TOAST_ID}.visible {
+                opacity: 1;
+                transform: translateX(-50%) translateY(0);
+            }
+            #${TOAST_ID} .toast-status {
+                font-weight: 600;
+            }
+            #${TOAST_ID} .toast-status--on {
+                color: #4CAF50;
+            }
+            #${TOAST_ID} .toast-status--off {
+                color: #F44336;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Create tooltip element
+    function createTooltip() {
+        if (tooltip) return;
+
+        tooltip = document.createElement('div');
+        tooltip.id = TOOLTIP_ID;
+        document.body.appendChild(tooltip);
+    }
+
+    // Show toast notification
+    let toastTimeout = null;
+    function showToast(message, isEnabled) {
+        injectStyles();
+        let toast = document.getElementById(TOAST_ID);
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = TOAST_ID;
+            document.body.appendChild(toast);
+        }
+
+        const statusClass = isEnabled ? 'toast-status--on' : 'toast-status--off';
+        const statusText = isEnabled ? 'ON' : 'OFF';
+        toast.innerHTML = `${message}: <span class="toast-status ${statusClass}">${statusText}</span>`;
+
+        // Clear any existing timeout
+        if (toastTimeout) {
+            clearTimeout(toastTimeout);
+        }
+
+        // Show toast
+        requestAnimationFrame(() => {
+            toast.classList.add('visible');
+        });
+
+        // Hide after 2 seconds
+        toastTimeout = setTimeout(() => {
+            toast.classList.remove('visible');
+        }, 2000);
+    }
+
+    // Get font info for an element
+    function getFontInfo(element) {
+        const style = window.getComputedStyle(element);
+        const fontSize = style.fontSize;
+        const fontWeight = style.fontWeight;
+        const lineHeight = style.lineHeight;
+        const fontFamily = style.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+
+        const weightNames = {
+            '100': 'Thin',
+            '200': 'ExtraLight',
+            '300': 'Light',
+            '400': 'Regular',
+            '500': 'Medium',
+            '600': 'SemiBold',
+            '700': 'Bold',
+            '800': 'ExtraBold',
+            '900': 'Black'
+        };
+        const weightName = weightNames[fontWeight] || fontWeight;
+
+        return {
+            size: fontSize,
+            weight: weightName,
+            lineHeight: lineHeight,
+            family: fontFamily
+        };
+    }
+
+    // Format line height for display
+    function formatLineHeight(lineHeight, fontSize) {
+        if (lineHeight === 'normal') return 'normal';
+
+        if (lineHeight.endsWith('px')) {
+            const lhPx = parseFloat(lineHeight);
+            const fsPx = parseFloat(fontSize);
+            const ratio = (lhPx / fsPx).toFixed(2);
+            return `${lineHeight} (${ratio})`;
+        }
+        return lineHeight;
+    }
+
+    // Font mode mouse move handler
+    function handleFontMouseMove(e) {
+        if (!fontModeEnabled || !tooltip) return;
+
+        const element = document.elementFromPoint(e.clientX, e.clientY);
+        if (!element || element.closest('#protoNav') || !element.matches(TEXT_SELECTORS)) {
+            tooltip.classList.remove('visible');
+            document.querySelectorAll('.typography-highlight').forEach(el => {
+                el.classList.remove('typography-highlight');
+            });
+            return;
+        }
+
+        document.querySelectorAll('.typography-highlight').forEach(el => {
+            el.classList.remove('typography-highlight');
+        });
+
+        element.classList.add('typography-highlight');
+
+        const info = getFontInfo(element);
+        const tagName = element.tagName.toLowerCase();
+
+        tooltip.className = '';
+        tooltip.id = TOOLTIP_ID;
+        tooltip.innerHTML = `
+            <strong>&lt;${tagName}&gt;</strong> ${info.size} · ${info.weight}<br>
+            line-height: ${formatLineHeight(info.lineHeight, info.size)}<br>
+            ${info.family}
+        `;
+        tooltip.classList.add('visible');
+
+        positionTooltip(e.clientX, e.clientY);
+    }
+
+    // Position tooltip near cursor
+    function positionTooltip(x, y) {
+        if (!tooltip) return;
+
+        const tooltipRect = tooltip.getBoundingClientRect();
+        let posX = x + 15;
+        let posY = y + 15;
+
+        if (posX + tooltipRect.width > window.innerWidth) {
+            posX = x - tooltipRect.width - 10;
+        }
+        if (posY + tooltipRect.height > window.innerHeight) {
+            posY = y - tooltipRect.height - 10;
+        }
+
+        tooltip.style.left = posX + 'px';
+        tooltip.style.top = posY + 'px';
+    }
+
+    // Clear distance overlays
+    function clearDistanceOverlays() {
+        distanceOverlays.forEach(el => el.remove());
+        distanceOverlays = [];
+        document.querySelectorAll('.distance-element-highlight').forEach(el => {
+            el.classList.remove('distance-element-highlight');
+        });
+    }
+
+    // Create distance marker between two elements
+    function createDistanceMarker(el1, el2, container) {
+        const rect1 = el1.getBoundingClientRect();
+        const rect2 = el2.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+
+        // Calculate the gap between bottom of el1 and top of el2
+        const gap = rect2.top - rect1.bottom;
+
+        if (gap <= 0) return; // Elements overlap or touch
+
+        const marker = document.createElement('div');
+        marker.className = 'distance-marker';
+
+        // Position marker
+        const markerLeft = Math.max(rect1.left, rect2.left) + Math.min(rect1.width, rect2.width) / 2;
+        marker.style.left = (markerLeft + window.scrollX) + 'px';
+        marker.style.top = (rect1.bottom + window.scrollY) + 'px';
+        marker.style.width = '40px';
+        marker.style.height = gap + 'px';
+
+        // Add line
+        const line = document.createElement('div');
+        line.className = 'distance-marker__line';
+        line.style.top = '0';
+        line.style.height = gap + 'px';
+        marker.appendChild(line);
+
+        // Add top bracket
+        const bracketTop = document.createElement('div');
+        bracketTop.className = 'distance-marker__bracket distance-marker__bracket--top';
+        bracketTop.style.top = '0';
+        marker.appendChild(bracketTop);
+
+        // Add bottom bracket
+        const bracketBottom = document.createElement('div');
+        bracketBottom.className = 'distance-marker__bracket';
+        bracketBottom.style.bottom = '0';
+        marker.appendChild(bracketBottom);
+
+        // Add label with element tags
+        const tag1 = el1.tagName.toLowerCase();
+        const tag2 = el2.tagName.toLowerCase();
+        const label = document.createElement('div');
+        label.className = 'distance-marker__label';
+        label.style.top = (gap / 2 - 10) + 'px';
+        label.innerHTML = `<span class="distance-marker__tags">${tag1}+${tag2}</span> ${Math.round(gap)}px`;
+        marker.appendChild(label);
+
+        document.body.appendChild(marker);
+        distanceOverlays.push(marker);
+
+        // Highlight elements
+        el1.classList.add('distance-element-highlight');
+        el2.classList.add('distance-element-highlight');
+    }
+
+    // Find block-level elements and show distances
+    function showDistances() {
+        clearDistanceOverlays();
+
+        // Find prose containers and content areas
+        const containers = document.querySelectorAll('.o-prose, .c-article, .c-detail-section, .c-article__section, main');
+
+        containers.forEach(container => {
+            // Get direct children that are block elements
+            const children = container.querySelectorAll(':scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5, :scope > h6, :scope > p, :scope > ul, :scope > ol, :scope > blockquote, :scope > figure, :scope > pre, :scope > table, :scope > div:not([class*="marker"])');
+
+            const blockElements = Array.from(children).filter(el => {
+                const style = window.getComputedStyle(el);
+                return style.display === 'block' || style.display === 'list-item';
+            });
+
+            // Create markers between consecutive elements
+            for (let i = 0; i < blockElements.length - 1; i++) {
+                createDistanceMarker(blockElements[i], blockElements[i + 1], container);
+            }
+        });
+
+        // Also check within o-prose for nested elements
+        document.querySelectorAll('.o-prose').forEach(prose => {
+            const elements = prose.querySelectorAll('h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure');
+            const blockElements = Array.from(elements).filter(el => {
+                const parent = el.parentElement;
+                // Only direct children of prose or other block elements
+                return parent === prose || parent.matches('li, blockquote, figure');
+            });
+
+            for (let i = 0; i < blockElements.length - 1; i++) {
+                // Check if they're siblings or close in the DOM
+                const el1 = blockElements[i];
+                const el2 = blockElements[i + 1];
+
+                // Skip if already has a marker nearby
+                const rect1 = el1.getBoundingClientRect();
+                const rect2 = el2.getBoundingClientRect();
+                const gap = rect2.top - rect1.bottom;
+
+                if (gap > 0 && gap < 200) {
+                    // Check if marker already exists for this gap
+                    const existingMarker = distanceOverlays.find(m => {
+                        const mTop = parseFloat(m.style.top);
+                        return Math.abs(mTop - (rect1.bottom + window.scrollY)) < 5;
+                    });
+
+                    if (!existingMarker) {
+                        createDistanceMarker(el1, el2, prose);
+                    }
+                }
+            }
+        });
+    }
+
+    // Distance mode mouse move handler (shows info about hovered gap)
+    function handleDistanceMouseMove(e) {
+        if (!distanceModeEnabled || !tooltip) return;
+
+        // Find if we're hovering over a distance marker label
+        const label = document.elementFromPoint(e.clientX, e.clientY);
+
+        if (label && label.closest('#protoNav')) {
+            tooltip.classList.remove('visible');
+            return;
+        }
+
+        if (label && label.classList.contains('distance-marker__label')) {
+            tooltip.className = '';
+            tooltip.id = TOOLTIP_ID;
+            tooltip.classList.add('distance-mode', 'visible');
+            tooltip.innerHTML = `Distance: <strong>${label.textContent}</strong>`;
+            positionTooltip(e.clientX, e.clientY);
+        } else {
+            tooltip.classList.remove('visible');
+        }
+    }
+
+    // Enable font mode
+    function enableFontMode() {
+        fontModeEnabled = true;
+        disableDistanceMode(true); // Disable other mode but don't save
+        injectStyles();
+        createTooltip();
+        document.addEventListener('mousemove', handleFontMouseMove);
+        localStorage.setItem(STORAGE_KEY_FONT, 'true');
+        console.log('[Typography Overlay] Font Size Mode ON (Ctrl+Shift+F)');
+
+        window.dispatchEvent(new CustomEvent('typographyOverlayToggled', {
+            detail: { mode: 'font', enabled: true }
+        }));
+    }
+
+    // Disable font mode
+    function disableFontMode(skipSave) {
+        fontModeEnabled = false;
+        document.removeEventListener('mousemove', handleFontMouseMove);
+
+        if (tooltip) {
+            tooltip.classList.remove('visible');
+        }
+
+        document.querySelectorAll('.typography-highlight').forEach(el => {
+            el.classList.remove('typography-highlight');
+        });
+
+        if (!skipSave) {
+            localStorage.setItem(STORAGE_KEY_FONT, 'false');
+            console.log('[Typography Overlay] Font Size Mode OFF');
+        }
+
+        window.dispatchEvent(new CustomEvent('typographyOverlayToggled', {
+            detail: { mode: 'font', enabled: false }
+        }));
+    }
+
+    // Get scroll container (prototype wrapper or window)
+    function getScrollContainer() {
+        return document.getElementById('protoSiteWrapper') || window;
+    }
+
+    // Enable distance mode
+    function enableDistanceMode() {
+        distanceModeEnabled = true;
+        disableFontMode(true); // Disable other mode but don't save
+        injectStyles();
+        createTooltip();
+        showDistances();
+        document.addEventListener('mousemove', handleDistanceMouseMove);
+        window.addEventListener('scroll', showDistances, true);
+        window.addEventListener('resize', showDistances);
+        // Also listen on prototype wrapper if it exists
+        const protoWrapper = document.getElementById('protoSiteWrapper');
+        if (protoWrapper) {
+            protoWrapper.addEventListener('scroll', showDistances);
+        }
+        localStorage.setItem(STORAGE_KEY_DISTANCE, 'true');
+        console.log('[Typography Overlay] Distance Mode ON (Ctrl+Shift+D)');
+
+        window.dispatchEvent(new CustomEvent('typographyOverlayToggled', {
+            detail: { mode: 'distance', enabled: true }
+        }));
+    }
+
+    // Disable distance mode
+    function disableDistanceMode(skipSave) {
+        distanceModeEnabled = false;
+        document.removeEventListener('mousemove', handleDistanceMouseMove);
+        window.removeEventListener('scroll', showDistances, true);
+        window.removeEventListener('resize', showDistances);
+        // Also remove from prototype wrapper if it exists
+        const protoWrapper = document.getElementById('protoSiteWrapper');
+        if (protoWrapper) {
+            protoWrapper.removeEventListener('scroll', showDistances);
+        }
+        clearDistanceOverlays();
+
+        if (tooltip) {
+            tooltip.classList.remove('visible');
+        }
+
+        if (!skipSave) {
+            localStorage.setItem(STORAGE_KEY_DISTANCE, 'false');
+            console.log('[Typography Overlay] Distance Mode OFF');
+        }
+
+        window.dispatchEvent(new CustomEvent('typographyOverlayToggled', {
+            detail: { mode: 'distance', enabled: false }
+        }));
+    }
+
+    // Toggle font mode
+    function toggleFontMode() {
+        if (fontModeEnabled) {
+            disableFontMode();
+            showToast('Font Size Mode', false);
+        } else {
+            enableFontMode();
+            showToast('Font Size Mode', true);
+        }
+    }
+
+    // Toggle distance mode
+    function toggleDistanceMode() {
+        if (distanceModeEnabled) {
+            disableDistanceMode();
+            showToast('Distance Mode', false);
+        } else {
+            enableDistanceMode();
+            showToast('Distance Mode', true);
+        }
+    }
+
+    // Expose global API
+    window.TypographyOverlay = {
+        toggleFontMode: toggleFontMode,
+        toggleDistanceMode: toggleDistanceMode,
+        enableFontMode: enableFontMode,
+        disableFontMode: disableFontMode,
+        enableDistanceMode: enableDistanceMode,
+        disableDistanceMode: disableDistanceMode,
+        isFontModeEnabled: function() { return fontModeEnabled; },
+        isDistanceModeEnabled: function() { return distanceModeEnabled; },
+        refreshDistances: showDistances
+    };
+
+    // Legacy API
+    window.FontSizeOverlay = {
+        toggle: toggleFontMode,
+        enable: enableFontMode,
+        disable: disableFontMode,
+        isEnabled: function() { return fontModeEnabled; }
+    };
+
+    // Listen for keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Shift+F for font size mode
+        if (e.ctrlKey && e.shiftKey && (e.key === 'F' || e.key === 'f')) {
+            e.preventDefault();
+            toggleFontMode();
+        }
+        // Ctrl+Shift+D for distance mode
+        if (e.ctrlKey && e.shiftKey && (e.key === 'D' || e.key === 'd')) {
+            e.preventDefault();
+            toggleDistanceMode();
+        }
+    });
+
+    // Restore state from localStorage on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        const savedFont = localStorage.getItem(STORAGE_KEY_FONT);
+        const savedDistance = localStorage.getItem(STORAGE_KEY_DISTANCE);
+
+        if (savedFont === 'true') {
+            enableFontMode();
+        } else if (savedDistance === 'true') {
+            enableDistanceMode();
+        }
+    });
+
+    // If DOM is already loaded
+    if (document.readyState !== 'loading') {
+        const savedFont = localStorage.getItem(STORAGE_KEY_FONT);
+        const savedDistance = localStorage.getItem(STORAGE_KEY_DISTANCE);
+
+        if (savedFont === 'true') {
+            enableFontMode();
+        } else if (savedDistance === 'true') {
+            enableDistanceMode();
+        }
+    }
+
+    console.log('[Typography Overlay] Ready. Ctrl+Shift+F for font sizes, Ctrl+Shift+D for distances.');
+})();