@curvenote/theme-ui 1.0.1 → 2.0.0

package/dist/components/layout/app-layout.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutProps } from './types';
-export declare function AppLayout({ children, header, footer }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayout({ children, header, footer, trailing }: LayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare function AppContainer({ children, header, className, }: {
     children: React.ReactNode;
     header?: React.ReactNode;

package/dist/components/layout/app-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/app-layout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,2CAuBlE;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAwBA"}
+{"version":3,"file":"app-layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/app-layout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,WAAW,2CAuB5E;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyBA"}

package/dist/components/layout/app-layout.js

@@ -8,17 +8,18 @@ import { cn } from '../../lib/utils';
 import { Banner } from '../ui';
 import { createSkipToTargets, SkipTo } from '../ui/accessibility-skip-to';
 import { useDesign } from '../providers';
-export function AppLayout({ children, header, footer }) {
+export function AppLayout({ children, header, footer, trailing }) {
     return (_jsxs(_Fragment, { children: [_jsx(SkipTo, { targets: createSkipToTargets() }), _jsx("div", { className: cn('flex flex-col min-h-screen', {
                     '[--header-height:calc(--spacing(22))]': header,
                     '[--header-height:calc(--spacing(14))]': !header,
-                }), children: _jsxs(SidebarProvider, { className: "flex flex-col h-full", children: [_jsx(SiteHeader, { brandBar: header, showMobileMenu: true }), _jsxs("div", { className: "flex flex-1 pt-[var(--header-height)]", children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col min-h-full", children: [_jsx("div", { className: "flex-grow", children: children }), footer && _jsx("div", { className: "flex-shrink-0", children: footer })] })] })] }) })] }));
+                }), children: _jsxs(SidebarProvider, { className: "flex flex-col h-full", children: [_jsx(SiteHeader, { brandBar: header, trailing: trailing, showMobileMenu: true }), _jsxs("div", { className: "flex flex-1", children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col min-h-full", children: [_jsx("div", { className: "grow", children: children }), footer && _jsx("div", { className: "shrink-0", children: footer })] })] })] }) })] }));
 }
 export function AppContainer({ children, header, className, }) {
     const references = useReferences();
     const project = useProjectManifest();
     const design = useDesign();
-    return (_jsxs("article", { className: cn('relative app-grid grid-gap z-0 max-w-full article', className, {
-            'pt-8': !project?.banner,
-        }), children: [project?.banner && (_jsx(Banner, { thin: true, banner: project.banner, bannerOptimized: project.bannerOptimized })), header, !!header && _jsx("div", { className: "h-0 col-screen" }), !design.hide_outline && references?.article && (_jsx("aside", { className: "hidden sticky top-24 px-2 h-0 lg:block col-margin xl:px-4", children: _jsx(DocumentOutline, { mdast: references?.article }) })), children, _jsx("div", { id: "bottom-of-article", className: "h-0 col-screen" })] }));
+    const hasBanner = !design.hide_banner && project?.banner;
+    return (_jsxs("article", { className: cn('relative z-0 max-w-full app-grid grid-gap article', className, {
+            'pt-8': !hasBanner && !design.hide_title_block,
+        }), children: [hasBanner && !design.hide_title_block && project?.banner && (_jsx(Banner, { thin: true, banner: project.banner, bannerOptimized: project.bannerOptimized })), header, !!header && _jsx("div", { className: "h-0 col-screen" }), !design.hide_outline && references?.article && (_jsx("aside", { className: "hidden sticky top-24 px-2 h-0 lg:block col-margin xl:px-4", children: _jsx(DocumentOutline, { mdast: references?.article }) })), children, _jsx("div", { id: "bottom-of-article", className: "h-0 col-screen" })] }));
 }

package/dist/components/layout/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/app-sidebar.tsx"],"names":[],"mappings":"AA8PA,wBAAgB,UAAU,4CA2EzB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/app-sidebar.tsx"],"names":[],"mappings":"AA8PA,wBAAgB,UAAU,4CA0FzB"}

package/dist/components/layout/app-sidebar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronRight, Home, Notebook } from 'lucide-react';
 import * as React from 'react';
-import { useNavigation, useLocation, Link, NavLink } from 'react-router';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '../ui/sidebar';
+import { useNavigation, useLocation, NavLink } from 'react-router';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, } from '../ui/sidebar';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui';
 import { cn } from '../../lib/utils';
 import { getYear } from '../../lib/parse-date';
@@ -11,6 +11,7 @@ import { ThemeButton } from '../ui/theme-button';
 import { useBaseurl, useProjectManifest } from '@myst-theme/providers';
 import { useHydrated } from '../../hooks';
 import { usePage } from '../providers';
+import { useDesign } from '../providers/design';
 const icons = {
     notebook: Notebook,
     notebooks: Notebook,
@@ -109,6 +110,7 @@ export function AppSidebar() {
     const currentPage = page.slug;
     const project = useProjectManifest();
     const baseUrl = useBaseurl() ?? '';
+    const { hide_powered_by, hide_sidebar_footer } = useDesign();
     // Build nested structure from config pages
     const sidebarItems = React.useMemo(() => {
         if (!project?.pages) {
@@ -118,8 +120,10 @@ export function AppSidebar() {
     }, [project]);
     const { title, authors, date: dateString } = project ?? {};
     const year = getYear(dateString);
-    return (_jsxs(Sidebar, { className: "top-(--header-height) h-[calc(100svh-var(--header-height))]!", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { size: "lg", asChild: true, children: _jsxs(Link, { to: baseUrl || '/', children: [_jsx("div", { className: "flex justify-center items-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground aspect-square size-8", children: _jsx(Home, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-sm leading-tight text-left", children: [_jsx("span", { className: "font-medium truncate", children: title }), authors && (_jsxs("div", { className: "flex overflow-hidden gap-1 items-center", children: [_jsxs("div", { className: "text-xs truncate", children: [authors
-                                                                .map((author) => author.nameParsed?.family)
-                                                                .slice(0, 3)
-                                                                .join(', '), ' '] }), year && _jsxs("div", { className: "text-xs truncate shrink-0", children: ["(", year, ")"] })] }))] })] }) }) }) }) }), _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Pages" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: sidebarItems.map((item) => (_jsx(SidebarItemComponent, { item: item, currentPage: currentPage }, item.title))) }) })] }) }), _jsx(SidebarFooter, { className: "border-t", children: _jsxs("div", { className: "flex gap-2 pl-2 opacity-80 grayscale hover:grayscale-0 hover:opacity-100", children: [_jsxs("a", { href: "https://curvenote.com", target: "_blank", rel: "noopener noreferrer", className: "flex gap-2 items-center my-1 text-xs transition-all duration-300 text-sidebar-secondary-foreground grow", children: [_jsx(CurvenoteLogo, { size: 16 }), _jsx("span", { children: "Powered by Curvenote" })] }), _jsx("div", { className: "flex-0", children: _jsx(ThemeButton, {}) })] }) })] }));
+    return (_jsxs(Sidebar, { className: "top-(--header-height) h-[calc(100svh-var(--header-height))]!", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(NavLink, { to: baseUrl || '/', prefetch: "intent", end: true, className: ({ isActive }) => cn('flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2', {
+                                'bg-sidebar-accent text-sidebar-accent-foreground ': isActive,
+                            }), children: [_jsx("div", { className: "flex justify-center items-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground aspect-square size-8", children: _jsx(Home, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-sm leading-tight text-left", children: [_jsx("span", { className: "font-medium truncate", children: title }), authors && (_jsxs("div", { className: "flex overflow-hidden gap-1 items-center", children: [_jsxs("div", { className: "text-xs truncate", children: [authors
+                                                            .map((author) => author.nameParsed?.family)
+                                                            .slice(0, 3)
+                                                            .join(', '), ' '] }), year && _jsxs("div", { className: "text-xs truncate shrink-0", children: ["(", year, ")"] })] }))] })] }) }) }) }), _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Pages" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: sidebarItems.map((item) => (_jsx(SidebarItemComponent, { item: item, currentPage: currentPage }, item.title))) }) })] }) }), !hide_sidebar_footer && (_jsx(SidebarFooter, { className: "border-t", children: _jsxs("div", { className: "flex gap-2 pl-2 opacity-80 grayscale hover:grayscale-0 hover:opacity-100", children: [!hide_powered_by && (_jsxs("a", { href: "https://curvenote.com", target: "_blank", rel: "noopener noreferrer", className: "flex gap-2 items-center my-1 text-xs transition-all duration-300 text-sidebar-secondary-foreground grow", children: [_jsx(CurvenoteLogo, { size: 16 }), _jsx("span", { children: "Powered by Curvenote" })] })), _jsx("div", { className: cn('flex-0', { 'ml-auto': hide_powered_by }), children: _jsx(ThemeButton, {}) })] }) }))] }));
 }

