@teo-garcia/react-shared 1.2.1 → 1.3.0

package/dist/components/dev-panel/dev-panel.js

@@ -1,21 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-const DEFAULT_BREAKPOINTS = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-};
-function resolveBreakpoint(width, breakpoints) {
-    const sorted = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
-    for (const [name, min] of sorted) {
-        if (width >= min)
-            return name;
-    }
-    return 'xs';
-}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, } from 'react';
+import { DEFAULT_BREAKPOINTS, useBreakpoint, } from '../../hooks/use-breakpoint.js';
+import { ALL_DEV_PANEL_FEATURES, } from './dev-panel-features.js';
+import { devPanelFeaturesKey, useDevPanelDiagnostics, } from './use-dev-panel-diagnostics.js';
+export { ALL_DEV_PANEL_FEATURES, } from './dev-panel-features.js';
+const OUTLINE_STYLE_ID = 'react-shared-dev-panel-outline-style';
+const GRID_STYLE_ID = 'react-shared-dev-panel-grid-style';
 function matchShortcut(e, shortcut) {
     const parts = shortcut.toLowerCase().split('+');
     const key = parts.at(-1) ?? '';
@@ -25,114 +16,643 @@ function matchShortcut(e, shortcut) {
         e.ctrlKey === parts.includes('ctrl') &&
         e.altKey === parts.includes('alt'));
 }
