@posthog/twig-components 0.1.0

package/dist/ReplayRecorder.js

@@ -0,0 +1,357 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { REPLAY_LIMIT, replayPage, searchValue } from "./replay-lab.js";
+const ReplayContext = createContext({
+    exercise: "ghost",
+    setExercise: () => { },
+    recording: [],
+    starting: false,
+    frames: [],
+    mode: null,
+    masked: true,
+    setMasked: () => { },
+    capturedMasked: true,
+    message: "",
+    start: () => { },
+    stop: () => { },
+    clear: () => { },
+    reset: () => { },
+    resetCount: 0,
+});
+export const useReplay = () => useContext(ReplayContext);
+export function ReplayProvider({ children, open, pathname, }) {
+    const [exercise, setExercise] = useState("ghost");
+    const [resetCount, setResetCount] = useState(0);
+    const [recording, setRecording] = useState([]);
+    const [starting, setStarting] = useState(false);
+    const captured = useRef([]);
+    const stopRecorder = useRef(undefined);
+    const [frames, setFrames] = useState([]);
+    const [mode, setMode] = useState(null);
+    const [masked, setMasked] = useState(true);
+    const [capturedMasked, setCapturedMasked] = useState(true);
+    const [message, setMessage] = useState("");
+    const [cursor, setCursor] = useState(null);
+    const session = useRef({ mode: null, start: 0, masked: true, count: 0 });
+    const abort = useRef(null);
+    const pageRef = useRef(pathname);
+    function stop() {
+        session.current.mode = null;
+        abort.current?.abort();
+        stopRecorder.current?.();
+        stopRecorder.current = undefined;
+        setRecording([...captured.current]);
+        setStarting(false);
+        setMode(null);
+        setCursor(null);
+    }
+    function reset() {
+        stop();
+        captured.current = [];
+        setRecording([]);
+        setFrames([]);
+        setMessage("");
+        setExercise("ghost");
+        setMasked(true);
+        setCapturedMasked(true);
+        setResetCount((value) => value + 1);
+    }
+    function add(frame) {
+        const current = session.current;
+        if (!current.mode)
+            return;
+        if (current.count >= REPLAY_LIMIT) {
+            stop();
+            setMessage("Recording limit reached. Your visit is ready to inspect.");
+            return;
+        }
+        current.count++;
+        setFrames((previous) => [
+            ...previous,
+            {
+                ...frame,
+                at: Math.round(performance.now() - current.start),
+                page: pageRef.current,
+            },
+        ]);
+    }
+    useEffect(() => {
+        pageRef.current = pathname;
+        if (!replayPage(pathname))
+            stop();
+        else
+            add({
+                kind: "page",
+                label: pathname === "/" ? "Find a stay" : "Stay details",
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Record route changes only.
+    }, [pathname]);
+    useEffect(() => {
+        if (!open)
+            stop();
+    }, [open]);
+    useEffect(() => {
+        if (!mode)
+            return;
+        let lastMove = 0, lastScroll = 0;
+        const scope = (target) => target instanceof Element &&
+            !!target.closest(".vac-content, .vac-header");
+        const coords = (event) => ({
+            x: Math.round((event.clientX / window.innerWidth) * 100),
+            y: Math.round((event.clientY / window.innerHeight) * 100),
+        });
+        const move = (event) => {
+            if (session.current.mode !== "manual" ||
+                !scope(event.target) ||
+                performance.now() - lastMove < 150)
+                return;
+            lastMove = performance.now();
+            add({ kind: "move", label: "Pointer moved", ...coords(event) });
+        };
+        const click = (event) => {
+            if (!scope(event.target))
+                return;
+            const target = event.target.closest("[data-replay-label]");
+            if (target) {
+                const rect = target.getBoundingClientRect();
+                add({
+                    kind: "click",
+                    label: target.dataset.replayLabel.slice(0, 100),
+                    ...(event.detail
+                        ? coords(event)
+                        : {
+                            x: Math.round(((rect.left + rect.width / 2) / innerWidth) * 100),
+                            y: Math.round(((rect.top + rect.height / 2) / innerHeight) * 100),
+                        }),
+                });
+            }
+        };
+        const input = (event) => {
+            if (event.target instanceof HTMLInputElement &&
+                event.target.id === "stay-search")
+                add({
+                    kind: "input",
+                    label: "Search stays",
+                    value: searchValue(event.target.value, session.current.masked),
+                });
+        };
+        const scroll = () => {
+            if (performance.now() - lastScroll < 350)
+                return;
+            lastScroll = performance.now();
+            add({ kind: "scroll", label: "Scrolled the page" });
+        };
+        const interrupt = (event) => {
+            if (event.isTrusted && session.current.mode === "ghost") {
+                stop();
+                setMessage("Ghost visit stopped because you took control. Inspect it or record your own visit.");
+            }
+        };
+        document.addEventListener("pointermove", move);
+        document.addEventListener("click", click, true);
+        document.addEventListener("input", input, true);
+        window.addEventListener("scroll", scroll);
+        document.addEventListener("pointerdown", interrupt, true);
+        document.addEventListener("keydown", interrupt, true);
+        const timeout = window.setTimeout(() => {
+            stop();
+            setMessage("Two-minute limit reached. Your visit is ready to inspect.");
+        }, 120000);
+        return () => {
+            window.clearTimeout(timeout);
+            document.removeEventListener("pointermove", move);
+            document.removeEventListener("click", click, true);
+            document.removeEventListener("input", input, true);
+            window.removeEventListener("scroll", scroll);
+            document.removeEventListener("pointerdown", interrupt, true);
+            document.removeEventListener("keydown", interrupt, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Handlers read the current session ref.
+    }, [mode]);
+    useEffect(() => () => {
+        session.current.mode = null;
+        abort.current?.abort();
+        stopRecorder.current?.();
+    }, []);
+    async function ghost(signal) {
+        const wait = (ms) => new Promise((resolve, reject) => {
+            if (signal.aborted) {
+                reject(new Error("stopped"));
+                return;
+            }
+            const cancel = () => {
+                clearTimeout(timer);
+                reject(new Error("stopped"));
+            };
+            const timer = setTimeout(() => {
+                signal.removeEventListener("abort", cancel);
+                resolve();
+            }, ms);
+            signal.addEventListener("abort", cancel, { once: true });
+        });
+        const target = async (selector) => {
+            const element = document.querySelector(selector);
+            if (!element)
+                throw new Error("missing target");
+            element.scrollIntoView({ block: "center", behavior: "instant" });
+            await wait(300);
+            const rect = element.getBoundingClientRect();
+            const point = {
+                x: rect.left + rect.width / 2,
+                y: rect.top + rect.height / 2,
+            };
+            setCursor(point);
+            element.dispatchEvent(new MouseEvent("mousemove", {
+                bubbles: true,
+                clientX: point.x,
+                clientY: point.y,
+            }));
+            add({
+                kind: "move",
+                label: "Ghost pointer moved",
+                x: Math.round((point.x / innerWidth) * 100),
+                y: Math.round((point.y / innerHeight) * 100),
+            });
+            await wait(700);
+            return element;
+        };
+        const click = (element) => {
+            const rect = element.getBoundingClientRect();
+            element.dispatchEvent(new MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+                clientX: rect.left + rect.width / 2,
+                clientY: rect.top + rect.height / 2,
+            }));
+        };
+        try {
+            await wait(500);
+            click(await target('[data-replay-label="Filter: Forest"]'));
+            await wait(900);
+            click(await target('[data-replay-label="Filter: Coast"]'));
+            await wait(900);
+            click(await target('[data-replay-label="Filter: All"]'));
+            const input = (await target("#stay-search"));
+            input.focus({ preventScroll: true });
+            for (const value of ["A", "Ad", "Adi", "Adir", "Adiro", "Adiron"]) {
+                Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(input, value);
+                input.dispatchEvent(new Event("input", { bubbles: true }));
+                await wait(220);
+            }
+            await wait(900);
+            click(await target('[data-replay-label="Open stay: stay-01"]'));
+            await wait(1200);
+            stop();
+            setMessage("Ghost visit complete. Inspect the sequence to see how it reached a stay.");
+        }
+        catch {
+            if (!signal.aborted) {
+                stop();
+                setMessage("The page changed before the ghost finished. You can inspect the captured portion or try again.");
+            }
+        }
+    }
+    async function start(next) {
+        stop();
+        if (!replayPage(pathname) || (next === "ghost" && pathname !== "/")) {
+            setMessage("Return to Find a stay to run the ghost visit.");
+            return;
+        }
+        const controller = new AbortController();
+        abort.current = controller;
+        setStarting(true);
+        try {
+            const { record } = await import("@rrweb/record");
+            if (controller.signal.aborted)
+                return;
+            captured.current = [];
+            setRecording([]);
+            let bytes = 0;
+            const cleanup = record({
+                blockSelector: "#twig-playground, .vac-playground-invite, .vac-replay-stop, .vac-ghost-cursor, input:not(#stay-search), textarea, select",
+                maskAllInputs: true,
+                maskInputFn: (text, element) => element.id === "stay-search" && !masked ? text : "[masked]",
+                recordCanvas: false,
+                collectFonts: true,
+                sampling: { mousemove: 100, scroll: 200 },
+                emit: (event) => {
+                    if (controller.signal.aborted)
+                        return;
+                    bytes += JSON.stringify(event).length;
+                    if (bytes > 8_000_000 || captured.current.length >= 3000) {
+                        queueMicrotask(() => {
+                            stop();
+                            setMessage("Recording limit reached. Your visit is ready to inspect.");
+                        });
+                        return;
+                    }
+                    captured.current.push(event);
+                },
+            });
+            if (!cleanup)
+                throw new Error("Recorder unavailable");
+            stopRecorder.current = cleanup;
+            if (controller.signal.aborted) {
+                cleanup();
+                return;
+            }
+        }
+        catch {
+            setStarting(false);
+            setMessage("Could not start the page recorder. Please try again.");
+            return;
+        }
+        setStarting(false);
+        session.current = {
+            mode: next,
+            start: performance.now(),
+            masked,
+            count: 0,
+        };
+        setFrames([]);
+        setCapturedMasked(masked);
+        setMessage("");
+        setMode(next);
+        add({
+            kind: "page",
+            label: pathname === "/" ? "Find a stay" : "Stay details",
+        });
+        const activeFilter = document.querySelector('#stay-setting-filters [aria-pressed="true"]');
+        if (activeFilter?.dataset.replayLabel)
+            add({ kind: "state", label: activeFilter.dataset.replayLabel });
+        const search = document.querySelector("#stay-search");
+        if (search?.value)
+            add({
+                kind: "input",
+                label: "Initial search",
+                value: searchValue(search.value, masked),
+            });
+        if (next === "ghost")
+            void ghost(controller.signal);
+    }
+    return (_jsxs(ReplayContext.Provider, { value: {
+            exercise,
+            setExercise,
+            reset,
+            resetCount,
+            recording,
+            starting,
+            frames,
+            mode,
+            masked,
+            setMasked,
+            capturedMasked,
+            message,
+            start,
+            stop,
+            clear: () => {
+                stop();
+                captured.current = [];
+                setRecording([]);
+                setFrames([]);
+                setMessage("");
+            },
+        }, children: [children, mode === "manual" && (_jsxs("div", { className: "vac-replay-stop", children: [_jsx("strong", { children: "Recording your visit" }), _jsx("span", { children: "Local only" }), _jsx("button", { type: "button", onClick: stop, children: "End recording and review" })] })), cursor && (_jsxs("div", { className: "vac-ghost-cursor", style: { left: cursor.x, top: cursor.y }, "aria-hidden": "true", children: [_jsx("svg", { width: "24", height: "30", viewBox: "0 0 24 30", children: _jsx("path", { d: "M2 2v23l6-6 5 9 4-2-5-9h9Z", fill: "var(--ph-neutral-ink)", stroke: "var(--ph-neutral-background)", strokeWidth: "2", strokeLinejoin: "round" }) }), _jsx("span", { children: "Ghost visitor" })] }))] }));
+}

package/dist/SessionPlayer.d.ts

@@ -0,0 +1,5 @@
+import type { eventWithTime } from "@rrweb/types";
+import "@rrweb/replay/dist/style.css";
+export declare function SessionPlayer({ events }: {
+    events: eventWithTime[];
+}): import("react").JSX.Element;

package/dist/SessionPlayer.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "@rrweb/replay/dist/style.css";
+export function SessionPlayer({ events }) {
+    const container = useRef(null);
+    const controls = useRef(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    const [fullscreenError, setFullscreenError] = useState("");
+    const viewport = useRef(null);
+    const root = useRef(null);
+    const player = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [position, setPosition] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [status, setStatus] = useState("Loading recording…");
+    useEffect(() => {
+        let disposed = false;
+        let observer;
+        let ticker;
+        let instance;
+        let onFullscreen;
+        void import("@rrweb/replay")
+            .then(({ Replayer }) => {
+            if (disposed || !root.current || !viewport.current)
+                return;
+            instance = new Replayer(events, {
+                root: root.current,
+                mouseTail: false,
+                showWarning: false,
+                showDebug: false,
+                // Preserve layout when hiding overlays so recorded pointer coordinates stay aligned.
+                insertStyleRules: [
+                    ".vac-dock, .vac-playground-invite, .vac-replay-stop, .vac-ghost-cursor { visibility: hidden !important; }",
+                ],
+            });
+            player.current = instance;
+            const total = instance.getMetaData().totalTime;
+            setDuration(total);
+            setPosition(0);
+            setPlaying(false);
+            setStatus("");
+            instance.pause(0);
+            const resize = () => {
+                if (!instance || !viewport.current)
+                    return;
+                const iframe = instance.iframe;
+                const width = Number(iframe.getAttribute("width")) || 1280;
+                const height = Number(iframe.getAttribute("height")) || 800;
+                const scale = document.fullscreenElement === container.current
+                    ? Math.min(viewport.current.clientWidth / width, Math.max(80, window.innerHeight -
+                        (controls.current?.offsetHeight ?? 140) -
+                        48) / height)
+                    : viewport.current.clientWidth / width;
+                instance.wrapper.style.transformOrigin = "top left";
+                instance.wrapper.style.transform = `scale(${scale})`;
+                viewport.current.style.height = `${height * scale}px`;
+            };
+            onFullscreen = () => {
+                setFullscreen(document.fullscreenElement === container.current);
+                resize();
+            };
+            document.addEventListener("fullscreenchange", onFullscreen);
+            instance.on("resize", resize);
+            observer = new ResizeObserver(resize);
+            observer.observe(viewport.current);
+            if (controls.current)
+                observer.observe(controls.current);
+            resize();
+            ticker = setInterval(() => {
+                if (!instance)
+                    return;
+                const time = Math.min(total, Math.max(0, instance.getCurrentTime()));
+                setPosition(time);
+                if (time >= total)
+                    setPlaying(false);
+            }, 100);
+        })
+            .catch(() => {
+            if (!disposed)
+                setStatus("Could not load this recording. Try recording a new visit.");
+        });
+        return () => {
+            disposed = true;
+            if (onFullscreen)
+                document.removeEventListener("fullscreenchange", onFullscreen);
+            observer?.disconnect();
+            if (ticker)
+                clearInterval(ticker);
+            instance?.destroy();
+            player.current = null;
+        };
+    }, [events]);
+    return (_jsxs("div", { ref: container, className: "vac-session-player", children: [status && _jsx("p", { role: "status", children: status }), _jsx("div", { ref: viewport, className: "vac-session-viewport", children: _jsx("div", { ref: root }) }), _jsxs("div", { ref: controls, className: "vac-session-controls", children: [_jsxs("label", { htmlFor: "session-playhead", children: [(position / 1000).toFixed(1), "s / ", (duration / 1000).toFixed(1), "s"] }), _jsx("input", { id: "session-playhead", "aria-label": "Replay position", type: "range", min: 0, max: duration || 1, step: 100, value: position, disabled: !!status, onChange: (event) => {
+                            const time = Number(event.target.value);
+                            player.current?.pause(time);
+                            setPosition(time);
+                            setPlaying(false);
+                        } }), _jsx("button", { className: "vac-button", disabled: !!status, onClick: () => {
+                            if (playing) {
+                                player.current?.pause();
+                                setPlaying(false);
+                            }
+                            else {
+                                player.current?.play(position >= duration ? 0 : position);
+                                setPlaying(true);
+                            }
+                        }, children: _jsx("span", { className: "vac-os-button-face", children: playing
+                                ? "Pause"
+                                : position >= duration
+                                    ? "Replay visit"
+                                    : "Play visit" }) }), _jsx("button", { className: "vac-text-button", disabled: !!status, onClick: async () => {
+                            setFullscreenError("");
+                            try {
+                                if (document.fullscreenElement === container.current)
+                                    await document.exitFullscreen();
+                                else
+                                    await container.current?.requestFullscreen();
+                            }
+                            catch {
+                                setFullscreenError("Full screen is unavailable. You can still play the recording here.");
+                            }
+                        }, children: fullscreen ? "Exit full screen" : "View full screen" }), fullscreenError && _jsx("p", { role: "status", children: fullscreenError })] })] }));
+}

package/dist/StayCard.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { type Stay } from "./catalog.js";
+export declare function StayCardContent({ stay, image, linked, }: {
+    stay: Stay;
+    image: ReactNode;
+    linked?: boolean;
+}): import("react").JSX.Element;

package/dist/StayCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { nightlyPrice, stayLabel } from "./catalog.js";
+export function StayCardContent({ stay, image, linked = false, }) {
+    return (_jsxs(_Fragment, { children: [image, _jsxs("div", { className: "vac-card-body", children: [_jsxs("div", { className: "vac-row", children: [_jsx("h3", { children: stayLabel(stay) }), linked && _jsx("span", { "aria-hidden": "true", children: "\u2197" })] }), _jsx("p", { className: "vac-muted", children: stay.location ?? stay.setting }), stay.capacity && (_jsxs("p", { className: "vac-muted", children: [stay.capacity, " guests", stay.bedrooms ? ` · ${stay.bedrooms} bedrooms` : "", stay.bathrooms ? ` · ${stay.bathrooms} baths` : ""] })), _jsxs("p", { children: [_jsx("strong", { children: nightlyPrice(stay) }), " / night", " ", _jsx("span", { className: "vac-muted", children: "USD" })] })] })] }));
+}

package/dist/StayFilters.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type StaySetting } from "./settings.js";
+export { staySettings } from "./settings.js";
+export type { StaySetting } from "./settings.js";
+export type StayFiltersProps = {
+    value: StaySetting;
+    onChange: (value: StaySetting) => void;
+    id?: string;
+    className?: string;
+    buttonClassName?: string;
+    legendClassName?: string;
+    children?: ReactNode;
+};
+export declare function StayFilters({ value, onChange, id, className, buttonClassName, legendClassName, children, }: StayFiltersProps): import("react").JSX.Element;

package/dist/StayFilters.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { staySettings } from "./settings.js";
+export { staySettings } from "./settings.js";
+export function StayFilters({ value, onChange, id, className, buttonClassName, legendClassName, children, }) {
+    return (_jsxs("fieldset", { id: id, className: className, children: [_jsx("legend", { className: legendClassName, children: "Filter by destination type" }), children, staySettings.map((setting) => (_jsx("button", { "data-replay-label": `Filter: ${setting}`, type: "button", "aria-pressed": value === setting, className: buttonClassName, onClick: () => onChange(setting), children: setting === "All" ? "All stays" : setting }, setting)))] }));
+}

package/dist/StayLab.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type Stay } from "./catalog.js";
+import { type StayLabState, type StayLabAction } from "./stay-lab.js";
+export declare const useStayLab: () => {
+    state: StayLabState;
+    dispatch: (action: StayLabAction) => void;
+};
+export declare function StayLabProvider({ children, }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function StayLab({ stage, onStage, pathname, renderStayLink, }: {
+    stage: number;
+    onStage: (value: number) => void;
+    pathname: string;
+    renderStayLink: (stay: Stay) => ReactNode;
+}): import("react").JSX.Element;

package/dist/StayLab.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LabChoices } from "./LabChoices.js";
+import { FinishLabButton } from "./FinishLabButton.js";
+import { createContext, useContext, useReducer, useState, } from "react";
+import { stays } from "./catalog.js";
+import { initialStayLab, stayLabReducer, stayCode, } from "./stay-lab.js";
+import { LabChecklist } from "./LabChecklist.js";
+const Context = createContext({ state: initialStayLab, dispatch: () => { } });
+export const useStayLab = () => useContext(Context);
+export function StayLabProvider({ children, }) {
+    const [state, dispatch] = useReducer(stayLabReducer, initialStayLab);
+    return (_jsx(Context.Provider, { value: { state, dispatch }, children: children }));
+}
+function Action({ children, onClick, }) {
+    return (_jsx("button", { className: "vac-button", type: "button", onClick: onClick, children: _jsx("span", { className: "vac-os-button-face", children: children }) }));
+}
+export function StayLab({ stage, onStage, pathname, renderStayLink, }) {
+    const { state, dispatch } = useStayLab();
+    const [identified, setIdentified] = useState(false);
+    const [selected, select] = useState(0);
+    const repair = state.before.length > 0;
+    const distinct = new Set(state.events.map((event) => event.actualStayId));
+    const complete = distinct.size >= 2;
+    const nextStay = stays.find((stay) => `/stays/${stay.id}` !== pathname && !distinct.has(stay.id)) ?? stays[0];
+    if (stage === 0)
+        return (_jsxs("div", { className: "vac-guide-intro", children: [_jsx("h3", { children: "Which stay did they view?" }), _jsx("p", { children: "A view event tells you someone opened a listing. To compare listings, it also needs to say which stay they viewed." }), _jsxs("div", { className: "vac-guide-example vac-booking-overview", children: [_jsx("strong", { children: "Open a stay \u2192 Record its view \u2192 Identify the listing" }), _jsx("p", { children: "You\u2019ll visit two stays, then connect their IDs to the event." })] }), _jsx(Action, { onClick: () => onStage(1), children: "Follow a stay view \u2192" })] }));
+    if (stage === 1 && (!state.applied || !state.running))
+        return (_jsxs("section", { className: "vac-lab vac-builder", children: [_jsx("h3", { children: repair ? "Connect the stay ID" : "Record when a stay opens" }), _jsx("p", { children: repair ? (_jsxs(_Fragment, { children: ["Twig holds the listing\u2019s ID in ", _jsx("code", { children: "stay.id" }), ". Add it as", " ", _jsx("code", { children: "stay_id" }), " so the event identifies the listing."] })) : (_jsxs(_Fragment, { children: ["This code runs when a stay page opens. It records", " ", _jsx("code", { children: "stay_viewed" }), ", but doesn\u2019t include which stay it was."] })) }), repair && (_jsxs("label", { className: "vac-replay-mask", children: [_jsx("input", { type: "checkbox", checked: identified, onChange: (event) => setIdentified(event.target.checked) }), "Include ", _jsx("code", { children: "stay_id" })] })), _jsx("pre", { className: "vac-booking-code", children: stayCode(repair && identified) }), _jsx("button", { className: "vac-button", disabled: repair && !identified, onClick: () => dispatch({ type: "apply", identified: repair && identified }), children: _jsx("span", { className: "vac-os-button-face", children: "Apply the code \u2192" }) })] }));
+    if (stage === 1)
+        return (_jsxs("section", { className: "vac-lab vac-builder", children: [_jsx("h3", { children: complete ? "Your stay views are ready" : "Visit two stays on Twig" }), _jsx("p", { children: complete ? ("Both pages opened and produced view events. Review what each event can tell you.") : (_jsx(_Fragment, { children: "Code applied. Open another stay below. The event fires when its page opens, not when you hover over its link." })) }), _jsx(LabChecklist, { label: "Stay view progress", items: [
+                        { label: "Open the first stay", done: distinct.size >= 1 },
+                        { label: "Open a different stay", done: complete },
+                    ] }), state.events.length > 0 && (_jsxs("p", { role: "status", children: ["Last viewed: ", state.events.at(-1)?.actualTitle, "."] })), complete ? (_jsx(Action, { onClick: () => onStage(2), children: "Review the stay views \u2192" })) : (renderStayLink(nextStay)), _jsxs("details", { className: "vac-lab-step", children: [_jsx("summary", { children: "Applied code" }), _jsx("pre", { className: "vac-booking-code", children: stayCode(state.applied === "identified") })] })] }));
+    const event = state.events[selected] ?? state.events.at(-1);
+    if (!event)
+        return (_jsxs("div", { className: "vac-lab", children: [_jsx("h3", { children: "Open a stay first" }), _jsx(Action, { onClick: () => onStage(1), children: "Continue the exercise \u2192" })] }));
+    return (_jsxs("section", { className: "vac-lab vac-builder", children: [_jsx("h3", { children: repair
+                    ? "See which listing each event describes"
+                    : "Two views, no listing IDs" }), _jsx(LabChoices, { label: "Recorded visit", value: state.events.indexOf(event), onChange: select, options: state.events.map((view, index) => ({
+                    value: index,
+                    label: (_jsxs(_Fragment, { children: [index + 1, ". ", view.actualTitle, " \u00B7", " ", _jsx("code", { children: view.properties.stay_id ?? "ID not captured" })] })),
+                })) }), _jsxs("dl", { className: "vac-event-comparison", children: [_jsxs("div", { children: [_jsx("dt", { children: "Viewed on Twig" }), _jsx("dd", { children: event.actualTitle })] }), _jsxs("div", { children: [_jsxs("dt", { children: ["Captured ", _jsx("code", { children: "stay_id" })] }), _jsx("dd", { children: _jsx("code", { children: event.properties.stay_id ?? "Not captured" }) })] })] }), _jsx("p", { children: repair ? (_jsxs(_Fragment, { children: ["The event identifies the stay using ", _jsx("code", { children: "stay_id" }), ". The event name stays the same across listings."] })) : ("The lab knows which page you opened, but the captured event doesn’t. Both visits produce indistinguishable events.") }), _jsx("pre", { children: JSON.stringify({ event: event.event, properties: event.properties }, null, 2) }), repair ? (_jsxs(_Fragment, { children: [_jsx("h4", { children: "Views by stay" }), _jsx("ul", { className: "vac-booking-funnel", children: [...distinct].map((id) => (_jsxs("li", { children: [_jsx("code", { children: id }), _jsx("strong", { children: state.events.filter((view) => view.properties.stay_id === id).length })] }, id))) }), _jsx("p", { children: "Before: no listing IDs. Now: views grouped by stay. These are views, not unique visitors." }), _jsx(FinishLabButton, { onClick: () => onStage(3) })] })) : (_jsx(Action, { onClick: () => {
+                    dispatch({ type: "repair" });
+                    onStage(1);
+                }, children: "Add the missing stay ID \u2192" }))] }));
+}

package/dist/ai-lab.d.ts

@@ -0,0 +1,55 @@
+/** A local teaching model. These records never leave the browser. */
+export type AiConfig = {
+    input: boolean;
+    output: boolean;
+    linked: boolean;
+    errors: boolean;
+};
+export type AiScenario = "success" | "timeout";
+export type AiRun = {
+    id: number;
+    prompt: string;
+    response: string | null;
+    scenario: AiScenario;
+    config: AiConfig;
+    traceId: string;
+    event: {
+        event: "$ai_generation";
+        properties: Record<string, unknown>;
+    };
+};
+export type AiState = {
+    config: AiConfig;
+    applied: AiConfig | null;
+    runs: AiRun[];
+    awaitingRun: boolean;
+};
+export declare const initialAiState: AiState;
+export type AiAction = {
+    type: "edit";
+    config: Partial<AiConfig>;
+} | {
+    type: "apply";
+} | {
+    type: "run";
+    prompt: string;
+    scenario: AiScenario;
+} | {
+    type: "clear";
+} | {
+    type: "reset";
+};
+export declare const fixtureRequest = "A forest weekend for four, with a fire pit and lake access.";
+export declare const fixtureResponse = "Try Adiron-shack: an A-frame in the Adirondacks with two king suites, a path to the lake, and a fire pit. Sleeps four, $355 per night.";
+export declare function aiReducer(state: AiState, action: AiAction): AiState;
+export declare function aiChecks(run: AiRun): {
+    label: string;
+    passed: boolean;
+    help: string;
+}[];
+export declare function aiCode(config: AiConfig): string;
+/** Feedback follows captured evidence, not whether every optional field was selected. */
+export declare function recommendationEvidence(run: AiRun): {
+    complete: boolean;
+    explanation: string;
+};