@curvenote/renderers 0.8.0 → 1.0.0

package/dist/articles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"articles.d.ts","sourceRoot":"","sources":["../src/articles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAuC1D,eAAO,MAAM,kBAAkB;;CAA0C,CAAC"}
+{"version":3,"file":"articles.d.ts","sourceRoot":"","sources":["../src/articles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAoC1D,eAAO,MAAM,kBAAkB;;CAA0C,CAAC"}

package/dist/articles.js

@@ -1,15 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArticleListing } from '@curvenote/theme';
+import { ArticleCard } from '@curvenote-theme/ui';
 const ArticlesRenderer = ({ node }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (_jsxs("div", { children: [!node.error && (_jsx(ArticleListing, { total: node.total, works: node.items, layout: node.layout, narrow: !node.wide, v2: true, show: {
-                    collection: (_a = node['show-collection']) !== null && _a !== void 0 ? _a : false,
-                    kind: (_b = node['show-kind']) !== null && _b !== void 0 ? _b : false,
-                    thumbnail: (_c = node['show-thumbnails']) !== null && _c !== void 0 ? _c : false,
-                    date: (_d = node['show-date']) !== null && _d !== void 0 ? _d : false,
-                    count: (_e = node['show-count']) !== null && _e !== void 0 ? _e : false,
-                    authors: (_f = node['show-authors']) !== null && _f !== void 0 ? _f : false,
-                    doi: (_g = node['show-doi']) !== null && _g !== void 0 ? _g : false,
-                } })), !node.error && node.items.length === 0 && (_jsx("div", { className: "px-2 py-4 text-gray-600 border-gray-500 border-gray-[1px] rounded bg-gray-50", children: "There are no articles in this listing yet." })), node.error && (_jsx("div", { className: "text-red-500 p-4 my-2 bg-red-50 border-[1px] border-red-500 rounded", children: node.error }))] }));
+    return (_jsxs("div", { children: [!node.error && (_jsx("div", { className: "space-y-6", children: node.items.map((article) => (_jsx(ArticleCard, { to: `/articles/${article.slug ?? article.id}`, article: article, showThumbnails: node['show-thumbnails'] ?? false, showAuthors: node['show-authors'] ?? false, showDoi: node['show-doi'] ?? false, showDate: node['show-date'] ?? false }, article.id))) })), !node.error && node.items.length === 0 && (_jsx("div", { className: "px-2 py-4 text-gray-600 border-gray-500 border-gray-[1px] rounded-sm bg-gray-50", children: "There are no articles in this listing yet." })), node.error && (_jsx("div", { className: "text-red-500 p-4 my-2 bg-red-50 border-[1px] border-red-500 rounded-sm", children: node.error }))] }));
 };
 export const ARTICLES_RENDERERS = { curvenoteArticles: ArticlesRenderer };

package/dist/components/admonition.d.ts

@@ -0,0 +1,18 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+export declare enum AdmonitionKind {
+    admonition = "admonition",
+    attention = "attention",
+    caution = "caution",
+    danger = "danger",
+    error = "error",
+    important = "important",
+    hint = "hint",
+    note = "note",
+    seealso = "seealso",
+    tip = "tip",
+    warning = "warning"
+}
+export declare const ADMONITION_RENDERERS: {
+    admonition: NodeRenderer;
+};
+//# sourceMappingURL=admonition.d.ts.map

package/dist/components/admonition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admonition.d.ts","sourceRoot":"","sources":["../../src/components/admonition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA8B1D,oBAAY,cAAc;IACxB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;CACpB;AA8PD,eAAO,MAAM,oBAAoB;;CAAqC,CAAC"}

