@manta-eu/react 0.1.0

package/dist/components/modal/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "#style";
+export function Dialog(props) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+export function DialogTrigger(props) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+export function DialogPortal(props) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+export function DialogClose(props) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+export const DialogOverlay = forwardRef(function DialogOverlay({ className, ...props }, ref) {
+    return (_jsx(DialogPrimitive.Overlay, { ref: ref, role: "dialog-overlay", className: cn("fixed inset-0 z-50 bg-secondary/25 font-inherit backdrop-blur-xs", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:duration-200 data-[state=closed]:duration-150", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:pointer-events-none", "motion-reduce:animate-none", 
+        // A closed overlay stays mounted and click-dead over the app: Radix writes
+        // `pointer-events: auto` inline, beating the class above, and `animationend` never reaches
+        // Presence so the node is never removed. `display: none` wins over both, at the cost of the
+        // 150ms fade-out. Every overlay in this package does the same.
+        "data-[state=closed]:hidden", className), ...props }));
+});
+export const DialogContent = forwardRef(function DialogContent({ className, children, showCloseButton = true, overlayClassName, fullScreenOnMobile = false, ...props }, ref) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn("bg-card fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[700px] translate-x-[-50%] translate-y-[-50%] gap-6 max-h-[calc(100vh-40px)] overflow-scroll rounded-xl-v4 p-8 shadow-lg border border-default-border", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:duration-200 data-[state=closed]:duration-150", "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-[state=closed]:pointer-events-none", "motion-reduce:animate-none", fullScreenOnMobile && [
+                    "max-sm:top-0! max-sm:left-0! max-sm:translate-x-0! max-sm:translate-y-0!",
+                    "max-sm:h-dvh! max-sm:max-h-dvh! max-sm:w-full! max-sm:max-w-none!",
+                    "max-sm:flex! max-sm:flex-col! max-sm:rounded-none! max-sm:border-0!",
+                ], className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: cn("ring-offset-card focus:ring-active-border/50 data-[state=open]:bg-accent", "absolute top-4 right-4 rounded-sm-v4 opacity-70 data-[state=open]:text-muted-foreground", "hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", "transition-opacity motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+});
+export function DialogHeader(props) {
+    const { className, ...rest } = props;
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...rest }));
+}
+export function DialogFooter(props) {
+    const { className, ...rest } = props;
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...rest }));
+}
+export const DialogTitle = forwardRef(function DialogTitle({ className, text, titleClassName, children, ...props }, ref) {
+    return (_jsxs(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: className, ...props, children: [_jsx("p", { className: cn("typography-heading", titleClassName), children: text }), children] }));
+});
+export const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
+    return (_jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn("typography-caption", "text-muted-foreground", className), ...props }));
+});
+export const DialogBody = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: className, ...props })));
+DialogBody.displayName = "DialogBody";

package/dist/components/onboarding/MantaIntroAnimation.d.ts

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

package/dist/components/onboarding/MantaIntroAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MantaIntroAnimation.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/MantaIntroAnimation.tsx"],"names":[],"mappings":"AAcA,wBAAgB,mBAAmB,4CASlC"}

package/dist/components/onboarding/MantaIntroAnimation.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MantaGridAnimation } from "../branding/MantaGridAnimation.js";
+import { MantaLogo } from "#components/manta-logo/index";
+const gridConfig = {
+    columnCount: 14,
+    rowCount: 8,
+    cellSizeRem: 3,
+    fadeColor: "var(--color-card)",
+    streakLengthRem: [14, 24],
+    streakDurationSeconds: [1.2, 2],
+    spawnInitialDelayMs: 200,
+    spawnIntervalMs: [700, 1400],
+};
+export function MantaIntroAnimation() {
+    return (_jsxs("div", { "aria-hidden": "true", className: "relative flex h-[24rem] w-full items-center justify-center overflow-hidden", children: [_jsx(MantaGridAnimation, { config: gridConfig }), _jsx("div", { className: "relative z-10 flex items-center justify-center", children: _jsx(MantaLogo, { size: 48, className: "text-default-foreground" }) })] }));
+}

