@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/ui/toggle-group.js

@@ -1,24 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils.js";
-import { toggleVariants } from "./toggle-variants.js";
-const ToggleGroupContext = React.createContext({
-    size: "default",
-    variant: "default",
-    spacing: 0,
-});
-function ToggleGroup({ className, variant, size, spacing = 0, children, ...props }) {
-    const style = React.useMemo(() => ({ "--gap": spacing }), [spacing]);
-    const contextValue = React.useMemo(() => ({ variant, size, spacing }), [size, spacing, variant]);
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, style: style, className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: contextValue, children: children }) }));
-}
-function ToggleGroupItem({ className, children, variant, size, ...props }) {
-    const context = React.useContext(ToggleGroupContext);
-    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn(toggleVariants({
-            variant: context.variant || variant,
-            size: context.size || size,
-        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className), ...props, children: children }));
-}
-export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle-variants.d.ts

@@ -1,7 +0,0 @@
-import { type VariantProps } from "class-variance-authority";
-declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type ToggleVariantProps = VariantProps<typeof toggleVariants>;
-export { toggleVariants, type ToggleVariantProps };

package/dist/components/ui/toggle-variants.js

@@ -1,19 +0,0 @@
-import { cva } from "class-variance-authority";
-const toggleVariants = cva("inline-flex items-center justify-center gap-(--control-gap) rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-    variants: {
-        variant: {
-            default: "bg-transparent",
-            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-        },
-        size: {
-            default: "h-(--control-height) min-w-(--control-height) px-2",
-            sm: "h-(--control-height-sm) min-w-(--control-height-sm) px-1.5",
-            lg: "h-[calc(var(--control-height)+0.25rem)] min-w-[calc(var(--control-height)+0.25rem)] px-2.5",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
-export { toggleVariants };

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

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { Toggle as TogglePrimitive } from "radix-ui";
-import { type ToggleVariantProps } from "./toggle-variants.js";
-declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & ToggleVariantProps): React.JSX.Element;
-export { Toggle };

package/dist/components/ui/toggle.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Toggle as TogglePrimitive } from "radix-ui";
-import { cn } from "../../lib/utils.js";
-import { toggleVariants } from "./toggle-variants.js";
-function Toggle({ className, variant, size, ...props }) {
-    return (_jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
-}
-export { Toggle };

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-declare function TooltipPortalContainerProvider({ children, container, }: {
-    children: React.ReactNode;
-    container: HTMLElement | null;
-}): React.JSX.Element;
-type TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider> & {
-    children?: React.ReactNode;
-};
-declare function TooltipProvider({ delayDuration, children, ...props }: TooltipProviderProps): React.JSX.Element;
-declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
-declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortalContainerProvider };

