@posthog/twig-components 0.1.0

package/dist/LabChoices.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export declare function LabChoices<T extends string | number>({ label, value, options, onChange, }: {
+    label: ReactNode;
+    value: T;
+    options: {
+        value: T;
+        label: ReactNode;
+    }[];
+    onChange: (value: T) => void;
+}): import("react").JSX.Element;

package/dist/LabChoices.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function LabChoices({ label, value, options, onChange, }) {
+    const name = useId();
+    return (_jsxs("fieldset", { className: "vac-source-picker", children: [_jsx("legend", { children: label }), _jsx("div", { className: "vac-lab-choice-list", children: options.map((option) => (_jsxs("label", { "data-selected": value === option.value, children: [_jsx("input", { type: "radio", name: name, checked: value === option.value, onChange: () => onChange(option.value) }), _jsx("span", { children: option.label })] }, option.value))) })] }));
+}

package/dist/LabCompletionView.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+import type { TouchpointId } from "./playground.js";
+export declare function LabCompletionView({ lab, onChoose, onReview, headingRef, }: {
+    lab: TouchpointId;
+    onChoose: () => void;
+    onReview: () => void;
+    headingRef: RefObject<HTMLHeadingElement | null>;
+}): import("react").JSX.Element;

package/dist/LabCompletionView.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const recaps = {
+    catalog: {
+        title: "You recorded the correct setting for each click.",
+        points: [
+            "Found why a fixed value mislabels filter clicks.",
+            "Recorded each filter’s actual setting and checked the results.",
+        ],
+    },
+    discovery: {
+        title: "You captured both successful and failed AI requests.",
+        points: [
+            "Connected a request to the model’s response.",
+            "Recorded a failed request so the error is visible too.",
+        ],
+    },
+    booking: {
+        title: "You counted confirmed bookings, not just clicks.",
+        points: [
+            "Followed a successful booking from attempt to confirmation.",
+            "Checked that a failed request does not count as a completed booking.",
+        ],
+    },
+    stay: {
+        title: "You connected each view event to the right stay.",
+        points: [
+            "Saw why identical view events cannot distinguish stays.",
+            "Grouped view events by their listing ID.",
+        ],
+    },
+    replay: {
+        title: "You’ve captured a visitor’s journey.",
+        points: [
+            "Followed a ghost visitor across Twig.",
+            "Recorded your own visit and opened its replay with your masking setting.",
+        ],
+    },
+};
+export function LabCompletionView({ lab, onChoose, onReview, headingRef, }) {
+    const recap = recaps[lab];
+    return (_jsxs("section", { className: "vac-lab vac-lab-completion", "aria-label": "Lab complete", children: [_jsxs("h3", { className: "vac-completion-title", ref: headingRef, tabIndex: -1, children: [_jsx("span", { className: "vac-completion-check", "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: "Lab complete!" })] }), _jsx("p", { children: recap.title }), _jsxs("div", { className: "vac-guide-example", children: [_jsx("h4", { children: "What you learned" }), _jsx("ul", { children: recap.points.map((point) => (_jsx("li", { children: point }, point))) })] }), _jsx("p", { children: "You\u2019re done with this lab. Your results are still here if you want another look." }), _jsx("button", { type: "button", className: "vac-button", onClick: onChoose, children: _jsx("span", { className: "vac-os-button-face", children: "Choose another lab" }) }), _jsx("button", { type: "button", className: "vac-text-button", onClick: onReview, children: "Review results" })] }));
+}

package/dist/LabNavigation.d.ts

@@ -0,0 +1,9 @@
+import type { TouchpointId } from "./playground.js";
+export declare function LabNavigationView({ selected, stage, embedded, onAllLabs, onPrevious, onReset, }: {
+    selected: TouchpointId | null;
+    stage: number;
+    embedded: boolean;
+    onAllLabs: () => void;
+    onPrevious: () => void;
+    onReset: () => void;
+}): import("react").JSX.Element | null;

package/dist/LabNavigation.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function LabNavigationView({ selected, stage, embedded, onAllLabs, onPrevious, onReset, }) {
+    if (!selected)
+        return null;
+    return (_jsxs("div", { className: "vac-lab-navigation", children: [!embedded && (_jsx("button", { className: "vac-text-button", onClick: onAllLabs, children: "All labs" })), ["replay", "catalog", "discovery", "booking", "stay"].includes(selected) && (_jsxs(_Fragment, { children: [stage > 0 && (!embedded || stage > 1) && (_jsxs("button", { className: "vac-text-button", title: "Go back without clearing your results", onClick: onPrevious, children: [_jsx("span", { "aria-hidden": "true", children: "\u2190 " }), "Previous step"] })), _jsx("button", { className: "vac-text-button vac-lab-reset", title: "Clear this lab\u2019s results and restore its defaults", onClick: onReset, children: embedded ? "Reset exercise" : "Reset lab" })] }))] }));
+}

package/dist/PlaygroundController.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type LabAction, type LabState } from "./filter-lab.js";
+import type { TouchpointId } from "./playground.js";
+export declare function PlaygroundLabProvider({ children, active, bookingEnabled, initialSource, }: {
+    children: ReactNode;
+    active: boolean;
+    bookingEnabled: boolean;
+    initialSource?: "fixed" | "clicked";
+}): import("react").JSX.Element;
+export declare function usePlaygroundLab(): {
+    embedSource?: "fixed" | "clicked";
+    state: LabState;
+    dispatch: (action: LabAction) => void;
+    active: boolean;
+    stage: number;
+    setStage: (stage: number) => void;
+    selected: TouchpointId | null;
+    choose: (id: TouchpointId | null) => void;
+    highlighted: TouchpointId | null;
+    highlight: (id: TouchpointId | null) => void;
+};
+export declare function useFilterLab(): {
+    selected: "stay" | "discovery" | "catalog" | "replay" | "booking" | null;
+    choose: (id: TouchpointId | null) => void;
+    highlighted: "stay" | "discovery" | "catalog" | "replay" | "booking" | null;
+    highlight: (id: TouchpointId | null) => void;
+    active: boolean;
+    selecting: boolean;
+    stage: number;
+    recordFilter: (setting: string) => boolean;
+};

package/dist/PlaygroundController.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useReducer, useState, } from "react";
+import { AiLabProvider } from "./AiLab.js";
+import { BookingLabProvider } from "./BookingLab.js";
+import { useStayLab } from "./StayLab.js";
+import { useReplay } from "./ReplayRecorder.js";
+import { filterLabReducer, initialLabState } from "./filter-lab.js";
+const PlaygroundLabContext = createContext({
+    state: initialLabState,
+    dispatch: () => { },
+    active: false,
+    stage: 0,
+    setStage: () => { },
+    selected: null,
+    choose: () => { },
+    highlighted: null,
+    highlight: () => { },
+});
+export function PlaygroundLabProvider({ children, active, bookingEnabled, initialSource, }) {
+    const replay = useReplay();
+    const stayLab = useStayLab();
+    const resumeStay = bookingEnabled && stayLab.state.running;
+    const [state, dispatch] = useReducer(filterLabReducer, initialLabState);
+    const [stage, setStage] = useState(initialSource || replay.mode || resumeStay ? 1 : 0);
+    const [selected, setSelected] = useState(initialSource
+        ? "catalog"
+        : replay.mode
+            ? "replay"
+            : resumeStay
+                ? "stay"
+                : null);
+    const [highlighted, highlight] = useState(null);
+    function choose(id) {
+        if (initialSource)
+            return;
+        if (id !== "stay")
+            stayLab.dispatch({ type: "pause" });
+        if (id !== "replay")
+            replay.stop();
+        setSelected(id);
+        setStage(0);
+        dispatch({ type: "cancel" });
+    }
+    return (_jsx(PlaygroundLabContext.Provider, { value: {
+            embedSource: initialSource,
+            state,
+            dispatch,
+            active: active && selected === "catalog" && stage > 0,
+            stage,
+            setStage,
+            selected,
+            choose,
+            highlighted,
+            highlight,
+        }, children: _jsx(AiLabProvider, { active: active && selected === "discovery" && stage > 0, children: _jsx(BookingLabProvider, { active: bookingEnabled && selected === "booking" && stage > 0, children: children }) }) }));
+}
+export function usePlaygroundLab() {
+    return useContext(PlaygroundLabContext);
+}
+export function useFilterLab() {
+    const { state, dispatch, active, stage, selected, choose, highlighted, highlight, } = useContext(PlaygroundLabContext);
+    return {
+        selected,
+        choose,
+        highlighted,
+        highlight,
+        active: active && (state.selecting || !!state.applied),
+        selecting: active && state.selecting,
+        stage,
+        recordFilter: (setting) => {
+            if (!active)
+                return false;
+            if (state.selecting) {
+                dispatch({ type: "target" });
+                return true;
+            }
+            dispatch({ type: "filter", setting });
+            return false;
+        },
+    };
+}

package/dist/PlaygroundPanels.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode, type RefObject } from "react";
+import type { PlaygroundPage, TouchpointId } from "./playground.js";
+export declare function LabDirectory({ page, choose, showMarker }: {
+    page: PlaygroundPage;
+    choose: (id: TouchpointId) => void;
+    showMarker: (id: TouchpointId) => void;
+}): import("react").JSX.Element;
+export declare function SelectedLabHeader({ current }: {
+    current: PlaygroundPage["touchpoints"][number];
+}): import("react").JSX.Element;
+export declare function PlaygroundMarker({ touchpoint, highlighted, onHighlight, onChoose, }: {
+    touchpoint: PlaygroundPage["touchpoints"][number];
+    highlighted: boolean;
+    onHighlight: (id: TouchpointId | null) => void;
+    onChoose: (id: TouchpointId) => void;
+}): import("react").JSX.Element;
+export declare function PlaygroundInvitation({ dismissed, onDismiss, onOpen, toggleRef, }: {
+    dismissed: boolean;
+    onDismiss: () => void;
+    onOpen: () => void;
+    toggleRef: RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+export declare function PlaygroundDock({ embedded, onClose, headingRef, logo, navigation, recordingBar, pageKey, guide, }: {
+    embedded: boolean;
+    onClose: () => void;
+    headingRef: RefObject<HTMLHeadingElement | null>;
+    logo: ReactNode;
+    navigation: ReactNode;
+    recordingBar: ReactNode;
+    pageKey: string;
+    guide: ReactNode;
+}): import("react").JSX.Element;

package/dist/PlaygroundPanels.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+export function LabDirectory({ page, choose, showMarker }) {
+    const [query, setQuery] = useState("");
+    const visible = page.touchpoints.filter((item) => `${item.title} ${item.tool}`.toLowerCase().includes(query.toLowerCase()));
+    return (_jsxs("section", { id: "twig-playground-detail", className: "vac-lab vac-lab-directory", children: [_jsx("h3", { children: "Choose a lab" }), _jsx("p", { children: "Different interactions on this page use different PostHog tools. Choose an interaction below to learn how to instrument it." }), page.touchpoints.length > 4 && (_jsxs("label", { className: "vac-lab-search", children: ["Find a lab or PostHog tool", _jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), type: "search" })] })), _jsx("ol", { className: "vac-lab-directory-list", children: visible.map((item) => (_jsxs("li", { "data-lab-color": item.color, children: [_jsxs("div", { className: "vac-lab-card-heading", children: [_jsx("span", { className: "vac-marker", children: item.number }), _jsx("span", { className: "vac-eyebrow", children: item.tool })] }), _jsx("h4", { children: item.title }), _jsx("p", { children: item.lesson }), _jsxs("div", { className: "vac-lab-card-actions", children: [_jsx("button", { className: "vac-text-button", type: "button", onClick: () => showMarker(item.id), "aria-label": `Show me where: ${item.title}`, children: "Show me where" }), !item.lab && (_jsx("span", { className: "vac-muted", children: "Lab not built yet" })), _jsx("button", { className: "vac-button", onClick: () => {
+                                        choose(item.id);
+                                        showMarker(item.id);
+                                    }, "aria-label": `${item.lab ? "Start lab" : "View details"}: ${item.title}`, children: _jsx("span", { className: "vac-os-button-face", children: item.lab ? "Start lab →" : "View details" }) })] })] }, item.id))) }), !visible.length && (_jsx("p", { children: page.touchpoints.length
+                    ? "No labs match your search."
+                    : "No instrumentation points are defined for this page yet." }))] }));
+}
+export function SelectedLabHeader({ current }) {
+    return (_jsxs("div", { className: "vac-selected-lab", children: [_jsx("span", { className: "vac-eyebrow", children: current.tool === "Product analytics"
+                    ? "Product Analytics"
+                    : current.tool }), _jsxs("span", { className: "vac-lab-context", children: [current.title, " Lab"] })] }));
+}
+export function PlaygroundMarker({ touchpoint, highlighted, onHighlight, onChoose, }) {
+    return (_jsx("button", { id: `twig-marker-${touchpoint.id}`, className: "vac-marker", "data-lab-color": touchpoint.color, "data-highlighted": highlighted, onMouseEnter: () => onHighlight(touchpoint.id), onMouseLeave: () => onHighlight(null), onFocus: () => onHighlight(touchpoint.id), onBlur: () => onHighlight(null), type: "button", onClick: () => onChoose(touchpoint.id), "aria-label": `Open lab: ${touchpoint.title}`, "aria-controls": "twig-playground-detail", children: touchpoint.number }));
+}
+export function PlaygroundInvitation({ dismissed, onDismiss, onOpen, toggleRef, }) {
+    return (_jsxs("aside", { className: `vac-playground-invite${dismissed ? " vac-invite-compact" : ""}`, "aria-label": "Explore PostHog", onKeyDown: (event) => {
+            if (event.key === "Escape")
+                onDismiss();
+        }, children: [!dismissed && (_jsxs(_Fragment, { children: [_jsx("button", { className: "vac-invite-dismiss", type: "button", onClick: onDismiss, "aria-label": "Dismiss playground invitation", children: "\u00D7" }), _jsx("span", { className: "vac-eyebrow", children: "Interactive playground" }), _jsx("h2", { children: "Want to explore the PostHog instrumentation?" }), _jsx("p", { children: "Build an event, try it on Twig, and see what happens." })] })), _jsx("button", { ref: toggleRef, className: "vac-button", type: "button", "aria-expanded": false, onClick: onOpen, children: dismissed ? "Explore PostHog ↗" : "Open playground ↗" })] }));
+}
+export function PlaygroundDock({ embedded, onClose, headingRef, logo, navigation, recordingBar, pageKey, guide, }) {
+    return (_jsxs("aside", { id: "twig-playground", className: "vac-dock vac-developer-theme", "aria-label": "Twig playground", onKeyDown: (event) => {
+            if (event.key === "Escape" && !embedded)
+                onClose();
+        }, children: [_jsxs("div", { className: "vac-dock-header", children: [_jsxs("div", { className: "vac-row", children: [_jsxs("h2", { id: "twig-playground-heading", ref: headingRef, tabIndex: -1, children: [logo, "PostHog Playground"] }), !embedded && (_jsx("button", { className: "vac-text-button", onClick: onClose, children: "Hide" }))] }), navigation, recordingBar] }), _jsx("div", { className: "vac-dock-scroll", role: "region", "aria-label": "Instrumentation touchpoints and details", tabIndex: 0, children: guide }, pageKey)] }));
+}

package/dist/ReplayLab.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import type { ReplayFrame } from "./replay-lab.js";
+export type ReplayLabViewState = {
+    exercise: "ghost" | "manual";
+    recording: readonly unknown[];
+    starting: boolean;
+    frames: ReplayFrame[];
+    mode: "ghost" | "manual" | null;
+    masked: boolean;
+    setMasked: (value: boolean) => void;
+    capturedMasked: boolean;
+    message: string;
+    start: (mode: "ghost" | "manual") => void;
+    stop: () => void;
+    clear: () => void;
+    setExercise: (value: "ghost" | "manual") => void;
+};
+export declare function ReplayRecordingBar({ replay }: {
+    replay: ReplayLabViewState;
+}): import("react").JSX.Element | null;
+export declare function ReplayLab({ stage, onStage, replay, pathname, returnHome, sessionPlayer, }: {
+    stage: number;
+    onStage: (stage: number) => void;
+    replay: ReplayLabViewState;
+    pathname: string;
+    returnHome: ReactNode;
+    sessionPlayer: ReactNode;
+}): import("react").JSX.Element;

package/dist/ReplayLab.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { FinishLabButton } from "./FinishLabButton.js";
+export function ReplayRecordingBar({ replay }) {
+    if (!replay.mode)
+        return null;
+    return (_jsxs("div", { className: "vac-replay-recording", role: "status", children: [_jsx("span", { children: replay.mode === "ghost"
+                    ? "Ghost visit running"
+                    : "Recording your visit" }), replay.mode === "manual" && (_jsx("button", { className: "vac-text-button", onClick: replay.stop, children: "End recording and review" }))] }));
+}
+export function ReplayLab({ stage, onStage, replay, pathname, returnHome, sessionPlayer, }) {
+    const source = replay.exercise;
+    const hasVisit = replay.recording.length > 1;
+    const previousMode = useRef(replay.mode);
+    useEffect(() => {
+        if (previousMode.current === "manual" &&
+            !replay.mode &&
+            hasVisit &&
+            stage === 1) {
+            onStage(2);
+        }
+        previousMode.current = replay.mode;
+    }, [replay.mode, hasVisit, stage, onStage]);
+    if (replay.mode === "ghost" || (replay.starting && source === "ghost")) {
+        const latest = [...replay.frames].reverse().find((frame) => frame.kind === "click" ||
+            frame.kind === "input" ||
+            frame.kind === "page");
+        const update = replay.starting
+            ? "Starting the recorder…"
+            : latest?.kind === "input"
+                ? "Typing a search for Adiron-shack…"
+                : latest?.kind === "click"
+                    ? latest.label.startsWith("Filter: ")
+                        ? `Selected ${latest.label.slice(8)}. Browsing the filtered stays…`
+                        : "Opening Adiron-shack…"
+                    : latest?.page.startsWith("/stays/")
+                        ? "Viewing the stay details. Finishing the recording…"
+                        : "Starting on Find a stay…";
+        return (_jsxs("section", { className: "vac-lab vac-ghost-progress", "aria-label": "Ghost simulation in progress", children: [_jsx("h3", { children: "Watch the ghost visitor" }), _jsx("div", { className: "vac-ghost-loader", "aria-hidden": "true" }), _jsx("p", { role: "status", "aria-live": "polite", "aria-atomic": "true", children: update }), _jsx("p", { className: "vac-muted", children: "The simulation runs automatically. You can watch the recording when it finishes." })] }));
+    }
+    if (stage === 2 && replay.mode)
+        return (_jsxs("section", { className: "vac-lab vac-builder", children: [_jsx("h3", { children: "Finish the visit first" }), _jsx("p", { children: "Explore Twig however you like, then end the recording to watch your visit." }), replay.mode === "manual" && (_jsx("button", { className: "vac-button", onClick: replay.stop, children: _jsx("span", { className: "vac-os-button-face", children: "End recording and review \u2192" }) }))] }));
+    if (stage === 0)
+        return (_jsxs("div", { className: "vac-guide-intro", children: [_jsx("h3", { children: "What happened between the clicks?" }), _jsx("p", { children: "Events tell you a visitor selected Coast. Replay adds the sequence: where they moved, what they typed, and which stay they opened." }), _jsx("div", { className: "vac-guide-example", children: _jsx("p", { children: "Follow a ghost visitor from filters to a stay. Then record your own visit." }) }), _jsx("button", { className: "vac-button", onClick: () => onStage(1), children: _jsx("span", { className: "vac-os-button-face", children: "Set up the ghost visit \u2192" }) })] }));
+    return (_jsxs("section", { className: "vac-lab vac-builder", children: [stage === 1 ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: replay.mode === "manual"
+                            ? "Record your visit on Twig"
+                            : hasVisit
+                                ? "Your recording is ready"
+                                : source === "ghost"
+                                    ? "Set up the ghost visit"
+                                    : "Set up your own recording" }), replay.mode || hasVisit ? (_jsxs(_Fragment, { children: [_jsx("p", { children: replay.mode === "manual" ? (_jsxs(_Fragment, { children: ["Explore Twig however you like. Click around, browse stays, or try a search. When you\u2019re ready, click", " ", _jsx("strong", { children: "End recording and review" }), " to watch your visit."] })) : ("Your recording is ready. Play it back to see the interactions you captured.") }), replay.mode === "manual" && (_jsx("button", { className: "vac-button", onClick: replay.stop, children: _jsx("span", { className: "vac-os-button-face", children: "End recording and review \u2192" }) })), !replay.mode && hasVisit && (_jsx("button", { className: "vac-button", onClick: () => onStage(2), children: _jsx("span", { className: "vac-os-button-face", children: "Watch the recording \u2192" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx("p", { children: source === "ghost"
+                                    ? "First, capture a ghost visitor filtering stays, searching, and opening Adiron-shack."
+                                    : "Start recording, then explore Twig however you like. When you’re ready, end the recording to watch it back. Starting replaces the ghost recording." }), _jsxs("label", { className: "vac-replay-mask", children: [_jsx("input", { type: "checkbox", "aria-describedby": "replay-masking-help", checked: replay.masked, onChange: (event) => replay.setMasked(event.target.checked) }), " ", "Hide search text in the replay"] }), _jsxs("p", { id: "replay-masking-help", className: "vac-muted", children: ["When enabled, search words appear as ", _jsx("code", { children: "[masked]" }), " in the recording. Your recording stays in this browser tab."] }), source === "ghost" && pathname !== "/" ? ({ returnHome }) : (_jsx("button", { className: "vac-button", disabled: replay.starting, onClick: () => replay.start(source), children: _jsx("span", { className: "vac-os-button-face", children: replay.starting
+                                        ? "Starting recorder…"
+                                        : source === "ghost"
+                                            ? "Run ghost simulation →"
+                                            : "Start my recording →" }) })), replay.message && _jsx("p", { role: "status", children: replay.message })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Watch your actual visit" }), replay.recording.length < 2 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Record a new visit to capture the page for playback." }), _jsx("button", { className: "vac-button", onClick: () => {
+                                    replay.clear();
+                                    onStage(1);
+                                }, children: _jsx("span", { className: "vac-os-button-face", children: "Continue the exercise \u2192" }) })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "vac-muted", children: "Actual page recording, stored in this tab. Nothing sent to PostHog." }), sessionPlayer, _jsxs("div", { className: "vac-lab-output", children: [_jsx("h4", { children: "Look for the search" }), _jsx("p", { children: replay.capturedMasked
+                                            ? "Search words were masked before storage. You can still watch the typing and surrounding interactions."
+                                            : "Search words are visible in this recording. Record another visit with masking on to compare." })] }), _jsxs("section", { className: "vac-lab-step", "aria-label": "Captured interactions", children: [_jsx("h4", { children: "Captured interactions" }), _jsx("ol", { children: replay.frames
+                                            .filter((item) => item.kind !== "move" && item.kind !== "scroll")
+                                            .map((item, i) => (_jsxs("li", { children: [(item.at / 1000).toFixed(1), "s \u00B7 ", item.label, item.value !== undefined ? `: ${item.value}` : ""] }, i))) })] }), source === "ghost" ? (_jsx("button", { className: "vac-button", onClick: () => {
+                                    replay.clear();
+                                    replay.setExercise("manual");
+                                    onStage(1);
+                                }, children: _jsx("span", { className: "vac-os-button-face", children: "Record my own visit \u2192" }) })) : (_jsx(FinishLabButton, { onClick: () => onStage(3) }))] }))] })), _jsxs("details", { className: "vac-lab-step", children: [_jsx("summary", { children: "About this exercise" }), _jsx("p", { children: "This uses rrweb to record and replay actual page changes, clicks, scrolling, and typing. It stays in memory in this tab. The playground and other form fields are excluded. No recording is uploaded to PostHog. Reloading clears it." }), _jsx("a", { href: "https://posthog.com/docs/session-replay", target: "_blank", rel: "noreferrer", children: "Session Replay docs \u2197" })] })] }));
+}

package/dist/ReplayRecorder.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type ReplayFrame } from "./replay-lab.js";
+import type { eventWithTime } from "@rrweb/types";
+type Mode = "ghost" | "manual" | null;
+type ReplayContextValue = {
+    exercise: "ghost" | "manual";
+    setExercise: (value: "ghost" | "manual") => void;
+    recording: eventWithTime[];
+    starting: boolean;
+    frames: ReplayFrame[];
+    mode: Mode;
+    masked: boolean;
+    setMasked: (value: boolean) => void;
+    capturedMasked: boolean;
+    message: string;
+    start: (mode: Exclude<Mode, null>) => void;
+    stop: () => void;
+    clear: () => void;
+    reset: () => void;
+    resetCount: number;
+};
+export declare const useReplay: () => ReplayContextValue;
+export declare function ReplayProvider({ children, open, pathname, }: {
+    children: ReactNode;
+    open: boolean;
+    pathname: string;
+}): import("react").JSX.Element;
+export {};