package/dist/components/layout/article-layout.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutProps } from './types';
-export declare function ArticleLayout({ children, header, footer }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArticleLayout({ children, header, footer, trailing }: LayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare function ArticleContainer({ children, header, className, }: {
     children: React.ReactNode;
     header?: React.ReactNode;

package/dist/components/layout/article-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"article-layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/article-layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,2CAWtE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAiCA"}
+{"version":3,"file":"article-layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/article-layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,WAAW,2CAWhF;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAgCA"}

package/dist/components/layout/article-layout.js

@@ -4,17 +4,16 @@ import { SiteHeader } from './site-header';
 import { cn } from '../../lib/utils';
 import { createSkipToTargets, DocumentOutline, SkipTo, Banner } from '../ui';
 import { useDesign } from '../providers';
-export function ArticleLayout({ children, header, footer }) {
-    return (_jsxs(_Fragment, { children: [_jsx(SkipTo, { targets: createSkipToTargets() }), _jsxs("div", { className: "flex flex-col min-h-screen", children: [_jsx(SiteHeader, { brandBar: header }), _jsx("div", { className: "flex-grow", children: children }), footer && _jsx("div", { className: "flex-shrink-0", children: footer })] })] }));
+export function ArticleLayout({ children, header, footer, trailing }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SkipTo, { targets: createSkipToTargets() }), _jsxs("div", { className: "flex flex-col min-h-screen", children: [_jsx(SiteHeader, { brandBar: header, trailing: trailing }), _jsx("div", { className: "grow", children: children }), footer && _jsx("div", { className: "shrink-0", children: footer })] })] }));
 }
 export function ArticleContainer({ children, header, className, }) {
     const references = useReferences();
     const project = useProjectManifest();
     const design = useDesign();
-    return (_jsxs("article", { className: cn('relative article-grid grid-gap prose dark:prose-invert w-full max-w-full', {
-            // if the banner is shown, or the title block is hidden, this padding accounts for the site header
-            'pt-14': project?.banner || design.hide_title_block,
+    const hasBanner = !design.hide_banner && project?.banner;
+    return (_jsxs("article", { className: cn('relative w-full max-w-full article-grid grid-gap prose dark:prose-invert', {
             // if the banner is not shown, and the title block is not hidden, then more padding is needed
-            'pt-28': !project?.banner && !design.hide_title_block,
-        }, 'z-0', className), children: [project?.banner && !design.hide_title_block && (_jsx(Banner, { inset: true, banner: project.banner, bannerOptimized: project.bannerOptimized })), header, !!header && _jsx("div", { className: "col-screen h-0" }), !design.hide_outline && references?.article && (_jsx("aside", { className: "hidden sticky top-24 px-2 h-0 lg:block col-margin xl:px-4", children: _jsx(DocumentOutline, { mdast: references?.article }) })), children, _jsx("div", { id: "bottom-of-article", className: "col-screen h-0" })] }));
+            'pt-14': !hasBanner && !design.hide_title_block,
+        }, 'z-0', className), children: [hasBanner && !design.hide_title_block && project?.banner && (_jsx(Banner, { inset: true, banner: project.banner, bannerOptimized: project.bannerOptimized })), header, !!header && _jsx("div", { className: "h-0 col-screen" }), !design.hide_outline && references?.article && (_jsx("aside", { className: "hidden sticky top-24 px-2 h-0 lg:block col-margin xl:px-4", children: _jsx(DocumentOutline, { mdast: references?.article }) })), children, _jsx("div", { id: "bottom-of-article", className: "h-0 col-screen" })] }));
 }