package/dist/components/ui/tooltip.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils.js";
-const TooltipPortalContainerContext = React.createContext({
-    container: null,
-});
-function TooltipPortalContainerProvider({ children, container, }) {
-    const value = React.useMemo(() => ({ container }), [container]);
-    return (_jsx(TooltipPortalContainerContext.Provider, { value: value, children: children }));
-}
-function TooltipProvider({ delayDuration = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props, children: children }));
-}
-function Tooltip({ ...props }) {
-    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({ ...props }) {
-    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    const { container } = React.useContext(TooltipPortalContainerContext);
-    return (_jsx(TooltipPrimitive.Portal, { container: container ?? undefined, children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
-}
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortalContainerProvider };

package/dist/components/ui/use-color-theme.d.ts

@@ -1,2 +0,0 @@
-declare function useTheme(): import("./color-theme-context.js").ThemeContextValue;
-export { useTheme };

package/dist/components/ui/use-color-theme.js

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { ThemeContext } from "./color-theme-context.js";
-function useTheme() {
-    const context = React.useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-export { useTheme };

package/dist/components/ui/workflow-timeline.d.ts

@@ -1,20 +0,0 @@
-import * as React from "react";
-type WorkflowTimelineStepState = "complete" | "current" | "actionable" | "waiting" | "blocked" | "upcoming";
-type WorkflowTimelineStepAction = {
-    label: string;
-    onClick: () => void;
-};
-type WorkflowTimelineStep = {
-    id: string;
-    label: string;
-    state: WorkflowTimelineStepState;
-    description?: string;
-    meta?: string;
-    action?: WorkflowTimelineStepAction;
-};
-type WorkflowTimelineProps = React.ComponentProps<"section"> & {
-    steps: WorkflowTimelineStep[];
-};
-declare function WorkflowTimeline({ className, steps, ...props }: WorkflowTimelineProps): React.JSX.Element | null;
-export { WorkflowTimeline };
-export type { WorkflowTimelineProps, WorkflowTimelineStep, WorkflowTimelineStepState };

package/dist/components/ui/workflow-timeline.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertCircleIcon, CheckIcon, ChevronRightIcon, CircleIcon, ClockIcon } from "lucide-react";
-import { cn } from "../../lib/utils.js";
-function WorkflowTimeline({ className, steps, ...props }) {
-    const expandedStepId = getExpandedStepId(steps);
-    if (!steps.length) {
-        return null;
-    }
-    return (_jsx("section", { "data-slot": "workflow-timeline", className: cn("min-w-0 overflow-x-auto bg-background", className), ...props, children: _jsx("ol", { className: "flex w-full min-w-max items-stretch px-4 py-3 md:px-6 lg:px-8", children: steps.map((step, index) => (_jsx(WorkflowTimelineStepItem, { expanded: step.id === expandedStepId, showConnector: index > 0, step: step, previousStep: steps[index - 1] }, step.id))) }) }));
-}
-function WorkflowTimelineStepItem({ expanded, previousStep, showConnector, step, }) {
-    return (_jsxs("li", { className: cn("flex min-w-0 items-stretch", expanded && "flex-1"), children: [showConnector ? (_jsx(WorkflowTimelineConnector, { complete: previousStep?.state === "complete" })) : null, expanded ? _jsx(ExpandedWorkflowStep, { step: step }) : _jsx(CompactWorkflowStep, { step: step })] }));
-}
-function WorkflowTimelineConnector({ complete }) {
-    return (_jsx("div", { className: "flex w-8 shrink-0 items-center px-2", "aria-hidden": "true", children: _jsx("div", { className: cn("h-px w-full", complete ? "bg-success" : "bg-border") }) }));
-}
-function CompactWorkflowStep({ step }) {
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2 py-2", children: [_jsx(WorkflowTimelineMarker, { state: step.state }), _jsx("span", { className: cn("text-xs whitespace-nowrap", getCompactLabelClassName(step.state)), children: step.label })] }));
-}
-function ExpandedWorkflowStep({ step }) {
-    const stateClassName = getExpandedStateClassName(step.state);
-    const className = cn("flex min-w-72 flex-1 items-center gap-3 rounded-md border px-3 py-2 text-left", stateClassName, step.action &&
-        "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-hidden dark:hover:bg-input/50");
-    if (step.action) {
-        return (_jsxs("button", { "aria-label": `${step.action.label}: ${step.label}`, className: className, "data-state": step.state, onClick: step.action.onClick, type: "button", children: [_jsx(WorkflowTimelineMarker, { state: step.state }), _jsx(WorkflowTimelineStepContent, { step: step }), _jsx(WorkflowTimelineAction, { label: step.action.label })] }));
-    }
-    return (_jsxs("div", { className: className, "data-state": step.state, children: [_jsx(WorkflowTimelineMarker, { state: step.state }), _jsx(WorkflowTimelineStepContent, { step: step })] }));
-}
-function WorkflowTimelineAction({ label }) {
-    return (_jsxs("span", { className: "ml-auto inline-flex h-(--control-height-xs) shrink-0 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium", children: [label, _jsx(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })] }));
-}
-function WorkflowTimelineStepContent({ step }) {
-    return (_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("text-xs font-medium", getExpandedLabelClassName(step.state)), children: step.action ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Next step:" }), " ", step.label] })) : (step.label) }), step.description ? (_jsx("div", { className: "truncate text-xs text-muted-foreground", children: step.description })) : null, step.meta ? (_jsx("div", { className: "font-mono text-xs text-muted-foreground", children: step.meta })) : null] }));
-}
-function WorkflowTimelineMarker({ state }) {
-    return (_jsx("span", { className: cn("flex size-5 shrink-0 items-center justify-center rounded-full border", getMarkerClassName(state)), "aria-hidden": "true", children: _jsx(WorkflowTimelineMarkerIcon, { state: state }) }));
-}
-function WorkflowTimelineMarkerIcon({ state }) {
-    if (state === "complete") {
-        return _jsx(CheckIcon, { className: "size-3" });
-    }
-    if (state === "waiting") {
-        return _jsx(ClockIcon, { className: "size-3" });
-    }
-    if (state === "blocked") {
-        return _jsx(AlertCircleIcon, { className: "size-3" });
-    }
-    return _jsx(CircleIcon, { className: "size-3" });
-}
-function getExpandedStepId(steps) {
-    return steps.find((step) => isExpandedState(step.state))?.id;
-}
-function isExpandedState(state) {
-    return state === "current" || state === "actionable" || state === "waiting" || state === "blocked";
-}
-function getMarkerClassName(state) {
-    const classNames = {
-        actionable: "border-current bg-transparent text-current",
-        blocked: "border-destructive bg-destructive/10 text-destructive",
-        complete: "border-success bg-success text-success-foreground",
-        current: "border-foreground bg-background text-foreground",
-        upcoming: "border-border bg-muted text-muted-foreground",
-        waiting: "border-warning bg-warning/10 text-warning",
-    };
-    return classNames[state];
-}
-function getCompactLabelClassName(state) {
-    if (state === "complete")
-        return "text-success";
-    if (state === "upcoming")
-        return "text-muted-foreground";
-    return "text-foreground";
-}
-function getExpandedLabelClassName(state) {
-    if (state === "blocked")
-        return "text-destructive";
-    if (state === "waiting")
-        return "text-warning";
-    return "text-foreground";
-}
-function getExpandedStateClassName(state) {
-    const classNames = {
-        actionable: "bg-background shadow-xs dark:border-input dark:bg-input/30",
-        blocked: "border-destructive/35 bg-destructive/10",
-        complete: "border-success/35 bg-success-muted",
-        current: "border-border bg-card",
-        upcoming: "border-border bg-muted/35",
-        waiting: "border-warning/35 bg-warning-muted",
-    };
-    return classNames[state];
-}
-export { WorkflowTimeline };

package/dist/components/walkthrough/presentation/WalkthroughCoach.d.ts

@@ -1,14 +0,0 @@
-import type { WalkthroughAdvance, WalkthroughStep } from "../runtime/walkthroughTypes.js";
-export type WalkthroughCoachState = "locating" | "missing" | "off-route" | "ready" | "restore";
-export declare function WalkthroughCoach({ advanceType, coachState, flowTitle, onBack, onNext, onPause, onReturn, step, stepCount, stepIndex, }: {
-    advanceType: WalkthroughAdvance["type"];
-    coachState: WalkthroughCoachState;
-    flowTitle: string;
-    onBack: () => void;
-    onNext: () => void;
-    onPause: () => void;
-    onReturn: () => void;
-    step: WalkthroughStep;
-    stepCount: number;
-    stepIndex: number;
-}): import("@types/react").JSX.Element;

package/dist/components/walkthrough/presentation/WalkthroughCoach.js

@@ -1,32 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "../../ui/button.js";
-import { Card, CardContent } from "../../ui/card.js";
-export function WalkthroughCoach({ advanceType, coachState, flowTitle, onBack, onNext, onPause, onReturn, step, stepCount, stepIndex, }) {
-    return (_jsx(Card, { className: "border-foreground/20 shadow-sm", children: _jsxs(CardContent, { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("p", { className: "text-meta text-muted-foreground", children: [flowTitle, " \u00B7 Step ", stepIndex + 1, " of ", stepCount] }), _jsx("h2", { className: "font-heading text-lg text-foreground", children: step.title }), _jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: step.body }), _jsx(CoachStatus, { advanceType: advanceType, state: coachState })] }), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsx(Button, { onClick: onPause, size: "sm", type: "button", variant: "ghost", children: "Pause" }), _jsx(Button, { disabled: stepIndex === 0, onClick: onBack, size: "sm", type: "button", variant: "outline", children: "Back" }), _jsx(CoachPrimaryAction, { advanceType: advanceType, coachState: coachState, isLast: stepIndex === stepCount - 1, onNext: onNext, onReturn: onReturn })] })] }) }));
-}
-function CoachStatus({ advanceType, state, }) {
-    if (state === "off-route") {
-        return _jsx("p", { className: "text-xs text-muted-foreground", children: "This page is outside the walkthrough." });
-    }
-    if (state === "missing") {
-        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "The required control is not available in the current app state." }));
-    }
-    if (state === "locating") {
-        return _jsx("p", { className: "text-xs text-muted-foreground", children: "Locating the next control\u2026" });
-    }
-    if (state === "restore") {
-        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Use the highlighted control to reopen this step." }));
-    }
-    if (advanceType !== "manual") {
-        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Use the highlighted control to continue \u00B7 click elsewhere to pause" }));
-    }
-    return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Next to continue \u00B7 click elsewhere to pause" }));
-}
-function CoachPrimaryAction({ advanceType, coachState, isLast, onNext, onReturn, }) {
-    if (coachState === "off-route") {
-        return (_jsx(Button, { onClick: onReturn, size: "sm", type: "button", children: "Return to step" }));
-    }
-    if (advanceType !== "manual" || coachState === "restore")
-        return null;
-    return (_jsx(Button, { disabled: coachState !== "ready", onClick: onNext, size: "sm", type: "button", children: isLast ? "Finish" : "Next" }));
-}

