import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
/**
 * The canonical admin chrome. Owns the entire viewport, splits into
 * `sidebar | (header + breadcrumbs + content)`, and handles the mobile
 * overlay transition.
 *
 * Implementation notes:
 *  - Desktop layout is CSS Grid with `gridTemplateColumns: 'auto minmax(0, 1fr)'`.
 *    The `minmax(0, 1fr)` is load-bearing: it lets the content shrink
 *    below its intrinsic width when the sidebar takes its share, which
 *    is the one thing flex-based shells fail at.
 *  - Mobile layout is a single block with the sidebar absolutely
 *    positioned and slid in via `transform: translateX(…)`. We avoid
 *    the brittle `fixed` ↔ `static` toggle that caused recurring sidebar
 *    overlap bugs in the old layout.
 *  - The desktop/mobile decision is made in JS via `matchMedia` so the
 *    layout is independent of Tailwind's `md:` utility compilation. If
 *    the CSS bundle is stale or partially loaded the layout still works.
 */
export function AdminShell({ sidebar, header, breadcrumbs, children, mobileSidebarOpen = false, onMobileSidebarClose, desktopBreakpoint = 768, }) {
    const [isDesktop, setIsDesktop] = useState(false);
    useEffect(() => {
        if (typeof window === 'undefined')
            return;
        const mq = window.matchMedia(`(min-width: ${desktopBreakpoint}px)`);
        const handler = () => setIsDesktop(mq.matches);
        handler();
        mq.addEventListener('change', handler);
        return () => mq.removeEventListener('change', handler);
    }, [desktopBreakpoint]);
    return (_jsxs("div", { className: "bg-background text-foreground h-screen overflow-hidden", style: isDesktop
            ? { display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)' }
            : { display: 'block', position: 'relative' }, children: [!isDesktop && mobileSidebarOpen && (_jsx("div", { "aria-hidden": true, className: "fixed inset-0 z-40 bg-black/30 backdrop-blur-sm", onClick: onMobileSidebarClose })), _jsx("div", { className: "z-50", style: isDesktop
                    ? {
                        gridColumn: '1 / 2',
                        height: '100vh',
                        overflow: 'hidden',
                    }
                    : {
                        position: 'fixed',
                        top: 0,
                        bottom: 0,
                        left: 0,
                        transform: mobileSidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
                        transition: 'transform 300ms ease',
                    }, children: sidebar }), _jsxs("div", { className: "flex flex-col overflow-hidden", style: isDesktop
                    ? { gridColumn: '2 / 3', height: '100vh', minWidth: 0 }
                    : { height: '100vh', minWidth: 0 }, children: [header, breadcrumbs, _jsx("main", { className: "flex-1 overflow-y-auto", children: children })] })] }));
}
//# sourceMappingURL=AdminShell.js.map