package/dist/components/layout/header.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingBar } from './loading-bar';
 export function HeaderContainer({ brandBar, children, }) {
-    return (_jsx("header", { className: "fixed top-0 z-50 w-full border-b bg-background", children: _jsxs("div", { className: "flex flex-col items-center", children: [brandBar && _jsx("div", { className: "w-full shrink-0", children: brandBar }), children, _jsx(LoadingBar, {})] }) }));
+    return (_jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background", children: _jsxs("div", { className: "flex flex-col items-center", children: [brandBar && _jsx("div", { className: "w-full shrink-0", children: brandBar }), children, _jsx(LoadingBar, {})] }) }));
 }

package/dist/components/layout/index.d.ts

@@ -4,4 +4,5 @@ export * from './article-layout';
 export * from './site-header';
 export * from './loading-bar';
 export * from './grid';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/components/layout/index.js

@@ -5,3 +5,4 @@ export * from './article-layout';
 export * from './site-header';
 export * from './loading-bar';
 export * from './grid';
+export * from './types';

package/dist/components/layout/loading-bar.d.ts

@@ -5,8 +5,15 @@ export declare function useLoading(): {
     showLoading: boolean;
     isLoading: boolean;
 };
-export declare function LoadingBar({ align, className, }: {
+export declare function LoadingBar({ align, className, position, fixedTopClassName, fixedTop, portal, }: {
     align?: 'bottom' | 'top';
     className?: string;
+    /** `fixed` pins the bar to the viewport (e.g. under a `h-14` nav). */
+    position?: 'absolute' | 'relative' | 'fixed';
+    fixedTopClassName?: string;
+    /** Viewport `top` in px for `position: fixed`. Overrides `fixedTopClassName`. */
+    fixedTop?: number;
+    /** Render via portal so `fixed` is not trapped by ancestor `backdrop-filter` / `transform`. */
+    portal?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=loading-bar.d.ts.map

package/dist/components/layout/loading-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-bar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/loading-bar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,UAAU;;;EAmCzB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAiBA"}
+{"version":3,"file":"loading-bar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/loading-bar.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,UAAU;;;EAmCzB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAgB,EAChB,SAAS,EACT,QAAqB,EACrB,iBAA4B,EAC5B,QAAQ,EACR,MAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,kDA+BA"}

package/dist/components/layout/loading-bar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useNavigation } from 'react-router';
 import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { cn } from '../../lib/utils';
 /**
  * Show a loading progress bar if the load takes more than 150ms
@@ -40,14 +41,21 @@ export function useLoading() {
     }, [transitionState]);
     return { showLoading, isLoading: transitionState === 'loading' };
 }
-export function LoadingBar({ align = 'bottom', className, }) {
+export function LoadingBar({ align = 'bottom', className, position = 'absolute', fixedTopClassName = 'top-14', fixedTop, portal = false, }) {
     const { isLoading, showLoading } = useLoading();
     if (!showLoading)
         return null;
-    return (_jsx("div", { className: cn('absolute left-0 w-screen bg-blue-500 transition-transform origin-left h-[2px]', {
-            'bottom-0': align === 'bottom',
-            'top-0': align === 'top',
+    const bar = (_jsx("div", { role: "progressbar", "aria-hidden": "true", style: position === 'fixed' && fixedTop !== undefined ? { top: fixedTop } : undefined, className: cn('left-0 bg-blue-500 transition-transform origin-left h-[2px] pointer-events-none', position === 'fixed'
+            ? cn('fixed z-[100] w-full', fixedTop === undefined && fixedTopClassName)
+            : cn('w-screen', position, {
+                'bottom-0': align === 'bottom',
+                'top-0': align === 'top',
+            }), {
             'animate-load scale-x-40': isLoading,
             'scale-x-100': !isLoading,
         }, className) }));
+    if (portal && typeof document !== 'undefined') {
+        return createPortal(bar, document.body);
+    }
+    return bar;
 }

package/dist/components/layout/site-header.d.ts

@@ -1,8 +1,13 @@
-export declare function SiteHeader({ showSearch, showBreadcrumbs, showArticleActions, showMobileMenu, brandBar, }: {
+export declare function SiteHeader({ showSearch, showBreadcrumbs, showArticleActions, showMobileMenu, brandBar, trailing, }: {
     showSearch?: boolean;
     showBreadcrumbs?: boolean;
     showArticleActions?: boolean;
     showMobileMenu?: boolean;
     brandBar?: React.ReactNode;
+    /**
+     * Arbitrary content rendered at the trailing (right) edge of the header,
+     * after any configured actions/search and before the mobile menu button.
+     */
+    trailing?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=site-header.d.ts.map

package/dist/components/layout/site-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/site-header.tsx"],"names":[],"mappings":"AAqKA,wBAAgB,UAAU,CAAC,EACzB,UAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,cAAqB,EACrB,QAAQ,GACT,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CA6IA"}
+{"version":3,"file":"site-header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/site-header.tsx"],"names":[],"mappings":"AAuKA,wBAAgB,UAAU,CAAC,EACzB,UAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,cAAqB,EACrB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAwKA"}

package/dist/components/layout/site-header.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { ExternalLink, ChevronDown, MenuIcon, SearchIcon, SidebarIcon } from 'lucide-react';
 import { NavLink } from 'react-router';
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, buttonVariants, SearchDialog, SimpleTooltip, BreadcrumbList, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Separator, ArticleActions, } from '../ui';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, buttonVariants, SearchDialog, SimpleTooltip, BreadcrumbList, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Separator, ArticleActions, ThemeButton, } from '../ui';
 import { cn } from '../../lib/utils';
 import { usePlatformConfig, usePlatformSite } from '../providers/platform-providers';
 import { HeaderContainer } from './header';
 import { useBaseurl, useFrontmatter, useProjectManifest } from '@myst-theme/providers';
 import { useSidebar } from '../ui/sidebar';
+import { useDesign } from '../providers';
 function NavigationItem({ item }) {
     if (item.children && item.children.length > 0) {
         return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "text-sm font-medium", children: [item.title, _jsx(ChevronDown, { className: "w-3 h-3" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: item.children.map((child) => (_jsx(DropdownMenuItem, { children: _jsx(NavigationItem, { item: child }) }, child.title))) })] }, item.title));