package/dist/components/walkthrough/presentation/WalkthroughHighlight.d.ts

@@ -1,5 +0,0 @@
-import type { WalkthroughTargetRect } from "../targeting/useWalkthroughTargetRect.js";
-export declare function WalkthroughHighlight({ rect, stepNumber, }: {
-    rect: WalkthroughTargetRect;
-    stepNumber: number;
-}): import("@types/react").JSX.Element;

package/dist/components/walkthrough/presentation/WalkthroughHighlight.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function WalkthroughHighlight({ rect, stepNumber, }) {
-    const pad = 6;
-    const left = Math.min(window.innerWidth, Math.max(0, rect.left - pad));
-    const top = Math.min(window.innerHeight, Math.max(0, rect.top - pad));
-    const right = Math.max(left, Math.min(window.innerWidth, rect.left + rect.width + pad));
-    const bottom = Math.max(top, Math.min(window.innerHeight, rect.top + rect.height + pad));
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-x-0 top-0 bg-foreground/40", style: { height: top } }), _jsx("div", { "aria-hidden": true, className: "absolute bottom-0 inset-x-0 bg-foreground/40", style: { top: bottom } }), _jsx("div", { "aria-hidden": true, className: "absolute bg-foreground/40", style: { bottom: window.innerHeight - bottom, left: 0, top, width: left } }), _jsx("div", { "aria-hidden": true, className: "absolute bg-foreground/40", style: { bottom: window.innerHeight - bottom, left: right, right: 0, top } }), _jsx("div", { "aria-hidden": true, className: "absolute rounded-md ring-2 ring-foreground", style: { height: bottom - top, left, top, width: right - left } }), _jsx("div", { "aria-hidden": true, className: "absolute z-10 grid size-7 place-items-center rounded-full bg-foreground font-mono text-xs text-background", style: { left: Math.max(8, left - 10), top: Math.max(8, top - 10) }, children: stepNumber })] }));
-}