package/dist/components/onboarding/SidebarSpotlight.d.ts

@@ -0,0 +1,7 @@
+type SidebarSpotlightProps = {
+    active: boolean;
+    targetId?: string;
+};
+export declare function SidebarSpotlight(props: SidebarSpotlightProps): import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=SidebarSpotlight.d.ts.map

package/dist/components/onboarding/SidebarSpotlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSpotlight.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/SidebarSpotlight.tsx"],"names":[],"mappings":"AAOA,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sCAoH5D"}

package/dist/components/onboarding/SidebarSpotlight.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { useReducedMotion } from "motion/react";
+import { useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+export function SidebarSpotlight(props) {
+    const { active, targetId } = props;
+    const cloneRef = useRef(null);
+    const ringRef = useRef(null);
+    const ringPlacedRef = useRef(false);
+    const shouldRender = active && isPresent(targetId);
+    const prefersReducedMotion = useReducedMotion();
+    useLayoutEffect(() => {
+        if (!shouldRender) {
+            ringPlacedRef.current = false;
+            return;
+        }
+        const cloneHost = cloneRef.current;
+        const ring = ringRef.current;
+        const target = document.querySelector(`[data-nav-id="${targetId}"]`);
+        if (!cloneHost || !ring || !target)
+            return;
+        const clone = target.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+            cloneHost.replaceChildren(clone);
+        }
+        function revealClone() {
+            const host = cloneRef.current;
+            if (host)
+                host.style.opacity = "1";
+        }
+        function positionSpotlight() {
+            const host = cloneRef.current;
+            const currentRing = ringRef.current;
+            const currentTarget = document.querySelector(`[data-nav-id="${targetId}"]`);
+            if (!host || !currentRing || !currentTarget)
+                return;
+            requestAnimationFrame(() => {
+                const rect = currentTarget.getBoundingClientRect();
+                host.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+                host.style.width = `${rect.width}px`;
+                host.style.height = `${rect.height}px`;
+                if (!ringPlacedRef.current) {
+                    currentRing.style.transition = "none";
+                    currentRing.style.transform = `translate(${rect.left}px, 0px)`;
+                    currentRing.style.width = `${rect.width}px`;
+                    currentRing.style.height = `${rect.height}px`;
+                    currentRing.getBoundingClientRect();
+                    currentRing.style.transition = "";
+                    ringPlacedRef.current = true;
+                }
+                currentRing.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+                currentRing.style.width = `${rect.width}px`;
+                currentRing.style.height = `${rect.height}px`;
+            });
+        }
+        function handleRingTransitionEnd(event) {
+            if (event.propertyName === "transform")
+                revealClone();
+        }
+        cloneHost.style.transition = "none";
+        cloneHost.style.opacity = "0";
+        cloneHost.getBoundingClientRect();
+        cloneHost.style.transition = "";
+        positionSpotlight();
+        if (prefersReducedMotion) {
+            revealClone();
+        }
+        else {
+            ring.addEventListener("transitionend", handleRingTransitionEnd);
+        }
+        const revealFallback = window.setTimeout(revealClone, 500);
+        window.addEventListener("resize", positionSpotlight);
+        window.addEventListener("scroll", positionSpotlight, true);
+        const observer = new ResizeObserver(positionSpotlight);
+        observer.observe(target);
+        return () => {
+            window.clearTimeout(revealFallback);
+            ring.removeEventListener("transitionend", handleRingTransitionEnd);
+            window.removeEventListener("resize", positionSpotlight);
+            window.removeEventListener("scroll", positionSpotlight, true);
+            observer.disconnect();
+            cloneHost.replaceChildren();
+        };
+    }, [shouldRender, targetId]);
+    if (!shouldRender)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { ref: cloneRef, "aria-hidden": "true", className: "fixed left-0 top-0 z-[55] bg-sidebar pointer-events-none opacity-0 transition-opacity duration-300 ease-out motion-reduce:transition-none" }), _jsx("div", { ref: ringRef, "aria-hidden": "true", "data-sidebar-highlight": "ring", className: "fixed left-0 top-0 z-[56] rounded-xl pointer-events-none transition-all duration-300 ease-out motion-reduce:transition-none" })] }), document.body);
+}

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

