dataface 0.1.2__py3-none-any.whl

dataface/core/render/templates/scripts/variables.js

@@ -0,0 +1,976 @@
+/**
+ * Variable interactivity for datafaces.
+ *
+ * This script handles:
+ * - Variable change events (updateVariable function)
+ * - URL parameter updates
+ * - Chart loading states
+ * - Parent frame communication (for playground/suite embedding)
+ * - URL parameter initialization on load
+ * - Variable hover highlighting
+ * - Date range chip+popover control (makeChip factory)
+ *
+ * Note: Chart menus are handled by Suite's JavaScript (init.js), not here.
+ *
+ */
+(function() {
+    // Guard against double execution (e.g., if script runs both on parse and via executeEmbeddedScripts)
+    if (window.__dfVariablesInitialized) return;
+    window.__dfVariablesInitialized = true;
+
+    function setVariableIfMissing(vars, name, value) {
+        if (Object.prototype.hasOwnProperty.call(vars, name)) {
+            return;
+        }
+        vars[name] = value;
+    }
+
+    function markDependentChartsLoading(name) {
+        var charts = document.querySelectorAll('[data-var-' + name + ']');
+        for (var i = 0; i < charts.length; i++) {
+            var chart = charts[i];
+            // Add loading class
+            var currentClass = chart.getAttribute('class') || '';
+            if (currentClass.indexOf('loading') === -1) {
+                chart.setAttribute('class', currentClass + (currentClass ? ' ' : '') + 'loading');
+            }
+
+            // Add spinner if not already present
+            if (!chart.querySelector('.dft-chart-spinner')) {
+                var spinner = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                spinner.setAttribute('class', 'dft-chart-spinner');
+                // Get chart bounds for centering spinner
+                var bbox = chart.getBBox ? chart.getBBox() : {width: 200, height: 200};
+                var centerX = bbox.x + bbox.width / 2;
+                var centerY = bbox.y + bbox.height / 2;
+
+                var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', centerX);
+                circle.setAttribute('cy', centerY);
+                circle.setAttribute('r', '14');
+                circle.setAttribute('fill', 'none');
+                circle.setAttribute('stroke', '#e0e0e0');
+                circle.setAttribute('stroke-width', '3');
+                circle.setAttribute('stroke-dasharray', '20 60');
+                circle.setAttribute('stroke-dashoffset', '0');
+                circle.style.animation = 'dft-spin 0.8s linear infinite';
+
+                spinner.appendChild(circle);
+                chart.appendChild(spinner);
+            }
+        }
+
+        return charts;
+    }
+
+    function scheduleLoadingCleanup(charts) {
+        setTimeout(function() {
+            for (var i = 0; i < charts.length; i++) {
+                var chart = charts[i];
+                var currentClass = chart.getAttribute('class') || '';
+                chart.setAttribute('class', currentClass.replace(/\s*loading\s*/g, ' ').trim());
+                var spinner = chart.querySelector('.dft-chart-spinner');
+                if (spinner) {
+                    spinner.remove();
+                }
+            }
+        }, 5000);
+    }
+
+    // Update URL and reload (or notify parent)
+    function updateVariable(name, value) {
+        // Mark dependent charts as loading (add loading class and spinner)
+        var charts = markDependentChartsLoading(name);
+
+        // Restore after timeout (fallback if reload fails or is prevented)
+        scheduleLoadingCleanup(charts);
+
+        // Update URL
+        var url = new URL(window.location);
+        if (value === '' || value === null || value === false) {
+            url.searchParams.delete(name);
+        } else {
+            url.searchParams.set(name, String(value));
+        }
+
+        // Notify parent (suite/playground) or reload (standalone)
+        // Using '*' is safe here because:
+        // 1. Iframe content is generated by us (not user input)
+        // 2. Parent checks message.type before processing
+        // 3. Blob URLs have null origin, so specific origin targeting doesn't work
+        if (window.parent !== window) {
+            var vars = getAllVariableValues();
+            // Form controls haven't re-rendered yet, so patch the outgoing
+            // snapshot with the pending value before notifying the parent.
+            setVariableIfMissing(vars, name, value);
+            window.parent.postMessage({
+                type: 'dft-variable-change',
+                variables: vars
+            }, '*');
+        } else if (typeof window.__dfHandleVariableUpdate === 'function') {
+            // Suite registers this hook to re-render in place (no page reload).
+            window.__dfHandleVariableUpdate(url);
+        } else {
+            // Plain dft serve: full page reload. Save scroll so initializeFromURL
+            // can restore it after the new page renders.
+            try {
+                sessionStorage.setItem('__dfScrollY_' + window.location.pathname, String(window.scrollY));
+            } catch (e) { /* sessionStorage may be unavailable */ }
+            window.location.href = url.toString();
+        }
+    }
+
+    // Expose functions to window for inline HTML event handlers (onchange="updateVariable(...)")
+    // These are used by foreignObject controls rendered by render_html_control_for_svg
+    window.updateVariable = updateVariable;
+
+    // ── Date range chip+popover ──────────────────────────────────────────────
+
+    // 8 presets: Today / Last 7 / Last 28 / Last 90 / Last 12 months / MTD / YTD / Custom
+    var PRESETS = [
+        { id: 'today',          label: 'Today' },
+        { id: 'last_7_days',    label: 'Last 7 days' },
+        { id: 'last_28_days',   label: 'Last 28 days' },
+        { id: 'last_90_days',   label: 'Last 90 days' },
+        { id: 'last_12_months', label: 'Last 12 months' },
+        { id: 'divider' },
+        { id: 'mtd',            label: 'Month to date' },
+        { id: 'ytd',            label: 'Year to date' },
+        { id: 'divider' },
+        { id: 'custom',         label: 'Custom' },
+    ];
+
+    // All date math is relative to "today at midnight local time" so that
+    // a frozen today in tests resolves deterministically.
+    function resolvePreset(id) {
+        var now = new Date();
+        var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        var end = new Date(today);
+        var start = new Date(today);
+        switch (id) {
+            case 'today':          break;
+            case 'last_7_days':    start.setDate(end.getDate() - 6); break;
+            case 'last_28_days':   start.setDate(end.getDate() - 27); break;
+            case 'last_90_days':   start.setDate(end.getDate() - 89); break;
+            // Compute start as one year back from today + 1 day in a single constructor call
+            // to avoid the two-step setFullYear+setDate rollover on Feb 29 leap years.
+            case 'last_12_months': start = new Date(end.getFullYear() - 1, end.getMonth(), end.getDate() + 1); break;
+            case 'mtd':            start = new Date(end.getFullYear(), end.getMonth(), 1); break;
+            case 'ytd':            start = new Date(end.getFullYear(), 0, 1); break;
+            case 'custom':         return null;
+            default:               return null;
+        }
+        return [start, end];
+    }
+
+    // ISO date string from a Date object (YYYY-MM-DD local time).
+    function toISO(d) {
+        var m = String(d.getMonth() + 1).padStart(2, '0');
+        var day = String(d.getDate()).padStart(2, '0');
+        return d.getFullYear() + '-' + m + '-' + day;
+    }
+
+    // ISO YYYY-MM-DD shape check (does not check calendar validity, just structure).
+    var _ISO_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+    // Date from an ISO string without timezone shift (treat as local midnight).
+    // Returns null when the string is not a well-formed YYYY-MM-DD literal.
+    function fromISO(s) {
+        if (!_ISO_RE.test(s)) return null;
+        var parts = s.split('-');
+        var d = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
+        // Reject dates that JS rolled over (e.g. Feb 30 → Mar 2).
+        if (d.getFullYear() !== parseInt(parts[0], 10) ||
+            d.getMonth()    !== parseInt(parts[1], 10) - 1 ||
+            d.getDate()     !== parseInt(parts[2], 10)) return null;
+        return d;
+    }
+
+    // Human-readable chip label from a [start, end] Date pair.
+    // Collapses same-day / same-month / same-year / cross-year ranges.
+    var MONTHS_SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    function fmtDate(d) { return d.getDate() + ' ' + MONTHS_SHORT[d.getMonth()] + ' ' + d.getFullYear(); }
+    function fmtDateNoYr(d) { return d.getDate() + ' ' + MONTHS_SHORT[d.getMonth()]; }
+
+    function formatRange(start, end) {
+        var sameDay   = start.getTime() === end.getTime();
+        var sameMonth = start.getFullYear() === end.getFullYear() && start.getMonth() === end.getMonth();
+        var sameYear  = start.getFullYear() === end.getFullYear();
+        if (sameDay)   return fmtDate(start);
+        if (sameMonth) return start.getDate() + '–' + end.getDate() + ' ' + MONTHS_SHORT[start.getMonth()] + ' ' + start.getFullYear();
+        if (sameYear)  return fmtDateNoYr(start) + ' – ' + fmtDate(end);
+        return fmtDate(start) + ' – ' + fmtDate(end);
+    }
+
+    function buildRail(railEl, onPick) {
+        railEl.innerHTML = '';
+        PRESETS.forEach(function(p) {
+            if (p.id === 'divider') {
+                var div = document.createElement('div');
+                div.className = 'dft-preset-divider';
+                railEl.appendChild(div);
+            } else {
+                var btn = document.createElement('button');
+                btn.type = 'button';
+                btn.textContent = p.label;
+                btn.dataset.preset = p.id;
+                btn.addEventListener('click', function() { onPick(p); });
+                railEl.appendChild(btn);
+            }
+        });
+    }
+
+    function markRailActive(railEl, presetId) {
+        railEl.querySelectorAll('button').forEach(function(b) {
+            b.classList.toggle('dft-preset-active', b.dataset.preset === presetId);
+        });
+    }
+
+    // Given a [start, end] pair, return the preset id whose resolved range
+    // matches, or 'custom' for a non-matching range, or null for an empty range.
+    // Used to restore the active-preset highlight after an iframe re-render
+    // wipes the rail's local mark.
+    function matchPreset(range) {
+        if (!range[0] || !range[1]) return null;
+        var s = toISO(range[0]), e = toISO(range[1]);
+        for (var i = 0; i < PRESETS.length; i++) {
+            var p = PRESETS[i];
+            if (!p.id || p.id === 'divider' || p.id === 'custom') continue;
+            var r = resolvePreset(p.id);
+            if (r && toISO(r[0]) === s && toISO(r[1]) === e) return p.id;
+        }
+        return 'custom';
+    }
+
+    // Per-instance chip+popover factory.
+    // rootEl is the .dft-chip-host element; varName is the DFT variable id.
+    // Returns a handle so the global outside-click + Esc handlers can reach in.
+    function makeChip(rootEl, varName) {
+        var trigger  = rootEl.querySelector('.dft-chip');
+        var labelEl  = rootEl.querySelector('.dft-chip-label');
+        var clearBtn = rootEl.querySelector('.dft-chip-clear');
+        var popover  = rootEl.querySelector('.dft-popover');
+        var rail     = rootEl.querySelector('.dft-preset-rail');
+        var calEl    = rootEl.querySelector('.dft-calendar-area');
+
+        var range     = [null, null];
+        var hoverDate = null;
+        var viewMonth = new Date();
+        var now       = new Date();
+        var today     = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+        // Restore server-rendered initial value if present (data-start / data-end).
+        var initStart = calEl.dataset.start;
+        var initEnd   = calEl.dataset.end;
+        if (initStart && initEnd) {
+            var parsedStart = fromISO(initStart);
+            var parsedEnd   = fromISO(initEnd);
+            if (parsedStart && parsedEnd) {
+                range = [parsedStart, parsedEnd];
+                viewMonth = new Date(range[1].getFullYear(), range[1].getMonth(), 1);
+            }
+            // Chip label and state were server-rendered; don't repaint here.
+        }
+
+        // Persist the resolved [start, end] pair as ISO strings via the standard variable pipeline.
+        function commitRange() {
+            if (range[0] && range[1]) {
+                calEl.dataset.start = toISO(range[0]);
+                calEl.dataset.end   = toISO(range[1]);
+                updateVariable(varName, JSON.stringify([toISO(range[0]), toISO(range[1])]));
+            }
+        }
+
+        function setChipValue(text) {
+            labelEl.textContent = text;
+            trigger.setAttribute('data-active', 'true');
+            trigger.removeAttribute('data-placeholder');
+        }
+
+        function setChipEmpty() {
+            labelEl.textContent = 'All dates';
+            trigger.removeAttribute('data-active');
+            trigger.setAttribute('data-placeholder', 'true');
+        }
+
+        function clearAll() {
+            range = [null, null];
+            hoverDate = null;
+            calEl.dataset.start = '';
+            calEl.dataset.end   = '';
+            setChipEmpty();
+            markRailActive(rail, null);
+            rebuildCalendar();
+            updateVariable(varName, '');
+        }
+
+        // ── Calendar render pipeline ─────────────────────────────────────────
+        // rebuildCalendar — full DOM rebuild. Called on pickDay, month nav, preset.
+        // paintCalendarState — class-only mutation on existing cells. Called on hover.
+        // Re-rendering on hover replaces the hovered cell and the next mouseenter
+        // doesn't fire until the user moves away and back — sticky-hover bug.
+        // Class mutation leaves the DOM stable and avoids this.
+
+        function rebuildCalendar() {
+            var year      = viewMonth.getFullYear();
+            var month     = viewMonth.getMonth();
+            var firstDay  = new Date(year, month, 1);
+            var startWeek = firstDay.getDay();
+            var monthName = firstDay.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+            // Build via DOM API (not innerHTML) so structural nesting errors
+            // become type errors rather than silent mis-parses.
+            calEl.innerHTML = '';
+
+            // Header: ‹ Month YYYY ›
+            var header = document.createElement('div');
+            header.className = 'dft-cal-header';
+
+            var prevBtn = document.createElement('button');
+            prevBtn.type = 'button';
+            prevBtn.className = 'dft-cal-nav';
+            prevBtn.setAttribute('aria-label', 'Previous month');
+            prevBtn.textContent = '‹'; // ‹
+            prevBtn.addEventListener('click', function() {
+                viewMonth = new Date(year, month - 1, 1);
+                rebuildCalendar();
+            });
+
+            var monthSpan = document.createElement('span');
+            monthSpan.className = 'dft-cal-month';
+            monthSpan.textContent = monthName;
+
+            var nextBtn = document.createElement('button');
+            nextBtn.type = 'button';
+            nextBtn.className = 'dft-cal-nav';
+            nextBtn.setAttribute('aria-label', 'Next month');
+            nextBtn.textContent = '›'; // ›
+            nextBtn.addEventListener('click', function() {
+                viewMonth = new Date(year, month + 1, 1);
+                rebuildCalendar();
+            });
+
+            header.appendChild(prevBtn);
+            header.appendChild(monthSpan);
+            header.appendChild(nextBtn);
+            calEl.appendChild(header);
+
+            // Grid: 7 day-of-week labels + 42 cells (6 rows × 7 cols, fixed height)
+            var grid = document.createElement('div');
+            grid.className = 'dft-cal-grid';
+
+            var DOW = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+            DOW.forEach(function(d) {
+                var dow = document.createElement('div');
+                dow.className = 'dft-cal-dow';
+                dow.textContent = d;
+                grid.appendChild(dow);
+            });
+
+            var cursor = new Date(year, month, 1 - startWeek);
+            for (var i = 0; i < 42; i++) {
+                var dt      = new Date(cursor);
+                var isOther = dt.getMonth() !== month;
+                var isToday = dt.getTime() === today.getTime();
+                var cell    = document.createElement('button');
+                cell.type        = 'button';
+                cell.className   = 'dft-cal-cell';
+                if (isOther) {
+                    cell.classList.add('dft-other-month');
+                    cell.tabIndex = -1;
+                }
+                if (isToday) cell.classList.add('dft-today');
+                cell.textContent   = dt.getDate();
+                cell.dataset.day   = String(dt.getTime());
+                cell.setAttribute('aria-label', dt.toLocaleDateString('en-US', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}));
+                // Capture dt for closure
+                (function(cellEl, cellDate) {
+                    cellEl.addEventListener('click', function() { pickDay(cellDate.getTime()); });
+                    cellEl.addEventListener('mouseenter', function() {
+                        if (range[0] && !range[1]) {
+                            hoverDate = new Date(cellDate.getTime());
+                            paintCalendarState();
+                        }
+                    });
+                }(cell, dt));
+                grid.appendChild(cell);
+                cursor.setDate(cursor.getDate() + 1);
+            }
+            calEl.appendChild(grid);
+
+            // Footer: [Clear] | [Apply]. Apply is always present; Clear only
+            // when there's a selection to clear.
+            //
+            // Lingering-popover pattern: adopt the auto-commit half (range[1]
+            // pick writes the URL), drop the auto-close half (popover stays
+            // open until Apply). Apply's only job is closing the popover; the
+            // commit already happened on pickDay. Matches Stripe's auto-commit
+            // + Linear's lingering popover.
+            var footer = document.createElement('div');
+            footer.className = 'dft-cal-footer';
+            if (range[0] !== null) {
+                var clearAction = document.createElement('button');
+                clearAction.type = 'button';
+                clearAction.className = 'dft-cal-action';
+                clearAction.setAttribute('data-action', 'clear');
+                clearAction.textContent = 'Clear';
+                // Push Clear to the left; Apply pins to the right via the
+                // footer's justify-content: flex-end. CSS-side `:not()` and
+                // quoted attribute selectors trip resvg's parser in the PNG
+                // converter, so we set this inline rather than in a stylesheet.
+                clearAction.style.marginRight = 'auto';
+                footer.appendChild(clearAction);
+            }
+            var applyAction = document.createElement('button');
+            applyAction.type = 'button';
+            applyAction.className = 'dft-cal-action dft-cal-action-primary';
+            applyAction.setAttribute('data-action', 'apply');
+            applyAction.textContent = 'Apply';
+            footer.appendChild(applyAction);
+            // Single dispatch on the footer — matches the prototype's
+            // doAction() pattern. Binding to the footer (recreated each
+            // rebuild) avoids re-attaching per-button listeners.
+            footer.addEventListener('click', function(e) {
+                var btn = e.target.closest('[data-action]');
+                if (!btn) return;
+                var action = btn.getAttribute('data-action');
+                if (action === 'clear') clearAll();
+                else if (action === 'apply') closePopover();
+            });
+            calEl.appendChild(footer);
+
+            paintCalendarState();
+            markRailActive(rail, matchPreset(range));
+        }
+
+        function paintCalendarState() {
+            var startTs  = range[0] && range[0].getTime();
+            var endTs    = range[1] && range[1].getTime();
+            var previewing = startTs && !endTs && hoverDate;
+            var hoverTs  = previewing && hoverDate.getTime();
+            var lo       = previewing ? Math.min(startTs, hoverTs) : null;
+            var hi       = previewing ? Math.max(startTs, hoverTs) : null;
+
+            calEl.querySelectorAll('.dft-cal-cell').forEach(function(c) {
+                var ts          = parseInt(c.dataset.day, 10);
+                var isStart     = startTs && ts === startTs;
+                var isEnd       = endTs   && ts === endTs;
+                var inRange     = startTs && endTs && ts > startTs && ts < endTs;
+                var inPreview   = previewing && ts > lo && ts < hi;
+                var isPreviewEnd = previewing && ts === hoverTs && ts !== startTs;
+
+                c.classList.toggle('dft-selected',         Boolean(isStart || isEnd));
+                c.classList.toggle('dft-range-start',      Boolean(isStart));
+                c.classList.toggle('dft-range-end',        Boolean(isEnd));
+                c.classList.toggle('dft-in-range',         Boolean(inRange));
+                c.classList.toggle('dft-preview-in-range', Boolean(inPreview));
+                c.classList.toggle('dft-preview-end',      Boolean(isPreviewEnd));
+            });
+        }
+
+        function pickDay(timestamp) {
+            var dt = new Date(timestamp);
+            if (dt.getMonth() !== viewMonth.getMonth()) {
+                viewMonth = new Date(dt.getFullYear(), dt.getMonth(), 1);
+            }
+            if (!range[0] || (range[0] && range[1])) {
+                range = [dt, null];
+            } else if (dt < range[0]) {
+                range = [dt, range[0]];
+            } else if (dt.getTime() === range[0].getTime()) {
+                range = [dt, dt];
+            } else {
+                range = [range[0], dt];
+            }
+            hoverDate = null;
+            if (range[0] && range[1]) {
+                setChipValue(formatRange(range[0], range[1]));
+                markRailActive(rail, 'custom');
+                commitRange();
+            } else {
+                markRailActive(rail, null);
+            }
+            rebuildCalendar();
+        }
+
+        // ── Wire up listeners ────────────────────────────────────────────────
+        clearBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            clearAll();
+        });
+
+        buildRail(rail, function(p) {
+            var r = resolvePreset(p.id);
+            if (r) {
+                range = r;
+                viewMonth = new Date(r[1].getFullYear(), r[1].getMonth(), 1);
+                setChipValue(p.label);
+                markRailActive(rail, p.id);
+                commitRange();
+            } else {
+                markRailActive(rail, p.id);
+            }
+            rebuildCalendar();
+        });
+
+        // Popover lives in the SVG foreignObject by default — but SVG paints in
+        // document order, so later rows paint over the popover (overflow:visible
+        // can't escape paint order). On open, reparent the popover to document.body
+        // and switch to position:fixed so it floats above the SVG entirely.
+        var popoverOriginalParent = popover.parentNode;
+        // CSS custom properties for theme colors are set inline on .dft-variables.
+        // Moving the popover to document.body breaks that cascade, so we copy
+        // the props that should track the theme onto the popover itself.
+        //
+        // We deliberately do NOT carry --dft-text-color / --dft-muted-color /
+        // --dft-input-bg: the popover is an always-light card (--dft-popover-bg
+        // defaults to white), and copying dark-theme text colors onto a white
+        // card produces invisible-on-white ghost text. The popover's CSS
+        // fallbacks (#333 ink, #6c757d muted, #ced4da border) read correctly
+        // on the white card across every shipped theme. We do carry:
+        //  - --dft-accent-color so Apply, range tint, and focus rings track
+        //    the theme;
+        //  - --dft-popover-rail-bg so the preset rail tracks the theme's
+        //    subtle-surface step (cream on editorial-cream, gray-50 on the
+        //    grays-scaffold themes).
+        var THEME_PROPS = ['--dft-accent-color', '--dft-popover-rail-bg'];
+        function snapshotThemePropsFromVariables() {
+            var src = popoverOriginalParent.closest('.dft-variables');
+            if (!src) return;
+            THEME_PROPS.forEach(function(p) {
+                var v = src.style.getPropertyValue(p);
+                if (v) popover.style.setProperty(p, v);
+            });
+        }
+        // Position the popover relative to the chip's viewport-coords, auto-
+        // flipping to a right-edge anchor when the default left-anchor would
+        // push the popover past the viewport's right edge.
+        //
+        // The popover stays at native pixel size regardless of the SVG's
+        // render scale — this is chrome, not content. Matches native browser
+        // dropdown / datepicker behavior; chrome doesn't zoom with the page.
+        // A prior QA round confirmed this stance over the alternative (apply
+        // transform: scale() to match the SVG scale). Don't reintroduce
+        // scaling without re-litigating.
+        function positionPopoverFixed() {
+            var rect = trigger.getBoundingClientRect();
+            popover.style.top = (rect.bottom + 6) + 'px';
+            var popoverWidth = popover.getBoundingClientRect().width;
+            var margin = 8;
+            if (rect.left + popoverWidth > window.innerWidth - margin) {
+                // Right-anchor: align popover's right edge with chip's right edge.
+                // Clamp to a minimum of margin so a popover wider than the
+                // viewport still respects the left gutter.
+                popover.style.left = Math.max(margin, rect.right - popoverWidth) + 'px';
+            } else {
+                popover.style.left = rect.left + 'px';
+            }
+        }
+        function openPopover() {
+            // Standalone-SVG documents (no <body>) can't be reparented to —
+            // skip the escape hatch and let the popover render in place.
+            if (document.body && popover.parentNode !== document.body) {
+                snapshotThemePropsFromVariables();
+                document.body.appendChild(popover);
+                popover.style.position = 'fixed';
+            }
+            popover.classList.add('dft-popover-open');
+            trigger.setAttribute('aria-expanded', 'true');
+            popover.setAttribute('aria-hidden', 'false');
+            // Position AFTER applying dft-popover-open: the class flips
+            // display from none to flex, so getBoundingClientRect inside
+            // positionPopoverFixed returns the popover's real width for the
+            // right-edge collision check.
+            positionPopoverFixed();
+            // Mark this chip as open so the prototype's lingering-popover
+            // intent survives an iframe re-render after commit. The new chip
+            // in the re-rendered iframe checks this flag on init.
+            try { sessionStorage.setItem('__dfChipOpen_' + varName, '1'); }
+            catch (e) { /* sessionStorage may be unavailable */ }
+        }
+        function closePopover() {
+            popover.classList.remove('dft-popover-open');
+            trigger.setAttribute('aria-expanded', 'false');
+            popover.setAttribute('aria-hidden', 'true');
+            if (popover.parentNode === document.body) {
+                popover.style.position = '';
+                popover.style.top = '';
+                popover.style.left = '';
+                popoverOriginalParent.appendChild(popover);
+            }
+            try { sessionStorage.removeItem('__dfChipOpen_' + varName); }
+            catch (e) { /* sessionStorage may be unavailable */ }
+        }
+        trigger.addEventListener('click', function(e) {
+            e.stopPropagation();
+            if (popover.classList.contains('dft-popover-open')) {
+                closePopover();
+            } else {
+                openPopover();
+            }
+        });
+        // Reposition (or close) when the page scrolls / resizes — a fixed popover
+        // doesn't track its anchor on its own.
+        window.addEventListener('scroll', function() {
+            if (popover.classList.contains('dft-popover-open')) positionPopoverFixed();
+        }, true);
+        window.addEventListener('resize', function() {
+            if (popover.classList.contains('dft-popover-open')) positionPopoverFixed();
+        });
+
+        // Stop clicks inside the popover from bubbling to document — prevents
+        // the outside-click handler from firing on calendar cell clicks that
+        // rebuild the DOM (the just-clicked cell would become an orphan node
+        // and trigger.contains(target) would return false, closing the popover).
+        popover.addEventListener('click', function(e) { e.stopPropagation(); });
+
+        // Clear hover preview when the cursor leaves the calendar area.
+        calEl.addEventListener('mouseleave', function() {
+            if (hoverDate) {
+                hoverDate = null;
+                paintCalendarState();
+            }
+        });
+
+        rebuildCalendar();
+
+        return {
+            trigger:  trigger,
+            popover:  popover,
+            varName:  varName,
+            open:     openPopover,
+            close:    closePopover,
+            isOpen:   function() { return popover.classList.contains('dft-popover-open'); },
+            // Restore chip state from a [startISO, endISO] pair (used by initializeFromURL).
+            // Silently ignores malformed ISO strings — leaves chip in placeholder state.
+            restoreRange: function(startISO, endISO) {
+                if (!startISO || !endISO) return;
+                var s = fromISO(startISO);
+                var e = fromISO(endISO);
+                if (!s || !e) return;  // invalid ISO — leave chip in placeholder state
+                range = [s, e];
+                viewMonth = new Date(range[1].getFullYear(), range[1].getMonth(), 1);
+                calEl.dataset.start = startISO;
+                calEl.dataset.end   = endISO;
+                setChipValue(formatRange(range[0], range[1]));
+                rebuildCalendar();
+            },
+        };
+    }
+
+    // ── Global chip registration + outside-click + Esc ──────────────────────
+
+    var _chipInstances = [];
+
+    // The controls stylesheet ships embedded in the SVG's <defs><style>, which
+    // browsers scope to the SVG subtree — so once the popover is reparented to
+    // document.body it loses every rule. Clone the embedded stylesheet content
+    // into document.head once so the popover renders correctly anywhere.
+    function _liftControlsStylesIntoHead() {
+        if (!document.head) return;
+        if (document.head.querySelector('style[data-dft-controls-lifted]')) return;
+        var styleEls = document.querySelectorAll('svg style');
+        if (!styleEls.length) return;
+        var css = '';
+        styleEls.forEach(function(s) { css += s.textContent + '\n'; });
+        var lifted = document.createElement('style');
+        lifted.setAttribute('data-dft-controls-lifted', 'true');
+        lifted.textContent = css;
+        document.head.appendChild(lifted);
+    }
+
+    function _initAllChips() {
+        // Find all chip hosts that have not been initialized yet.
+        var hosts = document.querySelectorAll('.dft-chip-host:not([data-chip-initialized])');
+        if (hosts.length) _liftControlsStylesIntoHead();
+        hosts.forEach(function(host) {
+            var calArea = host.querySelector('.dft-calendar-area');
+            if (!calArea) return;
+            var varName = calArea.getAttribute('data-variable');
+            if (!varName) return;
+            host.setAttribute('data-chip-initialized', 'true');
+            var inst = makeChip(host, varName);
+            _chipInstances.push(inst);
+            // If this chip was open right before an auto-commit triggered an
+            // iframe re-render, reopen it so the prototype's "lingering
+            // popover" intent survives the playground's blob-URL swap.
+            try {
+                if (sessionStorage.getItem('__dfChipOpen_' + varName) === '1') {
+                    inst.open();
+                }
+            } catch (e) { /* sessionStorage may be unavailable */ }
+        });
+    }
+
+    // Outside-click closes all open popovers.
+    document.addEventListener('click', function(e) {
+        _chipInstances.forEach(function(inst) {
+            if (!inst.trigger.contains(e.target)) inst.close();
+        });
+    });
+
+    // Esc closes whichever instance is open and returns focus to its trigger.
+    document.addEventListener('keydown', function(e) {
+        if (e.key !== 'Escape') return;
+        _chipInstances.forEach(function(inst) {
+            if (inst.isOpen()) {
+                inst.close();
+                inst.trigger.focus();
+            }
+        });
+    });
+
+    // Opening one popover closes all others.
+    // Implemented by attaching a listener after _initAllChips so we have all instances.
+    function _wireExclusiveOpen() {
+        _chipInstances.forEach(function(inst, i) {
+            inst.trigger.addEventListener('click', function() {
+                _chipInstances.forEach(function(other, j) {
+                    if (j !== i) other.close();
+                });
+            });
+        });
+    }
+
+    // ── Intercept clicks on SVG <a href="?..."> links ────────────────────────
+    // Blob URL iframes can't navigate to query-string URLs, so we parse the
+    // params ourselves and send a single postMessage with the merged variable
+    // snapshot instead of navigating.
+    document.addEventListener('click', function(event) {
+        var link = event.target.closest('a[href]');
+        if (!link) return;
+        if (!link.ownerSVGElement && link.namespaceURI !== 'http://www.w3.org/2000/svg') return;
+        var href = link.getAttribute('href');
+        if (!href || href.charAt(0) !== '?') return;
+        var inIframe = window.parent !== window;
+        var hasHook = typeof window.__dfHandleVariableUpdate === 'function';
+        var params = new URLSearchParams(href.slice(1));
+        if (!params.toString()) {
+            if (inIframe || hasHook) event.preventDefault();
+            return;
+        }
+
+        if (!inIframe && !hasHook) {
+            // Standalone dft serve: let the browser navigate, but save scroll
+            // first so restoreScrollIfSaved() can recover position after reload.
+            try {
+                sessionStorage.setItem('__dfScrollY_' + window.location.pathname, String(window.scrollY));
+            } catch (e) { /* sessionStorage may be unavailable */ }
+            return; // browser follows the link naturally
+        }
+
+        event.preventDefault();
+        var vars = getAllVariableValues();
+        var tabUrl = inIframe ? null : new URL(window.location);
+        var chartsToCleanup = [];
+        params.forEach(function(value, name) {
+            var charts = markDependentChartsLoading(name);
+            for (var i = 0; i < charts.length; i++) {
+                chartsToCleanup.push(charts[i]);
+            }
+            vars[name] = value;
+            if (tabUrl) { tabUrl.searchParams.set(name, value); }
+        });
+        scheduleLoadingCleanup(chartsToCleanup);
+        if (inIframe) {
+            window.parent.postMessage({
+                type: 'dft-variable-change',
+                variables: vars
+            }, '*');
+        } else {
+            window.__dfHandleVariableUpdate(tabUrl);
+        }
+    });
+
+    // Collect all variable values from form controls
+    function getAllVariableValues() {
+        var allVars = {};
+        var controls = document.querySelectorAll('[data-variable]');
+        for (var i = 0; i < controls.length; i++) {
+            var control = controls[i];
+            var name = control.getAttribute('data-variable');
+
+            // Date range chip — read committed ISO values from data-start/end attrs.
+            if (control.classList.contains('dft-calendar-area')) {
+                if (!Object.prototype.hasOwnProperty.call(allVars, name)) {
+                    var s = control.dataset.start || '';
+                    var en = control.dataset.end   || '';
+                    allVars[name] = [s, en];
+                }
+                continue;
+            }
+
+            // Skip chip trigger button — value is read via dft-calendar-area above.
+            if (control.classList.contains('dft-chip')) continue;
+
+            // Regular controls
+            if (control.type === 'checkbox') {
+                allVars[name] = control.checked;
+            } else if (control.type === 'range') {
+                allVars[name] = parseFloat(control.value);
+            } else if (control.type === 'number') {
+                allVars[name] = control.value ? parseFloat(control.value) : null;
+            } else {
+                allVars[name] = control.value;
+            }
+        }
+        return allVars;
+    }
+
+    // Restore scroll position saved before a standalone page reload (dft serve).
+    function restoreScrollIfSaved() {
+        try {
+            var key = '__dfScrollY_' + window.location.pathname;
+            var saved = sessionStorage.getItem(key);
+            if (saved !== null) {
+                sessionStorage.removeItem(key);
+                window.scrollTo(0, parseInt(saved, 10));
+            }
+        } catch (e) { /* sessionStorage may be unavailable */ }
+    }
+
+    // Initialize controls from URL params on load
+    // Wrapped in DOMContentLoaded check for dynamic SVG insertion scenarios
+    function initializeFromURL() {
+        var params = new URLSearchParams(window.location.search);
+        var entries = params.entries();
+        var entry = entries.next();
+        while (!entry.done) {
+            var name  = entry.value[0];
+            var value = entry.value[1];
+
+            // Find chip instance for this variable name (daterange).
+            var chipInst = null;
+            for (var ci = 0; ci < _chipInstances.length; ci++) {
+                if (_chipInstances[ci].varName === name) {
+                    chipInst = _chipInstances[ci];
+                    break;
+                }
+            }
+
+            if (chipInst) {
+                try {
+                    var rangeValue = JSON.parse(value);
+                    if (Array.isArray(rangeValue) && rangeValue.length >= 2) {
+                        chipInst.restoreRange(rangeValue[0], rangeValue[1]);
+                    }
+                } catch (e) {
+                    // Malformed URL param — ignore; leave chip in placeholder state.
+                }
+            } else {
+                // Regular control
+                var control = document.querySelector('[data-variable="' + name + '"]:not(.dft-chip):not(.dft-calendar-area)');
+                if (control) {
+                    if (control.type === 'checkbox') {
+                        control.checked = value === 'true' || value === '1';
+                    } else if (control.type === 'range') {
+                        control.value = value;
+                        var valueSpan = control.nextElementSibling;
+                        if (valueSpan && valueSpan.classList.contains('dft-variable-slider-value')) {
+                            valueSpan.textContent = value;
+                        }
+                    } else {
+                        control.value = value;
+                    }
+                }
+            }
+            entry = entries.next();
+        }
+    }
+
+    // Run initialization when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            _initAllChips();
+            _wireExclusiveOpen();
+            initializeFromURL();
+            restoreScrollIfSaved();
+        });
+    } else {
+        _initAllChips();
+        _wireExclusiveOpen();
+        initializeFromURL();
+        restoreScrollIfSaved();
+    }
+
+    // Setup variable hover highlighting
+    function setupVariableHoverHighlighting() {
+        var controls = document.querySelectorAll('.variable-control');
+        for (var i = 0; i < controls.length; i++) {
+            var control = controls[i];
+            var input = control.querySelector('[data-variable]');
+            if (!input) continue;
+
+            var varName = input.getAttribute('data-variable');
+            if (!varName) continue;
+
+            control.addEventListener('mouseenter', function(vName) {
+                return function() {
+                    var charts = document.querySelectorAll('[data-var-' + vName + ']');
+                    for (var j = 0; j < charts.length; j++) {
+                        var chart = charts[j];
+
+                        // Use transparent overlay for highlighting (cleaner than offset rects)
+                        var existingOverlay = chart.querySelector('.dft-chart-highlight-overlay');
+                        if (!existingOverlay) {
+                            try {
+                                // Use allocated dimensions from data attributes (set by renderer)
+                                var chartWidth = parseFloat(chart.getAttribute('data-chart-width')) || 0;
+                                var chartHeight = parseFloat(chart.getAttribute('data-chart-height')) || 0;
+
+                                // Fallback to getBBox if data attributes not available
+                                if (chartWidth === 0 || chartHeight === 0) {
+                                    var bbox = chart.getBBox ? chart.getBBox() : null;
+                                    if (bbox) {
+                                        chartWidth = bbox.width;
+                                        chartHeight = bbox.height;
+                                    }
+                                }
+
+                                if (chartWidth > 0 && chartHeight > 0) {
+                                    // Create overlay rect that covers entire chart area
+                                    var overlay = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                                    overlay.setAttribute('class', 'dft-chart-highlight-overlay');
+                                    overlay.setAttribute('x', '0');
+                                    overlay.setAttribute('y', '0');
+                                    overlay.setAttribute('width', chartWidth);
+                                    overlay.setAttribute('height', chartHeight);
+                                    overlay.setAttribute('rx', '4'); // Slight rounding
+                                    // Insert at end so it's on top (but pointer-events: none allows interaction)
+                                    chart.appendChild(overlay);
+                                }
+                            } catch (e) {
+                                // Dimension calculation may fail, ignore silently
+                            }
+                        }
+                    }
+                };
+            }(varName));
+
+            control.addEventListener('mouseleave', function(vName) {
+                return function() {
+                    var charts = document.querySelectorAll('[data-var-' + vName + ']');
+                    for (var j = 0; j < charts.length; j++) {
+                        var chart = charts[j];
+
+                        // Remove highlight overlay
+                        var highlightOverlay = chart.querySelector('.dft-chart-highlight-overlay');
+                        if (highlightOverlay) {
+                            highlightOverlay.remove();
+                        }
+                    }
+                };
+            }(varName));
+        }
+    }
+
+    // Initialize interactions when DOM is ready
+    // Note: Chart menus are handled by Suite's JavaScript (init.js)
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            setupVariableHoverHighlighting();
+        });
+    } else {
+        setupVariableHoverHighlighting();
+    }
+})();