@ytspar/devbar 1.3.1 → 1.4.1

package/dist/modules/rendering/compact.js

@@ -0,0 +1,107 @@
+/**
+ * Compact state rendering for the DevBar.
+ */
+import { BUTTON_COLORS, FONT_MONO, withAlpha } from '../../constants.js';
+import { attachTextTooltip } from '../tooltips.js';
+import { createConsoleBadge, createScreenshotButton, createSettingsButton } from './buttons.js';
+import { captureDotPosition, createConnectionIndicator } from './common.js';
+export function renderCompact(state) {
+    if (!state.container)
+        return;
+    const { position, accentColor } = state.options;
+    const { errorCount, warningCount, infoCount } = state.getLogCounts();
+    // Simple position styles - same anchor points as expanded mode
+    const positionStyles = {
+        'bottom-left': { bottom: '20px', left: '80px' },
+        'bottom-right': { bottom: '20px', right: '16px' },
+        'top-left': { top: '20px', left: '80px' },
+        'top-right': { top: '20px', right: '16px' },
+        'bottom-center': { bottom: '12px', left: '50%', transform: 'translateX(-50%)' },
+    };
+    const posStyle = positionStyles[position] ?? positionStyles['bottom-left'];
+    const wrapper = state.container;
+    state.resetPositionStyles(wrapper);
+    Object.assign(wrapper.style, {
+        position: 'fixed',
+        ...posStyle,
+        zIndex: '9999',
+        backgroundColor: 'var(--devbar-color-bg-card)',
+        border: `1px solid ${accentColor}`,
+        borderRadius: '20px',
+        color: accentColor,
+        boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${withAlpha(accentColor, 10)}`,
+        backdropFilter: 'blur(8px)',
+        WebkitBackdropFilter: 'blur(8px)',
+        padding: '6px 10px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontFamily: FONT_MONO,
+        fontSize: '0.6875rem',
+    });
+    // Connection indicator
+    const connIndicator = createConnectionIndicator(state);
+    const connDot = connIndicator.querySelector('.devbar-conn-dot');
+    attachTextTooltip(state, connIndicator, () => state.sweetlinkConnected ? 'Sweetlink connected' : 'Sweetlink disconnected');
+    connIndicator.onclick = (e) => {
+        e.stopPropagation();
+        captureDotPosition(state, connDot);
+        state.collapsed = true;
+        state.debug.state('Collapsed DevBar from compact mode');
+        state.render();
+    };
+    wrapper.appendChild(connIndicator);
+    // Error badge
+    if (errorCount > 0) {
+        wrapper.appendChild(createConsoleBadge(state, 'error', errorCount, BUTTON_COLORS.error));
+    }
+    // Warning badge
+    if (warningCount > 0) {
+        wrapper.appendChild(createConsoleBadge(state, 'warn', warningCount, BUTTON_COLORS.warning));
+    }
+    // Info badge
+    if (infoCount > 0) {
+        wrapper.appendChild(createConsoleBadge(state, 'info', infoCount, BUTTON_COLORS.info));
+    }
+    // Screenshot button (if enabled)
+    if (state.options.showScreenshot) {
+        wrapper.appendChild(createScreenshotButton(state, accentColor));
+    }
+    // Settings gear button
+    wrapper.appendChild(createSettingsButton(state));
+    // Expand button (double-arrow)
+    const expandBtn = document.createElement('button');
+    expandBtn.type = 'button';
+    Object.assign(expandBtn.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        border: `1px solid ${withAlpha(accentColor, 38)}`,
+        backgroundColor: 'transparent',
+        color: withAlpha(accentColor, 60),
+        cursor: 'pointer',
+        fontSize: '0.5rem',
+        transition: 'all 150ms',
+    });
+    expandBtn.textContent = '\u27EB';
+    attachTextTooltip(state, expandBtn, () => 'Expand DevBar', {
+        onEnter: () => {
+            expandBtn.style.backgroundColor = withAlpha(accentColor, 13);
+            expandBtn.style.borderColor = accentColor;
+            expandBtn.style.color = accentColor;
+        },
+        onLeave: () => {
+            expandBtn.style.backgroundColor = 'transparent';
+            expandBtn.style.borderColor = withAlpha(accentColor, 38);
+            expandBtn.style.color = withAlpha(accentColor, 60);
+        },
+    });
+    expandBtn.onclick = () => {
+        state.toggleCompactMode();
+    };
+    wrapper.appendChild(expandBtn);
+}
+//# sourceMappingURL=compact.js.map

package/dist/modules/rendering/compact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compact.js","sourceRoot":"","sources":["../../../src/modules/rendering/compact.ts"],"names":[],"mappings":"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"}

package/dist/modules/rendering/console.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Console popup rendering for the DevBar.
+ */
+import type { ConsoleCapture } from '@ytspar/sweetlink/browser/consoleCapture';
+import type { DevBarState } from '../types.js';
+export declare function renderConsolePopup(state: DevBarState, consoleCaptureSingleton: ConsoleCapture): void;
+//# sourceMappingURL=console.d.ts.map

package/dist/modules/rendering/console.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"console.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/console.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,uBAAuB,EAAE,cAAc,GAAG,IAAI,CAiDpG"}

package/dist/modules/rendering/console.js

@@ -0,0 +1,78 @@
+/**
+ * Console popup rendering for the DevBar.
+ */
+import { BUTTON_COLORS, CSS_COLORS } from '../../constants.js';
+import { createEmptyMessage, createModalBox, createModalContent, createModalHeader, createModalOverlay, } from '../../ui/index.js';
+import { consoleLogsToMarkdown, handleSaveConsoleLogs } from '../screenshot.js';
+export function renderConsolePopup(state, consoleCaptureSingleton) {
+    const filterType = state.consoleFilter;
+    if (!filterType)
+        return;
+    const logs = consoleCaptureSingleton
+        .getLogs()
+        .filter((log) => log.level === filterType);
+    const colorMap = { error: BUTTON_COLORS.error, warn: BUTTON_COLORS.warning, info: BUTTON_COLORS.info };
+    const color = colorMap[filterType];
+    const labelMap = { error: 'Errors', warn: 'Warnings', info: 'Info' };
+    const label = labelMap[filterType];
+    const closeModal = () => {
+        state.consoleFilter = null;
+        state.render();
+    };
+    const overlay = createModalOverlay(closeModal);
+    const modal = createModalBox(color);
+    const header = createModalHeader({
+        color,
+        title: `Console ${label} (${logs.length})`,
+        onClose: closeModal,
+        onCopyMd: async () => {
+            await navigator.clipboard.writeText(consoleLogsToMarkdown(logs));
+        },
+        onSave: () => handleSaveConsoleLogs(state, logs),
+        onClear: () => state.clearConsoleLogs(),
+        sweetlinkConnected: state.sweetlinkConnected,
+        saveLocation: state.options.saveLocation,
+        isSaving: state.savingConsoleLogs,
+        savedPath: state.lastConsoleLogs,
+    });
+    modal.appendChild(header);
+    const content = createModalContent();
+    if (logs.length === 0) {
+        content.appendChild(createEmptyMessage(`No ${filterType}s recorded`));
+    }
+    else {
+        renderConsoleLogs(content, logs, color);
+    }
+    modal.appendChild(content);
+    overlay.appendChild(modal);
+    state.overlayElement = overlay;
+    document.body.appendChild(overlay);
+}
+function renderConsoleLogs(container, logs, color) {
+    logs.forEach((log, index) => {
+        const logItem = document.createElement('div');
+        Object.assign(logItem.style, {
+            padding: '8px 14px',
+            borderBottom: index < logs.length - 1 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none',
+        });
+        const timestamp = document.createElement('span');
+        Object.assign(timestamp.style, {
+            color: CSS_COLORS.textMuted,
+            fontSize: '0.625rem',
+            marginRight: '8px',
+        });
+        timestamp.textContent = new Date(log.timestamp).toLocaleTimeString();
+        logItem.appendChild(timestamp);
+        const message = document.createElement('span');
+        Object.assign(message.style, {
+            color,
+            fontSize: '0.6875rem',
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+        });
+        message.textContent = log.message;
+        logItem.appendChild(message);
+        container.appendChild(logItem);
+    });
+}
+//# sourceMappingURL=console.js.map

package/dist/modules/rendering/console.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"console.js","sourceRoot":"","sources":["../../../src/modules/rendering/console.ts"],"names":[],"mappings":"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"}

package/dist/modules/rendering/expanded.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Expanded state rendering for the DevBar — helper functions and orchestrator.
+ */
+import type { DevBarState } from '../types.js';
+export declare function renderExpanded(state: DevBarState, customControls: {
+    id: string;
+    label: string;
+    onClick: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'warning';
+}[]): void;
+//# sourceMappingURL=expanded.d.ts.map

package/dist/modules/rendering/expanded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/expanded.ts"],"names":[],"mappings":"AAAA;;GAEG;AAkBH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAghB9D,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAClB,cAAc,EAAE;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,EAAE,GACF,IAAI,CAiCN"}

package/dist/modules/rendering/expanded.js

@@ -0,0 +1,439 @@
+/**
+ * Expanded state rendering for the DevBar — helper functions and orchestrator.
+ */
+import { BUTTON_COLORS, CSS_COLORS, FONT_MONO, TAILWIND_BREAKPOINTS, withAlpha, } from '../../constants.js';
+import { getResponsiveMetricVisibility } from '../performance.js';
+import { addTooltipTitle, attachBreakpointTooltip, attachClickToggleTooltip, attachInfoTooltip, attachMetricTooltip, attachTextTooltip, } from '../tooltips.js';
+import { createA11yButton, createAIReviewButton, createCompactToggleButton, createConsoleBadge, createOutlineButton, createSchemaButton, createScreenshotButton, createSettingsButton, } from './buttons.js';
+import { captureDotPosition, createConnectionIndicator } from './common.js';
+/**
+ * Compute the CSS position for the expanded devbar wrapper.
+ * Uses the captured dot position when available for smooth collapse/expand transitions.
+ */
+function computeExpandedPosition(state, position, isCentered) {
+    // Dot offset from container edge in expanded mode:
+    // border (1px) + padding (12px) + half indicator (6px) = 19px from left
+    // border (1px) + padding (8px) + half indicator (6px) = 15px from top
+    const DOT_OFFSET_LEFT = 19;
+    const DOT_OFFSET_TOP = 15;
+    // Use captured dot position to align the expanded bar's dot with where it was
+    // Always use top/left positioning for precise alignment
+    if (state.lastDotPosition && !isCentered) {
+        const isRight = position.endsWith('right');
+        let posStyle;
+        if (isRight) {
+            // For right-aligned, fall back to default
+            const isTop = position.startsWith('top');
+            posStyle = isTop ? { top: '20px', right: '16px' } : { bottom: '20px', right: '16px' };
+        }
+        else {
+            // Use top positioning for precise dot alignment
+            posStyle = {
+                top: `${state.lastDotPosition.top - DOT_OFFSET_TOP}px`,
+                left: `${state.lastDotPosition.left - DOT_OFFSET_LEFT}px`,
+            };
+        }
+        // Clear the position after using it
+        state.lastDotPosition = null;
+        return posStyle;
+    }
+    const positionStyles = {
+        'bottom-left': { bottom: '20px', left: '80px' },
+        'bottom-right': { bottom: '20px', right: '16px' },
+        'top-left': { top: '20px', left: '80px' },
+        'top-right': { top: '20px', right: '16px' },
+        'bottom-center': { bottom: '12px', left: '50%', transform: 'translateX(-50%)' },
+    };
+    return positionStyles[position] ?? positionStyles['bottom-left'];
+}
+/**
+ * Style the expanded wrapper container and attach the double-click-to-collapse handler.
+ */
+function styleExpandedWrapper(state, wrapper, posStyle, accentColor, isCentered) {
+    state.resetPositionStyles(wrapper);
+    const sizeOverrides = state.options.sizeOverrides;
+    // Calculate size values with overrides or defaults
+    // Use fit-content so DevBar only takes space it needs, but allow expansion up to max
+    // Centered: 16px margin each side. Left/right: 80px for Next.js bar + 16px margin
+    const defaultWidth = 'fit-content';
+    const defaultMinWidth = 'auto';
+    const defaultMaxWidth = isCentered ? 'calc(100vw - 32px)' : 'calc(100vw - 96px)';
+    Object.assign(wrapper.style, {
+        position: 'fixed',
+        ...posStyle,
+        zIndex: '9999',
+        backgroundColor: 'var(--devbar-color-bg-card)',
+        border: `1px solid ${accentColor}`,
+        borderRadius: '12px',
+        color: accentColor,
+        boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${withAlpha(accentColor, 10)}`,
+        backdropFilter: 'blur(8px)',
+        WebkitBackdropFilter: 'blur(8px)',
+        boxSizing: 'border-box',
+        width: sizeOverrides?.width ?? defaultWidth,
+        maxWidth: sizeOverrides?.maxWidth ?? defaultMaxWidth,
+        minWidth: sizeOverrides?.minWidth ?? defaultMinWidth,
+        cursor: 'default',
+    });
+    wrapper.ondblclick = (e) => {
+        // Ignore double-clicks on interactive elements (buttons, inputs, selects)
+        // to prevent rapid settings-button clicks from collapsing the devbar
+        const target = e.target;
+        if (target?.closest('button, input, select, a'))
+            return;
+        const dotEl = wrapper.querySelector('.devbar-status span span');
+        if (dotEl) {
+            captureDotPosition(state, dotEl);
+        }
+        state.collapsed = true;
+        state.debug.state('Collapsed DevBar (double-click)');
+        state.render();
+    };
+}
+/**
+ * Create the main row flex container used in expanded mode.
+ */
+function createExpandedMainRow() {
+    const mainRow = document.createElement('div');
+    mainRow.className = 'devbar-main';
+    Object.assign(mainRow.style, {
+        display: 'flex',
+        alignItems: 'center',
+        alignContent: 'flex-start',
+        justifyContent: 'flex-start',
+        gap: '0.5rem',
+        padding: '0.5rem 0.75rem',
+        minWidth: '0',
+        boxSizing: 'border-box',
+        fontFamily: FONT_MONO,
+        fontSize: '0.6875rem',
+        lineHeight: '1rem',
+    });
+    return mainRow;
+}
+/**
+ * Create the connection indicator configured to collapse the devbar on click.
+ */
+function createExpandedConnectionIndicator(state) {
+    const connIndicator = createConnectionIndicator(state);
+    attachTextTooltip(state, connIndicator, () => state.sweetlinkConnected
+        ? 'Sweetlink connected (click to minimize)'
+        : 'Sweetlink disconnected (click to minimize)');
+    connIndicator.onclick = (e) => {
+        e.stopPropagation();
+        captureDotPosition(state, connIndicator);
+        state.collapsed = true;
+        state.debug.state('Collapsed DevBar (connection dot click)');
+        state.render();
+    };
+    return connIndicator;
+}
+/**
+ * Create the info section containing breakpoint display and performance metrics.
+ */
+function createInfoSection(state, showMetrics) {
+    const infoSection = document.createElement('div');
+    infoSection.className = 'devbar-info';
+    Object.assign(infoSection.style, {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        flexShrink: '1',
+        minWidth: '0',
+        overflow: 'visible',
+    });
+    // Breakpoint info
+    if (showMetrics.breakpoint && state.breakpointInfo) {
+        appendBreakpointInfo(state, infoSection);
+    }
+    // Performance stats with responsive visibility
+    if (state.perfStats) {
+        appendPerformanceMetrics(state, infoSection, showMetrics);
+    }
+    return infoSection;
+}
+/**
+ * Append the Tailwind breakpoint indicator to the info section.
+ */
+function appendBreakpointInfo(state, infoSection) {
+    if (!state.breakpointInfo)
+        return;
+    const bp = state.breakpointInfo.tailwindBreakpoint;
+    const breakpointData = TAILWIND_BREAKPOINTS[bp];
+    const bpSpan = document.createElement('span');
+    bpSpan.className = 'devbar-item';
+    Object.assign(bpSpan.style, { opacity: '0.9', cursor: 'default' });
+    // Use HTML tooltip for breakpoint info
+    attachBreakpointTooltip(state, bpSpan, bp, state.breakpointInfo.dimensions, breakpointData?.label || '');
+    let bpText = bp;
+    if (bp !== 'base') {
+        bpText =
+            bp === 'sm'
+                ? `${bp} - ${state.breakpointInfo.dimensions.split('x')[0]}`
+                : `${bp} - ${state.breakpointInfo.dimensions}`;
+    }
+    bpSpan.textContent = bpText;
+    infoSection.appendChild(bpSpan);
+}
+/**
+ * Build the metric configuration map from current perf stats.
+ */
+function buildMetricConfigs(perfStats) {
+    return {
+        fcp: {
+            label: 'FCP',
+            value: perfStats.fcp,
+            title: 'First Contentful Paint (FCP)',
+            description: 'Time until the first text or image renders on screen.',
+            thresholds: { good: '<1.8s', needsWork: '1.8-3s', poor: '>3s' },
+        },
+        lcp: {
+            label: 'LCP',
+            value: perfStats.lcp,
+            title: 'Largest Contentful Paint (LCP)',
+            description: 'Time until the largest visible element renders on screen.',
+            thresholds: { good: '<2.5s', needsWork: '2.5-4s', poor: '>4s' },
+        },
+        cls: {
+            label: 'CLS',
+            value: perfStats.cls,
+            title: 'Cumulative Layout Shift (CLS)',
+            description: 'Visual stability score. Higher values mean more unexpected layout shifts.',
+            thresholds: { good: '<0.1', needsWork: '0.1-0.25', poor: '>0.25' },
+        },
+        inp: {
+            label: 'INP',
+            value: perfStats.inp,
+            title: 'Interaction to Next Paint (INP)',
+            description: 'Responsiveness to user input. Measures the longest interaction delay.',
+            thresholds: { good: '<200ms', needsWork: '200-500ms', poor: '>500ms' },
+        },
+        pageSize: {
+            label: '',
+            value: perfStats.totalSize,
+            title: 'Total Page Size',
+            description: 'Compressed/transferred size including HTML, CSS, JS, images, and other resources.',
+        },
+    };
+}
+/**
+ * Append performance metric spans (visible metrics + hidden-metrics ellipsis) to the info section.
+ */
+function appendPerformanceMetrics(state, infoSection, showMetrics) {
+    if (!state.perfStats)
+        return;
+    const { visible, hidden } = getResponsiveMetricVisibility(state);
+    const metricConfigs = buildMetricConfigs(state.perfStats);
+    const addSeparator = () => {
+        const sep = document.createElement('span');
+        sep.style.opacity = '0.4';
+        sep.textContent = '|';
+        infoSection.appendChild(sep);
+    };
+    // Render visible metrics
+    for (const metric of visible) {
+        if (!showMetrics[metric])
+            continue;
+        const config = metricConfigs[metric];
+        addSeparator();
+        const span = document.createElement('span');
+        span.className = 'devbar-item';
+        Object.assign(span.style, {
+            opacity: metric === 'pageSize' ? '0.7' : '0.85',
+            cursor: 'default',
+        });
+        span.textContent = config.label ? `${config.label} ${config.value}` : config.value;
+        if (config.thresholds) {
+            attachMetricTooltip(state, span, config.title, config.description, config.thresholds);
+        }
+        else {
+            attachInfoTooltip(state, span, config.title, config.description);
+        }
+        infoSection.appendChild(span);
+    }
+    // Render ellipsis button for hidden metrics
+    const hiddenMetricsEnabled = hidden.filter((m) => showMetrics[m]);
+    if (hiddenMetricsEnabled.length > 0) {
+        addSeparator();
+        appendHiddenMetricsEllipsis(state, infoSection, hiddenMetricsEnabled, metricConfigs);
+    }
+}
+/**
+ * Append the ellipsis button that reveals hidden metrics in a click-toggle tooltip.
+ */
+function appendHiddenMetricsEllipsis(state, infoSection, hiddenMetricsEnabled, metricConfigs) {
+    const ellipsisBtn = document.createElement('span');
+    ellipsisBtn.className = 'devbar-item devbar-clickable';
+    Object.assign(ellipsisBtn.style, {
+        opacity: '0.7',
+        cursor: 'pointer',
+        padding: '0 2px',
+    });
+    ellipsisBtn.textContent = '\u00B7\u00B7\u00B7';
+    // Attach click-toggle tooltip showing hidden metrics (for mobile support)
+    attachClickToggleTooltip(state, ellipsisBtn, (tooltip) => {
+        addTooltipTitle(state, tooltip, 'More Metrics');
+        const metricsContainer = document.createElement('div');
+        Object.assign(metricsContainer.style, {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '6px',
+            marginTop: '8px',
+        });
+        for (const metric of hiddenMetricsEnabled) {
+            const config = metricConfigs[metric];
+            const row = document.createElement('div');
+            Object.assign(row.style, {
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: '12px',
+            });
+            const labelSpan = document.createElement('span');
+            Object.assign(labelSpan.style, { color: CSS_COLORS.textMuted });
+            labelSpan.textContent = config.title.split('(')[0].trim();
+            const valueSpan = document.createElement('span');
+            Object.assign(valueSpan.style, { color: CSS_COLORS.text, fontWeight: '500' });
+            valueSpan.textContent = config.value;
+            row.appendChild(labelSpan);
+            row.appendChild(valueSpan);
+            metricsContainer.appendChild(row);
+        }
+        tooltip.appendChild(metricsContainer);
+    });
+    infoSection.appendChild(ellipsisBtn);
+}
+/**
+ * Create the status row containing the connection indicator, info section, and console badges.
+ */
+function createStatusRow(state, showMetrics, showConsoleBadges, errorCount, warningCount, infoCount) {
+    const connIndicator = createExpandedConnectionIndicator(state);
+    const statusRow = document.createElement('div');
+    statusRow.className = 'devbar-status';
+    Object.assign(statusRow.style, {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        flexWrap: 'nowrap',
+        flexShrink: '0',
+    });
+    statusRow.appendChild(connIndicator);
+    const infoSection = createInfoSection(state, showMetrics);
+    statusRow.appendChild(infoSection);
+    // Console badges - add to status row so they stay with info
+    if (showConsoleBadges) {
+        if (errorCount > 0) {
+            statusRow.appendChild(createConsoleBadge(state, 'error', errorCount, BUTTON_COLORS.error));
+        }
+        if (warningCount > 0) {
+            statusRow.appendChild(createConsoleBadge(state, 'warn', warningCount, BUTTON_COLORS.warning));
+        }
+        if (infoCount > 0) {
+            statusRow.appendChild(createConsoleBadge(state, 'info', infoCount, BUTTON_COLORS.info));
+        }
+    }
+    return statusRow;
+}
+/**
+ * Create the action buttons container (screenshot, AI review, outline, schema, a11y, settings, compact).
+ */
+function createActionButtonsContainer(state, showScreenshot, accentColor) {
+    const actionsContainer = document.createElement('div');
+    actionsContainer.className = 'devbar-actions';
+    if (showScreenshot) {
+        actionsContainer.appendChild(createScreenshotButton(state, accentColor));
+    }
+    actionsContainer.appendChild(createAIReviewButton(state));
+    actionsContainer.appendChild(createOutlineButton(state));
+    actionsContainer.appendChild(createSchemaButton(state));
+    actionsContainer.appendChild(createA11yButton(state));
+    actionsContainer.appendChild(createSettingsButton(state));
+    actionsContainer.appendChild(createCompactToggleButton(state));
+    return actionsContainer;
+}
+/**
+ * Create the custom controls row for user-defined buttons.
+ * Returns null if there are no custom controls.
+ */
+function createCustomControlsRow(customControls, accentColor) {
+    if (customControls.length === 0)
+        return null;
+    const customRow = document.createElement('div');
+    Object.assign(customRow.style, {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '0 0.75rem 0.5rem 0.75rem',
+        borderTop: `1px solid ${withAlpha(accentColor, 19)}`,
+        marginTop: '0',
+        paddingTop: '0.5rem',
+        fontFamily: FONT_MONO,
+        fontSize: '0.6875rem',
+    });
+    customControls.forEach((control) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        const color = control.variant === 'warning' ? BUTTON_COLORS.warning : accentColor;
+        const isActive = control.active ?? false;
+        const isDisabled = control.disabled ?? false;
+        Object.assign(btn.style, {
+            padding: '4px 10px',
+            backgroundColor: isActive ? withAlpha(color, 20) : 'transparent',
+            border: `1px solid ${isActive ? color : withAlpha(color, 38)}`,
+            borderRadius: '6px',
+            color: isActive ? color : withAlpha(color, 60),
+            fontSize: '0.625rem',
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            opacity: isDisabled ? '0.5' : '1',
+            transition: 'all 150ms',
+        });
+        btn.textContent = control.label;
+        btn.disabled = isDisabled;
+        if (!isDisabled) {
+            btn.onmouseenter = () => {
+                btn.style.backgroundColor = withAlpha(color, 13);
+                btn.style.borderColor = color;
+                btn.style.color = color;
+            };
+            btn.onmouseleave = () => {
+                btn.style.backgroundColor = isActive ? withAlpha(color, 20) : 'transparent';
+                btn.style.borderColor = isActive ? color : withAlpha(color, 38);
+                btn.style.color = isActive ? color : withAlpha(color, 60);
+            };
+            btn.onclick = () => control.onClick();
+        }
+        customRow.appendChild(btn);
+    });
+    return customRow;
+}
+// ============================================================================
+// Expanded State -- Orchestrator
+// ============================================================================
+export function renderExpanded(state, customControls) {
+    if (!state.container)
+        return;
+    const { position, accentColor, showMetrics, showScreenshot, showConsoleBadges } = state.options;
+    const { errorCount, warningCount, infoCount } = state.getLogCounts();
+    const isCentered = position === 'bottom-center';
+    const wrapper = state.container;
+    // 1. Position and style the wrapper
+    const posStyle = computeExpandedPosition(state, position, isCentered);
+    styleExpandedWrapper(state, wrapper, posStyle, accentColor, isCentered);
+    // 2. Build the main row
+    const mainRow = createExpandedMainRow();
+    // 3. Status row (connection dot + info metrics + console badges)
+    const statusRow = createStatusRow(state, showMetrics, showConsoleBadges, errorCount, warningCount, infoCount);
+    mainRow.appendChild(statusRow);
+    // 4. Action buttons
+    const actionsContainer = createActionButtonsContainer(state, showScreenshot, accentColor);
+    mainRow.appendChild(actionsContainer);
+    wrapper.appendChild(mainRow);
+    // 5. Custom controls row (if any)
+    const customRow = createCustomControlsRow(customControls, accentColor);
+    if (customRow) {
+        wrapper.appendChild(customRow);
+    }
+}
+//# sourceMappingURL=expanded.js.map