-const PILL_BASE = {
+function formatShortcutLabel(shortcut) {
+    return shortcut
+        .split('+')
+        .map((part) => part.length <= 1
+        ? part.toUpperCase()
+        : part[0].toUpperCase() + part.slice(1))
+        .join(' + ');
+}
+function createThemeStyles(theme) {
+    if (theme === 'dark') {
+        return {
+            accent: '#2563eb',
+            badgeBackground: 'rgba(15, 23, 42, 0.08)',
+            badgeText: '#0f172a',
+            border: 'rgba(15, 23, 42, 0.12)',
+            chipBg: 'rgba(15, 23, 42, 0.06)',
+            collapsedShadow: '0 8px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.75)',
+            mutedText: '#64748b',
+            panelBackground: 'rgba(255, 255, 255, 0.94)',
+            panelShadow: '0 22px 48px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.78)',
+            rowDivider: 'rgba(15, 23, 42, 0.07)',
+            strongText: '#0f172a',
+            subtleText: '#475569',
+            toggleActive: 'rgba(37, 99, 235, 0.2)',
+            toggleIdle: 'rgba(15, 23, 42, 0.06)',
+        };
+    }
+    return {
+        accent: '#7dd3fc',
+        badgeBackground: 'rgba(255, 255, 255, 0.12)',
+        badgeText: '#f8fafc',
+        border: 'rgba(255, 255, 255, 0.16)',
+        chipBg: 'rgba(255, 255, 255, 0.06)',
+        collapsedShadow: '0 10px 40px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.06)',
+        mutedText: '#94a3b8',
+        panelBackground: 'rgba(2, 6, 23, 0.94)',
+        panelShadow: '0 24px 56px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.05)',
+        rowDivider: 'rgba(255, 255, 255, 0.08)',
+        strongText: '#f8fafc',
+        subtleText: '#cbd5e1',
+        toggleActive: 'rgba(125, 211, 252, 0.2)',
+        toggleIdle: 'rgba(255, 255, 255, 0.08)',
+    };
+}
+const PANEL_BASE = {
     position: 'fixed',
     bottom: '1rem',
     left: '50%',
     transform: 'translateX(-50%)',
     zIndex: 9999,
-    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
-    fontSize: '0.7rem',
-    lineHeight: 1,
-    background: 'rgba(9, 9, 11, 0.88)',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
-    borderRadius: '9999px',
-    backdropFilter: 'blur(12px)',
-    WebkitBackdropFilter: 'blur(12px)',
-    boxShadow: '0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)',
+    backdropFilter: 'blur(16px)',
+    WebkitBackdropFilter: 'blur(16px)',
+    boxSizing: 'border-box',
+    lineHeight: 1.35,
+    maxWidth: 'min(100vw - 1.5rem, 36rem)',
     userSelect: 'none',
-    whiteSpace: 'nowrap',
 };
-const DIVIDER = {
-    width: '1px',
-    height: '0.7rem',
-    background: 'rgba(255,255,255,0.1)',
-    flexShrink: 0,
+const MONO = 'ui-monospace, "SFMono-Regular", "Cascadia Code", "Fira Code", monospace';
+const SANS = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+/** Core readout and table sizing (slightly larger for legibility). */
+const FS = {
+    core: '0.9375rem',
+    footer: '0.6875rem',
+    kvLabel: '0.78125rem',
+    kvValue: '0.8125rem',
+    section: '0.6875rem',
+    toolbar: '0.8125rem',
 };
-function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, shortcut = 'shift+d', }) {
+function CollapseChevron({ expanded, themeStyles, }) {
+    return (_jsx("span", { "aria-hidden": true, style: {
+            color: themeStyles.mutedText,
+            display: 'inline-flex',
+            lineHeight: 1,
+            transform: expanded ? 'rotate(0deg)' : 'rotate(-180deg)',
+            transition: 'transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease',
+        }, children: _jsx("span", { style: { fontSize: '0.7rem', position: 'relative', top: '0.06em' }, children: "\u25BC" }) }));
+}
+function DevPanelInner({ breakpoints = DEFAULT_BREAKPOINTS, children, features = [...ALL_DEV_PANEL_FEATURES], items = [], layout = 'inspector', shortcut = 'shift+d', storageKey = 'react-shared-dev-panel', }) {
+    const { breakpoint, height, width } = useBreakpoint(breakpoints);
     const [open, setOpen] = useState(true);
-    const [viewport, setViewport] = useState({ w: 0, h: 0 });
-    const [dark, setDark] = useState(false);
+    const [outlineOn, setOutlineOn] = useState(false);
+    const [gridOn, setGridOn] = useState(false);
+    const diagnostics = useDevPanelDiagnostics(features);
+    const theme = diagnostics.resolvedTheme;
+    const themeStyles = createThemeStyles(theme);
+    const featureKey = devPanelFeaturesKey(features);
+    const featureSet = useMemo(() => new Set(features), [featureKey]);
     useEffect(() => {
-        function update() {
-            setViewport({ w: window.innerWidth, h: window.innerHeight });
-            setDark(document.documentElement.classList.contains('dark') ||
-                window.matchMedia('(prefers-color-scheme: dark)').matches);
-        }
-        update();
-        window.addEventListener('resize', update);
-        const observer = new MutationObserver(update);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['class'],
-        });
+        if (typeof document === 'undefined')
+            return;
+        if (!featureSet.has('outline')) {
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-outline');
+            document.getElementById(OUTLINE_STYLE_ID)?.remove();
+            return;
+        }
+        let styleEl = document.getElementById(OUTLINE_STYLE_ID);
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = OUTLINE_STYLE_ID;
+            styleEl.textContent = `
+html[data-react-shared-dev-panel-outline] * {
+  outline: 1px solid rgba(239, 68, 68, 0.42) !important;
+  outline-offset: -1px !important;
+}
+`;
+            document.head.appendChild(styleEl);
+        }
+        if (outlineOn) {
+            document.documentElement.setAttribute('data-react-shared-dev-panel-outline', '');
+        }
+        else {
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-outline');
+        }
         return () => {
-            window.removeEventListener('resize', update);
-            observer.disconnect();
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-outline');
         };
-    }, []);
+    }, [featureSet, outlineOn]);
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        if (!featureSet.has('grid')) {
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-grid');
+            document.getElementById(GRID_STYLE_ID)?.remove();
+            return;
+        }
+        let styleEl = document.getElementById(GRID_STYLE_ID);
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = GRID_STYLE_ID;
+            styleEl.textContent = `
+html[data-react-shared-dev-panel-grid]::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2147483645;
+  background-size: 8px 8px;
+  background-image:
+    linear-gradient(to right, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
+}
+`;
+            document.head.appendChild(styleEl);
+        }
+        if (gridOn) {
+            document.documentElement.setAttribute('data-react-shared-dev-panel-grid', '');
+        }
+        else {
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-grid');
+        }
+        return () => {
+            document.documentElement.removeAttribute('data-react-shared-dev-panel-grid');
+        };
+    }, [featureSet, gridOn]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const saved = window.localStorage.getItem(storageKey);
+        if (saved === 'open' || saved === 'closed') {
+            setOpen(saved === 'open');
+        }
+    }, [storageKey]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        window.localStorage.setItem(storageKey, open ? 'open' : 'closed');
+    }, [open, storageKey]);
     useEffect(() => {
         function handleKey(e) {
             if (matchShortcut(e, shortcut))
-                setOpen((v) => !v);
+                setOpen((value) => !value);
         }
         window.addEventListener('keydown', handleKey);
         return () => window.removeEventListener('keydown', handleKey);
     }, [shortcut]);
