@sansavision/yousaid-react 0.0.0-stage → 0.2.0

package/dist/proof.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Published proof components. They consume the same eligibility-gated render
+ * manifest as the <yousaid-proof> Web Component and the headless API: only
+ * eligible items, only allowed identity fields, with required disclosures.
+ * Widget text follows the `locale` prop, then the page language, then the
+ * browser (PROOF_STRINGS in @sansavision/yousaid). Moving formats always have a
+ * pause control and stay still for visitors who prefer reduced motion.
+ */
+import { type CSSProperties } from "react";
+import { type ProofRender, type ProofRenderItem, type ProofTheme } from "@sansavision/yousaid";
+/**
+ * Reports a site conversion (for example "signup", "trial" or "purchase") to
+ * every proof placement rendered on this page, so Publish analytics can show
+ * conversions that came after a proof impression in the same page load. Names
+ * are short lowercase slugs; each is sent once per page load. No cookie or
+ * visitor id is involved, and analytics labels the result as an association.
+ *
+ *   const convert = useProofConversion();
+ *   onSignupSuccess(() => convert("signup"));
+ * @experimental
+ */
+export declare function useProofConversion(): (name: string) => number;
+/** @experimental */
+export type ProofComponentProps = {
+    placementId: string;
+    /** YouSaid origin. Defaults to https://yousaid.dev. */
+    endpoint?: string;
+    /** Pre-fetched manifest (SSR / static signed content). Skips the network request. */
+    manifest?: ProofRender;
+    /**
+     * Signed snapshot used only if the live request fails, only until it expires,
+     * and only after its Ed25519 signature verifies against the YouSaid JWKS
+     * (fetched from `endpoint`). Unverifiable snapshots are never shown.
+     */
+    fallback?: ProofRender;
+    /** Color scheme override. */
+    theme?: "light" | "dark" | "auto";
+    /** Widget text language (for example "de"). Defaults to the page language, then the browser's. */
+    locale?: string;
+    /** Disables analytics (for previews). */
+    preview?: boolean;
+    className?: string;
+};
+/** @experimental */
+export declare function proofThemeStyle(theme: ProofTheme | undefined, override?: "light" | "dark" | "auto"): CSSProperties;
+/** @experimental */
+export type ProofRenderState = {
+    render: ProofRender | null;
+    status: "loading" | "ready" | "fallback" | "error";
+};
+/**
+ * Loads (or accepts) a render manifest. Stale or unverified fallbacks are never shown.
+ * @experimental
+ */
+export declare function useProofRender(placementId: string, options?: Pick<ProofComponentProps, "endpoint" | "manifest" | "fallback">): ProofRenderState;
+/** @experimental */
+export declare function ProofWall(props: ProofComponentProps): import("react").JSX.Element | null;
+/** @experimental */
+export declare function ProofCard(props: ProofComponentProps): import("react").JSX.Element | null;
+/** @experimental */
+export declare function ProofCarousel(props: ProofComponentProps & {
+    autoplayMs?: number;
+}): import("react").JSX.Element | null;
+/**
+ * Portrait and company logo on an avatar and logo strip (first party; present only when consent allows it).
+ * @experimental
+ */
+export type ProofIdentityImages = NonNullable<ProofRenderItem["identityImages"]>;
+/**
+ * A wrapping row of round portraits or company logos. No animation; images load lazily from YouSaid only.
+ * @experimental
+ */
+export declare function ProofLogoStrip(props: ProofComponentProps): import("react").JSX.Element | null;
+/** @experimental */
+export declare function ProofBadge(props: ProofComponentProps): import("react").JSX.Element;
+type MapPlace = {
+    key: string;
+    label: string;
+    lat: number;
+    lon: number;
+    count: number;
+};
+/**
+ * Groups located stories by place (country or region), most stories first.
+ * @experimental
+ */
+export declare function mapPlaces(items: ProofRenderItem[]): MapPlace[];
+/**
+ * Customer map: an inline SVG outline (no map tiles, no third-party requests)
+ * with one marker per country or region the customers allowed, and a list of
+ * place buttons (the accessible way in) that filters the stories below.
+ * @experimental
+ */
+export declare function ProofMap(props: ProofComponentProps): import("react").JSX.Element | null;
+/**
+ * A horizontal row of stories. It scrolls gently unless the visitor prefers reduced motion, with a pause button, and stops on hover and focus.
+ * @experimental
+ */
+export declare function ProofMarquee(props: ProofComponentProps): import("react").JSX.Element | null;
+/**
+ * Floating video bubble. Only approved video stories with captions; it never
+ * plays by itself, plays with captions on, opens with Enter or Space, closes
+ * with Escape (focus returns to the bubble) and can be hidden for the page
+ * view (`onDismiss` lets your app remember that; nothing is stored here).
+ * `inline` keeps it inside its container, for previews.
+ * @experimental
+ */
+export declare function ProofVideoBubble(props: ProofComponentProps & {
+    inline?: boolean;
+    onDismiss?: () => void;
+}): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=proof.d.ts.map