package/dist/components/admonition.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, SimpleTooltip, } from '@curvenote-theme/ui';
+import { ChevronRight, Link as LinkIcon, Info, AlertTriangle, AlertCircle, XCircle, Megaphone, Lightbulb, Zap, ArrowRight, SquarePen, } from 'lucide-react';
+import { useState } from 'react';
+import { MyST } from 'myst-to-react';
+import { cn } from '@curvenote/react-utils';
+import { toast } from 'sonner';
+import { cva } from 'class-variance-authority';
+import { Link } from 'react-router';
+// Admonition types and their configurations
+export var AdmonitionKind;
+(function (AdmonitionKind) {
+    AdmonitionKind["admonition"] = "admonition";
+    AdmonitionKind["attention"] = "attention";
+    AdmonitionKind["caution"] = "caution";
+    AdmonitionKind["danger"] = "danger";
+    AdmonitionKind["error"] = "error";
+    AdmonitionKind["important"] = "important";
+    AdmonitionKind["hint"] = "hint";
+    AdmonitionKind["note"] = "note";
+    AdmonitionKind["seealso"] = "seealso";
+    AdmonitionKind["tip"] = "tip";
+    AdmonitionKind["warning"] = "warning";
+})(AdmonitionKind || (AdmonitionKind = {}));
+const ADMONITION_CONFIGS = {
+    [AdmonitionKind.note]: { kind: AdmonitionKind.note, color: 'blue', icon: Info },
+    [AdmonitionKind.important]: { kind: AdmonitionKind.important, color: 'blue', icon: Zap },
+    [AdmonitionKind.hint]: { kind: AdmonitionKind.hint, color: 'green', icon: Lightbulb },
+    [AdmonitionKind.seealso]: { kind: AdmonitionKind.seealso, color: 'green', icon: ArrowRight },
+    [AdmonitionKind.tip]: { kind: AdmonitionKind.tip, color: 'green', icon: SquarePen },
+    [AdmonitionKind.attention]: { kind: AdmonitionKind.attention, color: 'yellow', icon: Megaphone },
+    [AdmonitionKind.warning]: { kind: AdmonitionKind.warning, color: 'yellow', icon: AlertTriangle },
+    [AdmonitionKind.caution]: { kind: AdmonitionKind.caution, color: 'yellow', icon: AlertCircle },
+    [AdmonitionKind.danger]: { kind: AdmonitionKind.danger, color: 'red', icon: AlertCircle },
+    [AdmonitionKind.error]: { kind: AdmonitionKind.error, color: 'red', icon: XCircle },
+    [AdmonitionKind.admonition]: { kind: AdmonitionKind.admonition, color: 'blue', icon: Info },
+};
+// CVA variants for admonition styling
+const admonitionVariants = cva('border border-muted border-l-2 bg-muted/30', {
+    variants: {
+        color: {
+            blue: 'border-l-blue-600',
+            green: 'border-l-green-600',
+            yellow: 'border-l-yellow-600',
+            red: 'border-l-red-600',
+        },
+        variant: {
+            default: '',
+            collapsible: 'group',
+        },
+    },
+    defaultVariants: {
+        color: 'blue',
+        variant: 'default',
+    },
+});
+const iconVariants = cva('w-5 h-5 mt-0.5 flex-shrink-0 self-center', {
+    variants: {
+        color: {
+            blue: 'text-blue-600 dark:text-blue-400',
+            green: 'text-green-600 dark:text-green-400',
+            yellow: 'text-yellow-600 dark:text-yellow-400',
+            red: 'text-red-600 dark:text-red-400',
+        },
+    },
+    defaultVariants: {
+        color: 'blue',
+    },
+});
+function getClasses(className) {
+    const classes = className
+        ?.split(' ')
+        .map((s) => s.trim().toLowerCase())
+        .filter((s) => !!s) ?? [];
+    return [...new Set(classes)];
+}
+function getFirstKind({ kind, classes = [], }) {
+    if (kind === AdmonitionKind.note || classes.includes('note')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.note];
+    }
+    if (kind === AdmonitionKind.important || classes.includes('important')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.important];
+    }
+    if (kind === AdmonitionKind.hint || classes.includes('hint')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.hint];
+    }
+    if (kind === AdmonitionKind.seealso || classes.includes('seealso')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.seealso];
+    }
+    if (kind === AdmonitionKind.tip || classes.includes('tip')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.tip];
+    }
+    if (kind === AdmonitionKind.attention || classes.includes('attention')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.attention];
+    }
+    if (kind === AdmonitionKind.warning || classes.includes('warning')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.warning];
+    }
+    if (kind === AdmonitionKind.caution || classes.includes('caution')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.caution];
+    }
+    if (kind === AdmonitionKind.danger || classes.includes('danger')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.danger];
+    }
+    if (kind === AdmonitionKind.error || classes.includes('error')) {
+        return ADMONITION_CONFIGS[AdmonitionKind.error];
+    }
+    return ADMONITION_CONFIGS[AdmonitionKind.note];
+}
+const AdmonitionComponent = ({ id, title, content, defaultOpen, config, isDropdown, hideIcon, className, }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const IconComponent = config.icon;
+    const handleCopyLink = async () => {
+        const url = `${window.location.origin}${window.location.pathname}#${id}`;
+        try {
+            await navigator.clipboard.writeText(url);
+            toast.success('Link copied to clipboard');
+        }
+        catch (err) {
+            console.error('Failed to copy link:', err);
+        }
+    };
+    if (!isDropdown) {
+        return (_jsx("div", { className: "overflow-hidden my-4 rounded-xs", children: _jsxs("div", { className: cn(admonitionVariants({ color: config.color }), className), children: [_jsxs("div", { className: "flex gap-3 items-start px-4 py-2", children: [!hideIcon && (_jsx(IconComponent, { className: iconVariants({ color: config.color }) })), _jsx("div", { className: "flex-1 min-w-0", children: title && _jsx("div", { className: "self-center font-medium text-foreground", children: title }) })] }), _jsx("div", { className: "mx-4 my-2 text-muted-foreground", children: content })] }) }));
+    }
+    return (_jsx("div", { className: "overflow-hidden my-4 rounded-xs", children: _jsx("div", { className: cn(admonitionVariants({
+                color: config.color,
+                variant: 'collapsible',
+            }), className), children: _jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { className: "flex justify-between items-start p-4 w-full text-left cursor-pointer", children: [_jsxs("div", { className: "flex gap-3 items-start", children: [_jsx("div", { className: "flex-shrink-0 mt-1.5", children: _jsx(ChevronRight, { className: cn('w-4 h-4 transition-transform duration-200', {
+                                                    'rotate-90': isOpen,
+                                                }) }) }), _jsxs("div", { className: "flex gap-3 items-start", children: [!hideIcon && (_jsx(IconComponent, { className: iconVariants({ color: config.color }) })), _jsx("span", { className: "font-medium text-foreground", children: title })] })] }), _jsx(SimpleTooltip, { title: "Copy link", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleCopyLink();
+                                        }, className: "opacity-0 transition-opacity group-hover:opacity-100 flex-0", asChild: true, children: _jsx(Link, { to: `#${id}`, children: _jsx(LinkIcon, { className: "w-4 h-4" }) }) }) })] }) }), _jsx(CollapsibleContent, { className: cn('px-7 pb-4 overflow-hidden', 'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down duration-100'), children: _jsx("div", { className: "space-y-3 text-muted-foreground", children: content }) })] }) }) }));
+};
+const AdmonitionRenderer = ({ node, className }) => {
+    const [title, ...rest] = node.children;
+    const classes = getClasses(node.class);
+    const config = getFirstKind({ kind: node.kind, classes });
+    const isDropdown = classes.includes('dropdown');
+    const hideIcon = node.icon === false;
+    const isOpen = node.open === true;
+    const useTitle = title?.type === 'admonitionTitle';
+    return (_jsx(AdmonitionComponent, { id: node.identifier || node.key, title: useTitle ? _jsx(MyST, { ast: [title] }) : undefined, content: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }), defaultOpen: isOpen, config: config, isDropdown: isDropdown, hideIcon: hideIcon, className: className }));
+};
+export const ADMONITION_RENDERERS = { admonition: AdmonitionRenderer };