-    const allBreakpoints = [
-        ['xs', 0],
-        ...Object.entries(breakpoints).sort(([, a], [, b]) => a - b),
-    ];
-    const current = resolveBreakpoint(viewport.w, breakpoints);
-    if (!open) {
-        return (_jsxs("button", { onClick: () => setOpen(true), title: `Dev Panel (${shortcut})`, style: {
-                ...PILL_BASE,
+    const coreReadoutStyle = {
+        color: themeStyles.strongText,
+        fontFamily: MONO,
+        fontSize: FS.core,
+        fontVariantNumeric: 'tabular-nums',
+        fontWeight: 600,
+    };
+    const bpPillStyle = {
+        ...coreReadoutStyle,
+        background: themeStyles.badgeBackground,
+        borderRadius: '9999px',
+        color: themeStyles.badgeText,
+        letterSpacing: '0.02em',
+        padding: '0.28rem 0.55rem',
+    };
+    const themeTextStyle = {
+        color: themeStyles.subtleText,
+        fontFamily: SANS,
+        fontSize: FS.core,
+        fontWeight: 600,
+        letterSpacing: '0.04em',
+        textTransform: 'lowercase',
+    };
+    const dot = (_jsx("span", { "aria-hidden": true, style: {
+            color: themeStyles.accent,
+            flexShrink: 0,
+            fontSize: '0.55rem',
+            lineHeight: 1,
+            marginRight: '0.15rem',
+        }, children: "\u25CF" }));
+    const coreStrip = (_jsxs(_Fragment, { children: [dot, _jsx("span", { style: coreReadoutStyle, title: 'innerWidth x innerHeight (CSS px)', children: `${width}\u00d7${height}` }), _jsx("span", { style: bpPillStyle, title: 'Active min-width key from breakpoints prop', children: breakpoint }), _jsx("span", { style: themeTextStyle, title: 'Resolved app / system theme', children: theme })] }));
+    function buildSections(d) {
+        const sections = [];
+        const layoutRows = [];
+        if (featureSet.has('scroll')) {
+            layoutRows.push({
+                key: 'scroll',
+                label: 'scroll',
+                title: 'window.scrollY and documentElement.scrollHeight',
+                value: `${d.scrollY} / ${d.scrollHeight}`,
+            });
+        }
+        if (featureSet.has('safeArea')) {
+            const sum = d.safeTop + d.safeRight + d.safeBottom + d.safeLeft;
+            layoutRows.push({
+                key: 'safe',
+                label: 'safe area',
+                title: 'env(safe-area-inset-*)',
+                value: sum === 0
+                    ? 'none'
+                    : `${d.safeTop} ${d.safeRight} ${d.safeBottom} ${d.safeLeft}`,
+            });
+        }
+        if (featureSet.has('visualViewport')) {
+            layoutRows.push({
+                key: 'vvp',
+                label: 'visual vp',
+                title: 'visualViewport dimensions and scale',
+                value: `${d.vvWidth}\u00d7${d.vvHeight} @${d.vvScale}`,
+            });
+        }
+        if (featureSet.has('scrollbar')) {
+            layoutRows.push({
+                key: 'sb',
+                label: 'scrollbar',
+                title: 'innerWidth minus clientWidth',
+                value: String(d.scrollbarWidth),
+            });
+        }
+        if (featureSet.has('orientation')) {
+            layoutRows.push({
+                key: 'orient',
+                label: 'orient',
+                title: 'screen.orientation or aspect',
+                value: d.orientation,
+            });
+        }
+        if (layoutRows.length)
+            sections.push({ rows: layoutRows, title: 'Layout' });
+        const inputRows = [];
+        if (featureSet.has('media')) {
+            inputRows.push({
+                key: 'motion',
+                label: 'motion',
+                title: 'prefers-reduced-motion',
+                value: d.reducedMotion ? 'reduce' : 'ok',
+            }, {
+                key: 'pointer',
+                label: 'pointer',
+                title: 'pointer: coarse',
+                value: d.pointerCoarse ? 'coarse' : 'fine',
+            }, {
+                key: 'hover',
+                label: 'hover',
+                title: 'hover: hover',
+                value: d.canHover ? 'yes' : 'no',
+            });
+        }
+        if (featureSet.has('dpr')) {
+            inputRows.push({
+                key: 'dpr',
+                label: 'dpr',
+                title: 'devicePixelRatio',
+                value: String(d.dpr),
+            });
+        }
+        if (inputRows.length)
+            sections.push({ rows: inputRows, title: 'Input' });
+        const displayRows = [];
+        if (featureSet.has('colorScheme')) {
+            displayRows.push({
+                key: 'scheme',
+                label: 'scheme',
+                title: 'prefers-color-scheme vs resolved theme',
+                value: `${d.prefersColorScheme} \u2192 ${d.resolvedTheme}`,
+            });
+        }
+        if (featureSet.has('contrast')) {
+            displayRows.push({
+                key: 'contrast',
+                label: 'contrast',
+                title: 'prefers-contrast',
+                value: d.contrast,
+            });
+        }
+        if (featureSet.has('reducedTransparency')) {
+            displayRows.push({
+                key: 'transparency',
+                label: 'transparency',
+                title: 'prefers-reduced-transparency',
+                value: d.reducedTransparency ? 'reduce' : 'ok',
+            });
+        }
+        if (featureSet.has('inverted')) {
+            displayRows.push({
+                key: 'invert',
+                label: 'invert',
+                title: 'inverted-colors',
+                value: d.invertedColors ? 'yes' : 'no',
+            });
+        }
+        if (displayRows.length)
+            sections.push({ rows: displayRows, title: 'Display' });
+        const networkRows = [];
+        if (featureSet.has('connection')) {
+            networkRows.push({
+                key: 'conn',
+                label: 'connection',
+                title: 'Network Information API (effectiveType, downlink, rtt)',
+                value: d.connectionSummary || 'unavailable',
+            });
+        }
+        if (featureSet.has('saveData')) {
+            networkRows.push({
+                key: 'savedata',
+                label: 'save data',
+                title: 'prefers-reduced-data',
+                value: d.saveDataReduced ? 'reduce' : 'no',
+            });
+        }
+        if (networkRows.length)
+            sections.push({ rows: networkRows, title: 'Network' });
+        const runtimeRows = [];
+        if (featureSet.has('online')) {
+            runtimeRows.push({
+                key: 'online',
+                label: 'online',
+                title: 'navigator.onLine',
+                value: d.online ? 'yes' : 'no',
+            });
+        }
+        if (featureSet.has('visibility')) {
+            runtimeRows.push({
+                key: 'visible',
+                label: 'visible',
+                title: 'document.visibilityState',
+                value: d.visibility,
+            });
+        }
+        if (featureSet.has('fullscreen')) {
+            runtimeRows.push({
+                key: 'fullscreen',
+                label: 'fullscreen',
+                title: 'document.fullscreenElement',
+                value: d.fullscreen ? 'yes' : 'no',
+            });
+        }
+        if (featureSet.has('displayMode')) {
+            runtimeRows.push({
+                key: 'standalone',
+                label: 'standalone',
+                title: 'display-mode: standalone or navigator.standalone',
+                value: d.displayStandalone ? 'yes' : 'no',
+            });
+        }
+        if (runtimeRows.length)
+            sections.push({ rows: runtimeRows, title: 'Runtime' });
+        const localeRows = [];
+        if (featureSet.has('locale')) {
+            localeRows.push({
+                key: 'locale',
+                label: 'locale',
+                title: 'navigator.language',
+                value: d.locale || 'unknown',
+            }, {
+                key: 'tz',
+                label: 'timezone',
+                title: 'Intl time zone',
+                value: d.timeZone || 'unknown',
+            });
+        }
+        if (localeRows.length)
+            sections.push({ rows: localeRows, title: 'Locale' });
+        if (featureSet.has('focus')) {
+            sections.push({
+                rows: [
+                    {
+                        key: 'focus',
+                        label: 'focus',
+                        title: 'document.activeElement (tag, id, classes)',
+                        value: d.focusPeek || '—',
+                    },
+                ],
+                title: 'DOM',
+            });
+        }
+        const perfRows = [];
+        if (featureSet.has('perf')) {
+            perfRows.push({
+                key: 'fps',
+                label: 'fps',
+                title: 'Estimated frames per second (rAF)',
+                value: d.fpsSampled ? String(d.fps) : '…',
+            });
+        }
+        if (featureSet.has('memory')) {
+            perfRows.push({
+                key: 'heap',
+                label: 'heap',
+                title: 'Chrome performance.memory used (MB)',
+                value: d.heapUsedMb == null ? 'n/a' : `${d.heapUsedMb} MB`,
+            });
+        }
+        if (perfRows.length)
+            sections.push({ rows: perfRows, title: 'Performance' });
+        const appRows = items.map((item, i) => ({
+            key: `app-${i}`,
+            label: item.label,
+            title: item.title ?? '',
+            value: item.value,
+        }));
+        if (appRows.length)
+            sections.push({ rows: appRows, title: 'App' });
+        return sections;
+    }
+    const sections = buildSections(diagnostics);
+    const hasToolbar = featureSet.has('outline') || featureSet.has('grid');
+    const hasDetails = sections.length > 0 || children != null || hasToolbar;
+    const shortcutHint = formatShortcutLabel(shortcut);
+    function renderKvRow(row) {
+        return (_jsxs("div", { title: row.title, style: {
+                alignItems: 'baseline',
+                borderBottom: `1px solid ${themeStyles.rowDivider}`,
+                columnGap: '1rem',
+                display: 'grid',
+                gridTemplateColumns: 'minmax(6.5rem, 10rem) minmax(0, 1fr)',
+                padding: '0.32rem 0',
+            }, children: [_jsx("span", { style: {
+                        color: themeStyles.mutedText,
+                        fontFamily: SANS,
+                        fontSize: FS.kvLabel,
+                        fontWeight: 600,
+                        lineHeight: 1.35,
+                        textAlign: 'left',
+                        textTransform: 'lowercase',
+                    }, children: row.label }), _jsx("span", { style: {
+                        color: themeStyles.strongText,
+                        fontFamily: MONO,
+                        fontSize: FS.kvValue,
+                        fontVariantNumeric: 'tabular-nums',
+                        fontWeight: 600,
+                        lineHeight: 1.4,
+                        overflowWrap: 'anywhere',
+                        textAlign: 'right',
+                        wordBreak: 'break-word',
+                    }, children: row.value })] }, row.key));
+    }
+    function renderSection(section, index) {
+        return (_jsxs("div", { style: {
+                marginTop: index === 0 ? 0 : '0.55rem',
+                paddingTop: index === 0 ? 0 : '0.45rem',
+                borderTop: index === 0 ? 'none' : `1px solid ${themeStyles.border}`,
+            }, children: [_jsx("div", { style: {
+                        color: themeStyles.mutedText,
+                        fontFamily: SANS,
+                        fontSize: FS.section,
+                        fontWeight: 700,
+                        letterSpacing: '0.1em',
+                        marginBottom: '0.4rem',
+                        textTransform: 'uppercase',
+                    }, children: section.title }), section.rows.map((row) => renderKvRow(row))] }, section.title));
+    }
+    function renderToolbar() {
+        if (!hasToolbar)
+            return null;
+        const btn = {
+            background: themeStyles.toggleIdle,
+            border: `1px solid ${themeStyles.border}`,
+            borderRadius: '10px',
+            color: themeStyles.subtleText,
+            cursor: 'pointer',
+            fontFamily: SANS,
+            fontSize: FS.toolbar,
+            fontWeight: 600,
+            padding: '0.4rem 0.75rem',
+        };
+        return (_jsxs("div", { style: {
+                borderTop: `1px solid ${themeStyles.border}`,
                 display: 'flex',
+                flexWrap: 'wrap',
+                gap: '0.45rem',
+                marginTop: sections.length > 0 ? '0.5rem' : 0,
+                paddingTop: '0.5rem',
+            }, children: [_jsx("span", { style: {
+                        alignSelf: 'center',
+                        color: themeStyles.mutedText,
+                        fontFamily: SANS,
+                        fontSize: FS.section,
+                        fontWeight: 700,
+                        letterSpacing: '0.1em',
+                        marginRight: '0.15rem',
+                        textTransform: 'uppercase',
+                    }, children: "Debug" }), featureSet.has('outline') ? (_jsxs("button", { "aria-pressed": outlineOn, onClick: () => setOutlineOn((v) => !v), style: {
+                        ...btn,
+                        background: outlineOn
+                            ? themeStyles.toggleActive
+                            : themeStyles.toggleIdle,
+                    }, title: 'Outline every element', type: 'button', children: ["Outline ", outlineOn ? 'on' : 'off'] })) : null, featureSet.has('grid') ? (_jsxs("button", { "aria-pressed": gridOn, onClick: () => setGridOn((v) => !v), style: {
+                        ...btn,
+                        background: gridOn
+                            ? themeStyles.toggleActive
+                            : themeStyles.toggleIdle,
+                    }, title: '8px grid overlay', type: 'button', children: ["Grid ", gridOn ? 'on' : 'off'] })) : null] }));
+    }
+    const scrollMaxH = layout === 'hud' ? 'min(28vh, 12rem)' : 'min(42vh, 22rem)';
+    const expandedRadius = layout === 'hud' ? '9999px' : '16px';
+    const detailBlock = open && hasDetails ? (_jsxs("div", { style: {
+            marginTop: '0.35rem',
+            maxHeight: scrollMaxH,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            paddingRight: '0.15rem',
+        }, children: [sections.map((s, i) => renderSection(s, i)), children ? (_jsxs("div", { style: {
+                    borderTop: sections.length > 0
+                        ? `1px solid ${themeStyles.border}`
+                        : 'none',
+                    marginTop: sections.length > 0 ? '0.55rem' : 0,
+                    paddingTop: sections.length > 0 ? '0.45rem' : 0,
+                }, children: [_jsx("div", { style: {
+                            color: themeStyles.mutedText,
+                            fontFamily: SANS,
+                            fontSize: FS.section,
+                            fontWeight: 700,
+                            letterSpacing: '0.1em',
+                            marginBottom: '0.35rem',
+                            textTransform: 'uppercase',
+                        }, children: "Slot" }), _jsx("div", { style: {
+                            color: themeStyles.subtleText,
+                            fontFamily: SANS,
+                            fontSize: FS.kvValue,
+                            fontWeight: 600,
+                        }, children: children })] })) : null, renderToolbar()] })) : null;
+    const headerRow = (_jsx("div", { style: {
+            alignItems: 'center',
+            borderBottom: open && hasDetails ? `1px solid ${themeStyles.border}` : 'none',
+            display: 'flex',
+            flexWrap: layout === 'hud' ? 'nowrap' : 'wrap',
+            gap: '0.5rem',
+            justifyContent: 'space-between',
+            minHeight: '2.35rem',
+            paddingBottom: open && hasDetails ? '0.5rem' : 0,
+        }, children: _jsx("div", { style: {
+                alignItems: 'center',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '0.5rem',
+                minWidth: 0,
+            }, children: coreStrip }) }));
+    if (!open) {
+        return (_jsxs("div", { onClick: () => setOpen(true), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setOpen(true);
+                }
+            }, role: 'button', tabIndex: 0, title: `Dev panel (${shortcut})`, style: {
+                ...PANEL_BASE,
                 alignItems: 'center',
-                gap: '0.3rem',
-                padding: '0.35rem 0.6rem',
+                background: themeStyles.panelBackground,
+                border: `1px solid ${themeStyles.border}`,
+                borderRadius: '9999px',
+                boxShadow: themeStyles.collapsedShadow,
                 cursor: 'pointer',
-                color: 'rgba(255,255,255,0.45)',
-            }, children: [_jsx("span", { "aria-hidden": true, style: { color: '#38bdf8', fontSize: '0.45rem', lineHeight: 1 }, children: "\u25CF" }), _jsx("span", { style: {
-                        color: '#e2e8f0',
-                        fontWeight: 600,
-                        letterSpacing: '0.05em',
-                    }, children: current })] }));
+                display: 'flex',
+                outline: 'none',
+                padding: '0.5rem 0.65rem 0.5rem 0.85rem',
+                transition: 'box-shadow 0.22s ease, transform 0.2s ease',
+            }, children: [_jsx("div", { style: {
+                        alignItems: 'center',
+                        display: 'flex',
+                        flex: 1,
+                        flexWrap: 'nowrap',
+                        gap: '0.55rem',
+                        minWidth: 0,
+                    }, children: coreStrip }), _jsx(CollapseChevron, { expanded: false, themeStyles: themeStyles })] }));
     }