@@ -0,0 +1,6 @@
+export { OnboardingModal } from "#components/onboarding-modal/index";
+export type { OnboardingDismissReason, OnboardingModalProps, OnboardingStep } from "#components/onboarding-modal/index";
+export { MantaIntroAnimation } from "./MantaIntroAnimation.js";
+export { SidebarSpotlight } from "./SidebarSpotlight.js";
+export { defaultOnboardingSteps } from "./onboarding-steps.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACxH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/onboarding/index.js

@@ -0,0 +1,4 @@
+export { OnboardingModal } from "#components/onboarding-modal/index";
+export { MantaIntroAnimation } from "./MantaIntroAnimation.js";
+export { SidebarSpotlight } from "./SidebarSpotlight.js";
+export { defaultOnboardingSteps } from "./onboarding-steps.js";

package/dist/components/onboarding/onboarding-steps.d.ts

@@ -0,0 +1,3 @@
+import type { OnboardingStep } from "#components/onboarding-modal/index";
+export declare const defaultOnboardingSteps: OnboardingStep[];
+//# sourceMappingURL=onboarding-steps.d.ts.map

package/dist/components/onboarding/onboarding-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-steps.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/onboarding-steps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEzE,eAAO,MAAM,sBAAsB,EAAE,cAAc,EA4BlD,CAAC"}

package/dist/components/onboarding/onboarding-steps.js

@@ -0,0 +1,27 @@
+import { createElement } from "react";
+import { MantaIntroAnimation } from "./MantaIntroAnimation.js";
+export const defaultOnboardingSteps = [
+    {
+        title: "Meet Manta",
+        description: "Manta is your AI marketing analyst. Connect your data and ask questions in plain English to get clear answers about your campaigns, customers, and growth.",
+        imageContent: createElement(MantaIntroAnimation),
+    },
+    {
+        title: "What is an action plan",
+        description: "An action plan is a set of prioritized next steps Manta generates from your data. Manta creates action plans autonomously for you, and you can also ask Manta to create one directly in the chat.",
+        image: { src: "/static/images/onboarding-step-action-plans.jpg", alt: "Action plan illustration" },
+        sidebarHighlightId: "nav-plans",
+    },
+    {
+        title: "Connect more services",
+        description: "Bring in more data sources to unlock deeper insights. Connect ad platforms, ecommerce, and analytics from the integrations page.",
+        image: { src: "/static/images/onboarding-step-integrations.jpg", alt: "Integrations illustration" },
+        sidebarHighlightId: "nav-integrations",
+        hidden: true,
+    },
+    {
+        title: "Try your first chat",
+        description: 'Ask something like "What is my best performing campaign?" or "Where should I focus this week?". Manta takes it from there.',
+        primaryButtonLabel: "Let's start",
+    },
+];

package/dist/components/onboarding-modal/index.d.ts