package/dist/proof.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"proof.d.ts","sourceRoot":"","sources":["../src/proof.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,EAAE,KAAK,aAAa,EAAyG,MAAM,OAAO,CAAC;AAClJ,OAAO,EAC0F,KAAK,WAAW,EAAE,KAAK,eAAe,EAAkC,KAAK,UAAU,EAEvL,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAE7D;AAED,oBAAoB;AACpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6BF,oBAAoB;AACpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAclH;AAED,oBAAoB;AACpB,MAAM,MAAM,gBAAgB,GAAG;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;CAAE,CAAC;AAElH;;;GAGG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAM,GAAG,gBAAgB,CAkBnJ;AAsHD,oBAAoB;AACpB,wBAAgB,SAAS,CAAC,KAAK,EAAE,mBAAmB,sCAoBnD;AAED,oBAAoB;AACpB,wBAAgB,SAAS,CAAC,KAAK,EAAE,mBAAmB,sCAKnD;AAED,oBAAoB;AACpB,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,sCAyBjF;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAiBjF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sCAOxD;AAED,oBAAoB;AACpB,wBAAgB,UAAU,CAAC,KAAK,EAAE,mBAAmB,+BAapD;AAED,KAAK,QAAQ,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,QAAQ,EAAE,CAU9D;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,mBAAmB,sCAyBlD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,sCAmBtD;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAqDzG"}

package/dist/proof.js