package/dist/components/cite-figurebar.d.ts

@@ -0,0 +1,5 @@
+export declare function CiteFigureBar({ doi: doiString, className }: {
+    doi: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=cite-figurebar.d.ts.map

package/dist/components/cite-figurebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cite-figurebar.d.ts","sourceRoot":"","sources":["../../src/components/cite-figurebar.tsx"],"names":[],"mappings":"AAwFA,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDA2D/F"}

package/dist/components/cite-figurebar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useSWR from 'swr';
+import { selectAll } from 'unist-util-select';
+import { Image, LightboxContainer } from '@curvenote-theme/ui';
+import { cn } from '@curvenote/react-utils';
+import { MyST } from 'myst-to-react';
+import { doi } from 'doi-utils';
+// Fetcher function for the OpenRxiv API
+async function openRxivFetcher(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch OpenRxiv data: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+}
+// Hook to fetch OpenRxiv data
+function useOpenRxivData(url) {
+    const { data, error, isLoading } = useSWR(url, openRxivFetcher, {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        dedupingInterval: 300000, // Cache for 5 minutes
+        errorRetryCount: 2,
+        errorRetryInterval: 1000,
+    });
+    return {
+        data,
+        error,
+        isLoading,
+    };
+}
+// Specialized image component for figures
+function FigureImageComponent({ image, caption, }) {
+    return (_jsx("div", { className: "overflow-hidden relative bg-gray-50 rounded-lg", children: _jsx(Image, { src: image.url, srcOptimized: image.urlOptimized, urlSource: image.urlSource, alt: image.alt || 'Figure', className: "object-cover w-full h-auto", caption: caption }) }));
+}
+// Main component that renders up to 3 figures
+export function CiteFigureBar({ doi: doiString, className }) {
+    const url = `https://overlay.curvenote.dev/doi/${doi.normalize(doiString)}.json`;
+    const { data, error, isLoading } = useOpenRxivData(url);
+    if (isLoading || error || !data?.mdast) {
+        return null;
+    }
+    // Extract figure containers from the mdast
+    const figures = selectAll('container[kind=figure]', data.mdast);
+    // Take only the first 3 figures
+    const displayFigures = figures.slice(0, 3);
+    if (displayFigures.length === 0) {
+        return null;
+    }
+    const imageList = figures
+        .map((figure) => {
+        const image = figure.children.find((child) => child.type === 'image');
+        const caption = figure.children.find((child) => child.type === 'caption');
+        if (!image)
+            return null;
+        return {
+            src: image.url,
+            srcOptimized: image.urlOptimized,
+            urlSource: image.urlSource,
+            alt: image.alt,
+            caption: caption,
+        };
+    })
+        .filter((image) => image !== null);
+    return (_jsx(LightboxContainer, { imageList: imageList, children: _jsx("div", { className: cn('grid grid-cols-1 gap-4 md:grid-cols-3', className), children: displayFigures.map((figure, index) => {
+                // Find the image within the figure container
+                const image = figure.children.find((child) => child.type === 'image');
+                const caption = figure.children.find((child) => child.type === 'caption');
+                if (!image) {
+                    return null;
+                }
+                return (_jsxs("div", { className: "flex flex-col", children: [_jsx(FigureImageComponent, { image: image, caption: caption }), _jsx(MyST, { ast: caption, className: "text-xs line-clamp-5" })] }, figure.key || index));
+            }) }) }));
+}

package/dist/components/cite-youtube.d.ts

@@ -0,0 +1,6 @@
+export declare function isYouTubeUrl(url?: string): boolean;
+export declare function getYouTubeVideoId(url: string): string | null;
+export declare function CiteYouTube({ url }: {
+    url: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=cite-youtube.d.ts.map

package/dist/components/cite-youtube.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cite-youtube.d.ts","sourceRoot":"","sources":["../../src/components/cite-youtube.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAclD;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkB5D;AAED,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,kDAgBnD"}

package/dist/components/cite-youtube.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function isYouTubeUrl(url) {
+    if (!url)
+        return false;
+    try {
+        const urlObj = new URL(url);
+        const isValid = urlObj.hostname === 'youtube.com' ||
+            urlObj.hostname === 'www.youtube.com' ||
+            urlObj.hostname === 'youtu.be' ||
+            urlObj.hostname === 'www.youtu.be';
+        if (!isValid)
+            return false;
+        return !!getYouTubeVideoId(url);
+    }
+    catch {
+        return false;
+    }
+}
+export function getYouTubeVideoId(url) {
+    try {
+        const urlObj = new URL(url);
+        if (urlObj.hostname === 'youtu.be' || urlObj.hostname === 'www.youtu.be') {
+            return urlObj.pathname.slice(1);
+        }
+        if (urlObj.hostname === 'youtube.com' || urlObj.hostname === 'www.youtube.com') {
+            if (urlObj.pathname === '/watch' && urlObj.searchParams.has('v')) {
+                return urlObj.searchParams.get('v');
+            }
+            if (urlObj.pathname.startsWith('/embed/')) {
+                return urlObj.pathname.slice(7);
+            }
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+export function CiteYouTube({ url }) {
+    const videoId = getYouTubeVideoId(url);
+    if (!videoId)
+        return null;
+    const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+    return (_jsx("div", { className: "aspect-video w-full mb-2", children: _jsx("iframe", { src: embedUrl, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, className: "w-full h-full" }) }));
+}

package/dist/components/cite.d.ts

@@ -0,0 +1,12 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+import type { GenericParent } from 'myst-common';
+export declare const CiteGroup: NodeRenderer<GenericParent>;
+export declare const Cite: ({ label, error, children, className, }: {
+    label?: string;
+    error?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CiteRenderer: NodeRenderer;
+export declare const CITE_RENDERERS: Record<string, NodeRenderer>;
+//# sourceMappingURL=cite.d.ts.map

package/dist/components/cite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cite.d.ts","sourceRoot":"","sources":["../../src/components/cite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAoHjD,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,aAAa,CAiBjD,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,wCAKlB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAkCA,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAO1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAGvD,CAAC"}

package/dist/components/cite.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReferences, useSiteManifest } from '@myst-theme/providers';
+import { doi } from 'doi-utils';
+import { HoverPopover, MyST } from 'myst-to-react';
+import { createId } from 'myst-common';
+import { visit } from 'unist-util-visit';
+import { cn } from '@curvenote/react-utils';
+import { InlineError } from './inlineError';
+import { useOpenAlexWork } from '../hooks/useOpenAlex';
+import { reverseInvertedAbstract, formatAuthors } from '../utils/abstract';
+import { LinkCard } from '@curvenote-theme/ui';
+import { CiteFigureBar } from './cite-figurebar';
+import { fromHtml } from 'hast-util-from-html';
+import { toMdast } from 'hast-util-to-mdast';
+import { CiteYouTube, isYouTubeUrl } from './cite-youtube';
+// TODO:
+// this should be turned into an upgrade step when we do citations.
+// We are only expecting very basic HTML in the citations, so this should be fine.
+function convertHtmlToMdast(html) {
+    const hast = fromHtml(html, { fragment: true });
+    const mdast = toMdast(hast);
+    // Ensure all nodes have a keys for react rendering errors
+    visit(mdast, (node) => {
+        node.key ??= createId();
+    });
+    return mdast;
+}
+function useNumberedReferences() {
+    const config = useSiteManifest();
+    const numbered_references = !!config?.options?.numbered_references;
+    return numbered_references;
+}
+function CiteChild({ html, doi: doiString, url }) {
+    const { data: openAlexData, error, isLoading } = useOpenAlexWork(doiString);
+    if (doiString && !error) {
+        const abstract = openAlexData?.abstract_inverted_index
+            ? reverseInvertedAbstract(openAlexData.abstract_inverted_index)
+            : '';
+        const authors = formatAuthors(openAlexData?.authorships);
+        const journal = openAlexData?.primary_location?.source?.display_name;
+        const year = openAlexData?.publication_year;
+        return (_jsx(LinkCard, { url: doi.buildUrl(doiString), title: journal && year ? `${journal} (${year})` : journal || year, size: "lg", description: _jsxs("div", { className: "flex flex-col gap-3 max-w-none prose", children: [openAlexData?.title && (_jsx("div", { className: "flex flex-col gap-1 font-bold", children: _jsx("div", { className: "text-sm leading-relaxed", children: openAlexData.title.replace(/<[^>]+>/g, '') }) })), authors && (_jsx("div", { className: "flex flex-col gap-1", children: _jsx("div", { className: "text-sm", children: authors }) })), abstract && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs font-bold", children: "Abstract" }), _jsx("div", { className: "overflow-y-auto max-h-48 text-xs leading-relaxed", children: abstract })] })), _jsx(CiteFigureBar, { doi: doiString }), isLoading && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: "DOI" }), _jsx("div", { className: "text-sm", children: doiString }), _jsx("div", { className: "text-xs text-gray-500", children: "Loading additional information..." })] })), error && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: "DOI" }), _jsx("div", { className: "text-sm", children: doiString }), _jsx("div", { className: "text-xs text-gray-500", children: "Unable to load additional information" })] })), !isLoading && !error && !openAlexData && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: "DOI" }), _jsx("div", { className: "text-sm", children: doiString })] }))] }) }));
+    }
+    const mdast = convertHtmlToMdast(html);
+    return (_jsxs("div", { className: "hover-document article w-[500px] sm:max-w-[500px] p-3", children: [url && isYouTubeUrl(url) && _jsx(CiteYouTube, { url: url }), _jsx(MyST, { ast: mdast })] }));
+}
+export const CiteGroup = ({ node, className }) => {
+    const allCite = node.children?.every((child) => child.type === 'cite') ?? false;
+    return (_jsx("span", { className: cn({
+            'cite-group': allCite,
+            'xref-group': !allCite,
+            narrative: node.kind === 'narrative',
+            parenthetical: node.kind === 'parenthetical',
+        }, className), children: _jsx(MyST, { ast: node.children }) }));
+};
+export const Cite = ({ label, error, children, className, }) => {
+    const references = useReferences();
+    if (!label) {
+        return (_jsx(InlineError, { value: "cite (no label)", message: 'Citation Has No Label', className: className }));
+    }
+    const { html, doi: doiString, url: refUrl } = references?.cite?.data[label] ?? {};
+    if (error) {
+        return _jsx(InlineError, { value: label, message: 'Citation Not Found', className: className });
+    }
+    const url = doiString ? doi.buildUrl(doiString) : refUrl;
+    const isButtonLike = (className ?? '').split(' ').includes('button');
+    return (_jsx(HoverPopover, { openDelay: 300, card: _jsx(CiteChild, { html: html, doi: doiString, url: url }), children: _jsxs("cite", { className: className, children: [url && (_jsx("a", { href: url, target: "_blank", rel: "noreferrer", className: cn({ 'hover-link': !isButtonLike }), children: children })), !url && _jsx("span", { className: "hover-link", children: children })] }) }));
+};
+export const CiteRenderer = ({ node, className }) => {
+    const numbered = useNumberedReferences();
+    return (_jsx(Cite, { label: node.label, error: node.error, className: cn(className, node.class), children: numbered && node.kind === 'parenthetical' ? node.enumerator : _jsx(MyST, { ast: node.children }) }));
+};
+export const CITE_RENDERERS = {
+    citeGroup: CiteGroup,
+    cite: CiteRenderer,
+};

package/dist/components/definition-list.d.ts

@@ -0,0 +1,3 @@
+import type { NodeRenderers } from '@myst-theme/providers';
+export declare const DEFINITION_LIST_RENDERERS: NodeRenderers;
+//# sourceMappingURL=definition-list.d.ts.map

package/dist/components/definition-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition-list.d.ts","sourceRoot":"","sources":["../../src/components/definition-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAuCzE,eAAO,MAAM,yBAAyB,EAAE,aAIvC,CAAC"}

package/dist/components/definition-list.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@curvenote/react-utils';
+import { HashLink, MyST } from 'myst-to-react';
+const DefinitionListRenderer = ({ node, className }) => {
+    return (_jsx("dl", { className: cn('my-5', className), id: node.html_id || node.identifier || node.key, children: _jsx(MyST, { ast: node.children }) }));
+};
+const DefinitionTermRenderer = ({ node, className }) => {
+    const allowedStrongTypes = new Set(['text', 'emphasis']);
+    const makeStrong = node.children?.reduce((allowed, n) => allowed && allowedStrongTypes.has(n.type), true) ?? false;
+    const id = node.html_id || node.identifier || node.key;
+    return (_jsxs("dt", { id: id, className: cn('group', className), children: [makeStrong ? (_jsx("strong", { children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children })), _jsx(HashLink, { id: id, title: "Link to Definition Term", hover: true, className: "ml-2" })] }));
+};
+const DefinitionDescriptionRenderer = ({ node, className }) => {
+    return (_jsx("dd", { id: node.html_id || node.identifier || node.key, className: className, children: _jsx(MyST, { ast: node.children }) }));
+};
+export const DEFINITION_LIST_RENDERERS = {
+    definitionList: DefinitionListRenderer,
+    definitionTerm: DefinitionTermRenderer,
+    definitionDescription: DefinitionDescriptionRenderer,
+};

package/dist/components/faq.d.ts

@@ -0,0 +1,5 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+export declare const FAQ_RENDERERS: {
+    admonition: NodeRenderer;
+};
+//# sourceMappingURL=faq.d.ts.map

package/dist/components/faq.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../../src/components/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA6F1D,eAAO,MAAM,aAAa;;CAA8B,CAAC"}

package/dist/components/faq.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, SimpleTooltip, } from '@curvenote-theme/ui';
+import { ChevronRight, Link } from 'lucide-react';
+import { useState } from 'react';
+import { MyST } from 'myst-to-react';
+import { cn } from '@curvenote/react-utils';
+import { toast } from 'sonner';
+const FAQItemComponent = ({ id, title, content, defaultOpen, }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const handleCopyLink = async () => {
+        const url = `${window.location.origin}${window.location.pathname}#${id}`;
+        try {
+            await navigator.clipboard.writeText(url);
+            toast.success('Link copied to clipboard');
+        }
+        catch (err) {
+            console.error('Failed to copy link:', err);
+        }
+    };
+    return (_jsx("div", { className: "border-b border-muted-background group", children: _jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { className: "flex justify-between items-start py-4 w-full text-left cursor-pointer", children: [_jsxs("div", { className: "flex gap-3 items-start", children: [_jsx("div", { className: "flex-shrink-0 mt-1.5", children: _jsx(ChevronRight, { className: cn('w-4 h-4 transition-transform duration-200', {
+                                                'rotate-90': isOpen,
+                                            }) }) }), _jsx("span", { className: "font-medium text-foreground", children: title })] }), _jsx(SimpleTooltip, { title: "Copy link", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleCopyLink();
+                                    }, className: "opacity-0 transition-opacity group-hover:opacity-100 flex-0", children: _jsx(Link, { className: "w-4 h-4" }) }) })] }) }), _jsx(CollapsibleContent, { className: "px-7 pb-4 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden duration-100", children: _jsx("div", { className: "space-y-3 text-gray-700", children: content }) })] }) }));
+};
+const FAQRenderer = ({ node, className }) => {
+    const [title, ...rest] = node.children;
+    const classes = node.class || [];
+    const isOpen = node.open === true;
+    const useTitle = title?.type === 'admonitionTitle';
+    return (_jsx(FAQItemComponent, { id: node.identifier || node.key, title: useTitle ? _jsx(MyST, { ast: [title] }) : undefined, content: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }), defaultOpen: isOpen }));
+};
+export const FAQ_RENDERERS = { admonition: FAQRenderer };

package/dist/components/hero.css

@@ -0,0 +1,6 @@
+/* Hero Component Max-Width Classes */
+@source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{[0%],[5%],[10%],[15%],[20%],[25%],[30%],[35%],[40%],[45%],[50%],[55%],[60%],[65%],[70%],[75%],[80%],[85%],[90%],[95%],[100%]}");
+
+/* Hero Component Overlay Classes */
+@source inline("{sm:,md:,lg:,xl:,2xl:,}bg-{white,black}/{0,10,20,30,40,50,60,70,80,90,100}");
+@source inline("{sm:,md:,lg:,xl:,2xl:,}backdrop-blur{-xs,-sm,-md,-lg}");

package/dist/components/hero.d.ts

@@ -0,0 +1,28 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+import './hero.css';
+interface HeroProps {
+    className?: string;
+    backgroundImage?: string;
+    kicker?: React.ReactNode;
+    title: React.ReactNode;
+    content?: React.ReactNode;
+    actions?: Array<{
+        label: React.ReactNode;
+        href?: string;
+        variant?: 'default' | 'outline';
+        className?: string;
+        onClick?: () => void;
+    }>;
+    light?: boolean;
+    footer?: React.ReactNode;
+    maxWidth?: number | [number, number?, number?, number?, number?];
+    overlay?: number | [number, number?, number?, number?, number?];
+}
+export declare function HeroComponent({ className, backgroundImage, kicker, title, content, actions, footer, maxWidth, overlay, light, }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export declare const HERO_RENDERERS: {
+    block: {
+        'block[kind=hero]': NodeRenderer;
+    };
+};
+export {};
+//# sourceMappingURL=hero.d.ts.map

package/dist/components/hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,OAAO,YAAY,CAAC;AAEpB,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;QAChC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;CACjE;AAiDD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAa,GACd,EAAE,SAAS,2CA8FX;AAuCD,eAAO,MAAM,cAAc;;;;CAAkD,CAAC"}

package/dist/components/hero.example.d.ts

@@ -0,0 +1,3 @@
+export declare const HeroExamples: () => import("react/jsx-runtime").JSX.Element;
+export default HeroExamples;
+//# sourceMappingURL=hero.example.d.ts.map

package/dist/components/hero.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.example.d.ts","sourceRoot":"","sources":["../../src/components/hero.example.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,+CAsDxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/hero.example.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { HeroComponent } from './hero';
+// Example usage of the HeroComponent
+export const HeroExamples = () => {
+    return (_jsxs("div", { className: "", children: [_jsx(HeroComponent, { backgroundImage: "https://agu.curve.space/build/_assets/header-AYU7MMYZ.webp", title: "Notebooks Now!", content: "In 2024, AGU will be developing the capability for authors to publish computational notebooks alongside their AGU publications. If you would like to be involved in this initiative, please indicate your interest at submission time or by completing the form below, and we will get in touch.", maxWidth: [100, 70, 70, 60, 50], overlay: [60, 30, 30, -10, 10], actions: [
+                    {
+                        label: 'Subscribe for Updates',
+                        href: '/subscribe',
+                        variant: 'default',
+                    },
+                    {
+                        label: 'Read Editorial',
+                        href: '/editorial',
+                        variant: 'outline',
+                    },
+                ], footer: "Note: as we are rolling out this pilot initiative, not all submissions will be chosen for this new publication format. Our aim is by the end of 2024 that this submission type can be chosen for any new AGU publication." }), _jsx(HeroComponent, { kicker: "SciPy Proceedings", backgroundImage: "https://cdn.curvenote.com/static/site/scipy/scipy-hero-v2-tilt.webp", title: "Python in Science Conferences", content: "Join us for an exciting exploration of how Python is transforming scientific research and conference presentations. Learn about the latest tools, techniques, and best practices.", maxWidth: [100, 60, 60, 50, 40], actions: [
+                    {
+                        label: 'Register Now',
+                        href: '/register',
+                        variant: 'default',
+                    },
+                    {
+                        label: 'View Schedule',
+                        href: '/schedule',
+                        variant: 'outline',
+                    },
+                ] }), _jsx(HeroComponent, { className: "bg-gradient-to-r from-blue-900 to-purple-900", title: "Simple Hero Section", content: "This is a hero section without a background image, using a gradient background instead." })] }));
+};
+export default HeroExamples;