/* ============================================================
   Bizia — App shell: router, theme, toasts, sidebar, topbar,
   command palette, page scaffolding.
   ============================================================ */
(function () {
  const { useState, useEffect, useRef, createContext, useContext } = React;

  /* ---------------- Current user ---------------- */
  const CurrentUserContext = createContext(null);
  function useCurrentUser() { return useContext(CurrentUserContext); }
  window.useCurrentUser = useCurrentUser;

  /* ---------------- Router ---------------- */
  function getPath() {
    const h = window.location.hash.replace(/^#/, '');
    return h || '/';
  }
  function navigate(path) {
    window.location.hash = path;
    const main = document.getElementById('bz-scroll');
    if (main) main.scrollTop = 0;
    window.scrollTo(0, 0);
  }
  function useRoute() {
    const [path, setPath] = useState(getPath());
    useEffect(() => {
      const h = () => setPath(getPath());
      window.addEventListener('hashchange', h);
      return () => window.removeEventListener('hashchange', h);
    }, []);
    return path;
  }
  window.navigate = navigate;
  window.useRoute = useRoute;

  /* ---------------- Auth helpers ---------------- */
  window.BiziaAuth = {
    // Grants a local fake session with no real backend account behind it.
    // Only permitted when window.__BIZIA_DEMO_MODE is explicitly true (see
    // public/config.js) — production must never let a visitor obtain an
    // authenticated session without a real login. Returns whether it
    // actually signed in.
    loginDemo() {
      if (window.__BIZIA_DEMO_MODE !== true) {
        toast({ title: 'Demo sign-in unavailable', desc: 'This workspace requires a real account. Contact your admin for access.', tone: 'error' });
        return false;
      }
      sessionStorage.setItem('bz_token', 'dev-user-token');
      sessionStorage.setItem('bz_user', JSON.stringify({ id: 'dev-user', name: 'Demo User', email: 'demo@bizia.local' }));
      navigate('/app');
      return true;
    },
    logout() {
      sessionStorage.removeItem('bz_token');
      sessionStorage.removeItem('bz_user');
      navigate('/login');
    },
    getToken() {
      return sessionStorage.getItem('bz_token');
    },
    // Best-effort synchronous read of the last-known authenticated user
    // (set at real login — see auth.jsx). AppShell refreshes this from
    // /api/auth/me on mount; this is just the instant-render seed.
    currentUser() {
      try {
        const raw = sessionStorage.getItem('bz_user');
        return raw ? JSON.parse(raw) : null;
      } catch (e) {
        return null;
      }
    },
  };

  /* ---------------- Theme ---------------- */
  function useTheme() {
    const [theme, setTheme] = useState(() => localStorage.getItem('bz-theme') || 'light');
    useEffect(() => {
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('bz-theme', theme);
    }, [theme]);
    return [theme, setTheme];
  }
  window.useTheme = useTheme;

  /* ---------------- Toasts ---------------- */
  function toast(opts) {
    if (typeof opts === 'string') opts = { title: opts };
    window.dispatchEvent(new CustomEvent('bz-toast', { detail: { id: Date.now() + Math.random(), ...opts } }));
  }
  window.toast = toast;

  function ToastHost() {
    const [items, setItems] = useState([]);
    useEffect(() => {
      const h = (e) => {
        const t = e.detail;
        setItems(prev => [...prev, t]);
        setTimeout(() => setItems(prev => prev.filter(x => x.id !== t.id)), t.duration || 3400);
      };
      window.addEventListener('bz-toast', h);
      return () => window.removeEventListener('bz-toast', h);
    }, []);
    const toneIcon = { success: 'checkcircle', error: 'alert', info: 'info', warning: 'alert', primary: 'sparkles' };
    const toneColor = { success: 'var(--success)', error: 'var(--danger)', info: 'var(--info)', warning: 'var(--warning)', primary: 'var(--primary)' };
    return React.createElement('div', {
      style: { position: 'fixed', bottom: 24, right: 24, zIndex: 400, display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 360 },
    },
      items.map(t => React.createElement('div', {
        key: t.id,
        style: {
          display: 'flex', alignItems: 'flex-start', gap: 11, padding: '13px 15px', background: 'var(--surface)',
          border: '1px solid var(--border)', borderRadius: 'var(--r-md)', boxShadow: 'var(--sh-lg)',
          animation: 'bz-slide-r .3s var(--ease)',
        },
      },
        React.createElement('div', {
          style: { width: 30, height: 30, borderRadius: 9, background: 'color-mix(in srgb,' + (toneColor[t.tone] || 'var(--primary)') + ' 14%, transparent)', color: toneColor[t.tone] || 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
        }, React.createElement(window.Icon, { name: toneIcon[t.tone] || 'check', size: 17 })),
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600 } }, t.title),
          t.desc ? React.createElement('div', { style: { fontSize: 12.5, color: 'var(--muted)', marginTop: 2 } }, t.desc) : null,
        ),
      )),
    );
  }
  window.ToastHost = ToastHost;

  /* ---------------- Nav config ---------------- */
  const NAV = [
    { group: 'Website', items: [
      { path: '/app', label: 'Dashboard', icon: 'home' },
      { path: '/app/new', label: 'Create website', icon: 'sparkles' },
      { path: '/app/builder', label: 'Website builder', icon: 'layers' },
      { path: '/app/pages', label: 'Pages', icon: 'folder' },
      { path: '/app/design', label: 'Design & Brand', icon: 'palette' },
    ]},
    { group: 'Launch', items: [
      { path: '/app/domain', label: 'Domain', icon: 'globe' },
      { path: '/app/infrastructure', label: 'Hosting & Publish', icon: 'rocket' },
      { path: '/app/seo', label: 'SEO & Google', icon: 'search' },
      { path: '/app/forms', label: 'Forms & Auth', icon: 'inbox' },
      { path: '/app/go-live', label: 'Go Live', icon: 'rocket' },
    ]},
    { group: 'More', items: [
      { path: '/app/account-hub', label: 'Connected accounts', icon: 'link' },
      { path: '/app/integrations', label: 'Integrations', icon: 'plug' },
      { path: '/app/analytics', label: 'Analytics', icon: 'chart' },
      { path: '/app/templates', label: 'Templates', icon: 'layoutTemplate' },
      { path: '/app/settings', label: 'Settings', icon: 'settings' },
      { path: '/app/admin/client-readiness', label: 'Client Readiness', icon: 'users' },
    ]},
    { group: 'Add-ons', collapsible: true, items: [
      { path: '/app/leads', label: 'Leads', icon: 'inbox' },
      { path: '/app/social-kit', label: 'Social kit', icon: 'megaphone' },
      { path: '/app/ecards', label: 'Employee e-cards', icon: 'idcard' },
    ]},
  ];
  const FLAT_NAV = NAV.flatMap(g => g.items);
  window.BZ_NAV = NAV; window.BZ_FLAT_NAV = FLAT_NAV;

  /* ---------------- Sidebar ---------------- */
  function Sidebar({ path, collapsed, onClose, mobile }) {
    const user = useCurrentUser();
    const org = user?.organizations?.[0]?.organization;
    const workspaceName = org?.name || 'My Workspace';
    const workspacePlan = org?.plan || 'Free';
    return React.createElement('aside', {
      style: {
        width: collapsed ? 'var(--sidebar-w-collapsed)' : 'var(--sidebar-w)', flexShrink: 0,
        height: '100%', borderRight: '1px solid var(--border)', background: 'var(--surface)',
        display: 'flex', flexDirection: 'column', transition: 'width .22s var(--ease)',
        position: mobile ? 'relative' : 'sticky', top: 0,
      },
    },
      // Brand
      React.createElement('div', {
        style: { height: 'var(--topbar-h)', display: 'flex', alignItems: 'center', padding: collapsed ? '0' : '0 18px', justifyContent: collapsed ? 'center' : 'flex-start', borderBottom: '1px solid var(--border-soft)' },
      },
        collapsed
          ? React.createElement(window.BiziaMark, { size: 32 })
          : React.createElement(window.BiziaLogo, { size: 21, showByline: true, onClick: () => navigate('/app') }),
      ),
      // New business CTA
      React.createElement('div', { style: { padding: collapsed ? '14px 14px 6px' : '16px 16px 8px' } },
        React.createElement(window.Button, {
          variant: 'primary', full: !collapsed, icon: 'sparkles', size: 'md',
          onClick: () => { navigate('/app/new'); onClose && onClose(); },
          style: collapsed ? { width: 48, height: 48, padding: 0 } : {},
        }, collapsed ? null : 'Create website'),
      ),
      // Nav
      React.createElement('nav', { style: { flex: 1, overflowY: 'auto', padding: '8px 12px 16px' } },
        NAV.map((g, gi) => React.createElement('div', { key: gi, style: { marginTop: gi ? 18 : 8 } },
          collapsed ? null : React.createElement('div', {
            style: { fontSize: 11, fontWeight: 650, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--muted-2)', padding: '0 10px 8px' },
          }, g.group),
          g.items.map(it => {
            const active = path === it.path || (it.path !== '/app' && path.startsWith(it.path));
            return React.createElement('button', {
              key: it.path, onClick: () => { navigate(it.path); onClose && onClose(); },
              title: collapsed ? it.label : undefined,
              style: {
                position: 'relative', display: 'flex', alignItems: 'center', gap: 11, width: '100%',
                padding: collapsed ? '0' : '0 10px', height: 40, justifyContent: collapsed ? 'center' : 'flex-start',
                borderRadius: 'var(--r-sm)', border: 'none', cursor: 'pointer', marginBottom: 2,
                background: active ? 'var(--primary-soft)' : 'transparent',
                color: active ? 'var(--primary-700)' : 'var(--text-2)',
                fontSize: 14, fontWeight: active ? 600 : 500, transition: 'background .14s, color .14s',
              },
              onMouseEnter: (e) => { if (!active) e.currentTarget.style.background = 'var(--surface-3)'; },
              onMouseLeave: (e) => { if (!active) e.currentTarget.style.background = 'transparent'; },
            },
              active && !collapsed ? React.createElement('span', { style: { position: 'absolute', left: -12, top: 9, bottom: 9, width: 3, borderRadius: 3, background: 'var(--primary)' } }) : null,
              React.createElement(window.Icon, { name: it.icon, size: 18 }),
              collapsed ? null : React.createElement('span', { style: { flex: 1, textAlign: 'left' } }, it.label),
              (!collapsed && it.badge) ? React.createElement('span', {
                style: { fontSize: 11, fontWeight: 700, minWidth: 18, height: 18, padding: '0 5px', borderRadius: 999, background: 'var(--accent)', color: '#7a4a00', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
              }, it.badge) : null,
            );
          }),
        )),
      ),
      // Project switcher footer
      collapsed ? null : React.createElement('div', { style: { padding: 12, borderTop: '1px solid var(--border-soft)' } },
        React.createElement('button', {
          onClick: () => navigate('/app'),
          style: { display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 10px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface-2)', cursor: 'pointer' },
          onMouseEnter: (e) => e.currentTarget.style.background = 'var(--surface-3)',
          onMouseLeave: (e) => e.currentTarget.style.background = 'var(--surface-2)',
        },
          React.createElement(window.Avatar, { name: workspaceName, size: 30 }),
          React.createElement('div', { style: { flex: 1, minWidth: 0, textAlign: 'left' } },
            React.createElement('div', { style: { fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, workspaceName),
            React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)' } }, workspacePlan + ' plan'),
          ),
          React.createElement(window.Icon, { name: 'chevronDown', size: 15, style: { color: 'var(--muted)' } }),
        ),
      ),
    );
  }

  /* ---------------- Topbar ---------------- */
  function Topbar({ onToggleSidebar, onMobileMenu, theme, setTheme, onOpenCmd, mobile, user }) {
    const path = useRoute();
    const cur = FLAT_NAV.find(n => path === n.path || (n.path !== '/app' && path.startsWith(n.path)));
    const offNav = { '/app/recommendation': 'Website plan', '/app/billing': 'Billing & plans' };
    const title = cur ? cur.label : (offNav[path.split('?')[0]] || 'Dashboard');
    return React.createElement('header', {
      style: {
        height: 'var(--topbar-h)', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 12,
        padding: '0 20px', borderBottom: '1px solid var(--border)',
        background: 'var(--glass-strong)', backdropFilter: 'blur(14px) saturate(150%)',
        WebkitBackdropFilter: 'blur(14px) saturate(150%)', position: 'sticky', top: 0, zIndex: 50,
      },
    },
      mobile
        ? React.createElement(window.IconButton, { name: 'menu', label: 'Menu', onClick: onMobileMenu })
        : React.createElement(window.IconButton, { name: 'menu', label: 'Toggle sidebar', onClick: onToggleSidebar }),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', minWidth: 0 } },
        React.createElement('h1', { style: { fontSize: 16.5, fontWeight: 650, letterSpacing: '-0.02em', whiteSpace: 'nowrap' } }, title),
      ),
      React.createElement('div', { style: { flex: 1 } }),
      // Search / command
      React.createElement('button', {
        onClick: onOpenCmd,
        style: {
          display: mobile ? 'none' : 'flex', alignItems: 'center', gap: 9, height: 38, padding: '0 12px', minWidth: 200,
          borderRadius: 'var(--r-md)', border: '1px solid var(--border-strong)', background: 'var(--surface-2)',
          color: 'var(--muted)', cursor: 'pointer', fontSize: 13.5,
        },
        onMouseEnter: (e) => e.currentTarget.style.borderColor = 'var(--muted-2)',
        onMouseLeave: (e) => e.currentTarget.style.borderColor = 'var(--border-strong)',
      },
        React.createElement(window.Icon, { name: 'search', size: 16 }),
        React.createElement('span', { style: { flex: 1, textAlign: 'left' } }, 'Search or jump to…'),
        React.createElement('kbd', { style: { fontSize: 11, fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 6, background: 'var(--surface-3)', border: '1px solid var(--border)', color: 'var(--muted)' } }, '⌘K'),
      ),
      React.createElement(window.IconButton, { name: 'sparkles', label: 'Ask Bizia AI', onClick: () => navigate('/app/builder') }),
      React.createElement(window.IconButton, { name: 'bell', label: 'Notifications', badge: true }),
      React.createElement(window.IconButton, { name: theme === 'dark' ? 'sun' : 'moon', label: 'Toggle theme', onClick: () => setTheme(theme === 'dark' ? 'light' : 'dark') }),
      React.createElement('div', { style: { width: 1, height: 26, background: 'var(--border)', margin: '0 2px' } }),
      React.createElement('button', {
        onClick: () => navigate('/app/settings'),
        style: { display: 'flex', alignItems: 'center', gap: 8, border: 'none', background: 'transparent', cursor: 'pointer', padding: 2, borderRadius: 999 },
      }, React.createElement(window.Avatar, { name: (user && user.name) || undefined, size: 34, ring: true })),
      React.createElement(window.IconButton, { name: 'logout', label: 'Log out', onClick: () => window.BiziaAuth.logout() }),
    );
  }

  /* ---------------- Command palette ---------------- */
  function CommandPalette({ open, onClose }) {
    const [q, setQ] = useState('');
    const inputRef = useRef();
    useEffect(() => { if (open) { setQ(''); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); } }, [open]);
    const cmds = [
      ...FLAT_NAV.map(n => ({ label: n.label, icon: n.icon, path: n.path, kind: 'Go to' })),
      { label: 'Create a website from a prompt', icon: 'sparkles', path: '/app/new', kind: 'Action' },
      { label: 'Open website builder', icon: 'layers', path: '/app/builder', kind: 'Action' },
      { label: 'View website plan', icon: 'wand', path: '/app/recommendation', kind: 'Action' },
      { label: 'Billing & plans', icon: 'card', path: '/app/billing', kind: 'Action' },
      { label: 'Marketing site', icon: 'globe', path: '/', kind: 'Action' },
    ];
    const filtered = q ? cmds.filter(c => c.label.toLowerCase().includes(q.toLowerCase())) : cmds;
    if (!open) return null;
    return React.createElement('div', {
      onMouseDown: onClose,
      style: { position: 'fixed', inset: 0, zIndex: 300, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '12vh', background: 'rgba(15,18,35,0.4)', backdropFilter: 'blur(4px)', animation: 'bz-fade-in .15s' },
    },
      React.createElement('div', {
        onMouseDown: (e) => e.stopPropagation(),
        style: { width: '100%', maxWidth: 540, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', boxShadow: 'var(--sh-xl)', overflow: 'hidden', animation: 'bz-scale-in .18s var(--ease)' },
      },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 11, padding: '16px 18px', borderBottom: '1px solid var(--border)' } },
          React.createElement(window.Icon, { name: 'search', size: 19, style: { color: 'var(--muted)' } }),
          React.createElement('input', {
            ref: inputRef, value: q, onChange: (e) => setQ(e.target.value), placeholder: 'Search pages, actions…',
            onKeyDown: (e) => { if (e.key === 'Enter' && filtered[0]) { navigate(filtered[0].path); onClose(); } },
            style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 16, color: 'var(--text)' },
          }),
          React.createElement('kbd', { style: { fontSize: 11, fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 6, background: 'var(--surface-3)', border: '1px solid var(--border)', color: 'var(--muted)' } }, 'ESC'),
        ),
        React.createElement('div', { style: { maxHeight: 380, overflowY: 'auto', padding: 8 } },
          filtered.length === 0 ? React.createElement('div', { style: { padding: 24, textAlign: 'center', color: 'var(--muted)', fontSize: 14 } }, 'No results') :
          filtered.map((c, i) => React.createElement('button', {
            key: i, onClick: () => { navigate(c.path); onClose(); },
            style: { display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '10px 12px', borderRadius: 'var(--r-sm)', border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left' },
            onMouseEnter: (e) => e.currentTarget.style.background = 'var(--surface-3)',
            onMouseLeave: (e) => e.currentTarget.style.background = 'transparent',
          },
            React.createElement('div', { style: { width: 32, height: 32, borderRadius: 8, background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-2)' } }, React.createElement(window.Icon, { name: c.icon, size: 17 })),
            React.createElement('span', { style: { flex: 1, fontSize: 14, fontWeight: 500 } }, c.label),
            React.createElement('span', { style: { fontSize: 11.5, color: 'var(--muted-2)' } }, c.kind),
          )),
        ),
      ),
    );
  }

  /* ---------------- AppShell ---------------- */
  function AppShell({ children, fullBleed }) {
    const path = useRoute();
    const [theme, setTheme] = useTheme();
    const [collapsed, setCollapsed] = useState(false);
    const [mobileNav, setMobileNav] = useState(false);
    const [cmdOpen, setCmdOpen] = useState(false);
    const [isMobile, setIsMobile] = useState(window.innerWidth < 1000);
    const [user, setUser] = useState(() => window.BiziaAuth.currentUser());

    // Auth guard — redirect to /login if no token
    if (!sessionStorage.getItem('bz_token')) {
      navigate('/login');
      return null;
    }
    useEffect(() => {
      // sessionStorage's bz_user (set at login) is the instant seed above;
      // refresh from the real backend so a stale/renamed identity doesn't
      // linger for the rest of the session.
      let cancelled = false;
      window.API.auth.getMeRaw().then(u => {
        if (cancelled || !u) return;
        setUser(u);
        try { sessionStorage.setItem('bz_user', JSON.stringify(u)); } catch (e) { /* ignore */ }
      }).catch(err => {
        if (cancelled) return;
        if (err && err.status === 401) {
          // Session token is no longer valid server-side — clear it and
          // send the user back to /login instead of leaving a shell that
          // looks authenticated but can't actually call any API.
          window.BiziaAuth.logout();
        }
        // Any other failure (network blip, backend briefly down): keep
        // the seeded/last-known user rather than clearing a valid session.
      });
      return () => { cancelled = true; };
    }, []);
    useEffect(() => {
      const h = () => setIsMobile(window.innerWidth < 1000);
      window.addEventListener('resize', h); return () => window.removeEventListener('resize', h);
    }, []);
    useEffect(() => {
      const h = (e) => {
        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setCmdOpen(o => !o); }
      };
      window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h);
    }, []);
    useEffect(() => { setMobileNav(false); }, [path]);

    return React.createElement(CurrentUserContext.Provider, { value: user },
      React.createElement('div', { className: 'bz-app-bg', style: { display: 'flex', height: '100vh', overflow: 'hidden' } },
      !isMobile ? React.createElement(Sidebar, { path, collapsed }) : null,
      isMobile && mobileNav ? React.createElement('div', {
        onMouseDown: () => setMobileNav(false),
        style: { position: 'fixed', inset: 0, zIndex: 150, background: 'rgba(15,18,35,0.45)', backdropFilter: 'blur(3px)' },
      }, React.createElement('div', { onMouseDown: (e) => e.stopPropagation(), style: { height: '100%', width: 'var(--sidebar-w)', animation: 'bz-slide-l .25s var(--ease)' } },
        React.createElement(Sidebar, { path, collapsed: false, onClose: () => setMobileNav(false), mobile: true }),
      )) : null,
      React.createElement('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, height: '100%' } },
        React.createElement(Topbar, { theme, setTheme, mobile: isMobile, onToggleSidebar: () => setCollapsed(c => !c), onMobileMenu: () => setMobileNav(true), onOpenCmd: () => setCmdOpen(true), user }),
        React.createElement('main', {
          id: 'bz-scroll',
          style: { flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: fullBleed ? 0 : (isMobile ? '20px 16px 56px' : '28px 32px 64px') },
        },
          fullBleed ? children : React.createElement('div', { style: { maxWidth: 'var(--maxw)', margin: '0 auto' } }, children),
        ),
      ),
      React.createElement(CommandPalette, { open: cmdOpen, onClose: () => setCmdOpen(false) }),
      ),
    );
  }

  /* ---------------- PageHeader ---------------- */
  function PageHeader({ title, sub, actions, badge, icon, style }) {
    return React.createElement('div', {
      style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', marginBottom: 24, ...style },
    },
      React.createElement('div', { style: { minWidth: 0 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 11 } },
          icon ? React.createElement('div', { style: { width: 40, height: 40, borderRadius: 'var(--r-md)', background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(window.Icon, { name: icon, size: 21 })) : null,
          React.createElement('h1', { style: { fontSize: 26, fontWeight: 700, letterSpacing: '-0.03em' } }, title),
          badge || null,
        ),
        sub ? React.createElement('p', { style: { fontSize: 14.5, color: 'var(--muted)', marginTop: 7, maxWidth: 620, lineHeight: 1.5 } }, sub) : null,
      ),
      actions ? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 } }, actions) : null,
    );
  }

  Object.assign(window, { Sidebar, Topbar, AppShell, PageHeader, CommandPalette });
})();