@@ -0,0 +1,383 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Published proof components. They consume the same eligibility-gated render
+ * manifest as the <yousaid-proof> Web Component and the headless API: only
+ * eligible items, only allowed identity fields, with required disclosures.
+ * Widget text follows the `locale` prop, then the page language, then the
+ * browser (PROOF_STRINGS in @sansavision/yousaid). Moving formats always have a
+ * pause control and stay still for visitors who prefer reduced motion.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createProofBeacon, fetchProofRender, isRenderFresh, mapPoint, proofLanguage, proofText, sendProofConversion, verifiedProofFallback, worldOutlinePath, } from "@sansavision/yousaid";
+/**
+ * Reports a site conversion (for example "signup", "trial" or "purchase") to
+ * every proof placement rendered on this page, so Publish analytics can show
+ * conversions that came after a proof impression in the same page load. Names
+ * are short lowercase slugs; each is sent once per page load. No cookie or
+ * visitor id is involved, and analytics labels the result as an association.
+ *
+ *   const convert = useProofConversion();
+ *   onSignupSuccess(() => convert("signup"));
+ * @experimental
+ */
+export function useProofConversion() {
+    return useCallback((name) => sendProofConversion(name), []);
+}
+const MIN_HEIGHT = { wall: 360, carousel: 260, card: 180, badge: 44, logo_strip: 96, map: 360, marquee: 220 };
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const LIGHT = { bg: "#ffffff", fg: "#17151f", muted: "#5d5a6b", card: "#f6f5fa", border: "#e4e2ec" };
+const DARK = { bg: "#111016", fg: "#f4f2fb", muted: "#aaa6b8", card: "#1b1a22", border: "#2d2b36" };
+function prefersDark() {
+    return typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-color-scheme: dark)").matches);
+}
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+}
+/** Starts still (server render and first paint) and moves only once the browser says motion is welcome. */
+function useReducedMotion() {
+    const [reduced, setReduced] = useState(true);
+    useEffect(() => { setReduced(prefersReducedMotion()); }, []);
+    return reduced;
+}
+function useLanguage(locale) {
+    const [language, setLanguage] = useState(() => proofLanguage(locale));
+    useEffect(() => {
+        setLanguage(proofLanguage(locale, typeof document !== "undefined" ? document.documentElement.lang : null, typeof navigator !== "undefined" ? navigator.language : null));
+    }, [locale]);
+    return language;
+}
+/** @experimental */
+export function proofThemeStyle(theme, override) {
+    const scheme = override ?? theme?.scheme ?? "auto";
+    const base = scheme === "dark" || (scheme === "auto" && prefersDark()) ? DARK : LIGHT;
+    return {
+        "--ys-accent": theme && HEX.test(theme.accent) ? theme.accent : "#6957e8",
+        "--ys-bg": theme?.background && HEX.test(theme.background) ? theme.background : base.bg,
+        "--ys-fg": theme?.foreground && HEX.test(theme.foreground) ? theme.foreground : base.fg,
+        "--ys-muted": base.muted,
+        "--ys-card": base.card,
+        "--ys-border": base.border,
+        "--ys-radius": `${Math.max(0, Math.min(32, theme?.radius ?? 16))}px`,
+        "--ys-font": (theme?.fontStack ?? "system-ui, sans-serif").replace(/[;{}<>]/g, ""),
+        "--ys-gap": theme?.density === "compact" ? "10px" : "16px",
+    };
+}
+/**
+ * Loads (or accepts) a render manifest. Stale or unverified fallbacks are never shown.
+ * @experimental
+ */
+export function useProofRender(placementId, options = {}) {
+    const [state, setState] = useState(() => options.manifest ? { render: options.manifest, status: "ready" } : { render: null, status: "loading" });
+    useEffect(() => {
+        if (options.manifest) {
+            setState({ render: options.manifest, status: "ready" });
+            return;
+        }
+        const controller = new AbortController();
+        fetchProofRender(placementId, { endpoint: options.endpoint, signal: controller.signal })
+            .then((render) => setState({ render, status: "ready" }))
+            .catch(async () => {
+            if (controller.signal.aborted)
+                return;
+            const fallback = options.fallback && isRenderFresh(options.fallback)
+                ? await verifiedProofFallback(options.fallback, { placementId, endpoint: options.endpoint })
+                : null;
+            if (controller.signal.aborted)
+                return;
+            setState(fallback ? { render: fallback, status: "fallback" } : { render: null, status: "error" });
+        });
+        return () => controller.abort();
+    }, [placementId, options.endpoint, options.manifest, options.fallback]);
+    return state;
+}
+function useBeacon(render, status, endpoint, preview) {
+    const [beacon, setBeacon] = useState(null);
+    useEffect(() => {
+        if (!render || preview || render.preview)
+            return;
+        const created = createProofBeacon(render.eventToken, { endpoint });
+        created.push({ t: "view" }, "view");
+        if (status === "fallback")
+            created.push({ t: "fallback" }, "fallback");
+        setBeacon(created);
+        return () => created.close();
+    }, [render, status, endpoint, preview]);
+    return beacon;
+}
+/** Qualified impression: at least 50% visible for at least 1 second (PRD §13.16). */
+function useQualifiedImpression(itemId, beacon) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node || !beacon || typeof IntersectionObserver === "undefined")
+            return;
+        let timer = 0;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry && entry.intersectionRatio >= 0.5 && !entry.target.hidden) {
+                if (!timer)
+                    timer = window.setTimeout(() => beacon.push({ t: "impression", i: itemId }, `imp:${itemId}`), 1000);
+            }
+            else {
+                window.clearTimeout(timer);
+                timer = 0;
+            }
+        }, { threshold: [0, 0.5, 1] });
+        observer.observe(node);
+        return () => { observer.disconnect(); window.clearTimeout(timer); };
+    }, [itemId, beacon]);
+    return ref;
+}
+const styles = `.ysp-r{background:var(--ys-bg);color:var(--ys-fg);font-family:var(--ys-font);border-radius:var(--ys-radius);padding:var(--ys-gap)}.ysp-r *,.ysp-bb *{box-sizing:border-box}.ysp-r [hidden],.ysp-bb [hidden]{display:none!important}.ysp-r h2{margin:0 0 var(--ys-gap);font-size:1.25rem}.ysp-g{columns:var(--ys-cols,3) 240px;column-gap:var(--ys-gap)}.ysp-c{break-inside:avoid;margin:0 0 var(--ys-gap);background:var(--ys-card);border:1px solid var(--ys-border);border-radius:var(--ys-radius);padding:18px;display:flex;flex-direction:column;gap:10px}.ysp-c blockquote{margin:0;line-height:1.55}.ysp-c h3{margin:0;font-size:1rem}.ysp-w{margin:0;font-size:.88rem}.ysp-w span{display:block;color:var(--ys-muted);font-size:.8rem}.ysp-s{margin:0;color:var(--ys-accent);letter-spacing:.1em}.ysp-d{margin:0;font-size:.76rem;color:var(--ys-muted);border-left:3px solid var(--ys-accent);padding-left:8px}.ysp-m{display:flex;justify-content:space-between;gap:8px;margin:0;font-size:.72rem;color:var(--ys-muted)}.ysp-m a{color:inherit}.ysp-c video,.ysp-c img{display:block;width:100%;height:auto;border-radius:calc(var(--ys-radius)*.6)}.ysp-c video{aspect-ratio:16/9;background:#000}.ysp-k{display:flex;align-items:center;gap:8px;margin-top:var(--ys-gap)}.ysp-k button,.ysp-pl button,.ysp-pz,.ysp-bh button,.ysp-bn button,.ysp-bd{min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--ys-border);background:var(--ys-card);color:var(--ys-fg);font:inherit;cursor:pointer}.ysp-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ys-card);border:1px solid var(--ys-border);color:var(--ys-fg);text-decoration:none}.ysp-b strong{color:var(--ys-accent)}.ysp-a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ys-accent);color:#fff;font-weight:600;text-decoration:none}.ysp-r a:focus-visible,.ysp-r button:focus-visible,.ysp-r [tabindex]:focus-visible,.ysp-bb button:focus-visible,.ysp-bb a:focus-visible,.ysp-bb video:focus-visible{outline:3px solid var(--ys-accent);outline-offset:2px}.ysp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ysp-l{display:flex;flex-wrap:wrap;gap:var(--ys-gap);list-style:none;margin:0;padding:0}.ysp-l figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:112px;text-align:center;font-size:.8rem}.ysp-l img{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--ys-card);border:1px solid var(--ys-border)}.ysp-l img[data-logo]{object-fit:contain;padding:6px;background:#fff}.ysp-l span{display:block;color:var(--ys-muted);font-size:.72rem}.ysp-mp svg{display:block;width:100%;height:auto;margin:0 0 var(--ys-gap)}.ysp-mp path{fill:var(--ys-card);stroke:var(--ys-border);stroke-width:.5}.ysp-mk{fill:var(--ys-accent);fill-opacity:.8;stroke:var(--ys-bg);stroke-width:.7;cursor:pointer}.ysp-mk[data-on]{fill-opacity:1;stroke:var(--ys-fg)}.ysp-pl{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--ys-gap);padding:0}.ysp-pl button[aria-pressed=true]{border-color:var(--ys-accent);box-shadow:inset 0 0 0 2px var(--ys-accent)}.ysp-pz{margin:0 0 var(--ys-gap)}.ysp-mq{overflow:hidden}.ysp-mq:not([data-run]){overflow-x:auto}.ysp-mt{display:flex;gap:var(--ys-gap);width:max-content}.ysp-ms{display:flex;gap:var(--ys-gap)}.ysp-mq .ysp-c{width:300px;margin:0;flex:none}`;
+/** Only the moving formats (marquee, scrolling wall) carry animation rules; everything else ships none. */
+const motionStyles = `.ysp-mq[data-run] .ysp-mt{animation:ysp-x var(--ys-dur,40s) linear infinite}@keyframes ysp-x{to{transform:translateX(calc(-50% - var(--ys-gap)/2))}}.ysp-wv[data-run]{max-height:560px;overflow:hidden}.ysp-wv[data-run] .ysp-wt{animation:ysp-y var(--ys-dur,60s) linear infinite}@keyframes ysp-y{to{transform:translateY(-50%)}}.ysp-mq:hover .ysp-mt,.ysp-mq:focus-within .ysp-mt,.ysp-mq[data-paused] .ysp-mt,.ysp-wv:hover .ysp-wt,.ysp-wv:focus-within .ysp-wt,.ysp-wv[data-paused] .ysp-wt{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.ysp-mt,.ysp-wt{animation:none!important}[data-dup],.ysp-pz{display:none!important}.ysp-mq{overflow-x:auto!important}.ysp-wv{max-height:none!important}}`;
+const bubbleStyles = `.ysp-bb{position:fixed;z-index:2147483000;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:calc(100vw - 40px);font-family:var(--ys-font);color:var(--ys-fg)}.ysp-bb[data-pos=bottom-left]{right:auto;left:20px;align-items:flex-start}.ysp-bb[data-inline]{position:absolute}.ysp-br{display:flex;align-items:center;gap:6px}.ysp-bd{padding:0}.ysp-bo{position:relative;width:72px;height:72px;border-radius:50%;padding:0;overflow:hidden;border:3px solid var(--ys-accent);background:var(--ys-card);box-shadow:0 6px 24px rgba(0,0,0,.25);cursor:pointer}.ysp-bo img{width:100%;height:100%;object-fit:cover}.ysp-bo span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3)}.ysp-bo span::before{content:"";margin-left:5px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.ysp-bp{width:min(360px,calc(100vw - 40px));max-height:calc(100vh - 140px);overflow:auto;background:var(--ys-bg);color:var(--ys-fg);border:1px solid var(--ys-border);border-radius:var(--ys-radius);box-shadow:0 12px 40px rgba(0,0,0,.3);padding:12px}.ysp-bp .ysp-c{margin:0}.ysp-bh,.ysp-bn{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px}.ysp-bn{margin:8px 0 0}.ysp-bh p{margin:0;font-weight:600;font-size:.9rem}@media (prefers-reduced-motion:no-preference){.ysp-bb{animation:ysp-in .3s ease-out}@keyframes ysp-in{from{opacity:0;transform:translateY(8px)}}}`;
+function Shell({ render, status, format, props, children, moving = false }) {
+    if (!render)
+        return status === "loading" ? _jsx("div", { className: props.className, style: { minHeight: MIN_HEIGHT[format] }, "aria-busy": "true" }) : null;
+    const cta = render.placement.cta && /^https?:\/\//.test(render.placement.cta.url) ? render.placement.cta : null;
+    return _jsxs("div", { className: `ysp-r ${props.className ?? ""}`, style: { ...proofThemeStyle(render.placement.theme, props.theme), minHeight: format === "badge" ? undefined : MIN_HEIGHT[format] }, "data-placement": render.placement.id, children: [_jsx("style", { children: moving ? styles + motionStyles : styles }), render.placement.headline && format !== "badge" ? _jsx("h2", { children: render.placement.headline }) : null, children, cta && format !== "badge" ? _jsx("a", { className: "ysp-a", href: cta.url, rel: "noopener", children: cta.label }) : null] });
+}
+function Stars({ rating, language }) {
+    if (rating === null)
+        return null;
+    const value = Math.max(0, Math.min(5, Math.round(rating > 5 ? rating / 2 : rating)));
+    return _jsxs("p", { className: "ysp-s", role: "img", "aria-label": proofText(language, "rated", { n: value }), children: ["★".repeat(value), "☆".repeat(5 - value)] });
+}
+function ProofMediaView({ item, beacon, language, eager = false, captionsOn = false }) {
+    const [armed, setArmed] = useState(eager);
+    const ref = useRef(null);
+    useEffect(() => { if (eager)
+        setArmed(true); }, [eager]);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node || armed || typeof IntersectionObserver === "undefined") {
+            if (typeof IntersectionObserver === "undefined")
+                setArmed(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => { if (entry?.isIntersecting) {
+            setArmed(true);
+            observer.disconnect();
+        } }, { rootMargin: "200px" });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [armed]);
+    const media = item.media;
+    if (!media)
+        return null;
+    if (media.kind === "image")
+        return _jsx("img", { src: media.src, alt: media.alt, loading: "lazy", decoding: "async", width: media.width ?? 640, height: media.height ?? 400 });
+    if (media.kind === "audio")
+        return _jsx("audio", { controls: true, preload: "none", src: media.src, "aria-label": proofText(language, "audio") });
+    return _jsxs("video", { ref: ref, controls: true, playsInline: true, preload: "none", crossOrigin: "anonymous", poster: media.poster ?? undefined, width: media.width ?? 640, height: media.height ?? 360, "aria-label": item.attribution.name ? proofText(language, "videoFrom", { name: item.attribution.name }) : proofText(language, "video"), onPlay: (event) => {
+            setArmed(true);
+            if (captionsOn) {
+                try {
+                    const track = event.currentTarget.textTracks[0];
+                    if (track)
+                        track.mode = "showing";
+                }
+                catch { /* default track stays */ }
+            }
+            beacon?.push({ t: "video_start", i: item.id }, `vs:${item.id}`);
+        }, onTimeUpdate: (event) => { const video = event.currentTarget; if (!video.duration)
+            return; const pct = (video.currentTime / video.duration) * 100; for (const q of [25, 50, 75])
+            if (pct >= q)
+                beacon?.push({ t: "video_progress", i: item.id, q }, `v${q}:${item.id}`); }, onEnded: () => beacon?.push({ t: "video_complete", i: item.id }, `vc:${item.id}`), children: [armed && media.adaptive ? _jsx("source", { src: media.adaptive.hls, type: "application/vnd.apple.mpegurl" }) : null, armed && media.adaptive?.dash ? _jsx("source", { src: media.adaptive.dash, type: "application/dash+xml" }) : null, armed ? _jsx("source", { src: media.src, type: media.mimeType }) : null, armed ? media.captions.map((track, index) => _jsx("track", { kind: "captions", src: track.src, srcLang: track.lang, label: track.label, default: index === 0 }, track.src)) : null] });
+}
+function ProofCardBody({ item, render, beacon, language, hidden, slideLabel, copy = false, eagerMedia, captionsOn }) {
+    // Copies (the hidden half of a looping marquee) never count impressions and carry no media.
+    const ref = useQualifiedImpression(item.id, copy ? null : beacon);
+    const detail = [item.attribution.role_title, item.attribution.company].filter(Boolean).join(", ");
+    const key = item.verification === "customer_approved" ? "approved" : item.verification === "imported_public_review" ? "imported" : "permission";
+    const label = render.placement.layout.showDate && item.sourceDate ? item.sourceDate : proofText(language, key);
+    return _jsxs("article", { ref: ref, className: "ysp-c", hidden: hidden, ...(copy ? {} : { "data-proof-item": item.id }), ...(item.location ? { "data-place": `${item.location.level}:${item.location.code}` } : {}), ...(slideLabel ? { role: "group", "aria-roledescription": "slide", "aria-label": slideLabel } : {}), children: [copy ? null : _jsx(ProofMediaView, { item: item, beacon: beacon, language: language, eager: eagerMedia, captionsOn: captionsOn }), _jsx(Stars, { rating: item.rating, language: language }), item.title ? _jsx("h3", { children: item.title }) : null, item.quote ? _jsx("blockquote", { children: item.quote }) : null, item.attribution.name || detail ? _jsxs("p", { className: "ysp-w", children: [item.attribution.name ?? proofText(language, "customer"), detail ? _jsx("span", { children: detail }) : null] }) : null, item.location ? _jsx("p", { className: "ysp-m", children: _jsx("span", { children: proofText(language, "fromPlace", { place: item.location.label }) }) }) : null, item.disclosure ? _jsx("p", { className: "ysp-d", children: item.disclosure }) : null, _jsxs("p", { className: "ysp-m", children: [_jsx("span", { children: label }), _jsx("a", { href: item.receiptUrl, target: "_blank", rel: "noopener", ...(copy ? { tabIndex: -1 } : { onClick: () => beacon?.push({ t: "click", i: item.id }) }), children: proofText(language, "about") })] })] });
+}
+function useProof(props) {
+    const state = useProofRender(props.placementId, props);
+    const beacon = useBeacon(state.render, state.status, props.endpoint, props.preview);
+    const language = useLanguage(props.locale);
+    return { ...state, beacon, language };
+}
+/** Pause control for moving formats. Its text says what it will do next. */
+function MotionToggle({ paused, onToggle, language }) {
+    return _jsx("button", { type: "button", className: "ysp-pz", onClick: onToggle, children: proofText(language, paused ? "play" : "pause") });
+}
+/** @experimental */
+export function ProofWall(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const reduced = useReducedMotion();
+    const [paused, setPaused] = useState(false);
+    const items = render?.items ?? [];
+    if (render && !items.length)
+        return null;
+    const columns = { "--ys-cols": String(render?.placement.layout.columns ?? 3) };
+    const moving = Boolean(render && render.placement.motion === "scroll" && !reduced && items.length > 1);
+    const cards = (copy) => render ? items.map((item) => _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language, copy: copy }, item.id)) : null;
+    return _jsx(Shell, { render: render, status: status, format: "wall", props: props, moving: moving, children: render && moving ? _jsxs(_Fragment, { children: [_jsx(MotionToggle, { paused: paused, onToggle: () => setPaused((value) => !value), language: language }), _jsx("div", { className: "ysp-wv", role: "region", "aria-label": render.placement.headline ?? proofText(language, "stories"), "data-run": "", ...(paused ? { "data-paused": "" } : {}), children: _jsxs("div", { className: "ysp-wt", style: { "--ys-dur": `${Math.max(20, items.length * 5)}s` }, children: [_jsx("div", { className: "ysp-g", style: columns, children: cards(false) }), _jsx("div", { className: "ysp-g", style: columns, "data-dup": "", "aria-hidden": "true", inert: true, children: cards(true) })] }) })] }) : render ? _jsx("div", { className: "ysp-g", style: columns, children: cards(false) }) : null });
+}
+/** @experimental */
+export function ProofCard(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const item = render?.items[0];
+    if (render && !item)
+        return null;
+    return _jsx(Shell, { render: render, status: status, format: "card", props: props, children: render && item ? _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language }) : null });
+}
+/** @experimental */
+export function ProofCarousel(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const items = useMemo(() => render?.items ?? [], [render]);
+    const [index, setIndex] = useState(0);
+    const [playing, setPlaying] = useState(false);
+    useEffect(() => { setPlaying(Boolean(render?.placement.layout.autoplay) && items.length > 1 && !prefersReducedMotion()); }, [render, items.length]);
+    useEffect(() => {
+        if (!playing)
+            return;
+        const timer = window.setInterval(() => setIndex((current) => (current + 1) % items.length), props.autoplayMs ?? 7000);
+        return () => window.clearInterval(timer);
+    }, [playing, items.length, props.autoplayMs]);
+    if (render && !items.length)
+        return null;
+    const go = (step) => { setPlaying(false); setIndex((current) => (current + step + items.length) % items.length); };
+    const onKey = (event) => { if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        go(event.key === "ArrowRight" ? 1 : -1);
+    } };
+    return _jsx(Shell, { render: render, status: status, format: "carousel", props: props, children: render ? _jsxs("div", { role: "region", "aria-roledescription": "carousel", "aria-label": render.placement.headline ?? proofText(language, "stories"), tabIndex: 0, onKeyDown: onKey, onMouseEnter: () => setPlaying(false), onFocus: () => setPlaying(false), children: [items.map((item, position) => _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language, hidden: position !== index, slideLabel: `${position + 1} / ${items.length}` }, item.id)), _jsxs("div", { className: "ysp-k", children: [_jsx("button", { type: "button", onClick: () => go(-1), "aria-label": proofText(language, "prev"), children: "\u2039" }), _jsx("button", { type: "button", onClick: () => go(1), "aria-label": proofText(language, "next"), children: "\u203A" }), playing ? _jsx("button", { type: "button", onClick: () => setPlaying(false), "aria-label": proofText(language, "pauseRotation"), children: "\u275A\u275A" }) : null, _jsxs("span", { "aria-live": "polite", children: [index + 1, " / ", items.length] })] })] }) : null });
+}
+function StripFigure({ item, beacon }) {
+    const ref = useQualifiedImpression(item.id, beacon);
+    const images = item.identityImages;
+    const image = images?.portrait ?? images?.companyLogo;
+    if (!image || !/^https?:\/\//.test(image.src))
+        return null;
+    const name = item.attribution.name;
+    const company = item.attribution.company;
+    return _jsx("li", { ref: ref, "data-proof-item": item.id, children: _jsxs("figure", { children: [_jsx("img", { src: image.src, alt: image.alt, width: 64, height: 64, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer", ...(images?.portrait ? {} : { "data-logo": "" }) }), name || company || item.disclosure ? _jsxs("figcaption", { children: [name ?? company, name && company ? _jsx("span", { children: company }) : null, item.disclosure ? _jsx("span", { children: item.disclosure }) : null] }) : null] }) });
+}
+/**
+ * A wrapping row of round portraits or company logos. No animation; images load lazily from YouSaid only.
+ * @experimental
+ */
+export function ProofLogoStrip(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const items = (render?.items ?? []).filter((item) => item.identityImages?.portrait || item.identityImages?.companyLogo);
+    if (render && !items.length)
+        return null;
+    return _jsx(Shell, { render: render, status: status, format: "logo_strip", props: props, children: render ? _jsx("ul", { className: "ysp-l", role: "list", "aria-label": render.placement.headline ?? proofText(language, "strip"), children: items.map((item) => _jsx(StripFigure, { item: item, beacon: beacon }, item.id)) }) : null });
+}
+/** @experimental */
+export function ProofBadge(props) {
+    const { render, status, beacon, language } = useProof(props);
+    if (!render)
+        return _jsx(Shell, { render: null, status: status, format: "badge", props: props, children: null });
+    const summary = render.summary;
+    const cta = render.placement.cta && /^https?:\/\//.test(render.placement.cta.url) ? render.placement.cta : null;
+    const noun = (count) => proofText(language, count === 1 ? "storyOne" : "storyMany");
+    const text = summary.averageRating !== null && summary.ratedCount
+        ? _jsxs(_Fragment, { children: [_jsxs("strong", { children: ["\u2605 ", summary.averageRating] }), " ", proofText(language, "from"), " ", summary.ratedCount, " ", noun(summary.ratedCount)] })
+        : _jsxs(_Fragment, { children: [_jsx("strong", { children: summary.count }), " ", noun(summary.count)] });
+    return _jsxs(Shell, { render: render, status: status, format: "badge", props: props, children: [cta ? _jsx("a", { className: "ysp-b", href: cta.url, rel: "noopener", onClick: () => beacon?.push({ t: "click" }), children: text }) : _jsx("span", { className: "ysp-b", children: text }), _jsx("span", { className: "ysp-sr", children: summary.scopeNote })] });
+}
+/**
+ * Groups located stories by place (country or region), most stories first.
+ * @experimental
+ */
+export function mapPlaces(items) {
+    const byKey = new Map();
+    for (const item of items) {
+        if (!item.location)
+            continue;
+        const key = `${item.location.level}:${item.location.code}`;
+        const place = byKey.get(key) ?? { key, label: item.location.label, lat: item.location.lat, lon: item.location.lon, count: 0 };
+        place.count += 1;
+        byKey.set(key, place);
+    }
+    return [...byKey.values()].sort((a, b) => b.count - a.count || a.label.localeCompare(b.label));
+}
+/**
+ * Customer map: an inline SVG outline (no map tiles, no third-party requests)
+ * with one marker per country or region the customers allowed, and a list of
+ * place buttons (the accessible way in) that filters the stories below.
+ * @experimental
+ */
+export function ProofMap(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const [place, setPlace] = useState("");
+    const items = (render?.items ?? []).filter((item) => item.location && Number.isFinite(item.location.lat) && Number.isFinite(item.location.lon));
+    const places = useMemo(() => mapPlaces(items), [items]);
+    const outline = useMemo(() => worldOutlinePath(), []);
+    if (render && !items.length)
+        return null;
+    const summary = places.map((entry) => `${entry.label} (${entry.count})`).join(", ");
+    const selected = places.find((entry) => entry.key === place);
+    return _jsx(Shell, { render: render, status: status, format: "map", props: props, children: render ? _jsxs("div", { className: "ysp-mp", children: [_jsxs("svg", { viewBox: "0 0 360 142", role: "img", "aria-label": `${proofText(language, "map")}: ${summary}`, focusable: "false", children: [_jsx("path", { d: outline }), places.map((entry) => { const point = mapPoint(entry.lat, entry.lon); return _jsx("circle", { className: "ysp-mk", cx: point.x, cy: point.y, r: Math.min(9, 2.6 + Math.sqrt(entry.count) * 1.6).toFixed(1), ...(entry.key === place ? { "data-on": "" } : {}), onClick: () => setPlace(entry.key) }, entry.key); })] }), _jsxs("ul", { className: "ysp-pl", role: "list", "aria-label": proofText(language, "places"), children: [_jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": place === "", onClick: () => setPlace(""), children: [proofText(language, "allPlaces"), " (", items.length, ")"] }) }), places.map((entry) => _jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": place === entry.key, onClick: () => setPlace(entry.key), children: [entry.label, " (", entry.count, ")"] }) }, entry.key))] }), _jsx("p", { className: "ysp-sr", "aria-live": "polite", children: selected ? proofText(language, "storiesFrom", { place: selected.label }) : "" }), _jsx("div", { className: "ysp-g", style: { "--ys-cols": String(render.placement.layout.columns) }, children: items.map((item) => _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language, hidden: Boolean(place) && `${item.location.level}:${item.location.code}` !== place }, item.id)) })] }) : null });
+}
+/**
+ * A horizontal row of stories. It scrolls gently unless the visitor prefers reduced motion, with a pause button, and stops on hover and focus.
+ * @experimental
+ */
+export function ProofMarquee(props) {
+    const { render, status, beacon, language } = useProof(props);
+    const reduced = useReducedMotion();
+    const [paused, setPaused] = useState(false);
+    const items = render?.items ?? [];
+    if (render && !items.length)
+        return null;
+    const moving = Boolean(render && render.placement.motion !== "none" && !reduced && items.length > 1);
+    const cards = (copy) => render ? items.map((item) => _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language, copy: copy }, item.id)) : null;
+    return _jsx(Shell, { render: render, status: status, format: "marquee", props: props, moving: moving, children: render ? _jsxs(_Fragment, { children: [moving ? _jsx(MotionToggle, { paused: paused, onToggle: () => setPaused((value) => !value), language: language }) : null, _jsx("div", { className: "ysp-mq", role: "region", "aria-label": render.placement.headline ?? proofText(language, "stories"), ...(moving ? { "data-run": "" } : { tabIndex: 0 }), ...(paused ? { "data-paused": "" } : {}), children: _jsxs("div", { className: "ysp-mt", style: { "--ys-dur": `${Math.max(20, items.length * 7)}s` }, children: [_jsx("div", { className: "ysp-ms", children: cards(false) }), moving ? _jsx("div", { className: "ysp-ms", "data-dup": "", "aria-hidden": "true", inert: true, children: cards(true) }) : null] }) })] }) : null });
+}
+/**
+ * Floating video bubble. Only approved video stories with captions; it never
+ * plays by itself, plays with captions on, opens with Enter or Space, closes
+ * with Escape (focus returns to the bubble) and can be hidden for the page
+ * view (`onDismiss` lets your app remember that; nothing is stored here).
+ * `inline` keeps it inside its container, for previews.
+ * @experimental
+ */
+export function ProofVideoBubble(props) {
+    const { render, beacon, language } = useProof(props);
+    const items = (render?.items ?? []).filter((item) => item.media?.kind === "video" && item.media.captions.length > 0);
+    const [shown, setShown] = useState(Boolean(props.inline));
+    const [open, setOpen] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const [index, setIndex] = useState(0);
+    const bubble = useRef(null);
+    const panel = useRef(null);
+    const delay = render?.placement.bubble?.delaySeconds ?? 3;
+    useEffect(() => {
+        if (props.inline || !render) {
+            setShown(true);
+            return;
+        }
+        const timer = window.setTimeout(() => setShown(true), Math.max(0, Math.min(120, delay)) * 1000);
+        return () => window.clearTimeout(timer);
+    }, [props.inline, render, delay]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const target = panel.current?.querySelector("article:not([hidden]) video") ?? panel.current?.querySelector("[data-close]");
+        target?.focus();
+    }, [open, index]);
+    if (!render || !items.length || dismissed || !shown)
+        return null;
+    const first = items[0];
+    const id = `ysp-bp-${first.id}`;
+    const close = () => {
+        panel.current?.querySelectorAll("video").forEach((video) => video.pause());
+        setOpen(false);
+        window.setTimeout(() => bubble.current?.focus(), 0);
+    };
+    const step = (delta) => {
+        panel.current?.querySelectorAll("video").forEach((video) => video.pause());
+        setIndex((current) => (current + delta + items.length) % items.length);
+    };
+    const poster = first.media?.kind === "video" ? first.media.poster : null;
+    return _jsxs("div", { className: `ysp-bb ${props.className ?? ""}`, style: proofThemeStyle(render.placement.theme, props.theme), "data-pos": render.placement.bubble?.position ?? "bottom-right", ...(props.inline ? { "data-inline": "" } : {}), onKeyDown: (event) => { if (event.key === "Escape" && open) {
+            event.preventDefault();
+            close();
+        } }, children: [_jsx("style", { children: styles + bubbleStyles }), _jsxs("div", { ref: panel, className: "ysp-bp", id: id, role: "dialog", "aria-label": proofText(language, "stories"), hidden: !open, children: [_jsxs("div", { className: "ysp-bh", children: [_jsx("p", { children: proofText(language, "stories") }), _jsx("button", { type: "button", "data-close": "", "aria-label": proofText(language, "close"), onClick: close, children: "\u00D7" })] }), items.map((item, position) => _jsx(ProofCardBody, { item: item, render: render, beacon: beacon, language: language, hidden: position !== index, eagerMedia: open && position === index, captionsOn: true }, item.id)), items.length > 1 ? _jsxs("div", { className: "ysp-bn", children: [_jsx("button", { type: "button", "aria-label": proofText(language, "prev"), onClick: () => step(-1), children: "\u2039" }), _jsxs("span", { "aria-live": "polite", children: [index + 1, " / ", items.length] }), _jsx("button", { type: "button", "aria-label": proofText(language, "next"), onClick: () => step(1), children: "\u203A" })] }) : null] }), _jsxs("div", { className: "ysp-br", children: [_jsxs("button", { ref: bubble, type: "button", className: "ysp-bo", "aria-expanded": open, "aria-controls": id, onClick: () => (open ? close() : setOpen(true)), "aria-label": first.attribution.name ? proofText(language, "watchFrom", { name: first.attribution.name }) : proofText(language, "watch"), children: [poster ? _jsx("img", { src: poster, alt: "", width: 72, height: 72, decoding: "async" }) : null, _jsx("span", {})] }), _jsx("button", { type: "button", className: "ysp-bd", "aria-label": proofText(language, "dismiss"), onClick: () => { close(); setDismissed(true); props.onDismiss?.(); }, children: "\u00D7" })] })] });
+}