package/dist/components/walkthrough/presentation/WalkthroughOverlay.d.ts

@@ -1 +0,0 @@
-export declare function WalkthroughOverlay(): import("@types/react").JSX.Element | null;

package/dist/components/walkthrough/presentation/WalkthroughOverlay.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { listenForWalkthroughEvent, listenForWalkthroughTargetClick, } from "../runtime/walkthroughEvents.js";
-import { walkthroughHrefMatches } from "../runtime/walkthroughLocation.js";
-import { useWalkthrough } from "../runtime/useWalkthrough.js";
-import { listenForOutsideWalkthroughInteraction } from "../targeting/listenForOutsideWalkthroughInteraction.js";
-import { useWalkthroughTargetRect, } from "../targeting/useWalkthroughTargetRect.js";
-import { WalkthroughCoach } from "./WalkthroughCoach.js";
-import { WalkthroughHighlight } from "./WalkthroughHighlight.js";
-import { useWalkthroughCoachPosition } from "./useWalkthroughCoachPosition.js";
-export function WalkthroughOverlay() {
-    const walkthrough = useWalkthrough();
-    if (walkthrough.progress?.status !== "active" ||
-        !walkthrough.selectedWalkthrough ||
-        !walkthrough.currentStep) {
-        return null;
-    }
-    return (_jsx(WalkthroughStepOverlay, { advance: walkthrough.advance, currentHref: walkthrough.currentHref, flowTitle: walkthrough.selectedWalkthrough.title, goBack: walkthrough.goBack, navigateToCurrentStep: walkthrough.navigateToCurrentStep, pause: walkthrough.pauseWalkthrough, step: walkthrough.currentStep, stepCount: walkthrough.selectedWalkthrough.steps.length, stepIndex: walkthrough.progress.stepIndex }, `${walkthrough.selectedWalkthrough.id}:${walkthrough.currentStep.id}`));
-}
-function WalkthroughStepOverlay({ advance, currentHref, flowTitle, goBack, navigateToCurrentStep, pause, step, stepCount, stepIndex, }) {
-    const onStepRoute = walkthroughHrefMatches(currentHref, step.href);
-    const targetObservation = useWalkthroughTargetRect(onStepRoute ? step.target : null);
-    const restoreObservation = useWalkthroughTargetRect(onStepRoute && targetObservation.status === "missing" ? (step.restoreTarget ?? null) : null);
-    const advanceRef = useLatestValue(advance);
-    const onStepRouteRef = useLatestValue(onStepRoute);
-    const coachRef = useRef(null);
-    const coachState = resolveCoachState(onStepRoute, Boolean(step.restoreTarget), targetObservation, restoreObservation);
-    const observation = coachState === "restore" ? restoreObservation : targetObservation;
-    const coachPosition = useWalkthroughCoachPosition(observation, coachRef);
-    useEffect(() => listenForStepCompletion(step, () => onStepRouteRef.current, () => advanceRef.current()), [advanceRef, onStepRouteRef, step]);
-    useEffect(() => listenForOutsideInteractionOnStepRoute(onStepRoute, step, pause), [onStepRoute, pause, step]);
-    const rect = observation.status === "found" && onStepRoute ? observation.rect : null;
-    return createPortal(_jsxs("div", { "aria-live": "polite", className: "pointer-events-none fixed inset-0 z-[100]", children: [rect ? _jsx(WalkthroughHighlight, { rect: rect, stepNumber: stepIndex + 1 }) : null, _jsx("div", { className: "pointer-events-auto absolute w-[min(24rem,calc(100%-2rem))]", "data-walkthrough-coach": "", ref: coachRef, style: coachPosition && rect
-                    ? { left: coachPosition.left, top: coachPosition.top }
-                    : { bottom: 16, right: 16 }, children: _jsx(WalkthroughCoach, { advanceType: step.advance.type, coachState: coachState, flowTitle: flowTitle, onBack: goBack, onNext: advance, onPause: pause, onReturn: navigateToCurrentStep, step: step, stepCount: stepCount, stepIndex: stepIndex }) })] }), document.body);
-}
-function listenForOutsideInteractionOnStepRoute(onStepRoute, step, pause) {
-    return onStepRoute ? listenForOutsideWalkthroughInteraction(step, pause) : undefined;
-}
-function useLatestValue(value) {
-    const valueRef = useRef(value);
-    useLayoutEffect(() => {
-        valueRef.current = value;
-    }, [value]);
-    return valueRef;
-}
-function listenForStepCompletion(step, canComplete, advance) {
-    if (step.advance.type === "manual")
-        return () => undefined;
-    if (step.advance.type === "target-click") {
-        return listenForWalkthroughTargetClick(step.target, canComplete, advance);
-    }
-    return listenForWalkthroughEvent(step.advance.event, canComplete, advance);
-}
-function resolveCoachState(onStepRoute, canRestore, targetObservation, restoreObservation) {
-    if (!onStepRoute)
-        return "off-route";
-    if (targetObservation.status === "locating")
-        return "locating";
-    if (targetObservation.status === "found")
-        return "ready";
-    if (!canRestore)
-        return "missing";
-    if (restoreObservation.status === "found")
-        return "restore";
-    if (restoreObservation.status === "locating")
-        return "locating";
-    return "missing";
-}