-    return (_jsxs("div", { style: {
-            ...PILL_BASE,
+    return (_jsxs("div", { "aria-label": 'Development panel', role: 'status', style: {
+            ...PANEL_BASE,
+            background: themeStyles.panelBackground,
+            border: `1px solid ${themeStyles.border}`,
+            borderRadius: expandedRadius,
+            boxShadow: themeStyles.panelShadow,
             display: 'flex',
-            alignItems: 'center',
-            gap: '0.55rem',
-            padding: '0.4rem 0.65rem 0.4rem 0.7rem',
-        }, children: [_jsx("span", { "aria-hidden": true, style: { color: '#38bdf8', fontSize: '0.45rem', lineHeight: 1 }, children: "\u25CF" }), _jsx("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.3rem' }, children: allBreakpoints.map(([name]) => (_jsx("span", { style: {
-                        color: name === current ? '#e2e8f0' : 'rgba(255,255,255,0.18)',
-                        fontWeight: name === current ? 600 : 400,
-                        fontSize: name === current ? '0.72rem' : '0.67rem',
-                        letterSpacing: name === current ? '0.05em' : '0.02em',
-                    }, children: name }, name))) }), _jsx("div", { style: DIVIDER }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.3)', letterSpacing: '0.02em' }, children: [viewport.w, _jsx("span", { style: { color: 'rgba(255,255,255,0.12)', margin: '0 0.15rem' }, children: "\u00D7" }), viewport.h] }), _jsx("div", { style: DIVIDER }), _jsx("span", { title: dark ? 'dark mode' : 'light mode', style: { color: 'rgba(255,255,255,0.3)', fontSize: '0.65rem' }, children: dark ? '◑' : '◯' }), children && (_jsxs(_Fragment, { children: [_jsx("div", { style: DIVIDER }), _jsx("div", { style: {
-                            color: 'rgba(255,255,255,0.28)',
-                            fontSize: '0.68rem',
-                        }, children: children })] })), _jsx("div", { style: DIVIDER }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.15)', fontSize: '0.65rem' }, children: [shortcut, " to toggle"] }), _jsx("button", { onClick: () => setOpen(false), title: 'Close', style: {
-                    background: 'none',
-                    border: 'none',
-                    color: 'rgba(255,255,255,0.2)',
-                    cursor: 'pointer',
-                    fontSize: '0.58rem',
-                    lineHeight: 1,
-                    padding: '0 0 0 0.1rem',
-                    marginLeft: '0.05rem',
-                }, children: "\u2715" })] }));
+            flexDirection: 'column',
+            maxWidth: layout === 'inspector'
+                ? 'min(100vw - 1.5rem, 36rem)'
+                : 'min(100vw - 1.5rem, 56rem)',
+            padding: '0.65rem 0.7rem 0.5rem 0.85rem',
+            transition: 'box-shadow 0.22s ease',
+        }, children: [_jsxs("div", { style: {
+                    alignItems: 'flex-start',
+                    display: 'flex',
+                    gap: '0.45rem',
+                    justifyContent: 'space-between',
+                }, children: [_jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [headerRow, detailBlock] }), _jsx("button", { "aria-label": 'Collapse dev panel', onClick: () => setOpen(false), style: {
+                            alignItems: 'center',
+                            background: 'rgba(148, 163, 184, 0.14)',
+                            border: 'none',
+                            borderRadius: '9999px',
+                            color: themeStyles.mutedText,
+                            cursor: 'pointer',
+                            display: 'inline-flex',
+                            flexShrink: 0,
+                            justifyContent: 'center',
+                            lineHeight: 1,
+                            minHeight: '2rem',
+                            minWidth: '2rem',
+                            padding: 0,
+                            transition: 'background 0.15s ease',
+                        }, title: 'Collapse', type: 'button', children: _jsx(CollapseChevron, { expanded: true, themeStyles: themeStyles }) })] }), _jsxs("p", { style: {
+                    color: themeStyles.mutedText,
+                    fontFamily: SANS,
+                    fontSize: FS.footer,
+                    letterSpacing: '0.05em',
+                    margin: 0,
+                    opacity: 0.92,
+                    paddingTop: '0.45rem',
+                    textAlign: 'center',
+                }, children: [shortcutHint, " to toggle"] })] }));
 }
 /**
- * Fixed bottom-center overlay showing the current Tailwind breakpoint, viewport
- * dimensions, and color scheme. Dev-only — renders nothing in production.
- *
- * Positioned at bottom-center to avoid clashing with Next.js (top-left) and
- * TanStack devtools (bottom-right). Collapses to a compact pill on close.
- *
- * Pass `children` to add custom debug rows (route, user ID, feature flags…).
- * Toggle with the keyboard shortcut (default: Shift+D).
+ * Development overlay: viewport px, Tailwind-style breakpoint, resolved theme,
+ * plus optional diagnostics enabled via `features`.
  */
 export function DevPanel(props) {
     if (process.env.NODE_ENV === 'production')