bedrock-flows 0.7.1

package/template/public/bedrock/prototype-navigation.js

@@ -0,0 +1,974 @@
+/**
+ * Prototype Navigation (Bedrock 3)
+ *
+ * Toggleable sidebar showing all pages in the prototype.
+ * Toggle with Ctrl+M (or Cmd+M on Mac).
+ * State is persisted in localStorage.
+ *
+ * Page data is auto-generated by bedrock/generate-pages.js and loaded
+ * via bedrock/data/pages.js (sets window.PAGE_DATA).
+ *
+ * Uses a flex-based layout that pushes content instead of overlaying.
+ * Styles are injected and don't affect the global style.css.
+ *
+ * Viewport preview uses an iframe to properly trigger CSS media queries.
+ *
+ * Pages with double dashes (e.g., contact--error.html) are page states
+ * and only shown in the "Page States" section when viewing that page.
+ *
+ * Includes integrated dev tools:
+ *   - Viewport / breakpoint preview
+ *   - BEM component overlay (Ctrl+Shift+B / Ctrl+Shift+A)
+ *   - Grid overlay (Ctrl+Shift+G / Ctrl+Shift+H)
+ *   - Typography inspector (Ctrl+Shift+F / Ctrl+Shift+D)
+ */
+
+// Don't run inside iframe (prevents recursion in viewport preview)
+if (window.self !== window.top) {
+    // We're in an iframe, don't inject prototype navigation
+    document.documentElement.classList.add('is-iframe-preview');
+} else {
+
+const STORAGE_KEY = 'protoNavOpen';
+const VIEWPORT_STORAGE_KEY = 'protoNavViewport';
+const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
+// Read config from generated bedrock-config.js (with defaults)
+const BEDROCK_CONFIG = window.BEDROCK_CONFIG || {};
+const PLUGINS = BEDROCK_CONFIG.plugins || {};
+const BREAKPOINTS = BEDROCK_CONFIG.breakpoints || [
+    { id: 'full', label: 'Full width', width: null },
+    { id: 'desktop', label: 'Desktop', width: 1280 },
+    { id: 'tablet-lg', label: 'Large Tablet', width: 960 },
+    { id: 'tablet', label: 'Tablet', width: 720 },
+    { id: 'mobile', label: 'Mobile', width: 375 }
+];
+const STORYBOOK_PORTS = BEDROCK_CONFIG.storybookPorts || [6006, 6007, 6008];
+
+// Use auto-generated PAGE_DATA from bedrock/data/pages.js
+const PAGE_DATA = window.PAGE_DATA || {};
+
+// Resolve the page-states list for a given pathname. Returns the array
+// (with a leading "Default" entry) or null when the page has no states.
+function findPageStatesFor(path) {
+    for (const section of Object.values(PAGE_DATA)) {
+        for (const page of section) {
+            if (isCurrentPage(page.href, path)) {
+                if (page.states && page.states.length > 0) {
+                    return [{ href: page.href, label: 'Default' }, ...page.states];
+                }
+                return null;
+            }
+            if (page.states) {
+                for (const state of page.states) {
+                    if (isCurrentPage(state.href, path)) {
+                        return [{ href: page.href, label: 'Default' }, ...page.states];
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}
+
+// Render the inner block (without the wrapping .proto-nav__states div) for a given list.
+function renderPageStatesInner(pageStates, currentPath) {
+    return `
+        <div class="proto-nav__section proto-nav__section--states">
+            <div class="proto-nav__section-title">Page States</div>
+            ${pageStates.map(state => {
+                const isCurrent = isCurrentPage(state.href, currentPath);
+                return `<a href="${state.href}"${isCurrent ? ' class="is-current"' : ''}>${state.label}</a>`;
+            }).join('')}
+        </div>
+    `;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const currentPath = window.location.pathname;
+    const pageStates = findPageStatesFor(currentPath);
+
+    // Build sections HTML
+    let sectionsHTML = '';
+    for (const [sectionName, pages] of Object.entries(PAGE_DATA)) {
+        sectionsHTML += `
+            <div class="proto-nav__section">
+                <div class="proto-nav__section-title">${sectionName}</div>
+                ${pages.map(page => {
+                    const isCurrent = isCurrentPage(page.href, currentPath);
+                    return `<a href="${page.href}"${isCurrent ? ' class="is-current"' : ''}>${page.label}</a>`;
+                }).join('')}
+            </div>
+        `;
+    }
+
+    // Add page states section if applicable
+    const pageStatesHTML = pageStates ? renderPageStatesInner(pageStates, currentPath) : '';
+
+    // Icons per viewport id — inline SVGs for the always-visible icon bar
+    const VIEWPORT_ICONS = {
+        'full': '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4"/></svg>',
+        'desktop': '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="13" height="8.5" rx="1"/><path d="M6 14h4M8 11v3"/></svg>',
+        'tablet-lg': '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="13" height="11" rx="1.25"/><path d="M7 12h2"/></svg>',
+        'tablet': '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="1.5" width="10" height="13" rx="1.25"/><path d="M7 12.5h2"/></svg>',
+        'mobile': '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="1.5" width="7" height="13" rx="1.25"/><path d="M7.25 12.5h1.5"/></svg>'
+    };
+
+    // Build breakpoint buttons HTML (only if viewport plugin enabled)
+    const breakpointButtonsHTML = PLUGINS.viewport !== false ? BREAKPOINTS.map(bp =>
+        `<button class="proto-nav__viewport-btn" data-viewport="${bp.id}" data-width="${bp.width || ''}" title="${bp.label}${bp.width ? ' (' + bp.width + 'px)' : ''}" aria-label="${bp.label}">${VIEWPORT_ICONS[bp.id] || bp.label}</button>`
+    ).join('') : '';
+
+    // Create the sidebar HTML
+    const sidebarHTML = `
+        <div class="proto-nav" id="protoNav" aria-hidden="true">
+            <div class="proto-nav__inner">
+                <div class="proto-nav__header">
+                    <span class="proto-nav__title">Site Index <span class="proto-nav__shortcut"><kbd>Ctrl</kbd>+<kbd>M</kbd></span></span>
+                    <button class="proto-nav__close" aria-label="Close navigation">&times;</button>
+                </div>
+                <div class="proto-nav__content">
+                    ${sectionsHTML}
+                </div>
+                <div class="proto-nav__states" id="protoNavStates">${pageStatesHTML}</div>
+                ${PLUGINS.viewport !== false ? `
+                <div class="proto-nav__viewport">
+                    <div class="proto-nav__section-title">Viewport</div>
+                    <div class="proto-nav__viewport-buttons">
+                        ${breakpointButtonsHTML}
+                    </div>
+                    <div class="proto-nav__viewport-indicator" id="viewportIndicator"></div>
+                </div>
+                ` : ''}
+                ${(PLUGINS.componentOverlay !== false || PLUGINS.gridOverlay !== false || PLUGINS.typographyInspector !== false || PLUGINS.colorInspector !== false) ? `
+                <details class="proto-nav__tools-details">
+                    <summary class="proto-nav__tools-summary">Tools</summary>
+                    <div class="proto-nav__tools-content">
+                        ${PLUGINS.componentOverlay !== false ? `
+                        <label class="proto-nav__checkbox-label">
+                            <input type="checkbox" id="bemOverlayTopLevel" class="proto-nav__checkbox">
+                            <span>Show component names</span>
+                        </label>
+                        <label class="proto-nav__checkbox-label">
+                            <input type="checkbox" id="bemOverlayAtoms" class="proto-nav__checkbox">
+                            <span>Show small components</span>
+                        </label>
+                        ` : ''}
+                        ${PLUGINS.gridOverlay !== false ? `
+                        <div class="proto-nav__section-title" style="padding-top: 12px;">Grid</div>
+                        <label class="proto-nav__checkbox-label">
+                            <input type="checkbox" id="gridOverlayCol" class="proto-nav__checkbox">
+                            <span>Column grid</span>
+                        </label>
+                        <label class="proto-nav__checkbox-label">
+                            <input type="checkbox" id="gridOverlaySpacing" class="proto-nav__checkbox">
+                            <span>Section spacing</span>
+                        </label>
+                        ` : ''}
+                        ${(PLUGINS.typographyInspector !== false || PLUGINS.colorInspector !== false) ? `
+                        <div class="proto-nav__section-title" style="padding-top: 12px;">Inspector</div>
+                        <div class="proto-nav__segmented" id="inspectorSegmented">
+                            <button class="proto-nav__segmented-btn is-active" data-mode="none">None</button>
+                            ${PLUGINS.typographyInspector !== false ? `
+                            <button class="proto-nav__segmented-btn" data-mode="font">Font</button>
+                            <button class="proto-nav__segmented-btn" data-mode="spacing">Spacing</button>
+                            ` : ''}
+                            ${PLUGINS.colorInspector !== false ? `
+                            <button class="proto-nav__segmented-btn" data-mode="color">Color</button>
+                            ` : ''}
+                        </div>
+                        ` : ''}
+                    </div>
+                </details>
+                ` : ''}
+                ${(PLUGINS.storybook !== false && isLocalDev) ? `
+                <div class="proto-nav__storybook" id="protoNavStorybook">
+                    <span class="proto-nav__storybook-status" data-status="checking"></span>
+                    <span class="proto-nav__storybook-text">Checking Storybook...</span>
+                </div>
+                ` : ''}
+            </div>
+        </div>
+    `;
+
+    // Create styles - flex-based layout with Bedrock 3 light theme
+    const styles = `
+        <style id="proto-nav-styles">
+            :root {
+                --br-bg: #fff;
+                --br-border: #e5e5e5;
+                --br-shadow: 2px 0 8px rgba(0,0,0,0.08), 1px 0 2px rgba(0,0,0,0.04);
+                --br-text: #333;
+                --br-text-muted: #555;
+                --br-text-faint: #888;
+                --br-hover-bg: #f5f5f5;
+                --br-kbd-bg: #f0f0f0;
+                --br-kbd-border: #d0d0d0;
+                --br-active: #2563eb;
+                --br-viewport-bg: #e5e7eb;
+                --br-viewport-border: #d1d5db;
+                --br-seg-bg: #e5e7eb;
+            }
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --br-bg: #1a1a1a;
+                    --br-border: #333;
+                    --br-shadow: 2px 0 8px rgba(0,0,0,0.3);
+                    --br-text: #eee;
+                    --br-text-muted: #ccc;
+                    --br-text-faint: #888;
+                    --br-hover-bg: #2a2a2a;
+                    --br-kbd-bg: #2a2a2a;
+                    --br-kbd-border: #444;
+                    --br-active: #2563eb;
+                    --br-viewport-bg: #2a2a2a;
+                    --br-viewport-border: #444;
+                    --br-seg-bg: #2a2a2a;
+                }
+            }
+            /* Flex wrapper for prototype layout */
+            .proto-wrapper {
+                display: flex;
+                min-height: 100vh;
+                background: #e5e7eb;
+            }
+            @media (prefers-color-scheme: dark) {
+                .proto-wrapper {
+                    background: #111;
+                }
+            }
+            .proto-wrapper__site {
+                flex: 1;
+                min-width: 0;
+                height: 100vh;
+                overflow-y: auto;
+                background: #fff;
+                display: flex;
+                flex-direction: column;
+            }
+            .proto-wrapper__site--hidden {
+                display: none;
+            }
+            /* Iframe preview container */
+            .proto-wrapper__preview {
+                flex: 1;
+                display: none;
+                flex-direction: column;
+                align-items: center;
+                height: 100vh;
+                overflow: hidden;
+                padding: 16px;
+                box-sizing: border-box;
+            }
+            .proto-wrapper__preview--active {
+                display: flex;
+            }
+            .proto-wrapper__iframe-container {
+                position: relative;
+                height: 100%;
+            }
+            .proto-wrapper__iframe {
+                display: block;
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+            /* Nav container - controls width */
+            .proto-nav {
+                width: 0;
+                flex-shrink: 0;
+                transition: width 0.2s ease;
+                overflow: hidden;
+            }
+            .proto-nav.is-open {
+                width: 220px;
+            }
+            /* Inner nav - fixed width, scrollable */
+            .proto-nav__inner {
+                width: 220px;
+                height: 100vh;
+                position: sticky;
+                top: 0;
+                background: var(--br-bg);
+                color: var(--br-text);
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                font-size: 13px;
+                display: flex;
+                flex-direction: column;
+                box-shadow: var(--br-shadow);
+                border-right: 1px solid var(--br-border);
+            }
+            .proto-nav__header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 12px 14px;
+                border-bottom: 1px solid var(--br-border);
+            }
+            .proto-nav__title {
+                font-weight: 600;
+                font-size: 13px;
+                color: var(--br-text);
+            }
+            .proto-nav__close {
+                background: none;
+                border: none;
+                color: var(--br-text-faint);
+                font-size: 18px;
+                cursor: pointer;
+                padding: 0;
+                line-height: 1;
+            }
+            .proto-nav__close:hover {
+                color: var(--br-text);
+            }
+            .proto-nav__content {
+                flex: 1;
+                overflow-y: auto;
+                padding: 8px 0;
+            }
+            .proto-nav__section {
+                padding: 4px 14px 8px;
+            }
+            .proto-nav__section-title {
+                font-size: 11px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                color: var(--br-text-faint);
+                margin-bottom: 6px;
+                padding-top: 8px;
+            }
+            .proto-nav__section:first-child .proto-nav__section-title {
+                padding-top: 0;
+            }
+            .proto-nav__content a,
+            .proto-nav__states a {
+                display: block;
+                padding: 5px 8px;
+                color: var(--br-text-muted);
+                text-decoration: none;
+                border-radius: 4px;
+                transition: background 0.15s, color 0.15s;
+            }
+            .proto-nav__content a:hover,
+            .proto-nav__states a:hover {
+                background: var(--br-hover-bg);
+                color: var(--br-text);
+            }
+            .proto-nav__content a.is-current,
+            .proto-nav__states a.is-current {
+                background: var(--br-active);
+                color: #fff;
+            }
+            .proto-nav__states {
+                border-top: 1px solid var(--br-border);
+                padding: 8px 0;
+            }
+            .proto-nav__states .proto-nav__section-title {
+                color: var(--br-text-faint);
+            }
+            .proto-nav__shortcut {
+                margin-left: 8px;
+                font-weight: normal;
+                font-size: 10px;
+                color: var(--br-text-faint);
+            }
+            .proto-nav__shortcut kbd {
+                display: inline-block;
+                padding: 2px 5px;
+                background: var(--br-kbd-bg);
+                border: 1px solid var(--br-kbd-border);
+                border-radius: 4px;
+                font-family: inherit;
+                font-size: 10px;
+                color: var(--br-text-muted);
+                box-shadow: 0 1px 0 var(--br-kbd-border);
+            }
+            .proto-nav__checkbox-label {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 6px 8px;
+                cursor: pointer;
+                color: var(--br-text-muted);
+                border-radius: 4px;
+                transition: background 0.15s, color 0.15s;
+            }
+            .proto-nav__checkbox-label:hover {
+                background: var(--br-hover-bg);
+                color: var(--br-text);
+            }
+            .proto-nav__checkbox {
+                width: 14px;
+                height: 14px;
+                margin: 0;
+                cursor: pointer;
+                accent-color: var(--br-active);
+            }
+            /* Viewport section */
+            .proto-nav__viewport {
+                padding: 8px 12px 10px;
+                border-top: 1px solid var(--br-border);
+            }
+            .proto-nav__viewport-buttons {
+                display: grid;
+                grid-template-columns: repeat(5, 1fr);
+                gap: 4px;
+                margin-bottom: 6px;
+            }
+            .proto-nav__viewport-btn {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 6px;
+                height: 28px;
+                background: var(--br-viewport-bg);
+                border: 1px solid var(--br-viewport-border);
+                border-radius: 4px;
+                color: var(--br-text-muted);
+                cursor: pointer;
+                transition: all 0.15s ease;
+                font-family: inherit;
+            }
+            .proto-nav__viewport-btn svg {
+                width: 16px;
+                height: 16px;
+                display: block;
+            }
+            .proto-nav__viewport-btn:hover {
+                background: var(--br-hover-bg);
+                color: var(--br-text);
+            }
+            .proto-nav__viewport-btn.is-active {
+                background: var(--br-active);
+                border-color: var(--br-active);
+                color: #fff;
+            }
+            .proto-nav__viewport-indicator {
+                font-size: 10px;
+                color: var(--br-text-faint);
+                text-align: center;
+                padding: 4px 0;
+            }
+            /* Segmented control */
+            .proto-nav__segmented {
+                display: flex;
+                background: var(--br-seg-bg);
+                border-radius: 4px;
+                padding: 2px;
+                gap: 2px;
+            }
+            .proto-nav__segmented-btn {
+                flex: 1;
+                padding: 6px 4px;
+                background: transparent;
+                border: none;
+                border-radius: 3px;
+                color: var(--br-text-faint);
+                font-size: 11px;
+                cursor: pointer;
+                transition: all 0.15s ease;
+                font-family: inherit;
+            }
+            .proto-nav__segmented-btn:hover {
+                color: var(--br-text-muted);
+            }
+            .proto-nav__segmented-btn.is-active {
+                background: var(--br-active);
+                color: #fff;
+            }
+            /* Tools accordion */
+            .proto-nav__tools-details {
+                border-top: 1px solid var(--br-border);
+            }
+            .proto-nav__tools-summary {
+                padding: 10px 14px;
+                font-size: 11px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                color: var(--br-text-faint);
+                cursor: pointer;
+                list-style: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .proto-nav__tools-summary::-webkit-details-marker {
+                display: none;
+            }
+            .proto-nav__tools-summary::after {
+                content: '+';
+                font-size: 14px;
+                font-weight: normal;
+            }
+            .proto-nav__tools-details[open] .proto-nav__tools-summary::after {
+                content: '-';
+            }
+            .proto-nav__tools-details[open] .proto-nav__tools-summary {
+                color: var(--br-text-muted);
+            }
+            .proto-nav__tools-content {
+                padding: 0 14px 12px;
+            }
+            /* Storybook status */
+            .proto-nav__storybook {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 10px 14px;
+                border-top: 1px solid var(--br-border);
+                font-size: 12px;
+                color: var(--br-text-muted);
+            }
+            .proto-nav__storybook-status {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                flex-shrink: 0;
+            }
+            .proto-nav__storybook-status[data-status="checking"] {
+                background: var(--br-text-faint);
+            }
+            .proto-nav__storybook-status[data-status="running"] {
+                background: #22c55e;
+            }
+            .proto-nav__storybook-status[data-status="stopped"] {
+                background: #ef4444;
+            }
+            .proto-nav__storybook a {
+                color: var(--br-active);
+                text-decoration: none;
+            }
+            .proto-nav__storybook a:hover {
+                text-decoration: underline;
+            }
+        </style>
+    `;
+
+    // Inject styles
+    document.head.insertAdjacentHTML('beforeend', styles);
+
+    // Create flex wrapper and wrap all body contents
+    const wrapper = document.createElement('div');
+    wrapper.className = 'proto-wrapper';
+
+    const siteWrapper = document.createElement('div');
+    siteWrapper.className = 'proto-wrapper__site';
+    siteWrapper.id = 'protoSiteWrapper';
+
+    // Create preview container with iframe
+    const previewWrapper = document.createElement('div');
+    previewWrapper.className = 'proto-wrapper__preview';
+    previewWrapper.id = 'protoPreviewWrapper';
+
+    const iframeContainer = document.createElement('div');
+    iframeContainer.className = 'proto-wrapper__iframe-container';
+    iframeContainer.id = 'protoIframeContainer';
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'proto-wrapper__iframe';
+    iframe.id = 'protoIframe';
+
+    iframeContainer.appendChild(iframe);
+    previewWrapper.appendChild(iframeContainer);
+
+    // Move all body children into site wrapper
+    while (document.body.firstChild) {
+        siteWrapper.appendChild(document.body.firstChild);
+    }
+
+    // Build structure: body > wrapper > [nav, site, preview]
+    wrapper.innerHTML = sidebarHTML;
+    wrapper.appendChild(siteWrapper);
+    wrapper.appendChild(previewWrapper);
+    document.body.appendChild(wrapper);
+
+    const sidebar = document.getElementById('protoNav');
+    const closeBtn = sidebar.querySelector('.proto-nav__close');
+    const viewportIndicator = document.getElementById('viewportIndicator');
+
+    function openSidebar() {
+        sidebar.classList.add('is-open');
+        sidebar.setAttribute('aria-hidden', 'false');
+        localStorage.setItem(STORAGE_KEY, 'true');
+    }
+
+    function closeSidebar() {
+        sidebar.classList.remove('is-open');
+        sidebar.setAttribute('aria-hidden', 'true');
+        localStorage.setItem(STORAGE_KEY, 'false');
+    }
+
+    function toggleSidebar() {
+        const isOpen = sidebar.classList.contains('is-open');
+        if (isOpen) {
+            closeSidebar();
+        } else {
+            openSidebar();
+        }
+    }
+
+    // Viewport/breakpoint functions
+    let currentViewport = 'full';
+
+    function setViewport(viewportId) {
+        const breakpoint = BREAKPOINTS.find(bp => bp.id === viewportId);
+        if (!breakpoint) return;
+
+        currentViewport = viewportId;
+
+        // Update button states
+        document.querySelectorAll('.proto-nav__viewport-btn').forEach(btn => {
+            btn.classList.toggle('is-active', btn.dataset.viewport === viewportId);
+        });
+
+        const iframeContainer = document.getElementById('protoIframeContainer');
+        const iframe = document.getElementById('protoIframe');
+
+        if (breakpoint.width) {
+            // Show iframe preview
+            siteWrapper.classList.add('proto-wrapper__site--hidden');
+            previewWrapper.classList.add('proto-wrapper__preview--active');
+
+            // Set iframe container width (and optional fixed height)
+            iframeContainer.style.width = `${breakpoint.width}px`;
+            if (breakpoint.height) {
+                iframeContainer.style.height = `${breakpoint.height}px`;
+                iframeContainer.style.maxHeight = '100%';
+            } else {
+                iframeContainer.style.height = '';
+                iframeContainer.style.maxHeight = '';
+            }
+
+            // Load current page in iframe if not already loaded or URL changed
+            const currentUrl = window.location.href;
+            if (iframe.src !== currentUrl) {
+                iframe.src = currentUrl;
+            }
+
+            viewportIndicator.textContent = breakpoint.height
+                ? `${breakpoint.width}×${breakpoint.height}`
+                : `${breakpoint.width}px`;
+        } else {
+            // Show normal site view
+            siteWrapper.classList.remove('proto-wrapper__site--hidden');
+            previewWrapper.classList.remove('proto-wrapper__preview--active');
+
+            // Clear iframe src to stop loading
+            iframe.src = 'about:blank';
+            iframeContainer.style.width = '';
+            iframeContainer.style.height = '';
+            iframeContainer.style.maxHeight = '';
+
+            viewportIndicator.textContent = '';
+        }
+
+        // Save state
+        localStorage.setItem(VIEWPORT_STORAGE_KEY, viewportId);
+    }
+
+    // Sync navigation: when clicking links in sidebar, update iframe too
+    function handleNavLinkClick(e) {
+        if (currentViewport === 'full') return;
+        e.preventDefault();
+        const href = e.currentTarget.getAttribute('href');
+        const iframe = document.getElementById('protoIframe');
+        iframe.src = href;
+        // Update URL without reload
+        history.pushState(null, '', href);
+        // Update active states + page-states section
+        updateActiveLinks(href);
+    }
+
+    sidebar.querySelectorAll('.proto-nav__content a, .proto-nav__states a').forEach(link => {
+        link.addEventListener('click', handleNavLinkClick);
+    });
+
+    function updateActiveLinks(href) {
+        // Re-render the Page States block for the new page so navigating
+        // between two state-having pages doesn't keep showing the old states.
+        const newPath = new URL(href, window.location.origin).pathname;
+        const newStates = findPageStatesFor(newPath);
+        const statesContainer = sidebar.querySelector('#protoNavStates');
+        if (statesContainer) {
+            statesContainer.innerHTML = newStates ? renderPageStatesInner(newStates, newPath) : '';
+        }
+        // Update is-current on the persistent main-section links.
+        sidebar.querySelectorAll('.proto-nav__content a').forEach(link => {
+            link.classList.toggle('is-current', link.getAttribute('href') === href);
+        });
+        // Re-bind click interception on the freshly rendered state links so
+        // they too navigate the iframe rather than the top window.
+        sidebar.querySelectorAll('#protoNavStates a').forEach(link => {
+            link.addEventListener('click', handleNavLinkClick);
+        });
+    }
+
+    // Initialize viewport buttons
+    document.querySelectorAll('.proto-nav__viewport-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            setViewport(btn.dataset.viewport);
+        });
+    });
+
+    // Restore viewport state
+    const savedViewport = localStorage.getItem(VIEWPORT_STORAGE_KEY) || 'full';
+    setViewport(savedViewport);
+
+    // Restore sidebar state from localStorage
+    const savedState = localStorage.getItem(STORAGE_KEY);
+    if (savedState === 'true') {
+        openSidebar();
+    }
+
+    // Keyboard shortcut: Ctrl+M (or Cmd+M on Mac)
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'm') {
+            e.preventDefault();
+            toggleSidebar();
+        }
+        // Also close on Escape
+        if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+            closeSidebar();
+        }
+    });
+
+    // Close button
+    closeBtn.addEventListener('click', closeSidebar);
+
+    // BEM Overlay checkboxes sync (only if component overlay plugin enabled)
+    if (PLUGINS.componentOverlay !== false) {
+        const topLevelCheckbox = document.getElementById('bemOverlayTopLevel');
+        const atomsCheckbox = document.getElementById('bemOverlayAtoms');
+
+        if (topLevelCheckbox && atomsCheckbox) {
+            // Initialize checkbox states from BEMOverlay API or localStorage
+            function initBemCheckboxes() {
+                if (window.BEMOverlay) {
+                    topLevelCheckbox.checked = window.BEMOverlay.isTopLevelVisible();
+                    atomsCheckbox.checked = window.BEMOverlay.isAtomsVisible();
+                } else {
+                    topLevelCheckbox.checked = localStorage.getItem('bemOverlayTopLevel') === 'true';
+                    atomsCheckbox.checked = localStorage.getItem('bemOverlayAtoms') === 'true';
+                }
+            }
+
+            initBemCheckboxes();
+
+            topLevelCheckbox.addEventListener('change', () => {
+                if (window.BEMOverlay) {
+                    if (topLevelCheckbox.checked) {
+                        window.BEMOverlay.showTopLevel();
+                    } else {
+                        window.BEMOverlay.hideTopLevel();
+                    }
+                }
+            });
+
+            atomsCheckbox.addEventListener('change', () => {
+                if (window.BEMOverlay) {
+                    if (atomsCheckbox.checked) {
+                        window.BEMOverlay.showAtoms();
+                    } else {
+                        window.BEMOverlay.hideAtoms();
+                    }
+                }
+            });
+
+            window.addEventListener('bemOverlayToggled', (e) => {
+                topLevelCheckbox.checked = e.detail.topLevel;
+                atomsCheckbox.checked = e.detail.atoms;
+            });
+        }
+    }
+
+    // Grid Overlay checkboxes sync (only if grid overlay plugin enabled)
+    if (PLUGINS.gridOverlay !== false) {
+        const gridColCheckbox = document.getElementById('gridOverlayCol');
+        const gridSpacingCheckbox = document.getElementById('gridOverlaySpacing');
+
+        if (gridColCheckbox && gridSpacingCheckbox) {
+            function initGridCheckboxes() {
+                if (window.GridOverlay) {
+                    gridColCheckbox.checked = window.GridOverlay.isColEnabled();
+                    gridSpacingCheckbox.checked = window.GridOverlay.isSpacingEnabled();
+                } else {
+                    gridColCheckbox.checked = localStorage.getItem('gridOverlayEnabled') === 'true';
+                    gridSpacingCheckbox.checked = localStorage.getItem('sectionSpacingEnabled') === 'true';
+                }
+            }
+
+            initGridCheckboxes();
+
+            function postToIframe(action) {
+                const iframe = document.getElementById('protoIframe');
+                if (iframe && iframe.contentWindow && iframe.src && iframe.src !== 'about:blank') {
+                    iframe.contentWindow.postMessage({ type: 'gridOverlay', action }, '*');
+                }
+            }
+
+            gridColCheckbox.addEventListener('change', () => {
+                const on = gridColCheckbox.checked;
+                if (window.GridOverlay) {
+                    on ? window.GridOverlay.enableCol() : window.GridOverlay.disableCol();
+                }
+                postToIframe(on ? 'enableCol' : 'disableCol');
+            });
+
+            gridSpacingCheckbox.addEventListener('change', () => {
+                const on = gridSpacingCheckbox.checked;
+                if (window.GridOverlay) {
+                    on ? window.GridOverlay.enableSpacing() : window.GridOverlay.disableSpacing();
+                }
+                postToIframe(on ? 'enableSpacing' : 'disableSpacing');
+            });
+
+            window.addEventListener('gridOverlayToggled', (e) => {
+                gridColCheckbox.checked = e.detail.colEnabled;
+                gridSpacingCheckbox.checked = e.detail.spacingEnabled;
+            });
+
+            // State updates posted from the viewport-preview iframe
+            window.addEventListener('message', (e) => {
+                const msg = e.data;
+                if (!msg || msg.type !== 'gridOverlayState') return;
+                gridColCheckbox.checked = !!msg.colEnabled;
+                gridSpacingCheckbox.checked = !!msg.spacingEnabled;
+            });
+        }
+    }
+
+    // Inspector segmented control (if any inspector plugin enabled)
+    if (PLUGINS.typographyInspector !== false || PLUGINS.colorInspector !== false) {
+        const inspectorSegmented = document.getElementById('inspectorSegmented');
+
+        if (inspectorSegmented) {
+            const inspectorButtons = inspectorSegmented.querySelectorAll('.proto-nav__segmented-btn');
+
+            function setInspectorMode(mode) {
+                inspectorButtons.forEach(btn => {
+                    btn.classList.toggle('is-active', btn.dataset.mode === mode);
+                });
+
+                if (window.TypographyOverlay) {
+                    if (mode === 'font') {
+                        window.TypographyOverlay.enableFontMode();
+                    } else if (mode === 'spacing') {
+                        window.TypographyOverlay.enableDistanceMode();
+                    } else {
+                        window.TypographyOverlay.disableFontMode();
+                        window.TypographyOverlay.disableDistanceMode();
+                    }
+                }
+
+                if (window.ColorOverlay) {
+                    if (mode === 'color') {
+                        window.ColorOverlay.enable();
+                    } else {
+                        window.ColorOverlay.disable();
+                    }
+                }
+            }
+
+            function initInspectorSegmented() {
+                let activeMode = 'none';
+                if (window.ColorOverlay && window.ColorOverlay.isEnabled()) {
+                    activeMode = 'color';
+                } else if (window.TypographyOverlay) {
+                    if (window.TypographyOverlay.isFontModeEnabled()) {
+                        activeMode = 'font';
+                    } else if (window.TypographyOverlay.isDistanceModeEnabled()) {
+                        activeMode = 'spacing';
+                    }
+                } else {
+                    if (localStorage.getItem('typographyOverlayFont') === 'true') {
+                        activeMode = 'font';
+                    } else if (localStorage.getItem('typographyOverlayDistance') === 'true') {
+                        activeMode = 'spacing';
+                    } else if (localStorage.getItem('colorOverlayEnabled') === 'true') {
+                        activeMode = 'color';
+                    }
+                }
+                inspectorButtons.forEach(btn => {
+                    btn.classList.toggle('is-active', btn.dataset.mode === activeMode);
+                });
+            }
+
+            initInspectorSegmented();
+
+            inspectorButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    setInspectorMode(btn.dataset.mode);
+                });
+            });
+
+            function syncActiveFromState() {
+                let activeMode = 'none';
+                if (window.ColorOverlay && window.ColorOverlay.isEnabled()) {
+                    activeMode = 'color';
+                } else if (window.TypographyOverlay) {
+                    if (window.TypographyOverlay.isFontModeEnabled()) {
+                        activeMode = 'font';
+                    } else if (window.TypographyOverlay.isDistanceModeEnabled()) {
+                        activeMode = 'spacing';
+                    }
+                }
+                inspectorButtons.forEach(btn => {
+                    btn.classList.toggle('is-active', btn.dataset.mode === activeMode);
+                });
+            }
+
+            window.addEventListener('typographyOverlayToggled', syncActiveFromState);
+            window.addEventListener('colorOverlayToggled', syncActiveFromState);
+        }
+    }
+
+    // Check Storybook status (only if storybook plugin enabled and on local dev)
+    if (PLUGINS.storybook !== false && isLocalDev) {
+        (async function checkStorybookStatus() {
+            const storybookEl = document.getElementById('protoNavStorybook');
+            if (!storybookEl) return;
+
+            const statusEl = storybookEl.querySelector('.proto-nav__storybook-status');
+            const textEl = storybookEl.querySelector('.proto-nav__storybook-text');
+
+            for (const port of STORYBOOK_PORTS) {
+                try {
+                    const controller = new AbortController();
+                    const timeout = setTimeout(() => controller.abort(), 1000);
+                    await fetch(`http://localhost:${port}`, {
+                        mode: 'no-cors',
+                        signal: controller.signal
+                    });
+                    clearTimeout(timeout);
+
+                    statusEl.dataset.status = 'running';
+                    textEl.innerHTML = `<a href="http://localhost:${port}" target="_blank">Storybook :${port}</a>`;
+                    return;
+                } catch (e) {
+                    // Port not responding, try next
+                }
+            }
+
+            statusEl.dataset.status = 'stopped';
+            textEl.textContent = 'Storybook not running';
+        })();
+    }
+});
+
+// Helper function to check if a href matches the current path
+// Handles both with and without .html extension (for Cloudflare Pages etc.)
+function isCurrentPage(href, currentPath) {
+    // Normalize paths by removing trailing .html
+    const normalizeHref = href.replace(/\.html$/, '').replace(/\/index$/, '');
+    const normalizePath = currentPath.replace(/\.html$/, '').replace(/\/index$/, '');
+
+    return href === currentPath ||
+        normalizeHref === normalizePath ||
+        (currentPath === '/' && (href === '/' || href === '/index.html')) ||
+        (normalizePath === '' && normalizeHref === '');
+}
+
+} // End of iframe check