package/dist/components/walkthrough/presentation/positionWalkthroughCoach.d.ts

@@ -1,11 +0,0 @@
-import type { WalkthroughTargetRect } from "../targeting/useWalkthroughTargetRect.js";
-export type WalkthroughCoachPosition = {
-    left: number;
-    top: number;
-};
-type Size = {
-    height: number;
-    width: number;
-};
-export declare function positionWalkthroughCoach(target: WalkthroughTargetRect, coach: Size, viewport: Size): WalkthroughCoachPosition;
-export {};

package/dist/components/walkthrough/presentation/positionWalkthroughCoach.js

@@ -1,24 +0,0 @@
-const GAP = 16;
-const VIEWPORT_MARGIN = 16;
-export function positionWalkthroughCoach(target, coach, viewport) {
-    const candidates = [
-        { left: target.left + target.width + GAP, top: target.top },
-        { left: target.left - coach.width - GAP, top: target.top },
-        { left: target.left, top: target.top + target.height + GAP },
-        { left: target.left, top: target.top - coach.height - GAP },
-    ];
-    const fitting = candidates.find((candidate) => fits(candidate, coach, viewport));
-    return clamp(fitting ?? candidates[2], coach, viewport);
-}
-function fits(position, coach, viewport) {
-    return (position.left >= VIEWPORT_MARGIN &&
-        position.top >= VIEWPORT_MARGIN &&
-        position.left + coach.width <= viewport.width - VIEWPORT_MARGIN &&
-        position.top + coach.height <= viewport.height - VIEWPORT_MARGIN);
-}
-function clamp(position, coach, viewport) {
-    return {
-        left: Math.max(VIEWPORT_MARGIN, Math.min(position.left, viewport.width - coach.width - VIEWPORT_MARGIN)),
-        top: Math.max(VIEWPORT_MARGIN, Math.min(position.top, viewport.height - coach.height - VIEWPORT_MARGIN)),
-    };
-}