@@ -0,0 +1,12 @@
+import type { OnboardingDismissReason, OnboardingStep } from "./types.js";
+export type { OnboardingDismissReason, OnboardingStep } from "./types.js";
+export type OnboardingModalProps = {
+    open: boolean;
+    steps: OnboardingStep[];
+    onComplete: () => void;
+    onDismiss: (reason: OnboardingDismissReason) => void;
+    onStepChange?: (step: OnboardingStep, index: number) => void;
+    contentOffsetLeft?: number;
+};
+export declare function OnboardingModal(props: OnboardingModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/onboarding-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-modal/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIvE,YAAY,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kDAiH1D"}

package/dist/components/onboarding-modal/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "../modal/index.js";
+import { clampStepIndex, getPrimaryButtonLabel, getVisibleSteps, isFirstStep, isLastStep, stepHasImage, } from "./navigation.js";
+import { useImagePreload } from "./use-image-preload.js";
+import { cn } from "#style";
+export function OnboardingModal(props) {
+    const { open, steps, onComplete, onDismiss, onStepChange, contentOffsetLeft } = props;
+    const reduceMotion = useReducedMotion();
+    const dismissReasonRef = useRef("close-button");
+    const visibleSteps = useMemo(() => getVisibleSteps(steps), [steps]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        if (open) {
+            setCurrentIndex(0);
+            dismissReasonRef.current = "close-button";
+        }
+    }, [open]);
+    const preloadSources = useMemo(() => visibleSteps.map((step) => step.image?.src).filter((src) => isPresent(src)), [visibleSteps]);
+    const imagesReady = useImagePreload(preloadSources);
+    const currentStep = visibleSteps[currentIndex];
+    useEffect(() => {
+        if (open && currentStep)
+            onStepChange?.(currentStep, currentIndex);
+    }, [open, currentIndex, currentStep, onStepChange]);
+    const isFirst = isFirstStep(currentIndex);
+    const isLast = isLastStep(currentIndex, visibleSteps.length);
+    const handleNext = useCallback(() => {
+        if (isLast) {
+            onComplete();
+            return;
+        }
+        setCurrentIndex((value) => clampStepIndex(value + 1, visibleSteps.length));
+    }, [isLast, onComplete, visibleSteps.length]);
+    const handleBack = useCallback(() => {
+        setCurrentIndex((value) => clampStepIndex(value - 1, visibleSteps.length));
+    }, [visibleSteps.length]);
+    const handleSkip = useCallback(() => {
+        onDismiss("skip");
+    }, [onDismiss]);
+    const handleOpenChange = useCallback((next) => {
+        if (!next)
+            onDismiss(dismissReasonRef.current);
+    }, [onDismiss]);
+    if (!currentStep)
+        return null;
+    const hasImage = stepHasImage(currentStep);
+    const primaryLabel = getPrimaryButtonLabel(currentStep, isLast);
+    const primaryDisabled = !imagesReady;
+    const contentStyle = isPresent(contentOffsetLeft)
+        ? {
+            left: `calc(50% + ${contentOffsetLeft / 2}px)`,
+            ...(reduceMotion ? {} : { transition: "left 400ms cubic-bezier(0.32, 0.72, 0, 1)" }),
+        }
+        : undefined;
+    return (_jsx(Dialog, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { fullScreenOnMobile: true, className: "z-[60] max-w-2xl p-0 gap-0 overflow-hidden", style: contentStyle, onEscapeKeyDown: () => (dismissReasonRef.current = "escape"), onInteractOutside: () => (dismissReasonRef.current = "outside"), children: [_jsxs("div", { className: "contents max-sm:flex max-sm:min-h-0 max-sm:flex-1 max-sm:flex-col max-sm:overflow-y-auto", children: [_jsx(motion.div, { initial: false, animate: { height: hasImage ? "auto" : 0 }, transition: reduceMotion ? { duration: 0 } : { duration: 0.35, ease: [0.32, 0.72, 0, 1] }, className: "overflow-hidden", children: _jsxs(DialogBody, { className: "flex flex-col items-center justify-center bg-card p-6", children: [currentStep.imageContent, currentStep.image && (_jsx("img", { src: currentStep.image.src, alt: currentStep.image.alt ?? "", className: "h-[24rem] w-full object-contain max-sm:h-48" }))] }) }), _jsxs("div", { className: "p-6 gap-3 grid", children: [_jsx(DialogTitle, { text: currentStep.title }), _jsx(DialogDescription, { children: currentStep.description })] })] }), _jsxs(DialogFooter, { className: "flex flex-row! justify-between! gap-3 p-6 border-t border-muted-border max-sm:shrink-0 max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))]", children: [_jsx(StepIndicator, { total: visibleSteps.length, current: currentIndex }), _jsxs("div", { className: "flex flex-row gap-2", children: [!isFirst && _jsx(Button, { variant: "tertiary", label: "Back", onClick: handleBack }), !isLast && _jsx(Button, { variant: "tertiary", label: "Skip", onClick: handleSkip }), _jsx(Button, { variant: "primary", label: primaryLabel, onClick: handleNext, disabled: primaryDisabled })] })] })] }) }));
+}
+function StepIndicator(props) {
+    const { total, current } = props;
+    if (total <= 1)
+        return _jsx("span", { "aria-hidden": "true" });
+    return (_jsx("div", { className: "flex flex-row items-center gap-1.5", "aria-label": `Step ${current + 1} of ${total}`, children: Array.from({ length: total }).map((_, index) => (_jsx("span", { className: cn("transition-all duration-200 rounded-full h-1.5", index === current ? "w-6 bg-active-border" : "w-1.5 bg-muted-border") }, index))) }));
+}

