@curvenote/theme-ui 1.0.1

package/dist/components/ui/document-outline.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectAll } from 'unist-util-select';
+import { visit } from 'unist-util-visit';
+import { MyST } from 'myst-to-react';
+import { Link } from 'react-router';
+import { cn } from '../../lib/utils';
+import { useEffect, useState, useRef } from 'react';
+// Transform function to remove links from header nodes using unist-util-visit
+function transformHeaders(headers) {
+    return headers.map((header) => {
+        const transformedHeader = JSON.parse(JSON.stringify(header)); // Deep clone
+        // Use unist-util-visit to find and remove all link nodes
+        visit(transformedHeader, 'link', (node, index, parent) => {
+            if (parent && index !== null) {
+                // Replace the link node with its children
+                parent.children.splice(index, 1, ...(node.children || []));
+                // Return SKIP to continue visiting the same position
+                return [undefined, index];
+            }
+        });
+        return transformedHeader;
+    });
+}
+export function DocumentOutline({ mdast, maxdepth = 3, className }) {
+    const [activeId, setActiveId] = useState(null);
+    const timeoutRef = useRef(null);
+    const lastActiveIdRef = useRef(null);
+    const ulRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState(undefined);
+    const [isVisible, setIsVisible] = useState(true);
+    // Extract all headers from the MDAST and transform them
+    const rawHeaders = selectAll('heading', mdast);
+    const headers = transformHeaders(rawHeaders);
+    useEffect(() => {
+        // Set initial active header based on scroll position
+        const handleScroll = () => {
+            const scrollTop = window.scrollY;
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            const scrollBottom = scrollTop + windowHeight;
+            // If we're at the very top, activate the first header
+            if (scrollTop < windowHeight * 0.1) {
+                const firstHeader = headers.find((h) => h.html_id);
+                if (firstHeader?.html_id) {
+                    setActiveId(firstHeader.html_id);
+                }
+                return;
+            }
+            // If we're near the bottom of the page, activate the last header
+            if (scrollBottom > documentHeight - windowHeight * 0.2) {
+                const lastHeader = headers[headers.length - 1];
+                if (lastHeader?.html_id) {
+                    setActiveId(lastHeader.html_id);
+                }
+                return;
+            }
+            // Find the header that's currently in view
+            for (let i = headers.length - 1; i >= 0; i--) {
+                const header = headers[i];
+                if (header.html_id) {
+                    const element = document.getElementById(header.html_id);
+                    if (element) {
+                        const rect = element.getBoundingClientRect();
+                        if (rect.top <= windowHeight * 0.2) {
+                            setActiveId(header.html_id);
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        // Set initial state
+        handleScroll();
+        // Add scroll listener as backup
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [headers]);
+    useEffect(() => {
+        const ulElement = ulRef.current;
+        if (!ulElement)
+            return;
+        const updateMaxHeight = () => {
+            const rect = ulElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const topOffset = rect.top;
+            // Check if bottom-of-article element exists and use it if above viewport bottom
+            const bottomOfArticle = document.getElementById('bottom-of-article');
+            let maxBottom;
+            if (bottomOfArticle) {
+                const articleRect = bottomOfArticle.getBoundingClientRect();
+                // Use the article bottom if it's above the viewport bottom
+                maxBottom = articleRect.top < viewportHeight ? articleRect.top : viewportHeight;
+            }
+            else {
+                maxBottom = viewportHeight;
+            }
+            // Calculate available height
+            const availableHeight = maxBottom - topOffset;
+            // Use scrollHeight (natural height) to check if we need to constrain
+            // This avoids feedback loops from checking rect.bottom which changes with maxHeight
+            const naturalHeight = ulElement.scrollHeight;
+            // Update visibility based on scrollHeight
+            setIsVisible((prev) => {
+                const newVisible = availableHeight >= 50;
+                return prev !== newVisible ? newVisible : prev;
+            });
+            // If the natural height exceeds available space, set max-height
+            if (naturalHeight > availableHeight) {
+                const newMaxHeight = `${availableHeight}px`;
+                // Only update if the value actually changed to prevent unnecessary re-renders
+                setMaxHeight((prev) => (prev !== newMaxHeight ? newMaxHeight : prev));
+            }
+            else {
+                setMaxHeight((prev) => (prev !== undefined ? undefined : prev));
+            }
+        };
+        // Create an intersection observer to watch the bottom of the ul
+        const observer = new IntersectionObserver(() => {
+            updateMaxHeight();
+        }, {
+            root: null, // viewport
+            rootMargin: '0px 0px -10px 0px', // Trigger when 10px from bottom
+            threshold: 0,
+        });
+        // Observe the ul element
+        observer.observe(ulElement);
+        // Also update on scroll and resize
+        window.addEventListener('scroll', updateMaxHeight, { passive: true });
+        window.addEventListener('resize', updateMaxHeight, { passive: true });
+        // Initial calculation
+        updateMaxHeight();
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('scroll', updateMaxHeight);
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, []); // Empty dependency array - only run on mount/unmount
+    if (!headers || headers.length < 2) {
+        return null;
+    }
+    return (_jsxs("nav", { className: cn('relative space-y-2 font-sans not-prose transition-opacity', { 'opacity-100': isVisible, 'opacity-0 pointer-events-none': !isVisible }, className), children: [_jsx("h3", { className: "mb-4 text-sm font-normal text-muted-foreground", children: "On this page" }), _jsx("ul", { ref: ulRef, className: "space-y-1 border-l-1 overflow-y-auto", style: { maxHeight }, children: headers
+                    .filter((header) => header.depth <= maxdepth)
+                    .map((header, index) => {
+                    const depth = header.depth;
+                    const identifier = header.html_id;
+                    const paddingLeft = `${Math.max(1, depth - 1) * 12}px`;
+                    const isActive = activeId === identifier;
+                    return (_jsx("li", { children: _jsx(Link, { to: `#${identifier}`, className: cn('block relative text-sm transition-colors', 'px-2 py-1 -ml-[2px]', isActive
+                                ? 'text-foreground border-primary border-l-3 bg-primary/2'
+                                : 'text-muted-foreground border-border', 'hover:underline'), style: { paddingLeft }, onClick: (e) => {
+                                e.preventDefault();
+                                const el = document.querySelector(`#${identifier}`);
+                                if (!el)
+                                    return;
+                                el.scrollIntoView({ behavior: 'smooth' });
+                                history.replaceState(undefined, '', `#${identifier}`);
+                                // Changes keyboard tab-index location
+                                if (el.tabIndex === -1)
+                                    el.tabIndex = -1;
+                                el.focus({ preventScroll: true });
+                            }, children: _jsx(MyST, { ast: header.children }) }) }, index));
+                }) })] }));
+}

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/ui/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border p-1 shadow-md', className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 'cursor-pointer', className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "fill-current size-2" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-sm border p-1 shadow-lg', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/error-page.d.ts

@@ -0,0 +1,9 @@
+interface ErrorPageProps {
+    error: unknown;
+    title?: string;
+    description?: string;
+    className?: string;
+}
+export declare function ErrorPage({ error, title, description, className }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=error-page.d.ts.map

package/dist/components/ui/error-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-page.d.ts","sourceRoot":"","sources":["../../../src/components/ui/error-page.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,cAAc,2CAmCjF"}

package/dist/components/ui/error-page.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRouteErrorResponse } from 'react-router';
+import { cn } from '../../lib/utils';
+export function ErrorPage({ error, title, description, className }) {
+    let message = title || 'Oops!';
+    let details = description || 'An unexpected error occurred.';
+    let stack;
+    if (isRouteErrorResponse(error)) {
+        message = error.status === 404 ? '404' : title || 'Error';
+        details =
+            description ||
+                (error.status === 404
+                    ? 'The requested page could not be found.'
+                    : error.statusText || 'An unexpected error occurred.');
+    }
+    else if (error && error instanceof Error) {
+        details = error.message;
+        stack = error.stack;
+    }
+    return (_jsx("div", { className: cn('flex flex-col items-center justify-center min-h-[75vh] px-4', className), children: _jsxs("div", { className: "text-center max-w-2xl space-y-4", children: [_jsx("h1", { className: "text-6xl font-bold text-foreground", children: message }), _jsx("p", { className: "text-lg text-muted-foreground", children: details }), stack && (_jsxs("details", { className: "mt-8 text-left", children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium text-muted-foreground mb-2", children: "Error Details" }), _jsx("pre", { className: "overflow-x-auto p-4 bg-muted rounded-md text-xs", children: _jsx("code", { children: stack }) })] }))] }) }));
+}

package/dist/components/ui/footer-links.d.ts

@@ -0,0 +1,14 @@
+interface NavItem {
+    title: string;
+    short_title?: string;
+    url: string;
+}
+interface FooterLinksProps {
+    navigation?: {
+        prev?: NavItem;
+        next?: NavItem;
+    } | null;
+}
+export declare function FooterLinks({ navigation }: FooterLinksProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=footer-links.d.ts.map

package/dist/components/ui/footer-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-links.d.ts","sourceRoot":"","sources":["../../../src/components/ui/footer-links.tsx"],"names":[],"mappings":"AAKA,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;CACb;AAgCD,UAAU,gBAAgB;IACxB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,GAAG,IAAI,CAAC;CACV;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,kDAqB3D"}

package/dist/components/ui/footer-links.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useBaseurl, withBaseurl } from '@myst-theme/providers';
+import { cn } from '../../lib/utils';
+function FooterLink({ item, align, label }) {
+    const baseUrl = useBaseurl();
+    const isLeft = align === 'left';
+    return (_jsxs(Link, { to: withBaseurl(item.url, baseUrl), className: `w-full block border border-muted rounded-sm p-4 hover:bg-accent transition-colors no-underline ${isLeft ? '' : 'text-right'}`, children: [_jsxs("div", { className: `text-muted-foreground flex items-center gap-1 text-sm font-light mb-1 ${isLeft ? '' : 'justify-end'}`, children: [isLeft && _jsx(ChevronLeft, { size: 16 }), _jsx("span", { children: label }), !isLeft && _jsx(ChevronRight, { size: 16 })] }), _jsx("div", { className: "text-sm font-normal", children: item.short_title || item.title })] }));
+}
+export function FooterLinks({ navigation }) {
+    if (!navigation)
+        return null;
+    const hasPrev = !!navigation.prev;
+    const hasNext = !!navigation.next;
+    const hasBoth = hasPrev && hasNext;
+    return (_jsxs("div", { className: "flex flex-col gap-4 mt-12 mb-4 sm:flex-row", children: [navigation.prev && (_jsx("div", { className: cn('flex w-full', { 'sm:w-1/2': hasBoth }), children: _jsx(FooterLink, { item: navigation.prev, align: "left", label: "Previous" }) })), navigation.next && (_jsx("div", { className: cn('flex w-full', { 'sm:w-1/2': hasBoth }), children: _jsx(FooterLink, { item: navigation.next, align: "right", label: "Next" }) }))] }));
+}

package/dist/components/ui/footnotes.d.ts

@@ -0,0 +1,4 @@
+export declare function Footnotes({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=footnotes.d.ts.map

package/dist/components/ui/footnotes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footnotes.d.ts","sourceRoot":"","sources":["../../../src/components/ui/footnotes.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDA4C9D"}

package/dist/components/ui/footnotes.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrontmatter, useReferences } from '@myst-theme/providers';
+import { HashLink, MyST } from 'myst-to-react';
+import { selectAll } from 'unist-util-select';
+import { cn } from '../../lib/utils';
+function useFootnotes() {
+    // TODO: parts as well
+    const frontmatter = useFrontmatter();
+    const references = useReferences();
+    const page = references?.article;
+    const parts = Object.values(frontmatter?.parts ?? {})
+        .map((part) => part.mdast)
+        .filter(Boolean);
+    const fullTree = { type: 'page', children: [page, ...parts].filter(Boolean) };
+    const defs = selectAll('footnoteDefinition', fullTree);
+    const refs = selectAll('footnoteReference', fullTree);
+    if (defs.length === 0)
+        return null;
+    return { defs, refs };
+}
+export function Footnotes({ className }) {
+    const footnotes = useFootnotes();
+    if (!footnotes)
+        return null;
+    return (_jsxs("section", { id: "footnotes", className: cn('min-w-full prose dark:prose-invert prose-sm', className), children: [_jsxs("header", { className: "text-lg font-semibold text-stone-900 dark:text-white group", children: ["Footnotes", _jsx(HashLink, { id: "footnotes", title: "Link to Footnotes", hover: true, className: "ml-2" })] }), _jsx("div", { className: cn('pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300'), children: _jsx("ol", { children: footnotes.defs.map((fn) => {
+                        return (_jsx("li", { id: `fn-${fn.identifier}`, className: "group", children: _jsxs("div", { className: "flex flex-row", children: [_jsx("div", { className: "break-words grow", children: _jsx(MyST, { ast: fn.children }) }), _jsx("div", { className: "flex flex-col grow-0", children: footnotes.refs
+                                            .filter((ref) => ref.identifier === fn.identifier)
+                                            .map((ref) => (_jsx(HashLink, { id: `fnref-${ref.key}`, title: "Link to Content", hover: "desktop", className: "p-1", children: "\u21A9", scrollBehavior: "instant" }, ref.key))) })] }) }, fn.key));
+                    }) }) })] }));
+}

package/dist/components/ui/frontmatter-badges.d.ts

@@ -0,0 +1,27 @@
+export declare function DateString({ date, format, spacer, className, }: {
+    date?: string;
+    format?: Intl.DateTimeFormatOptions;
+    spacer?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function TwitterLink({ twitter: possibleLink }: {
+    twitter?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function GitHubLink({ github: possibleLink }: {
+    github?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function OpenAccessBadge({ open_access }: {
+    open_access?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function OrcidBadge({ orcid, className }: {
+    orcid?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function DoiLink({ doi: possibleLink, spacer }: {
+    doi?: string;
+    spacer?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function EmailLink({ email }: {
+    email?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=frontmatter-badges.d.ts.map

package/dist/components/ui/frontmatter-badges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-badges.d.ts","sourceRoot":"","sources":["../../../src/components/ui/frontmatter-badges.tsx"],"names":[],"mappings":"AAOA,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAIC,EACD,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAiBA;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkB1E;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkBvE;AACD,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,kDAiBzE;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAmBtF;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,kDAgBxF;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kDAYtD"}

package/dist/components/ui/frontmatter-badges.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OpenAccessIcon, GithubIcon, XIcon, OrcidIcon } from '@scienceicons/react/24/solid';
+import { cn } from '../../lib/utils';
+import { SimpleTooltip } from './tooltip';
+import { Mail } from 'lucide-react';
+import { HashLink } from 'myst-to-react';
+import { PART_IDS } from './types';
+export function DateString({ date, format = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+}, spacer, className, }) {
+    if (!date)
+        return null;
+    // Parse the date
+    // As this is a YYYY-MM-DD form, the parser interprets this as a UTC date
+    // (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date)
+    const utcDate = new Date(date);
+    // Now cast our UTC-date into the local timezone
+    const localDate = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
+    // Then format as human-readable in the local timezone.
+    const dateString = localDate.toLocaleDateString('en-US', format);
+    return (_jsx("time", { dateTime: date, className: cn(className, { 'text-spacer': spacer }), children: dateString }));
+}
+export function TwitterLink({ twitter: possibleLink }) {
+    if (!possibleLink)
+        return null;
+    const twitter = possibleLink.replace(/^(https?:\/\/)?(?:twitter|x)\.com\//, '');
+    return (_jsx("a", { href: `https://x.com/${twitter}`, title: `X Account: ${twitter}`, target: "_blank", rel: "noopener noreferrer", className: "text-inherit hover:text-inherit", children: _jsx(XIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block opacity-60 hover:opacity-100" }) }));
+}
+export function GitHubLink({ github: possibleLink }) {
+    if (!possibleLink)
+        return null;
+    const github = possibleLink.replace(/^(https?:\/\/)?github\.com\//, '');
+    return (_jsx("a", { href: `https://github.com/${github}`, title: `GitHub Repository: ${github}`, target: "_blank", rel: "noopener noreferrer", className: "text-inherit hover:text-inherit", children: _jsx(GithubIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block opacity-60 hover:opacity-100" }) }));
+}
+export function OpenAccessBadge({ open_access }) {
+    if (!open_access)
+        return null;
+    return (_jsx(HashLink, { id: PART_IDS.license, title: "Open Access", hover: false, scrollBehavior: "instant", className: "text-inherit hover:text-inherit", children: _jsx(OpenAccessIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block opacity-60 hover:opacity-100 hover:text-[#E18435]" }) }));
+}
+export function OrcidBadge({ orcid, className }) {
+    if (!orcid)
+        return null;
+    return (_jsx(SimpleTooltip, { title: "Open ORCID Profile", children: _jsx("a", { href: `https://orcid.org/${orcid}`, target: "_blank", rel: "noopener noreferrer", title: "ORCID", className: cn('text-inherit hover:text-inherit', className), children: _jsx(OrcidIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block opacity-60 hover:opacity-100 hover:text-[#A6CE39]" }) }) }));
+}
+export function DoiLink({ doi: possibleLink, spacer }) {
+    if (!possibleLink)
+        return null;
+    const doi = possibleLink.replace(/^(https?:\/\/)?(dx\.)?doi\.org\//, '');
+    const url = `https://doi.org/${doi}`;
+    return (_jsx("a", { href: `https://doi.org/${doi}`, target: "_blank", rel: "noopener noreferrer", className: cn('font-light hover:underline text-muted-foreground hover:text-foreground', {
+            'text-spacer': spacer,
+        }), children: url }));
+}
+export function EmailLink({ email }) {
+    if (!email)
+        return null;
+    return (_jsx(SimpleTooltip, { title: "Email corresponding author", children: _jsx("a", { href: `mailto:${email}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(Mail, { className: "inline-block ml-1 size-4 text-muted-foreground", "aria-label": "Corresponding author" }) }) }));
+}

package/dist/components/ui/frontmatter.d.ts

@@ -0,0 +1,7 @@
+type FrontmatterProps = {
+    title?: string;
+    subtitle?: string;
+};
+export declare function Frontmatter({ title, subtitle }: FrontmatterProps): import("react/jsx-runtime").JSX.Element;
+export default Frontmatter;
+//# sourceMappingURL=frontmatter.d.ts.map

package/dist/components/ui/frontmatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/frontmatter.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAOhE;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ui/frontmatter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export function Frontmatter({ title, subtitle }) {
+    return (_jsxs("div", { children: [title && _jsx("h1", { className: cn({ 'mb-4': subtitle }), children: title }), subtitle && _jsx("div", { className: "text-muted-foreground text-lg mb-10", children: subtitle })] }));
+}
+export default Frontmatter;

package/dist/components/ui/image.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { GenericParent } from 'myst-common';
+interface ImageProps {
+    src: string;
+    srcOptimized?: string;
+    urlSource?: string;
+    alt?: string;
+    className?: string;
+    showLightbox?: boolean;
+    width?: string | number;
+    height?: string | number;
+    align?: 'left' | 'center' | 'right';
+}
+type Alignment = 'left' | 'center' | 'right';
+export declare function Picture({ ref, className, src, srcOptimized, urlSource, align, alt, width, height, onClick, style, onLoad, onLoadedData, }: {
+    ref?: React.RefObject<HTMLImageElement | HTMLVideoElement | null>;
+    className?: string;
+    src: string;
+    srcOptimized?: string;
+    urlSource?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    align?: Alignment;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    onLoad?: () => void;
+    onLoadedData?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Image({ src, srcOptimized, urlSource, alt, className, showLightbox, width, height, align, caption, }: ImageProps & {
+    caption?: string | GenericParent;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/dist/components/ui/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/ui/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAOjD,UAAU,UAAU;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAiF7C,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,SAAS,EACT,GAAG,EACH,YAAY,EACZ,SAAS,EACT,KAAgB,EAChB,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,GACb,EAAE;IACD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,2CA8CA;AAED,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,YAAY,EACZ,SAAS,EACT,GAAG,EACH,SAAS,EACT,YAAmB,EACnB,KAAK,EACL,MAAM,EACN,KAAgB,EAChB,OAAO,GACR,EAAE,UAAU,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CAAE,2CAgDnD"}

package/dist/components/ui/image.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { useLightbox } from '../providers/lightbox-provider';
+import { ZoomIn } from 'lucide-react';
+import { SimpleTooltip } from './tooltip';
+function getStyleValue(width) {
+    if (typeof width === 'number' && Number.isNaN(width)) {
+        // If it is nan, return undefined.
+        return undefined;
+    }
+    if (typeof width === 'string') {
+        if (width.endsWith('%')) {
+            return width;
+        }
+        else if (width.endsWith('px')) {
+            return Number(width.replace('px', ''));
+        }
+        else if (!Number.isNaN(Number(width))) {
+            return Number(width);
+        }
+        console.log(`Unknown width ${width} in getImageWidth`);
+        return undefined;
+    }
+    return width;
+}
+function alignToMargin(align) {
+    switch (align) {
+        case 'left':
+            return { marginRight: 'auto' };
+        case 'right':
+            return { marginLeft: 'auto' };
+        case 'center':
+            return { margin: '0 auto' };
+        default:
+            return {};
+    }
+}
+function Video({ ref, className, src, urlSource, align = 'center', width, height, onClick, style, onLoadedData, }) {
+    return (_jsx("video", { ref: ref, className: className, style: {
+            width: getStyleValue(width),
+            height: getStyleValue(height),
+            ...alignToMargin(align),
+            ...style,
+        }, src: src, "data-canonical-url": urlSource, autoPlay: true, 
+        // For autoplay, the element needs to be muted to actually start!
+        muted: true, "webkit-playsinline": "true", playsInline: true, loop: true, onClick: onClick, onLoadedData: onLoadedData }));
+}
+export function Picture({ ref, className, src, srcOptimized, urlSource, align = 'center', alt, width, height, onClick, style, onLoad, onLoadedData, }) {
+    if (src.endsWith('.mp4') || urlSource?.endsWith('.mp4')) {
+        return (_jsx(Video, { ref: ref, className: className, width: width, height: height, align: align, src: src, urlSource: urlSource, onClick: onClick, style: style, onLoadedData: onLoadedData }));
+    }
+    const image = (_jsx("img", { ref: ref, style: {
+            width: getStyleValue(width),
+            height: getStyleValue(height),
+            ...alignToMargin(align),
+            ...style,
+        }, src: src, alt: alt, "data-canonical-url": urlSource, 
+        // Don't set className if nested under picture
+        className: cn(srcOptimized ? undefined : className, 'bg-background'), onClick: onClick, draggable: false, onLoad: onLoad }));
+    if (!srcOptimized)
+        return image;
+    return (_jsxs("picture", { className: className, children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));
+}
+export function Image({ src, srcOptimized, urlSource, alt, className, showLightbox = true, width, height, align = 'center', caption, }) {
+    const { openLightbox } = useLightbox();
+    const handleClick = () => {
+        if (!showLightbox)
+            return;
+        const imageData = {
+            src,
+            srcOptimized,
+            urlSource,
+            alt,
+            caption,
+        };
+        openLightbox(imageData);
+    };
+    const isClickable = showLightbox;
+    return (_jsxs("div", { className: cn('overflow-hidden relative group/image', {
+            'transition-opacity cursor-pointer hover:opacity-90': isClickable,
+        }, className), onClick: isClickable ? handleClick : undefined, children: [_jsx(Picture, { src: src, srcOptimized: srcOptimized, urlSource: urlSource, alt: alt, width: width, height: height, align: align, onClick: isClickable ? handleClick : undefined }), isClickable && (_jsx(SimpleTooltip, { title: "Click to enlarge", children: _jsx(ZoomIn, { className: "absolute right-1 bottom-1 w-4 h-4 opacity-0 transition-opacity group-hover/image:opacity-100" }) }))] }));
+}