package/dist/components/walkthrough/presentation/useWalkthroughCoachPosition.d.ts

@@ -1,4 +0,0 @@
-import { type RefObject } from "react";
-import { type WalkthroughCoachPosition } from "./positionWalkthroughCoach.js";
-import type { WalkthroughTargetObservation } from "../targeting/useWalkthroughTargetRect.js";
-export declare function useWalkthroughCoachPosition(observation: WalkthroughTargetObservation, coachRef: RefObject<HTMLDivElement | null>): WalkthroughCoachPosition | null;

package/dist/components/walkthrough/presentation/useWalkthroughCoachPosition.js

@@ -1,17 +0,0 @@
-import { useLayoutEffect, useState } from "react";
-import { positionWalkthroughCoach } from "./positionWalkthroughCoach.js";
-const FALLBACK_COACH_SIZE = { height: 232, width: 384 };
-export function useWalkthroughCoachPosition(observation, coachRef) {
-    const [position, setPosition] = useState(null);
-    useLayoutEffect(() => {
-        if (observation.status !== "found")
-            return;
-        const box = coachRef.current?.getBoundingClientRect();
-        const coach = box ? { height: box.height, width: box.width } : FALLBACK_COACH_SIZE;
-        setPosition(positionWalkthroughCoach(observation.rect, coach, {
-            height: window.innerHeight,
-            width: window.innerWidth,
-        }));
-    }, [coachRef, observation]);
-    return position;
-}

package/dist/components/walkthrough/runtime/WalkthroughContextDefinition.d.ts

@@ -1,20 +0,0 @@
-import type { WalkthroughDefinition, WalkthroughProgress, WalkthroughStep } from "./walkthroughTypes.js";
-export type WalkthroughContextValue = {
-    advance: () => void;
-    clearWalkthrough: () => void;
-    currentHref: string;
-    currentStep: WalkthroughStep | null;
-    emitEvent: (event: string) => void;
-    goBack: () => void;
-    navigateToCurrentStep: () => void;
-    pauseWalkthrough: () => void;
-    progress: WalkthroughProgress | null;
-    resumeWalkthrough: () => void;
-    selectedWalkthrough: WalkthroughDefinition | null;
-    startWalkthrough: (walkthroughId: string) => Promise<void>;
-    targetProps: (target: string) => {
-        "data-walkthrough-target": string;
-    };
-    walkthroughs: readonly WalkthroughDefinition[];
-};
-export declare const WalkthroughContext: import("@types/react").Context<WalkthroughContextValue | undefined>;

package/dist/components/walkthrough/runtime/WalkthroughContextDefinition.js

@@ -1,2 +0,0 @@
-import { createContext } from "react";
-export const WalkthroughContext = createContext(undefined);

package/dist/components/walkthrough/runtime/WalkthroughProvider.d.ts

@@ -1,12 +0,0 @@
-import { type ReactNode } from "react";
-import type { WalkthroughDefinition, WalkthroughFreshStartHandlers } from "./walkthroughTypes.js";
-export type WalkthroughProviderProps = {
-    children: ReactNode;
-    currentHref: string;
-    freshStartHandlers: WalkthroughFreshStartHandlers;
-    navigate: (href: string) => unknown;
-    readCurrentHref: () => string;
-    storageKey: string;
-    walkthroughs: readonly WalkthroughDefinition[];
-};
-export declare function WalkthroughProvider({ children, currentHref, freshStartHandlers, navigate, readCurrentHref, storageKey, walkthroughs, }: WalkthroughProviderProps): import("@types/react").JSX.Element;