package/dist/components/onboarding-modal/navigation.d.ts

@@ -0,0 +1,8 @@
+import type { OnboardingStep } from "./types.js";
+export declare function getVisibleSteps(steps: readonly OnboardingStep[]): OnboardingStep[];
+export declare function clampStepIndex(index: number, stepCount: number): number;
+export declare function isFirstStep(index: number): boolean;
+export declare function isLastStep(index: number, stepCount: number): boolean;
+export declare function getPrimaryButtonLabel(step: OnboardingStep | undefined, lastStep: boolean): string;
+export declare function stepHasImage(step: OnboardingStep): boolean;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/components/onboarding-modal/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-modal/navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,oBAE/D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAI9D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,WAExC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,WAE1D;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,UAExF;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,WAEhD"}

package/dist/components/onboarding-modal/navigation.js

@@ -0,0 +1,21 @@
+import { isPresent } from "@manta-eu/lib/present";
+export function getVisibleSteps(steps) {
+    return steps.filter((step) => !step.hidden);
+}
+export function clampStepIndex(index, stepCount) {
+    if (stepCount <= 0)
+        return 0;
+    return Math.min(Math.max(index, 0), stepCount - 1);
+}
+export function isFirstStep(index) {
+    return index <= 0;
+}
+export function isLastStep(index, stepCount) {
+    return index >= stepCount - 1;
+}
+export function getPrimaryButtonLabel(step, lastStep) {
+    return step?.primaryButtonLabel ?? (lastStep ? "Get started" : "Next");
+}
+export function stepHasImage(step) {
+    return isPresent(step.image) || isPresent(step.imageContent);
+}

package/dist/components/onboarding-modal/preload-images.d.ts

@@ -0,0 +1,7 @@
+export type PreloadImagesOptions = {
+    subscribe: (source: string, onSettled: () => void) => () => void;
+    onAllSettled: () => void;
+    timeoutMs: number;
+};
+export declare function preloadImages(sources: readonly string[], options: PreloadImagesOptions): () => void;
+//# sourceMappingURL=preload-images.d.ts.map

package/dist/components/onboarding-modal/preload-images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload-images.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-modal/preload-images.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACjE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,EAAE,OAAO,EAAE,oBAAoB,GAAG,MAAM,IAAI,CAuCnG"}

package/dist/components/onboarding-modal/preload-images.js

@@ -0,0 +1,32 @@
+export function preloadImages(sources, options) {
+    const { subscribe, onAllSettled, timeoutMs } = options;
+    if (sources.length === 0) {
+        onAllSettled();
+        return () => { };
+    }
+    let settled = false;
+    let remaining = sources.length;
+    function finish() {
+        if (settled)
+            return;
+        settled = true;
+        clearTimeout(timeoutId);
+        onAllSettled();
+    }
+    const timeoutId = setTimeout(finish, timeoutMs);
+    function handleSourceSettled() {
+        if (settled)
+            return;
+        remaining -= 1;
+        if (remaining <= 0)
+            finish();
+    }
+    const disposers = sources.map((source) => subscribe(source, handleSourceSettled));
+    return () => {
+        settled = true;
+        clearTimeout(timeoutId);
+        for (const dispose of disposers) {
+            dispose();
+        }
+    };
+}