@@ -28,9 +29,10 @@ function MobileNavigationItem({ item, closeMobileMenu, }) {
     }
     return (_jsx(NavLink, { to: item.url, className: ({ isActive }) => cn('text-sm font-medium transition-colors hover:text-primary py-2 px-3 hover:bg-muted block', isActive && 'text-primary font-semibold bg-muted'), onClick: closeMobileMenu, children: item.title }, item.title));
 }
-export function SiteHeader({ showSearch = false, showBreadcrumbs, showArticleActions, showMobileMenu = true, brandBar, }) {
+export function SiteHeader({ showSearch = false, showBreadcrumbs, showArticleActions, showMobileMenu = true, brandBar, trailing, }) {
     const { toggleSidebar } = useSidebar() ?? {};
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const { hide_theme_toggle_site_header } = useDesign();
     const site = usePlatformSite();
     const config = usePlatformConfig();
     const project = useProjectManifest();
@@ -40,15 +42,16 @@ export function SiteHeader({ showSearch = false, showBreadcrumbs, showArticleAct
     const showNavLinksOnMediumScreen = (nav?.length ?? 0) < 5;
     const showNavLinksOnLargeScreen = (nav?.length ?? 0) >= 5;
     const logo = site?.logo || config?.options?.logo;
+    const logo_dark = site?.logo_dark || config?.options?.logo_dark;
     const logo_text = config?.options?.logo_text;
     const title = site?.title || config?.title;
-    return (_jsx(HeaderContainer, { brandBar: brandBar, children: _jsxs("div", { className: "flex items-center px-2 w-full h-14", children: [_jsxs("div", { className: cn('flex gap-2 items-center h-full', { 'md:w-[200px]': !showBreadcrumbs }), children: [toggleSidebar && (_jsxs(_Fragment, { children: [_jsx(Button, { className: "w-8 h-8", variant: "ghost", size: "icon", onClick: toggleSidebar, children: _jsx(SidebarIcon, {}) }), _jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" })] })), (logo || logo_text) && (_jsxs("a", { href: "/", className: "flex gap-2 items-center mr-2 shrink-0", children: [logo && _jsx("img", { src: logo, alt: title || 'Site Logo', className: "w-auto h-8 max-h-8" }), logo_text && _jsx("div", { className: "text-lg", children: logo_text })] }))] }), showBreadcrumbs && (_jsx(Breadcrumb, { className: "hidden sm:block grow", children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: baseurl, className: "truncate max-w-12 md:max-w-24 lg:max-w-48 xl:max-w-64", children: project?.title }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { className: "truncate max-w-64 lg:max-w-96", children: article?.title }) })] }) })), !showBreadcrumbs && (_jsx("nav", { className: cn('hidden flex-1 gap-1 justify-center items-center', {
+    return (_jsx(HeaderContainer, { brandBar: brandBar, children: _jsxs("div", { className: "flex items-center px-2 w-full h-14", children: [_jsxs("div", { className: cn('flex gap-2 items-center h-full', { 'md:w-[200px]': !showBreadcrumbs }), children: [toggleSidebar && (_jsxs(_Fragment, { children: [_jsx(SimpleTooltip, { title: "Toggle sidebar", children: _jsx(Button, { className: "w-8 h-8", variant: "ghost", size: "icon", onClick: toggleSidebar, "aria-label": "Toggle sidebar", children: _jsx(SidebarIcon, { "aria-hidden": "true", focusable: "false" }) }) }), _jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" })] })), (logo || logo_dark || logo_text) && (_jsxs("a", { href: "/", className: "flex gap-2 items-center mr-2 shrink-0", children: [logo && (_jsx("img", { src: logo, alt: title || 'Site Logo', className: cn('w-auto h-8 max-h-8', { 'dark:hidden': !!logo_dark }) })), logo_dark && (_jsx("img", { src: logo_dark, alt: title || 'Site Logo', className: "hidden w-auto h-8 max-h-8 dark:block" })), logo_text && _jsx("div", { className: "text-lg", children: logo_text })] }))] }), showBreadcrumbs && (_jsx(Breadcrumb, { className: "hidden sm:block grow", children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: baseurl, className: "truncate max-w-12 md:max-w-24 lg:max-w-48 xl:max-w-64", children: project?.title }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { className: "truncate max-w-64 lg:max-w-96", children: article?.title }) })] }) })), !showBreadcrumbs && (_jsx("nav", { className: cn('hidden flex-1 gap-1 justify-center items-center', {
                         'md:flex': showNavLinksOnMediumScreen,
                         'lg:flex': showNavLinksOnLargeScreen,
                     }), children: nav?.map((item) => (_jsx(NavigationItem, { item: item }, item.title || item.url))) })), _jsxs("div", { className: cn('flex gap-2 justify-end items-center', {
                         'grow md:grow-0 md:w-[200px]': showNavLinksOnMediumScreen,
                         'grow lg:grow-0 lg:w-[200px]': showNavLinksOnLargeScreen,
-                    }), children: [actions?.map((action) => (_jsx(Button, { variant: "outline", "aria-label": action.title, asChild: true, children: _jsx("a", { href: action.url, target: "_blank", rel: "noopener noreferrer", children: action.title }) }, action.title))), showSearch && (_jsx(SearchDialog, { children: _jsx(SimpleTooltip, { title: "Search", children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Search", asChild: true, children: _jsx("div", { children: _jsx(SearchIcon, {}) }) }) }) })), showArticleActions && _jsx(ArticleActions, {}), showMobileMenu && nav && nav.length > 0 && (_jsxs(Sheet, { open: isMobileMenuOpen, onOpenChange: setIsMobileMenuOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: cn({
+                    }), children: [actions?.map((action) => (_jsx(Button, { variant: "outline", "aria-label": action.title, asChild: true, children: _jsx("a", { href: action.url, target: "_blank", rel: "noopener noreferrer", children: action.title }) }, action.title))), showSearch && (_jsx(SearchDialog, { children: _jsx(SimpleTooltip, { title: "Search", children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Search", asChild: true, children: _jsx("div", { children: _jsx(SearchIcon, {}) }) }) }) })), showArticleActions && _jsx(ArticleActions, {}), trailing, hide_theme_toggle_site_header === false && _jsx(ThemeButton, {}), showMobileMenu && nav && nav.length > 0 && (_jsxs(Sheet, { open: isMobileMenuOpen, onOpenChange: setIsMobileMenuOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: cn({
                                             'md:hidden': !showBreadcrumbs && showNavLinksOnMediumScreen,
                                             'lg:hidden': !showBreadcrumbs && showNavLinksOnLargeScreen,
                                         }), children: _jsx(MenuIcon, { className: "w-5 h-5" }) }) }), _jsxs(SheetContent, { side: "right", className: "w-[300px] sm:w-[400px]", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: "Navigation" }) }), _jsx("div", { className: "flex flex-col mt-6 space-y-4", children: _jsx("nav", { className: "flex flex-col space-y-2", children: nav?.map((item) => (_jsx(MobileNavigationItem, { item: item, closeMobileMenu: () => setIsMobileMenuOpen(false) }, item.title || item.url))) }) })] })] }))] })] }) }));

package/dist/components/layout/types.d.ts

@@ -2,5 +2,11 @@ export interface LayoutProps {
     children: React.ReactNode;
     header?: React.ReactNode;
     footer?: React.ReactNode;
+    /**
+     * Arbitrary content rendered at the trailing (right) edge of the top
+     * navigation bar, after any configured actions/search and before the mobile
+     * menu button. Use for app-specific controls (e.g. a logs tray button).
+     */
+    trailing?: React.ReactNode;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/layout/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/layout/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/layout/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/providers/analytics-boundary.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export type AnalyticsCaptureFn = (event: string, properties?: Record<string, unknown>) => void;
+export declare function AnalyticsBoundary({ capture, context, children, }: {
+    capture: AnalyticsCaptureFn;
+    context?: Record<string, unknown>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Capture an analytics event. Merges per-call properties with the article-scoped
+ * context supplied by the nearest AnalyticsBoundary, adds `overlay_depth` from
+ * {@link OverlayInteractionDepthContext} (unless overridden in properties), transforms
+ * all keys to snake_case (PostHog convention), and forwards to the boundary's capture fn.
+ *
+ * Returns a no-op when no boundary is mounted, so packages/ui components can
+ * call this unconditionally.
+ */
+export declare function useAnalytics(): AnalyticsCaptureFn;
+//# sourceMappingURL=analytics-boundary.d.ts.map

package/dist/components/providers/analytics-boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/providers/analytics-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;AA0B/F,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAWA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,IAAI,kBAAkB,CAmBjD"}

package/dist/components/providers/analytics-boundary.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { OverlayInteractionDepthContext } from './overlay-depth';
+import { AnalyticsDevTray } from './analytics-dev-tray';
+import { isAnalyticsDevMode, recordAnalyticsDevEvent } from './analytics-dev-log';
+const AnalyticsBoundaryContext = createContext(undefined);
+function camelToSnake(s) {
+    return s
+        .replace(/([A-Z])/g, '_$1')
+        .replace(/^_/, '')
+        .toLowerCase();
+}
+function toSnakeKeys(input) {
+    if (!input)
+        return {};
+    const out = {};
+    for (const [k, v] of Object.entries(input)) {
+        if (v === undefined)
+            continue;
+        out[camelToSnake(k)] = v;
+    }
+    return out;
+}
+export function AnalyticsBoundary({ capture, context, children, }) {
+    const value = useMemo(() => ({ capture, context: context ?? {} }), [capture, context]);
+    return (_jsxs(AnalyticsBoundaryContext.Provider, { value: value, children: [children, isAnalyticsDevMode() && _jsx(AnalyticsDevTray, {})] }));
+}
+/**
+ * Capture an analytics event. Merges per-call properties with the article-scoped
+ * context supplied by the nearest AnalyticsBoundary, adds `overlay_depth` from
+ * {@link OverlayInteractionDepthContext} (unless overridden in properties), transforms
+ * all keys to snake_case (PostHog convention), and forwards to the boundary's capture fn.
+ *
+ * Returns a no-op when no boundary is mounted, so packages/ui components can
+ * call this unconditionally.
+ */
+export function useAnalytics() {
+    const ctx = useContext(AnalyticsBoundaryContext);
+    const overlayDepth = useContext(OverlayInteractionDepthContext);
+    return useCallback((event, properties) => {
+        if (!ctx)
+            return;
+        const snakeCtx = toSnakeKeys(ctx.context);
+        const snakeProps = toSnakeKeys(properties);
+        const merged = {
+            ...snakeCtx,
+            overlay_depth: snakeProps.overlay_depth !== undefined ? snakeProps.overlay_depth : overlayDepth,
+            ...snakeProps,
+        };
+        ctx.capture(event, merged);
+        recordAnalyticsDevEvent(event, merged);
+    }, [ctx, overlayDepth]);
+}

package/dist/components/providers/analytics-dev-log.d.ts

@@ -0,0 +1,11 @@
+export type AnalyticsDevLogEntry = {
+    id: string;
+    timestamp: number;
+    event: string;
+    payload: Record<string, unknown>;
+};
+export declare function isAnalyticsDevMode(): boolean;
+export declare function recordAnalyticsDevEvent(event: string, properties: Record<string, unknown>): void;
+export declare function clearAnalyticsDevLog(): void;
+export declare function useAnalyticsDevLog(): AnalyticsDevLogEntry[];
+//# sourceMappingURL=analytics-dev-log.d.ts.map

package/dist/components/providers/analytics-dev-log.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-dev-log.d.ts","sourceRoot":"","sources":["../../../src/components/providers/analytics-dev-log.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC,CAAC;AAYF,wBAAgB,kBAAkB,IAAI,OAAO,CAK5C;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAahG;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C;AAeD,wBAAgB,kBAAkB,2BAEjC"}

package/dist/components/providers/analytics-dev-log.js

@@ -0,0 +1,46 @@
+import { useSyncExternalStore } from 'react';
+let snapshot = [];
+const serverSnapshot = [];
+const listeners = new Set();
+function notify() {
+    listeners.forEach((listener) => {
+        listener();
+    });
+}
+export function isAnalyticsDevMode() {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
+        return true;
+    }
+    return Boolean(import.meta.env?.DEV);
+}
+export function recordAnalyticsDevEvent(event, properties) {
+    if (!isAnalyticsDevMode() || typeof window === 'undefined')
+        return;
+    snapshot = [
+        {
+            id: crypto.randomUUID(),
+            timestamp: Date.now(),
+            event,
+            payload: { event, ...properties },
+        },
+        ...snapshot,
+    ];
+    notify();
+}
+export function clearAnalyticsDevLog() {
+    snapshot = [];
+    notify();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+function getSnapshot() {
+    return snapshot;
+}
+function getServerSnapshot() {
+    return serverSnapshot;
+}
+export function useAnalyticsDevLog() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/dist/components/providers/analytics-dev-tray.d.ts

@@ -0,0 +1,2 @@
+export declare function AnalyticsDevTray(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=analytics-dev-tray.d.ts.map

package/dist/components/providers/analytics-dev-tray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-dev-tray.d.ts","sourceRoot":"","sources":["../../../src/components/providers/analytics-dev-tray.tsx"],"names":[],"mappings":"AA8CA,wBAAgB,gBAAgB,4CA2H/B"}

package/dist/components/providers/analytics-dev-tray.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { clearAnalyticsDevLog, useAnalyticsDevLog, } from './analytics-dev-log';
+function formatTime(timestamp) {
+    return new Date(timestamp).toLocaleTimeString();
+}
+async function copyText(text) {
+    await navigator.clipboard.writeText(text);
+}
+function LogDetail({ entry }) {
+    if (!entry) {
+        return (_jsx("div", { className: "px-3 py-2 text-xs border-t text-muted-foreground", children: "Select an event to inspect its payload." }));
+    }
+    const json = JSON.stringify(entry.payload, null, 2);
+    return (_jsxs("div", { className: "border-t", children: [_jsxs("div", { className: "flex gap-2 justify-between items-center px-3 py-2", children: [_jsx("div", { className: "min-w-0 font-mono text-xs font-semibold truncate", children: entry.event }), _jsx("button", { type: "button", className: "text-xs text-blue-600 shrink-0 hover:underline dark:text-blue-400", onClick: () => copyText(json), children: "Copy JSON" })] }), _jsx("pre", { className: "max-h-40 overflow-auto px-3 pb-3 font-mono text-[10px] leading-snug whitespace-pre-wrap break-all text-muted-foreground", children: json })] }));
+}
+export function AnalyticsDevTray() {
+    const logs = useAnalyticsDevLog();
+    const [open, setOpen] = useState(false);
+    const [flash, setFlash] = useState(false);
+    const [selectedId, setSelectedId] = useState(null);
+    const prevCountRef = useRef(logs.length);
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (logs.length > prevCountRef.current) {
+            const newestId = logs[0]?.id;
+            if (newestId)
+                setSelectedId(newestId);
+            setFlash(true);
+            const timer = window.setTimeout(() => setFlash(false), 600);
+            prevCountRef.current = logs.length;
+            return () => window.clearTimeout(timer);
+        }
+        prevCountRef.current = logs.length;
+    }, [logs]);
+    useLayoutEffect(() => {
+        if (!open || !selectedId)
+            return;
+        listRef.current
+            ?.querySelector(`[data-log-id="${selectedId}"]`)
+            ?.scrollIntoView({ block: 'nearest' });
+    }, [logs, open, selectedId]);
+    useEffect(() => {
+        if (selectedId && !logs.some((entry) => entry.id === selectedId)) {
+            setSelectedId(logs[0]?.id ?? null);
+        }
+    }, [logs, selectedId]);
+    const selected = logs.find((entry) => entry.id === selectedId) ?? logs[0] ?? null;
+    return (_jsxs("div", { className: "fixed bottom-12 left-4 z-[200] flex flex-col items-start gap-2 pointer-events-none", children: [open && (_jsxs("div", { className: "pointer-events-auto flex w-[min(24rem,calc(100vw-2rem))] max-h-[min(50vh,28rem)] flex-col overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-xl", children: [_jsxs("div", { className: "flex gap-2 justify-between items-center px-3 py-2 border-b", children: [_jsx("div", { className: "text-sm font-medium", children: "Analytics session" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("button", { type: "button", className: "text-xs text-blue-600 hover:underline dark:text-blue-400", onClick: () => copyText(JSON.stringify(logs.map((entry) => entry.payload), null, 2)), disabled: logs.length === 0, children: "Copy all" }), _jsx("button", { type: "button", className: "text-xs text-muted-foreground hover:underline", onClick: () => {
+                                            clearAnalyticsDevLog();
+                                            setSelectedId(null);
+                                        }, disabled: logs.length === 0, children: "Clear" }), _jsx("button", { type: "button", className: "text-xs text-muted-foreground hover:underline", onClick: () => setOpen(false), children: "Close" })] })] }), _jsx("ul", { ref: listRef, className: "overflow-auto flex-1 min-h-0", children: logs.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-xs text-muted-foreground", children: "No events captured yet." })) : ([...logs].reverse().map((entry) => (_jsx("li", { "data-log-id": entry.id, children: _jsxs("button", { type: "button", onClick: () => setSelectedId(entry.id), className: cn('flex w-full items-start justify-between gap-3 px-3 py-2 text-left hover:bg-muted/60', selected?.id === entry.id && 'bg-muted'), children: [_jsx("span", { className: "min-w-0 font-mono text-xs font-medium break-all", children: entry.event }), _jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: formatTime(entry.timestamp) })] }) }, entry.id)))) }), _jsx(LogDetail, { entry: selected })] })), _jsxs("button", { type: "button", onClick: () => setOpen((value) => !value), className: cn('pointer-events-auto rounded-full border px-3 py-1.5 text-xs font-medium shadow-md transition-colors duration-300', flash
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-border bg-popover text-popover-foreground hover:bg-muted'), "aria-expanded": open, "aria-label": `Analytics session log, ${logs.length} events`, children: ["Analytics ", logs.length > 0 ? `(${logs.length})` : ''] })] }));
+}

package/dist/components/providers/article-versions-provider.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type ArticleVersionNavItem = {
+    tag: string;
+    href: string;
+    date?: string;
+    description?: string;
+};
+type ArticleVersionsContextValue = {
+    versions: ArticleVersionNavItem[];
+    currentVersionTag: string | null;
+};
+export declare function ArticleVersionsProvider({ children, versions, currentVersionTag, }: {
+    children: ReactNode;
+    versions?: ArticleVersionNavItem[];
+    currentVersionTag?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useArticleVersions(): ArticleVersionsContextValue;
+export {};
+//# sourceMappingURL=article-versions-provider.d.ts.map

package/dist/components/providers/article-versions-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"article-versions-provider.d.ts","sourceRoot":"","sources":["../../../src/components/providers/article-versions-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AASF,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAa,EACb,iBAAwB,GACzB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC,2CAMA;AAED,wBAAgB,kBAAkB,IAAI,2BAA2B,CAEhE"}

package/dist/components/providers/article-versions-provider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const defaultValue = {
+    versions: [],
+    currentVersionTag: null,
+};
+const ArticleVersionsContext = createContext(defaultValue);
+export function ArticleVersionsProvider({ children, versions = [], currentVersionTag = null, }) {
+    return (_jsx(ArticleVersionsContext.Provider, { value: { versions, currentVersionTag }, children: children }));
+}
+export function useArticleVersions() {
+    return useContext(ArticleVersionsContext);
+}