@withpotter/components 0.13.0-next.101

package/dist/ai-soon/hero-scene.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function HeroScene({ onFail }) {
+  const host = useRef(null);
+  const failRef = useRef(onFail);
+  useEffect(() => {
+    failRef.current = onFail;
+  }, [onFail]);
+  useEffect(() => {
+    const el = host.current;
+    if (!el) return;
+    let disposed = false;
+    let cleanup = () => {
+    };
+    (async () => {
+      const THREE = await import("three");
+      if (disposed) return;
+      let renderer;
+      try {
+        renderer = new THREE.WebGLRenderer({
+          antialias: true,
+          alpha: true,
+          powerPreference: "high-performance"
+        });
+      } catch {
+        failRef.current();
+        return;
+      }
+      const reduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+      renderer.outputColorSpace = THREE.SRGBColorSpace;
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.1;
+      renderer.autoClear = false;
+      renderer.domElement.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block";
+      el.appendChild(renderer.domElement);
+      const bgScene = new THREE.Scene();
+      const bgCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      const bgMat = new THREE.ShaderMaterial({
+        depthTest: false,
+        depthWrite: false,
+        toneMapped: false,
+        uniforms: {
+          uTime: { value: 0 },
+          uRes: { value: new THREE.Vector2(1, 1) },
+          uShift: { value: new THREE.Vector2(0, 0) }
+        },
+        vertexShader: `
+          varying vec2 vUv;
+          void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }
+        `,
+        // Deep space: a dim nebula of drifting gas, and three layers of stars at
+        // different depths that slide against each other when the pointer moves.
+        fragmentShader: `
+          precision highp float;
+          varying vec2 vUv;
+          uniform float uTime;
+          uniform vec2 uRes;
+          uniform vec2 uShift;
+
+          float hash21(vec2 p) {
+            p = fract(p * vec2(233.34, 851.73));
+            p += dot(p, p + 23.45);
+            return fract(p.x * p.y);
+          }
+          vec2 hash22(vec2 p) {
+            float n = hash21(p);
+            return vec2(n, hash21(p + n));
+          }
+          float noise(vec2 p) {
+            vec2 i = floor(p), f = fract(p);
+            f = f * f * (3.0 - 2.0 * f);
+            float a = hash21(i), b = hash21(i + vec2(1, 0));
+            float c = hash21(i + vec2(0, 1)), d = hash21(i + vec2(1, 1));
+            return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+          }
+          float fbm(vec2 p) {
+            float v = 0.0, a = 0.5;
+            for (int i = 0; i < 5; i++) {
+              v += a * noise(p);
+              p = p * 2.03 + vec2(17.1, 9.2);
+              a *= 0.5;
+            }
+            return v;
+          }
+
+          // One layer of stars: a grid, one star per cell at a random spot.
+          vec3 stars(vec2 uv, float scale, float size, float depth, float cut) {
+            vec2 g = uv * scale + uShift * depth * scale * 0.06;
+            vec2 id = floor(g);
+            vec2 f = fract(g) - 0.5;
+            vec3 col = vec3(0.0);
+            for (int y = -1; y <= 1; y++) {
+              for (int x = -1; x <= 1; x++) {
+                vec2 o = vec2(float(x), float(y));
+                vec2 cell = id + o;
+                float h = hash21(cell);
+                if (h < cut) continue;
+                vec2 pos = o + (hash22(cell) - 0.5) * 0.8 - f;
+                float d = length(pos);
+                float tw = 0.7 + 0.3 * sin(uTime * (0.8 + h * 2.2) + h * 40.0);
+                float core = smoothstep(size, size * 0.25, d);
+                float glow = smoothstep(size * 3.2, 0.0, d) * 0.07;
+                vec3 tint = mix(vec3(0.7, 0.8, 1.0), vec3(1.0, 0.92, 0.8), hash21(cell + 7.0));
+                col += tint * (core + glow) * tw * (0.35 + pow(h, 4.0) * 1.9);
+              }
+            }
+            return col;
+          }
+
+          void main() {
+            float asp = uRes.x / uRes.y;
+            vec2 uv = vec2(vUv.x * asp, vUv.y);
+            float t = uTime * 0.05;
+
+            // a deep blue field, lighter toward the top, like a studio sweep
+            vec3 col = mix(vec3(0.02, 0.06, 0.34), vec3(0.10, 0.27, 0.86), smoothstep(0.0, 1.0, vUv.y * 0.9 + 0.1));
+
+            // soft colour fields drifting slowly, pushed about by the pointer
+            vec2 p = uv * 0.9 + uShift * 0.04;
+            float n1 = fbm(p + vec2(t, -t * 0.7));
+            float n2 = fbm(p * 1.4 + vec2(-t * 0.8, t) + 4.0);
+            col += vec3(0.20, 0.42, 1.0) * smoothstep(0.35, 0.85, n1) * 0.38;
+            col += vec3(0.50, 0.40, 1.0) * smoothstep(0.45, 0.9, n2) * 0.18;
+            col -= vec3(0.05, 0.08, 0.12) * smoothstep(0.5, 0.9, 1.0 - n1);
+
+            // a pale bloom behind the headline
+            col += vec3(0.30, 0.48, 1.0) * smoothstep(0.55, 0.0, distance(vUv, vec2(0.5, 0.55))) * 0.28;
+
+            // fall away toward the corners
+            col *= 1.0 - smoothstep(0.6, 1.2, distance(vUv, vec2(0.5)) * 1.1) * 0.55;
+            col += (hash21(gl_FragCoord.xy + fract(uTime) * 91.7) - 0.5) * 0.02;
+            gl_FragColor = vec4(max(col, 0.0), 1.0);
+            #include <colorspace_fragment>
+          }
+        `
+      });
+      const tri = new THREE.BufferGeometry();
+      tri.setAttribute(
+        "position",
+        new THREE.BufferAttribute(
+          new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]),
+          3
+        )
+      );
+      tri.setAttribute(
+        "uv",
+        new THREE.BufferAttribute(new Float32Array([0, 0, 2, 0, 0, 2]), 2)
+      );
+      bgScene.add(new THREE.Mesh(tri, bgMat));
+      let w = 1;
+      let h = 1;
+      const resize = () => {
+        const r = el.getBoundingClientRect();
+        w = Math.max(1, r.width);
+        h = Math.max(1, r.height);
+        renderer.setSize(w, h, false);
+        bgMat.uniforms.uRes.value.set(w, h);
+        if (reduced) draw(0);
+      };
+      const look = { x: 0, y: 0 };
+      const tgt = { x: 0, y: 0 };
+      const onMove = (e) => {
+        const r = el.getBoundingClientRect();
+        tgt.x = ((e.clientX - r.left) / r.width - 0.5) * 2;
+        tgt.y = ((e.clientY - r.top) / r.height - 0.5) * 2;
+      };
+      const onLeave = () => {
+        tgt.x = 0;
+        tgt.y = 0;
+      };
+      window.addEventListener("pointermove", onMove, { passive: true });
+      el.addEventListener("pointerleave", onLeave);
+      const draw = (t) => {
+        bgMat.uniforms.uTime.value = t;
+        look.x += (tgt.x - look.x) * 0.06;
+        look.y += (tgt.y - look.y) * 0.06;
+        bgMat.uniforms.uShift.value.set(look.x, -look.y);
+        renderer.clear();
+        renderer.render(bgScene, bgCam);
+      };
+      let raf = 0;
+      let visible = true;
+      const t0 = performance.now();
+      const loop = () => {
+        if (visible && !document.hidden) draw((performance.now() - t0) / 1e3);
+        raf = requestAnimationFrame(loop);
+      };
+      const ro = new ResizeObserver(resize);
+      ro.observe(el);
+      const io = new IntersectionObserver(([e]) => {
+        visible = e.isIntersecting;
+      });
+      io.observe(el);
+      resize();
+      if (reduced) draw(2);
+      else raf = requestAnimationFrame(loop);
+      cleanup = () => {
+        cancelAnimationFrame(raf);
+        ro.disconnect();
+        io.disconnect();
+        window.removeEventListener("pointermove", onMove);
+        el.removeEventListener("pointerleave", onLeave);
+        bgMat.dispose();
+        tri.dispose();
+        renderer.dispose();
+        renderer.domElement.remove();
+      };
+    })().catch(() => failRef.current());
+    return () => {
+      disposed = true;
+      cleanup();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: host,
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 -z-10",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: -10,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+export {
+  HeroScene
+};
+//# sourceMappingURL=hero-scene.js.map

package/dist/ai-soon/hero-scene.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ai-soon/hero-scene.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * The hero's background: a flowing blue gradient, drawn by a fragment shader\n * on a full-screen triangle. A few soft colour fields drift slowly and lean a\n * little toward the pointer, with film grain on top so it is not a banded CSS\n * gradient. `three` loads in the browser only, after the page has painted.\n *\n * `onFail` is called when the browser cannot make a WebGL context, so the page\n * can show its flat version instead of an empty box.\n */\nexport function HeroScene({ onFail }: { onFail: () => void }) {\n  const host = useRef<HTMLDivElement>(null);\n  const failRef = useRef(onFail);\n  useEffect(() => {\n    failRef.current = onFail;\n  }, [onFail]);\n\n  useEffect(() => {\n    const el = host.current;\n    if (!el) return;\n    let disposed = false;\n    let cleanup = () => {};\n\n    (async () => {\n      const THREE = await import('three');\n      if (disposed) return;\n\n      let renderer: InstanceType<typeof THREE.WebGLRenderer>;\n      try {\n        renderer = new THREE.WebGLRenderer({\n          antialias: true,\n          alpha: true,\n          powerPreference: 'high-performance',\n        });\n      } catch {\n        failRef.current();\n        return;\n      }\n      const reduced = window.matchMedia(\n        '(prefers-reduced-motion: reduce)',\n      ).matches;\n\n      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n      renderer.outputColorSpace = THREE.SRGBColorSpace;\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\n      renderer.toneMappingExposure = 1.1;\n      renderer.autoClear = false;\n      renderer.domElement.style.cssText =\n        'position:absolute;inset:0;width:100%;height:100%;display:block';\n      el.appendChild(renderer.domElement);\n\n      // ---- the background: a shader on a full-screen triangle\n      const bgScene = new THREE.Scene();\n      const bgCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n      const bgMat = new THREE.ShaderMaterial({\n        depthTest: false,\n        depthWrite: false,\n        toneMapped: false,\n        uniforms: {\n          uTime: { value: 0 },\n          uRes: { value: new THREE.Vector2(1, 1) },\n          uShift: { value: new THREE.Vector2(0, 0) },\n        },\n        vertexShader: `\n          varying vec2 vUv;\n          void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }\n        `,\n        // Deep space: a dim nebula of drifting gas, and three layers of stars at\n        // different depths that slide against each other when the pointer moves.\n        fragmentShader: `\n          precision highp float;\n          varying vec2 vUv;\n          uniform float uTime;\n          uniform vec2 uRes;\n          uniform vec2 uShift;\n\n          float hash21(vec2 p) {\n            p = fract(p * vec2(233.34, 851.73));\n            p += dot(p, p + 23.45);\n            return fract(p.x * p.y);\n          }\n          vec2 hash22(vec2 p) {\n            float n = hash21(p);\n            return vec2(n, hash21(p + n));\n          }\n          float noise(vec2 p) {\n            vec2 i = floor(p), f = fract(p);\n            f = f * f * (3.0 - 2.0 * f);\n            float a = hash21(i), b = hash21(i + vec2(1, 0));\n            float c = hash21(i + vec2(0, 1)), d = hash21(i + vec2(1, 1));\n            return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n          }\n          float fbm(vec2 p) {\n            float v = 0.0, a = 0.5;\n            for (int i = 0; i < 5; i++) {\n              v += a * noise(p);\n              p = p * 2.03 + vec2(17.1, 9.2);\n              a *= 0.5;\n            }\n            return v;\n          }\n\n          // One layer of stars: a grid, one star per cell at a random spot.\n          vec3 stars(vec2 uv, float scale, float size, float depth, float cut) {\n            vec2 g = uv * scale + uShift * depth * scale * 0.06;\n            vec2 id = floor(g);\n            vec2 f = fract(g) - 0.5;\n            vec3 col = vec3(0.0);\n            for (int y = -1; y <= 1; y++) {\n              for (int x = -1; x <= 1; x++) {\n                vec2 o = vec2(float(x), float(y));\n                vec2 cell = id + o;\n                float h = hash21(cell);\n                if (h < cut) continue;\n                vec2 pos = o + (hash22(cell) - 0.5) * 0.8 - f;\n                float d = length(pos);\n                float tw = 0.7 + 0.3 * sin(uTime * (0.8 + h * 2.2) + h * 40.0);\n                float core = smoothstep(size, size * 0.25, d);\n                float glow = smoothstep(size * 3.2, 0.0, d) * 0.07;\n                vec3 tint = mix(vec3(0.7, 0.8, 1.0), vec3(1.0, 0.92, 0.8), hash21(cell + 7.0));\n                col += tint * (core + glow) * tw * (0.35 + pow(h, 4.0) * 1.9);\n              }\n            }\n            return col;\n          }\n\n          void main() {\n            float asp = uRes.x / uRes.y;\n            vec2 uv = vec2(vUv.x * asp, vUv.y);\n            float t = uTime * 0.05;\n\n            // a deep blue field, lighter toward the top, like a studio sweep\n            vec3 col = mix(vec3(0.02, 0.06, 0.34), vec3(0.10, 0.27, 0.86), smoothstep(0.0, 1.0, vUv.y * 0.9 + 0.1));\n\n            // soft colour fields drifting slowly, pushed about by the pointer\n            vec2 p = uv * 0.9 + uShift * 0.04;\n            float n1 = fbm(p + vec2(t, -t * 0.7));\n            float n2 = fbm(p * 1.4 + vec2(-t * 0.8, t) + 4.0);\n            col += vec3(0.20, 0.42, 1.0) * smoothstep(0.35, 0.85, n1) * 0.38;\n            col += vec3(0.50, 0.40, 1.0) * smoothstep(0.45, 0.9, n2) * 0.18;\n            col -= vec3(0.05, 0.08, 0.12) * smoothstep(0.5, 0.9, 1.0 - n1);\n\n            // a pale bloom behind the headline\n            col += vec3(0.30, 0.48, 1.0) * smoothstep(0.55, 0.0, distance(vUv, vec2(0.5, 0.55))) * 0.28;\n\n            // fall away toward the corners\n            col *= 1.0 - smoothstep(0.6, 1.2, distance(vUv, vec2(0.5)) * 1.1) * 0.55;\n            col += (hash21(gl_FragCoord.xy + fract(uTime) * 91.7) - 0.5) * 0.02;\n            gl_FragColor = vec4(max(col, 0.0), 1.0);\n            #include <colorspace_fragment>\n          }\n        `,\n      });\n      const tri = new THREE.BufferGeometry();\n      tri.setAttribute(\n        'position',\n        new THREE.BufferAttribute(\n          new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]),\n          3,\n        ),\n      );\n      tri.setAttribute(\n        'uv',\n        new THREE.BufferAttribute(new Float32Array([0, 0, 2, 0, 0, 2]), 2),\n      );\n      bgScene.add(new THREE.Mesh(tri, bgMat));\n\n      // ---- size, pointer, loop\n      let w = 1;\n      let h = 1;\n      const resize = () => {\n        const r = el.getBoundingClientRect();\n        w = Math.max(1, r.width);\n        h = Math.max(1, r.height);\n        renderer.setSize(w, h, false);\n        bgMat.uniforms.uRes.value.set(w, h);\n        if (reduced) draw(0);\n      };\n\n      const look = { x: 0, y: 0 };\n      const tgt = { x: 0, y: 0 };\n      const onMove = (e: PointerEvent) => {\n        const r = el.getBoundingClientRect();\n        tgt.x = ((e.clientX - r.left) / r.width - 0.5) * 2;\n        tgt.y = ((e.clientY - r.top) / r.height - 0.5) * 2;\n      };\n      const onLeave = () => {\n        tgt.x = 0;\n        tgt.y = 0;\n      };\n      window.addEventListener('pointermove', onMove, { passive: true });\n      el.addEventListener('pointerleave', onLeave);\n\n      const draw = (t: number) => {\n        bgMat.uniforms.uTime.value = t;\n        look.x += (tgt.x - look.x) * 0.06;\n        look.y += (tgt.y - look.y) * 0.06;\n        bgMat.uniforms.uShift.value.set(look.x, -look.y);\n        renderer.clear();\n        renderer.render(bgScene, bgCam);\n      };\n\n      let raf = 0;\n      let visible = true;\n      const t0 = performance.now();\n      const loop = () => {\n        if (visible && !document.hidden) draw((performance.now() - t0) / 1000);\n        raf = requestAnimationFrame(loop);\n      };\n\n      const ro = new ResizeObserver(resize);\n      ro.observe(el);\n      const io = new IntersectionObserver(([e]) => {\n        visible = e.isIntersecting;\n      });\n      io.observe(el);\n      resize();\n      if (reduced) draw(2);\n      else raf = requestAnimationFrame(loop);\n\n      cleanup = () => {\n        cancelAnimationFrame(raf);\n        ro.disconnect();\n        io.disconnect();\n        window.removeEventListener('pointermove', onMove);\n        el.removeEventListener('pointerleave', onLeave);\n        bgMat.dispose();\n        tri.dispose();\n        renderer.dispose();\n        renderer.domElement.remove();\n      };\n    })().catch(() => failRef.current());\n\n    return () => {\n      disposed = true;\n      cleanup();\n    };\n  }, []);\n\n  return (\n    <div\n      ref={host}\n      aria-hidden\n      className=\"pointer-events-none absolute inset-0 -z-10\"\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: -10,\n        pointerEvents: 'none',\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/analytics/PostHogProvider.d.ts

@@ -0,0 +1,28 @@
+import { ProductInsightEvent, ProductInsightProperties } from './product-insights-policy';
+interface PostHogProviderProps {
+    userId: string;
+    email: string;
+    name: string;
+    workspaceId?: string;
+    workspaceName?: string;
+    workspaceSlug?: string;
+}
+/**
+ * Headless component that syncs PostHog identity with the current auth state.
+ *
+ * - Identifies the merchant user on mount / auth change
+ * - Sets workspace as a PostHog group for workspace-level analytics
+ * - Registers workspace slug as a super property (attached to every event)
+ */
+export declare function PostHogProvider(props: PostHogProviderProps): null;
+export declare function revokeProductInsightsCapture(): void;
+/**
+ * Reset PostHog identity on logout so subsequent events are anonymous.
+ */
+export declare function resetPostHogIdentity(): void;
+/**
+ * Capture a PostHog event imperatively (e.g. from a use case or action).
+ */
+export declare function capturePostHogEvent(event: string, properties?: Record<string, unknown>): void;
+export declare function captureProductInsightEvent(event: ProductInsightEvent, properties?: ProductInsightProperties): void;
+export {};

package/dist/analytics/PostHogProvider.js

@@ -0,0 +1,126 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import posthog from "posthog-js";
+import { productInsightsApi } from "@withpotter/lib/product-insights-api";
+import {
+  PRODUCT_INSIGHT_EVENTS,
+  dashboardFeatureFromRoute,
+  doNotTrackEnabled,
+  isReplaySensitiveRoute,
+  normalizeDashboardRoute,
+  productInsightsEnabled,
+  productReplayEnabled,
+  sanitizeProductInsightProperties
+} from "./product-insights-policy";
+const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+function PostHogProvider(props) {
+  const { userId, workspaceSlug } = props;
+  const pathname = usePathname();
+  const consentRequestRef = useRef(0);
+  useEffect(() => {
+    captureDashboardNavigation(pathname);
+    syncReplayRecording(pathname);
+  }, [pathname]);
+  useEffect(() => {
+    const syncConsent = () => {
+      const requestId = ++consentRequestRef.current;
+      revokeProductInsightsCapture();
+      if (!POSTHOG_KEY || !productInsightsEnabled() || !workspaceSlug || doNotTrackEnabled()) {
+        return;
+      }
+      void productInsightsApi.getConsent(workspaceSlug).then(async (consent) => {
+        if (requestId !== consentRequestRef.current || consent.level === "denied" || doNotTrackEnabled()) {
+          return;
+        }
+        if (requestId !== consentRequestRef.current) return;
+        posthog.identify(userId);
+        posthog.group("workspace", consent.tenantId);
+        posthog.opt_in_capturing();
+        analyticsAllowed = true;
+        replayConsented = consent.level === "aggregate_and_replay" && productReplayEnabled();
+        syncReplayRecording(window.location.pathname);
+        captureDashboardNavigation(window.location.pathname);
+      }).catch(revokeProductInsightsCapture);
+    };
+    syncConsent();
+    window.addEventListener(
+      "potter:product-insights-consent-changed",
+      syncConsent
+    );
+    return () => {
+      consentRequestRef.current += 1;
+      window.removeEventListener(
+        "potter:product-insights-consent-changed",
+        syncConsent
+      );
+      revokeProductInsightsCapture();
+    };
+  }, [userId, workspaceSlug]);
+  return null;
+}
+let analyticsAllowed = false;
+let replayConsented = false;
+function syncReplayRecording(pathname) {
+  if (!POSTHOG_KEY) return;
+  if (replayConsented && !isReplaySensitiveRoute(pathname)) {
+    if (!posthog.sessionRecordingStarted()) posthog.startSessionRecording();
+  } else {
+    posthog.stopSessionRecording();
+  }
+}
+function currentViewport() {
+  return window.matchMedia("(max-width: 1023px)").matches ? "mobile" : "desktop";
+}
+function captureDashboardNavigation(pathname) {
+  const route = normalizeDashboardRoute(pathname);
+  if (!route) return;
+  const viewport = currentViewport();
+  captureProductInsightEvent("dashboard_page_viewed", {
+    route_pattern: route,
+    viewport
+  });
+  const featureId = dashboardFeatureFromRoute(route);
+  if (featureId) {
+    captureProductInsightEvent("dashboard_feature_opened", {
+      route_pattern: route,
+      feature_id: featureId,
+      viewport
+    });
+  }
+}
+function revokeProductInsightsCapture() {
+  analyticsAllowed = false;
+  replayConsented = false;
+  if (!POSTHOG_KEY) return;
+  posthog.resetGroups();
+  posthog.stopSessionRecording();
+  posthog.opt_out_capturing();
+}
+function resetPostHogIdentity() {
+  if (!POSTHOG_KEY) return;
+  revokeProductInsightsCapture();
+  posthog.reset();
+}
+function capturePostHogEvent(event, properties) {
+  if (!PRODUCT_INSIGHT_EVENTS.includes(event)) return;
+  captureProductInsightEvent(
+    event,
+    properties ?? {}
+  );
+}
+function captureProductInsightEvent(event, properties = {}) {
+  if (!POSTHOG_KEY || !analyticsAllowed || doNotTrackEnabled()) return;
+  posthog.capture(
+    event,
+    sanitizeProductInsightProperties({ ...properties, event_version: 1 })
+  );
+}
+export {
+  PostHogProvider,
+  capturePostHogEvent,
+  captureProductInsightEvent,
+  resetPostHogIdentity,
+  revokeProductInsightsCapture
+};
+//# sourceMappingURL=PostHogProvider.js.map

package/dist/analytics/PostHogProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/PostHogProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { usePathname } from '@withpotter/lib/use-pathname';\nimport posthog from 'posthog-js';\nimport { productInsightsApi } from '@withpotter/lib/product-insights-api';\nimport {\n  PRODUCT_INSIGHT_EVENTS,\n  ProductInsightEvent,\n  ProductInsightProperties,\n  dashboardFeatureFromRoute,\n  doNotTrackEnabled,\n  isReplaySensitiveRoute,\n  normalizeDashboardRoute,\n  productInsightsEnabled,\n  productReplayEnabled,\n  sanitizeProductInsightProperties,\n} from './product-insights-policy';\n\nconst POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;\n\ninterface PostHogProviderProps {\n  userId: string;\n  email: string;\n  name: string;\n  workspaceId?: string;\n  workspaceName?: string;\n  workspaceSlug?: string;\n}\n\n/**\n * Headless component that syncs PostHog identity with the current auth state.\n *\n * - Identifies the merchant user on mount / auth change\n * - Sets workspace as a PostHog group for workspace-level analytics\n * - Registers workspace slug as a super property (attached to every event)\n */\nexport function PostHogProvider(props: PostHogProviderProps) {\n  const { userId, workspaceSlug } = props;\n  const pathname = usePathname();\n  const consentRequestRef = useRef(0);\n\n  useEffect(() => {\n    captureDashboardNavigation(pathname);\n    syncReplayRecording(pathname);\n  }, [pathname]);\n\n  useEffect(() => {\n    const syncConsent = () => {\n      const requestId = ++consentRequestRef.current;\n      revokeProductInsightsCapture();\n\n      if (\n        !POSTHOG_KEY ||\n        !productInsightsEnabled() ||\n        !workspaceSlug ||\n        doNotTrackEnabled()\n      ) {\n        return;\n      }\n\n      void productInsightsApi\n        .getConsent(workspaceSlug)\n        .then(async (consent) => {\n          if (\n            requestId !== consentRequestRef.current ||\n            consent.level === 'denied' ||\n            doNotTrackEnabled()\n          ) {\n            return;\n          }\n\n          if (requestId !== consentRequestRef.current) return;\n\n          posthog.identify(userId);\n          posthog.group('workspace', consent.tenantId);\n          posthog.opt_in_capturing();\n          analyticsAllowed = true;\n          // Recording stays off at init; it starts only for workspaces that\n          // chose 'aggregate_and_replay', and only when the deploy opts in.\n          replayConsented =\n            consent.level === 'aggregate_and_replay' && productReplayEnabled();\n          syncReplayRecording(window.location.pathname);\n          captureDashboardNavigation(window.location.pathname);\n        })\n        .catch(revokeProductInsightsCapture);\n    };\n\n    syncConsent();\n    window.addEventListener(\n      'potter:product-insights-consent-changed',\n      syncConsent,\n    );\n\n    return () => {\n      consentRequestRef.current += 1;\n      window.removeEventListener(\n        'potter:product-insights-consent-changed',\n        syncConsent,\n      );\n      revokeProductInsightsCapture();\n    };\n  }, [userId, workspaceSlug]);\n\n  return null;\n}\n\nlet analyticsAllowed = false;\nlet replayConsented = false;\n\n// Replay runs only with replay consent, and pauses while a section that shows\n// customer, money or account details is open.\nfunction syncReplayRecording(pathname: string): void {\n  if (!POSTHOG_KEY) return;\n  if (replayConsented && !isReplaySensitiveRoute(pathname)) {\n    if (!posthog.sessionRecordingStarted()) posthog.startSessionRecording();\n  } else {\n    posthog.stopSessionRecording();\n  }\n}\n\n// Same breakpoint the dashboard shell uses to switch to the mobile layout.\nfunction currentViewport(): 'mobile' | 'desktop' {\n  return window.matchMedia('(max-width: 1023px)').matches\n    ? 'mobile'\n    : 'desktop';\n}\n\nfunction captureDashboardNavigation(pathname: string): void {\n  const route = normalizeDashboardRoute(pathname);\n  if (!route) return;\n  const viewport = currentViewport();\n  captureProductInsightEvent('dashboard_page_viewed', {\n    route_pattern: route,\n    viewport,\n  });\n  const featureId = dashboardFeatureFromRoute(route);\n  if (featureId) {\n    captureProductInsightEvent('dashboard_feature_opened', {\n      route_pattern: route,\n      feature_id: featureId,\n      viewport,\n    });\n  }\n}\n\nexport function revokeProductInsightsCapture(): void {\n  analyticsAllowed = false;\n  replayConsented = false;\n  if (!POSTHOG_KEY) return;\n  posthog.resetGroups();\n  posthog.stopSessionRecording();\n  posthog.opt_out_capturing();\n}\n\n/**\n * Reset PostHog identity on logout so subsequent events are anonymous.\n */\nexport function resetPostHogIdentity(): void {\n  if (!POSTHOG_KEY) return;\n  revokeProductInsightsCapture();\n  posthog.reset();\n}\n\n/**\n * Capture a PostHog event imperatively (e.g. from a use case or action).\n */\nexport function capturePostHogEvent(\n  event: string,\n  properties?: Record<string, unknown>,\n): void {\n  if (!PRODUCT_INSIGHT_EVENTS.includes(event as ProductInsightEvent)) return;\n  captureProductInsightEvent(\n    event as ProductInsightEvent,\n    (properties ?? {}) as ProductInsightProperties,\n  );\n}\n\nexport function captureProductInsightEvent(\n  event: ProductInsightEvent,\n  properties: ProductInsightProperties = {},\n): void {\n  if (!POSTHOG_KEY || !analyticsAllowed || doNotTrackEnabled()) return;\n  posthog.capture(\n    event,\n    sanitizeProductInsightProperties({ ...properties, event_version: 1 }),\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/analytics/event-analytics-panel.d.ts

@@ -0,0 +1,27 @@
+/**
+ * How one event actually went.
+ *
+ * `GET /analytics/events/:contentId` has computed these nine figures since
+ * event-tickets shipped, and the dashboard had no client wrapper for the route
+ * at all — so a venue could sell out a night and see none of it in one place.
+ *
+ * Three distinctions this panel exists to keep straight, because collapsing
+ * any of them produces a number that is quietly wrong:
+ *
+ * - **Bookings are not heads.** One booking can bring a party of six. Door
+ *   planning runs on guests; conversion runs on bookings.
+ * - **Tickets are not bookings either** when tiers are in play — a booking can
+ *   carry several tickets across tiers.
+ * - **Check-in rate is already a percentage** server-side. Multiplying it here
+ *   is the off-by-100 that has bitten this codebase before.
+ *
+ * Turnout leads, because for an event it is the number that decides what you
+ * do next time: a sold-out night where a third never arrived is a different
+ * problem from one that did not sell.
+ */
+export declare function EventAnalyticsPanel({ productId, ticketed, className, }: {
+    productId: string;
+    /** Only a ticketed product is an event; everything else has no bookings. */
+    ticketed: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/analytics/event-analytics-panel.js

@@ -0,0 +1,137 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { analyticsApi } from "@withpotter/lib/api/analytics";
+const STATUS_ORDER = [
+  "pending",
+  "confirmed",
+  "checked_in",
+  "completed",
+  "cancelled",
+  "no_show"
+];
+const LABELS = {
+  pending: "Pending",
+  confirmed: "Confirmed",
+  checked_in: "Checked in",
+  completed: "Completed",
+  cancelled: "Cancelled",
+  no_show: "No-show"
+};
+const prettify = (key) => LABELS[key] ?? key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
+function EventAnalyticsPanel({
+  productId,
+  ticketed,
+  className = ""
+}) {
+  const formatCurrency = useFormatCurrency();
+  const { data } = useApiQuery(
+    ["event-analytics", productId],
+    (slug) => analyticsApi.getEventAnalytics(slug, productId).catch(() => null),
+    ticketed ? void 0 : { enabled: false }
+  );
+  if (!ticketed || !data) return null;
+  const {
+    totalBookings,
+    byStatus,
+    totalGuests,
+    totalRevenue,
+    checkedInCount,
+    noShowCount,
+    checkInRate,
+    soldByTier,
+    totalTickets
+  } = data;
+  if (totalBookings === 0) return null;
+  const statuses = [
+    ...STATUS_ORDER.filter((k) => (byStatus?.[k] ?? 0) > 0),
+    ...Object.keys(byStatus ?? {}).filter((k) => !STATUS_ORDER.includes(k) && (byStatus[k] ?? 0) > 0).sort()
+  ];
+  const maxStatus = Math.max(1, ...statuses.map((k) => byStatus[k] ?? 0));
+  const maxTier = Math.max(1, ...(soldByTier ?? []).map((t) => t.count));
+  return /* @__PURE__ */ jsxs("div", { className: `surface p-4 ${className}`, children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold text-[var(--text-primary)]", children: "This event" }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-2xl font-semibold tabular-nums text-[var(--text-primary)]", children: [
+        checkInRate.toFixed(0),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-muted)]", children: "turned up" })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "mb-4 text-2xs text-[var(--text-muted)]", children: [
+      checkedInCount.toLocaleString(),
+      " checked in",
+      noShowCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " \xB7 ",
+        noShowCount.toLocaleString(),
+        " no-show"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { className: "mb-4 space-y-2 border-t border-[var(--border-default)] pt-4 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: "Bookings",
+          value: totalBookings.toLocaleString(),
+          hint: totalGuests !== totalBookings ? `${totalGuests.toLocaleString()} guests` : void 0
+        }
+      ),
+      totalTickets > 0 && /* @__PURE__ */ jsx(Row, { label: "Tickets", value: totalTickets.toLocaleString() }),
+      /* @__PURE__ */ jsx(Row, { label: "Revenue", value: formatCurrency(totalRevenue) })
+    ] }),
+    statuses.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 text-2xs text-[var(--text-muted)]", children: "Where the bookings stand" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: statuses.map((key) => {
+        const count = byStatus[key] ?? 0;
+        const lost = key === "cancelled" || key === "no_show";
+        return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-24 shrink-0 truncate text-[var(--text-secondary)]", children: prettify(key) }),
+          /* @__PURE__ */ jsx("span", { className: "h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `block h-full rounded-full ${lost ? "bg-[var(--text-muted)]" : "bg-brand-500"}`,
+              style: {
+                width: `${Math.max(count / maxStatus * 100, 1.5)}%`
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]", children: count.toLocaleString() })
+        ] }, key);
+      }) })
+    ] }),
+    (soldByTier?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 text-2xs text-[var(--text-muted)]", children: "Sold by tier" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: soldByTier.map((t) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-24 shrink-0 truncate text-[var(--text-secondary)]", children: t.tierName }),
+        /* @__PURE__ */ jsx("span", { className: "h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block h-full rounded-full bg-brand-500",
+            style: {
+              width: `${Math.max(t.count / maxTier * 100, 1.5)}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]", children: t.count.toLocaleString() })
+      ] }, t.tierId)) })
+    ] })
+  ] });
+}
+function Row({
+  label,
+  value,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-baseline justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-secondary)]", children: [
+      label,
+      hint && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-2xs text-[var(--text-muted)]", children: hint })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums font-medium text-[var(--text-primary)]", children: value })
+  ] });
+}
+export {
+  EventAnalyticsPanel
+};
+//# sourceMappingURL=event-analytics-panel.js.map

package/dist/analytics/event-analytics-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/event-analytics-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { analyticsApi } from '@withpotter/lib/api/analytics';\nimport type { EventAnalytics } from '@withpotter/lib/api/types';\n\n/**\n * Booking states in the order a booking moves through them. Anything the API\n * sends that isn't listed still renders, after these, under a prettified key —\n * a new status server-side should appear rather than vanish.\n */\nconst STATUS_ORDER = [\n  'pending',\n  'confirmed',\n  'checked_in',\n  'completed',\n  'cancelled',\n  'no_show',\n];\n\nconst LABELS: Record<string, string> = {\n  pending: 'Pending',\n  confirmed: 'Confirmed',\n  checked_in: 'Checked in',\n  completed: 'Completed',\n  cancelled: 'Cancelled',\n  no_show: 'No-show',\n};\n\nconst prettify = (key: string) =>\n  LABELS[key] ?? key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');\n\n/**\n * How one event actually went.\n *\n * `GET /analytics/events/:contentId` has computed these nine figures since\n * event-tickets shipped, and the dashboard had no client wrapper for the route\n * at all — so a venue could sell out a night and see none of it in one place.\n *\n * Three distinctions this panel exists to keep straight, because collapsing\n * any of them produces a number that is quietly wrong:\n *\n * - **Bookings are not heads.** One booking can bring a party of six. Door\n *   planning runs on guests; conversion runs on bookings.\n * - **Tickets are not bookings either** when tiers are in play — a booking can\n *   carry several tickets across tiers.\n * - **Check-in rate is already a percentage** server-side. Multiplying it here\n *   is the off-by-100 that has bitten this codebase before.\n *\n * Turnout leads, because for an event it is the number that decides what you\n * do next time: a sold-out night where a third never arrived is a different\n * problem from one that did not sell.\n */\nexport function EventAnalyticsPanel({\n  productId,\n  ticketed,\n  className = '',\n}: {\n  productId: string;\n  /** Only a ticketed product is an event; everything else has no bookings. */\n  ticketed: boolean;\n  className?: string;\n}) {\n  const formatCurrency = useFormatCurrency();\n\n  // Self-fetching, like StockByLocation beside it: the detail page passes an\n  // id and nothing else, and the panel decides whether it has anything to say.\n  const { data } = useApiQuery<EventAnalytics | null>(\n    ['event-analytics', productId],\n    (slug) => analyticsApi.getEventAnalytics(slug, productId).catch(() => null),\n    ticketed ? undefined : ({ enabled: false } as const),\n  );\n\n  if (!ticketed || !data) return null;\n\n  const {\n    totalBookings,\n    byStatus,\n    totalGuests,\n    totalRevenue,\n    checkedInCount,\n    noShowCount,\n    checkInRate,\n    soldByTier,\n    totalTickets,\n  } = data;\n\n  // Nothing has happened yet. An event with no bookings is not a failed event,\n  // it is an unopened one, and a grid of zeroes reads as the former.\n  if (totalBookings === 0) return null;\n\n  const statuses = [\n    ...STATUS_ORDER.filter((k) => (byStatus?.[k] ?? 0) > 0),\n    ...Object.keys(byStatus ?? {})\n      .filter((k) => !STATUS_ORDER.includes(k) && (byStatus[k] ?? 0) > 0)\n      .sort(),\n  ];\n\n  const maxStatus = Math.max(1, ...statuses.map((k) => byStatus[k] ?? 0));\n  const maxTier = Math.max(1, ...(soldByTier ?? []).map((t) => t.count));\n\n  return (\n    <div className={`surface p-4 ${className}`}>\n      <h3 className=\"mb-4 text-sm font-semibold text-[var(--text-primary)]\">\n        This event\n      </h3>\n\n      {/* Turnout first. `checkInRate` arrives as a percentage — no ×100. */}\n      <div className=\"mb-1 flex items-baseline gap-2\">\n        <span className=\"text-2xl font-semibold tabular-nums text-[var(--text-primary)]\">\n          {checkInRate.toFixed(0)}%\n        </span>\n        <span className=\"text-sm text-[var(--text-muted)]\">turned up</span>\n      </div>\n      <p className=\"mb-4 text-2xs text-[var(--text-muted)]\">\n        {checkedInCount.toLocaleString()} checked in\n        {noShowCount > 0 && <> · {noShowCount.toLocaleString()} no-show</>}\n      </p>\n\n      <ul className=\"mb-4 space-y-2 border-t border-[var(--border-default)] pt-4 text-sm\">\n        <Row\n          label=\"Bookings\"\n          value={totalBookings.toLocaleString()}\n          hint={\n            totalGuests !== totalBookings\n              ? `${totalGuests.toLocaleString()} guests`\n              : undefined\n          }\n        />\n        {totalTickets > 0 && (\n          <Row label=\"Tickets\" value={totalTickets.toLocaleString()} />\n        )}\n        <Row label=\"Revenue\" value={formatCurrency(totalRevenue)} />\n      </ul>\n\n      {statuses.length > 0 && (\n        <div className=\"mb-4\">\n          <p className=\"mb-3 text-2xs text-[var(--text-muted)]\">\n            Where the bookings stand\n          </p>\n          <ul className=\"space-y-3\">\n            {statuses.map((key) => {\n              const count = byStatus[key] ?? 0;\n              const lost = key === 'cancelled' || key === 'no_show';\n              return (\n                <li key={key} className=\"flex items-center gap-3 text-sm\">\n                  <span className=\"w-24 shrink-0 truncate text-[var(--text-secondary)]\">\n                    {prettify(key)}\n                  </span>\n                  <span className=\"h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]\">\n                    <span\n                      className={`block h-full rounded-full ${\n                        lost ? 'bg-[var(--text-muted)]' : 'bg-brand-500'\n                      }`}\n                      style={{\n                        width: `${Math.max((count / maxStatus) * 100, 1.5)}%`,\n                      }}\n                    />\n                  </span>\n                  <span className=\"w-10 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]\">\n                    {count.toLocaleString()}\n                  </span>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      )}\n\n      {(soldByTier?.length ?? 0) > 0 && (\n        <div>\n          <p className=\"mb-3 text-2xs text-[var(--text-muted)]\">Sold by tier</p>\n          <ul className=\"space-y-3\">\n            {soldByTier.map((t) => (\n              <li key={t.tierId} className=\"flex items-center gap-3 text-sm\">\n                <span className=\"w-24 shrink-0 truncate text-[var(--text-secondary)]\">\n                  {t.tierName}\n                </span>\n                <span className=\"h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]\">\n                  <span\n                    className=\"block h-full rounded-full bg-brand-500\"\n                    style={{\n                      width: `${Math.max((t.count / maxTier) * 100, 1.5)}%`,\n                    }}\n                  />\n                </span>\n                <span className=\"w-10 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]\">\n                  {t.count.toLocaleString()}\n                </span>\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Row({\n  label,\n  value,\n  hint,\n}: {\n  label: string;\n  value: string;\n  hint?: string;\n}) {\n  return (\n    <li className=\"flex items-baseline justify-between gap-3\">\n      <span className=\"text-[var(--text-secondary)]\">\n        {label}\n        {hint && (\n          <span className=\"ml-1.5 text-2xs text-[var(--text-muted)]\">\n            {hint}\n          </span>\n        )}\n      </span>\n      <span className=\"shrink-0 tabular-nums font-medium text-[var(--text-primary)]\">\n        {value}\n      </span>\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/analytics/index.d.ts

@@ -0,0 +1,3 @@
+export { PostHogProvider, resetPostHogIdentity, revokeProductInsightsCapture, capturePostHogEvent, captureProductInsightEvent, } from './PostHogProvider';
+export type { ProductInsightEvent, ProductInsightProperties, } from './product-insights-policy';
+export { ProductInsightsPrompt } from './product-insights-consent-prompt';

package/dist/analytics/index.js

@@ -0,0 +1,17 @@
+import {
+  PostHogProvider,
+  resetPostHogIdentity,
+  revokeProductInsightsCapture,
+  capturePostHogEvent,
+  captureProductInsightEvent
+} from "./PostHogProvider";
+import { ProductInsightsPrompt } from "./product-insights-consent-prompt";
+export {
+  PostHogProvider,
+  ProductInsightsPrompt,
+  capturePostHogEvent,
+  captureProductInsightEvent,
+  resetPostHogIdentity,
+  revokeProductInsightsCapture
+};
+//# sourceMappingURL=index.js.map

package/dist/analytics/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/index.ts"],"sourcesContent":["export {\n  PostHogProvider,\n  resetPostHogIdentity,\n  revokeProductInsightsCapture,\n  capturePostHogEvent,\n  captureProductInsightEvent,\n} from './PostHogProvider';\nexport type {\n  ProductInsightEvent,\n  ProductInsightProperties,\n} from './product-insights-policy';\nexport { ProductInsightsPrompt } from './product-insights-consent-prompt';\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,6BAA6B;","names":[]}