package/dist/components/onboarding-modal/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type OnboardingStep = {
+    title: string;
+    description: string;
+    image?: {
+        src: string;
+        alt?: string;
+    };
+    imageContent?: ReactNode;
+    sidebarHighlightId?: string;
+    primaryButtonLabel?: string;
+    hidden?: boolean;
+};
+export type OnboardingDismissReason = "close-button" | "skip" | "escape" | "outside";
+//# sourceMappingURL=types.d.ts.map

package/dist/components/onboarding-modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC"}

package/dist/components/onboarding-modal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/onboarding-modal/use-image-preload.d.ts

@@ -0,0 +1,2 @@
+export declare function useImagePreload(sources: readonly string[]): boolean;
+//# sourceMappingURL=use-image-preload.d.ts.map

package/dist/components/onboarding-modal/use-image-preload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-preload.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-modal/use-image-preload.ts"],"names":[],"mappings":"AAkBA,wBAAgB,eAAe,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,WAmBzD"}

package/dist/components/onboarding-modal/use-image-preload.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { preloadImages } from "./preload-images.js";
+const preloadTimeoutMs = 10_000;
+function subscribeToImage(source, onSettled) {
+    const image = new Image();
+    image.onload = onSettled;
+    image.onerror = onSettled;
+    image.src = source;
+    return () => {
+        image.onload = null;
+        image.onerror = null;
+    };
+}
+export function useImagePreload(sources) {
+    const [allLoaded, setAllLoaded] = useState(sources.length === 0);
+    useEffect(() => {
+        if (sources.length === 0) {
+            setAllLoaded(true);
+            return;
+        }
+        setAllLoaded(false);
+        return preloadImages(sources, {
+            subscribe: subscribeToImage,
+            onAllSettled: () => setAllLoaded(true),
+            timeoutMs: preloadTimeoutMs,
+        });
+    }, [sources]);
+    return allLoaded;
+}

package/dist/components/orbit-site/Block.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+type BlockProps = {
+    children: ReactNode;
+    title?: string;
+};
+declare function Block(props: BlockProps): import("react/jsx-runtime").JSX.Element;
+export default Block;
+//# sourceMappingURL=Block.d.ts.map

package/dist/components/orbit-site/Block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/orbit-site/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmB/B;AAED,eAAe,KAAK,CAAC"}

package/dist/components/orbit-site/Block.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "#lib/utils";
+function Block(props) {
+    const { children, title } = props;
+    return (_jsxs(_Fragment, { children: [title && (_jsx("header", { children: _jsx("h2", { className: "mt-10 mb-4 typography-large-header", children: title }) })), _jsx("div", { className: cn("flex aspect-video w-full items-center justify-center gap-4 rounded-lg border p-10 transition-colors", "border-default-border bg-background"), children: children })] }));
+}
+export default Block;

package/dist/components/orbit-site/Inset.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type InsetProps = {
+    children?: ReactNode;
+};
+declare function Inset(props: InsetProps): import("react/jsx-runtime").JSX.Element;
+export default Inset;
+//# sourceMappingURL=Inset.d.ts.map

package/dist/components/orbit-site/Inset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inset.d.ts","sourceRoot":"","sources":["../../../src/components/orbit-site/Inset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAG/B;AAED,eAAe,KAAK,CAAC"}

package/dist/components/orbit-site/Inset.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Inset(props) {
+    const { children } = props;
+    return _jsx("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-4 pt-10 pb-40", children: children });
+}
+export default Inset;

package/dist/components/orbit-site/Section.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type SectionProps = {
+    children?: ReactNode;
+};
+declare function Section(props: SectionProps): import("react/jsx-runtime").JSX.Element;
+export default Section;
+//# sourceMappingURL=Section.d.ts.map

package/dist/components/orbit-site/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/orbit-site/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAGnC;AAED,eAAe,OAAO,CAAC"}

package/dist/components/orbit-site/Section.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Section(props) {
+    const { children } = props;
+    return _jsx("section", { className: "w-full", children: children });
+}
+export default Section;

package/dist/components/orbit-site/ThemeSelector.d.ts

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

package/dist/components/orbit-site/ThemeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/orbit-site/ThemeSelector.tsx"],"names":[],"mappings":"AAgCA,iBAAS,aAAa,4CAyCrB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/orbit-site/ThemeSelector.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SunMoon, Sun, Moon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { match } from "ts-pattern";
+import { cn } from "#lib/utils";
+import { useTheme } from "#providers/ThemeProvider";
+function describeTheme(theme) {
+    return match(theme)
+        .with("light", () => ({
+        icon: _jsx(Sun, { className: "size-5" }),
+        label: "Light mode (click for Dark)",
+        next: "dark",
+    }))
+        .with("dark", () => ({
+        icon: _jsx(Moon, { className: "size-5" }),
+        label: "Dark mode (click for System)",
+        next: "system",
+    }))
+        .with("system", () => ({
+        icon: _jsx(SunMoon, { className: "size-5" }),
+        label: "System theme (click for Light)",
+        next: "light",
+    }))
+        .exhaustive();
+}
+function ThemeSelector() {
+    const { theme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    // Prevent hydration mismatch
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted) {
+        return (_jsx("button", { "aria-label": "Toggle theme", className: "flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", type: "button", children: _jsx("span", { className: "sr-only", children: "Loading theme selector\u2026" }) }));
+    }
+    const { icon, label, next } = describeTheme(theme);
+    function cycleTheme() {
+        setTheme(next);
+    }
+    return (_jsx("button", { "aria-label": label, className: cn("flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", "hover:bg-background/60"), onClick: cycleTheme, title: label, type: "button", children: icon }));
+}
+export default ThemeSelector;

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

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { type IconOnlyButtonProps } from "../button/index.js";
+export declare function Pagination(props: ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationContent(props: ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationItem(props: ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+export type PaginationLinkProps = Pick<IconOnlyButtonProps, "icon" | "aria-label" | "disabled" | "onClick">;
+export type PaginationButtonProps = {
+    disabled?: boolean;
+    onClick?: () => void;
+} & Partial<PaginationLinkProps>;
+export declare function PaginationFirst(props: PaginationButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationLast(props: PaginationButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationPrevious(props: PaginationButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationNext(props: PaginationButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationEllipsis(props: ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export type PaginationBlockBaseProps = {
+    currentPageIndex: number;
+    totalPages: number;
+    onPrevClick?: (page: number) => void;
+    onNextClick?: (page: number) => void;
+    onPageChange?: (page: number) => void;
+    showPageCount?: boolean;
+    className?: string;
+    showPageSize?: false;
+    pageSize?: never;
+    totalCount?: number;
+};
+export type PaginationBlockWithPageSizeProps = Omit<PaginationBlockBaseProps, "showPageSize" | "pageSize"> & {
+    showPageSize: true;
+    pageSize: number;
+};
+export type PaginationBlockProps = PaginationBlockBaseProps | PaginationBlockWithPageSizeProps;
+export declare function PaginationBlock(props: PaginationBlockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAG7D,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAWtD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,2CAG5D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,2CAEzD;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;AAkB5G,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAEjC,wBAAgB,eAAe,CAAC,KAAK,EAAE,qBAAqB,2CAE3D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,2CAE1D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,2CAE9D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,2CAE1D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAa/D;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,wBAAwB,EAAE,cAAc,GAAG,UAAU,CAAC,GAAG;IAC3G,YAAY,EAAE,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAmCF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG,gCAAgC,CAAC;AAE/F,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAuD1D"}