@withpotter/components 0.13.0-next.101

package/dist/analytics/product-insights-consent-prompt.d.ts

@@ -0,0 +1,14 @@
+import type { ProductAnalyticsConsent } from '@withpotter/lib/product-insights-api';
+export declare function shouldPromptForProductInsightsConsent(consent: ProductAnalyticsConsent): boolean;
+/**
+ * How long an answer given on this device holds when the server never heard
+ * it. Beta's API once took 30s to answer anything: the save timed out, the
+ * server still said "never asked", and the dialog came back on every page.
+ */
+export declare const ANSWER_HOLD_MS: number;
+export declare function answeredRecently(answeredAt: string | null, now: number): boolean;
+interface ProductInsightsPromptProps {
+    tenantSlug?: string;
+}
+export declare function ProductInsightsPrompt({ tenantSlug, }: ProductInsightsPromptProps): import("react").JSX.Element;
+export {};

package/dist/analytics/product-insights-consent-prompt.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button } from "@withpotter/ui-kit";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import { productInsightsApi } from "@withpotter/lib/product-insights-api";
+import {
+  doNotTrackEnabled,
+  productInsightsEnabled
+} from "./product-insights-policy";
+function shouldPromptForProductInsightsConsent(consent) {
+  return consent.level === "denied" && consent.grantedAt === null && consent.revokedAt === null;
+}
+const ANSWER_HOLD_MS = 7 * 24 * 60 * 60 * 1e3;
+const answerKey = (tenantSlug) => `pb_insights_answered:${tenantSlug}`;
+function answeredRecently(answeredAt, now) {
+  const at = Number(answeredAt);
+  return Number.isFinite(at) && at > 0 && now - at < ANSWER_HOLD_MS;
+}
+function readAnswer(tenantSlug) {
+  try {
+    return localStorage.getItem(answerKey(tenantSlug));
+  } catch {
+    return null;
+  }
+}
+function rememberAnswer(tenantSlug) {
+  try {
+    localStorage.setItem(answerKey(tenantSlug), String(Date.now()));
+  } catch {
+  }
+}
+function ProductInsightsPrompt({
+  tenantSlug
+}) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    setOpen(false);
+    if (!tenantSlug || !productInsightsEnabled() || doNotTrackEnabled()) return;
+    if (answeredRecently(readAnswer(tenantSlug), Date.now())) return;
+    let active = true;
+    void productInsightsApi.getConsent(tenantSlug).then(async (consent) => {
+      if (!active || !shouldPromptForProductInsightsConsent(consent)) return;
+      await productInsightsApi.updateConsent(tenantSlug, "denied");
+      if (active) setOpen(true);
+    }).catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [tenantSlug]);
+  function decide(level) {
+    if (!tenantSlug) return;
+    setOpen(false);
+    rememberAnswer(tenantSlug);
+    void productInsightsApi.updateConsent(tenantSlug, level).then(() => {
+      window.dispatchEvent(
+        new Event("potter:product-insights-consent-changed")
+      );
+    }).catch(() => void 0);
+  }
+  function handleOpenChange(nextOpen) {
+    if (!nextOpen && open) decide("denied");
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Help improve Box" }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "pt-1 leading-5", children: "Allow Box to collect product usage data so we can improve reliability and make features easier to use. We never collect customer details or form content." })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 sm:space-x-0", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => decide("denied"),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "primary",
+          onClick: () => decide("aggregate"),
+          children: "Allow"
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  ANSWER_HOLD_MS,
+  ProductInsightsPrompt,
+  answeredRecently,
+  shouldPromptForProductInsightsConsent
+};
+//# sourceMappingURL=product-insights-consent-prompt.js.map

package/dist/analytics/product-insights-consent-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/product-insights-consent-prompt.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { Button } from '@withpotter/ui-kit';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport { productInsightsApi } from '@withpotter/lib/product-insights-api';\nimport type {\n  AnalyticsConsentLevel,\n  ProductAnalyticsConsent,\n} from '@withpotter/lib/product-insights-api';\nimport {\n  doNotTrackEnabled,\n  productInsightsEnabled,\n} from './product-insights-policy';\n\nexport function shouldPromptForProductInsightsConsent(\n  consent: ProductAnalyticsConsent,\n): boolean {\n  return (\n    consent.level === 'denied' &&\n    consent.grantedAt === null &&\n    consent.revokedAt === null\n  );\n}\n\n/**\n * How long an answer given on this device holds when the server never heard\n * it. Beta's API once took 30s to answer anything: the save timed out, the\n * server still said \"never asked\", and the dialog came back on every page.\n */\nexport const ANSWER_HOLD_MS = 7 * 24 * 60 * 60 * 1000;\n\nconst answerKey = (tenantSlug: string) => `pb_insights_answered:${tenantSlug}`;\n\nexport function answeredRecently(\n  answeredAt: string | null,\n  now: number,\n): boolean {\n  const at = Number(answeredAt);\n  return Number.isFinite(at) && at > 0 && now - at < ANSWER_HOLD_MS;\n}\n\nfunction readAnswer(tenantSlug: string): string | null {\n  try {\n    return localStorage.getItem(answerKey(tenantSlug));\n  } catch {\n    return null;\n  }\n}\n\nfunction rememberAnswer(tenantSlug: string) {\n  try {\n    localStorage.setItem(answerKey(tenantSlug), String(Date.now()));\n  } catch {\n    // Private mode: the server's record is the only memory, as before.\n  }\n}\n\ninterface ProductInsightsPromptProps {\n  tenantSlug?: string;\n}\n\nexport function ProductInsightsPrompt({\n  tenantSlug,\n}: ProductInsightsPromptProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    setOpen(false);\n    if (!tenantSlug || !productInsightsEnabled() || doNotTrackEnabled()) return;\n    if (answeredRecently(readAnswer(tenantSlug), Date.now())) return;\n\n    let active = true;\n    void productInsightsApi\n      .getConsent(tenantSlug)\n      .then(async (consent) => {\n        if (!active || !shouldPromptForProductInsightsConsent(consent)) return;\n\n        // Showing is the one-time event. Persist the privacy-safe default\n        // before opening so a refresh, another device, or a second business\n        // cannot turn one account question into a recurring interruption.\n        await productInsightsApi.updateConsent(tenantSlug, 'denied');\n        if (active) setOpen(true);\n      })\n      // Not knowing the answer, or failing to record the default, is not a\n      // reason to ask. It used to open the dialog with an error, so every slow\n      // page load asked again.\n      .catch(() => undefined);\n\n    return () => {\n      active = false;\n    };\n  }, [tenantSlug]);\n\n  /**\n   * The dialog closes on the press and the save follows behind it. Holding it\n   * open on a spinner held the merchant hostage to the API: on a slow backend\n   * \"Allow\" spun with no way out, since the dialog refused to close mid-save.\n   */\n  function decide(level: AnalyticsConsentLevel) {\n    if (!tenantSlug) return;\n    setOpen(false);\n    rememberAnswer(tenantSlug);\n    void productInsightsApi\n      .updateConsent(tenantSlug, level)\n      .then(() => {\n        window.dispatchEvent(\n          new Event('potter:product-insights-consent-changed'),\n        );\n      })\n      .catch(() => undefined);\n  }\n\n  function handleOpenChange(nextOpen: boolean) {\n    if (!nextOpen && open) decide('denied');\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Help improve Box</DialogTitle>\n          <DialogDescription className=\"pt-1 leading-5\">\n            Allow Box to collect product usage data so we can improve\n            reliability and make features easier to use. We never collect\n            customer details or form content.\n          </DialogDescription>\n        </DialogHeader>\n\n        <DialogFooter className=\"gap-2 sm:space-x-0\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => decide('denied')}\n          >\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"primary\"\n            onClick={() => decide('aggregate')}\n          >\n            Allow\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA+HQ,SACE,KADF;AA7HR,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAKnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,SAAS,sCACd,SACS;AACT,SACE,QAAQ,UAAU,YAClB,QAAQ,cAAc,QACtB,QAAQ,cAAc;AAE1B;AAOO,MAAM,iBAAiB,IAAI,KAAK,KAAK,KAAK;AAEjD,MAAM,YAAY,CAAC,eAAuB,wBAAwB,UAAU;AAErE,SAAS,iBACd,YACA,KACS;AACT,QAAM,KAAK,OAAO,UAAU;AAC5B,SAAO,OAAO,SAAS,EAAE,KAAK,KAAK,KAAK,MAAM,KAAK;AACrD;AAEA,SAAS,WAAW,YAAmC;AACrD,MAAI;AACF,WAAO,aAAa,QAAQ,UAAU,UAAU,CAAC;AAAA,EACnD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,eAAe,YAAoB;AAC1C,MAAI;AACF,iBAAa,QAAQ,UAAU,UAAU,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC;AAAA,EAChE,QAAQ;AAAA,EAER;AACF;AAMO,SAAS,sBAAsB;AAAA,EACpC;AACF,GAA+B;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,YAAQ,KAAK;AACb,QAAI,CAAC,cAAc,CAAC,uBAAuB,KAAK,kBAAkB,EAAG;AACrE,QAAI,iBAAiB,WAAW,UAAU,GAAG,KAAK,IAAI,CAAC,EAAG;AAE1D,QAAI,SAAS;AACb,SAAK,mBACF,WAAW,UAAU,EACrB,KAAK,OAAO,YAAY;AACvB,UAAI,CAAC,UAAU,CAAC,sCAAsC,OAAO,EAAG;AAKhE,YAAM,mBAAmB,cAAc,YAAY,QAAQ;AAC3D,UAAI,OAAQ,SAAQ,IAAI;AAAA,IAC1B,CAAC,EAIA,MAAM,MAAM,MAAS;AAExB,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAOf,WAAS,OAAO,OAA8B;AAC5C,QAAI,CAAC,WAAY;AACjB,YAAQ,KAAK;AACb,mBAAe,UAAU;AACzB,SAAK,mBACF,cAAc,YAAY,KAAK,EAC/B,KAAK,MAAM;AACV,aAAO;AAAA,QACL,IAAI,MAAM,yCAAyC;AAAA,MACrD;AAAA,IACF,CAAC,EACA,MAAM,MAAM,MAAS;AAAA,EAC1B;AAEA,WAAS,iBAAiB,UAAmB;AAC3C,QAAI,CAAC,YAAY,KAAM,QAAO,QAAQ;AAAA,EACxC;AAEA,SACE,oBAAC,UAAO,MAAY,cAAc,kBAChC,+BAAC,iBAAc,WAAU,YACvB;AAAA,yBAAC,gBACC;AAAA,0BAAC,eAAY,8BAAgB;AAAA,MAC7B,oBAAC,qBAAkB,WAAU,kBAAiB,uKAI9C;AAAA,OACF;AAAA,IAEA,qBAAC,gBAAa,WAAU,sBACtB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAAS,MAAM,OAAO,QAAQ;AAAA,UAC/B;AAAA;AAAA,MAED;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAAS,MAAM,OAAO,WAAW;AAAA,UAClC;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/analytics/product-insights-policy.d.ts

@@ -0,0 +1,16 @@
+export declare const PRODUCT_INSIGHTS_POLICY_VERSION = "2026-08-25";
+export declare const PRODUCT_INSIGHT_EVENTS: readonly ["dashboard_page_viewed", "dashboard_feature_opened", "dashboard_action_started", "dashboard_action_completed", "dashboard_action_failed", "dashboard_search_used", "dashboard_empty_state_seen", "dashboard_help_opened"];
+export type ProductInsightEvent = (typeof PRODUCT_INSIGHT_EVENTS)[number];
+export declare const PRODUCT_INSIGHT_PROPERTIES: readonly ["event_version", "route_pattern", "feature_id", "action_id", "outcome", "duration_ms", "error_class", "viewport"];
+export type ProductInsightProperty = (typeof PRODUCT_INSIGHT_PROPERTIES)[number];
+export type ProductInsightProperties = Partial<Record<ProductInsightProperty, string | number | boolean>>;
+export declare const PRODUCT_INSIGHTS_MASK_TEXT_SELECTOR = "*";
+export declare const PRODUCT_INSIGHTS_BLOCK_SELECTOR = "[data-product-insights-block], [data-sensitive], img, video, picture, canvas, iframe";
+export declare function productInsightsEnabled(): boolean;
+export declare function productReplayEnabled(): boolean;
+export declare function productResearchEnabled(): boolean;
+export declare function doNotTrackEnabled(): boolean;
+export declare function normalizeDashboardRoute(pathname: string): string | null;
+export declare function dashboardFeatureFromRoute(pathname: string): string | null;
+export declare function sanitizeProductInsightProperties(properties: ProductInsightProperties): ProductInsightProperties;
+export declare function isReplaySensitiveRoute(pathname: string): boolean;

package/dist/analytics/product-insights-policy.js

@@ -0,0 +1,127 @@
+const PRODUCT_INSIGHTS_POLICY_VERSION = "2026-08-25";
+const PRODUCT_INSIGHT_EVENTS = [
+  "dashboard_page_viewed",
+  "dashboard_feature_opened",
+  "dashboard_action_started",
+  "dashboard_action_completed",
+  "dashboard_action_failed",
+  "dashboard_search_used",
+  "dashboard_empty_state_seen",
+  "dashboard_help_opened"
+];
+const PRODUCT_INSIGHT_PROPERTIES = [
+  "event_version",
+  "route_pattern",
+  "feature_id",
+  "action_id",
+  "outcome",
+  "duration_ms",
+  "error_class",
+  "viewport"
+];
+const DYNAMIC_SEGMENT = /^(?:\d+|[0-9a-f]{8}-[0-9a-f-]{27,}|[A-Za-z0-9_-]{20,})$/i;
+const SAFE_IDENTIFIER = /^[a-z0-9][a-z0-9_:-]{0,79}$/;
+const DYNAMIC_COLLECTIONS = /* @__PURE__ */ new Set([
+  "blog",
+  "bookings",
+  "catalog",
+  "customers",
+  "discounts",
+  "orders",
+  "resources",
+  "transactions"
+]);
+const STATIC_RESOURCE_ACTIONS = /* @__PURE__ */ new Set(["edit", "new", "segments"]);
+const PRODUCT_INSIGHTS_MASK_TEXT_SELECTOR = "*";
+const PRODUCT_INSIGHTS_BLOCK_SELECTOR = "[data-product-insights-block], [data-sensitive], img, video, picture, canvas, iframe";
+const REPLAY_SENSITIVE_SECTIONS = /* @__PURE__ */ new Set([
+  "customers",
+  "finance",
+  "inbox",
+  "inquiries",
+  "invoices",
+  "money-preview",
+  "orders",
+  "payments",
+  "settings"
+]);
+function productInsightsEnabled() {
+  const configured = process.env.NEXT_PUBLIC_PRODUCT_INSIGHTS_ENABLED;
+  return configured === void 0 ? Boolean(process.env.NEXT_PUBLIC_POSTHOG_KEY?.trim()) : configured === "1";
+}
+function productReplayEnabled() {
+  return process.env.NEXT_PUBLIC_PRODUCT_REPLAY_ENABLED === "1";
+}
+function productResearchEnabled() {
+  return process.env.NEXT_PUBLIC_PRODUCT_RESEARCH_ENABLED === "1";
+}
+function doNotTrackEnabled() {
+  return typeof navigator !== "undefined" && navigator.doNotTrack === "1";
+}
+function normalizeDashboardRoute(pathname) {
+  const path = pathname.split(/[?#]/, 1)[0].replace(/\/+$/, "") || "/";
+  if (!path.startsWith("/dashboard")) return null;
+  const segments = path.split("/");
+  return segments.map((segment, index) => {
+    const previous = segments[index - 1];
+    const followsDynamicResource = DYNAMIC_COLLECTIONS.has(previous) || previous === ":id";
+    const dynamicResourceId = followsDynamicResource && !STATIC_RESOURCE_ACTIONS.has(segment);
+    if (DYNAMIC_SEGMENT.test(segment) || segment.includes("@") || dynamicResourceId) {
+      segments[index] = ":id";
+      return ":id";
+    }
+    return segment;
+  }).join("/");
+}
+function dashboardFeatureFromRoute(pathname) {
+  const route = normalizeDashboardRoute(pathname);
+  if (!route) return null;
+  return route.split("/")[2] || "dashboard";
+}
+function sanitizeProductInsightProperties(properties) {
+  return Object.fromEntries(
+    Object.entries(properties).flatMap(([key, value]) => {
+      if (!PRODUCT_INSIGHT_PROPERTIES.includes(key)) {
+        return [];
+      }
+      if (key === "event_version") {
+        return value === 1 ? [[key, value]] : [];
+      }
+      if (key === "route_pattern" && typeof value === "string") {
+        const normalized = normalizeDashboardRoute(value);
+        return normalized ? [[key, normalized]] : [];
+      }
+      if (key === "duration_ms" && typeof value === "number") {
+        return Number.isFinite(value) && value >= 0 && value <= 864e5 ? [[key, Math.round(value)]] : [];
+      }
+      if (key === "viewport" && ["mobile", "tablet", "desktop"].includes(String(value))) {
+        return [[key, value]];
+      }
+      if (key === "outcome" && ["success", "failure", "cancelled", "empty"].includes(String(value))) {
+        return [[key, value]];
+      }
+      return typeof value === "string" && SAFE_IDENTIFIER.test(value) ? [[key, value]] : [];
+    })
+  );
+}
+function isReplaySensitiveRoute(pathname) {
+  const route = normalizeDashboardRoute(pathname);
+  if (!route) return false;
+  return REPLAY_SENSITIVE_SECTIONS.has(route.split("/")[2] ?? "");
+}
+export {
+  PRODUCT_INSIGHTS_BLOCK_SELECTOR,
+  PRODUCT_INSIGHTS_MASK_TEXT_SELECTOR,
+  PRODUCT_INSIGHTS_POLICY_VERSION,
+  PRODUCT_INSIGHT_EVENTS,
+  PRODUCT_INSIGHT_PROPERTIES,
+  dashboardFeatureFromRoute,
+  doNotTrackEnabled,
+  isReplaySensitiveRoute,
+  normalizeDashboardRoute,
+  productInsightsEnabled,
+  productReplayEnabled,
+  productResearchEnabled,
+  sanitizeProductInsightProperties
+};
+//# sourceMappingURL=product-insights-policy.js.map

package/dist/analytics/product-insights-policy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/product-insights-policy.ts"],"sourcesContent":["export const PRODUCT_INSIGHTS_POLICY_VERSION = '2026-08-25';\n\nexport const PRODUCT_INSIGHT_EVENTS = [\n  'dashboard_page_viewed',\n  'dashboard_feature_opened',\n  'dashboard_action_started',\n  'dashboard_action_completed',\n  'dashboard_action_failed',\n  'dashboard_search_used',\n  'dashboard_empty_state_seen',\n  'dashboard_help_opened',\n] as const;\n\nexport type ProductInsightEvent = (typeof PRODUCT_INSIGHT_EVENTS)[number];\n\nexport const PRODUCT_INSIGHT_PROPERTIES = [\n  'event_version',\n  'route_pattern',\n  'feature_id',\n  'action_id',\n  'outcome',\n  'duration_ms',\n  'error_class',\n  'viewport',\n] as const;\n\nexport type ProductInsightProperty =\n  (typeof PRODUCT_INSIGHT_PROPERTIES)[number];\n\nexport type ProductInsightProperties = Partial<\n  Record<ProductInsightProperty, string | number | boolean>\n>;\n\nconst DYNAMIC_SEGMENT =\n  /^(?:\\d+|[0-9a-f]{8}-[0-9a-f-]{27,}|[A-Za-z0-9_-]{20,})$/i;\nconst SAFE_IDENTIFIER = /^[a-z0-9][a-z0-9_:-]{0,79}$/;\nconst DYNAMIC_COLLECTIONS = new Set([\n  'blog',\n  'bookings',\n  'catalog',\n  'customers',\n  'discounts',\n  'orders',\n  'resources',\n  'transactions',\n]);\nconst STATIC_RESOURCE_ACTIONS = new Set(['edit', 'new', 'segments']);\n\n// A replay shows customers' names, addresses and amounts as plain text, so all\n// text is masked: replays keep layout, taps and scrolling, not the words.\nexport const PRODUCT_INSIGHTS_MASK_TEXT_SELECTOR = '*';\n\nexport const PRODUCT_INSIGHTS_BLOCK_SELECTOR =\n  '[data-product-insights-block], [data-sensitive], img, video, picture, canvas, iframe';\n\n// Sections that hold customer, money or account details. Replay is paused\n// while one of these is open, as a second line behind text masking.\nconst REPLAY_SENSITIVE_SECTIONS = new Set([\n  'customers',\n  'finance',\n  'inbox',\n  'inquiries',\n  'invoices',\n  'money-preview',\n  'orders',\n  'payments',\n  'settings',\n]);\n\nexport function productInsightsEnabled(): boolean {\n  const configured = process.env.NEXT_PUBLIC_PRODUCT_INSIGHTS_ENABLED;\n  return configured === undefined\n    ? Boolean(process.env.NEXT_PUBLIC_POSTHOG_KEY?.trim())\n    : configured === '1';\n}\n\nexport function productReplayEnabled(): boolean {\n  return process.env.NEXT_PUBLIC_PRODUCT_REPLAY_ENABLED === '1';\n}\n\nexport function productResearchEnabled(): boolean {\n  return process.env.NEXT_PUBLIC_PRODUCT_RESEARCH_ENABLED === '1';\n}\n\nexport function doNotTrackEnabled(): boolean {\n  return typeof navigator !== 'undefined' && navigator.doNotTrack === '1';\n}\n\nexport function normalizeDashboardRoute(pathname: string): string | null {\n  const path = pathname.split(/[?#]/, 1)[0].replace(/\\/+$/, '') || '/';\n  if (!path.startsWith('/dashboard')) return null;\n\n  const segments = path.split('/');\n  return segments\n    .map((segment, index) => {\n      const previous = segments[index - 1];\n      const followsDynamicResource =\n        DYNAMIC_COLLECTIONS.has(previous) || previous === ':id';\n      const dynamicResourceId =\n        followsDynamicResource && !STATIC_RESOURCE_ACTIONS.has(segment);\n      if (\n        DYNAMIC_SEGMENT.test(segment) ||\n        segment.includes('@') ||\n        dynamicResourceId\n      ) {\n        segments[index] = ':id';\n        return ':id';\n      }\n      return segment;\n    })\n    .join('/');\n}\n\nexport function dashboardFeatureFromRoute(pathname: string): string | null {\n  const route = normalizeDashboardRoute(pathname);\n  if (!route) return null;\n  return route.split('/')[2] || 'dashboard';\n}\n\nexport function sanitizeProductInsightProperties(\n  properties: ProductInsightProperties,\n): ProductInsightProperties {\n  return Object.fromEntries(\n    Object.entries(properties).flatMap(([key, value]) => {\n      if (!PRODUCT_INSIGHT_PROPERTIES.includes(key as ProductInsightProperty)) {\n        return [];\n      }\n      if (key === 'event_version') {\n        return value === 1 ? [[key, value]] : [];\n      }\n      if (key === 'route_pattern' && typeof value === 'string') {\n        const normalized = normalizeDashboardRoute(value);\n        return normalized ? [[key, normalized]] : [];\n      }\n      if (key === 'duration_ms' && typeof value === 'number') {\n        return Number.isFinite(value) && value >= 0 && value <= 86_400_000\n          ? [[key, Math.round(value)]]\n          : [];\n      }\n      if (\n        key === 'viewport' &&\n        ['mobile', 'tablet', 'desktop'].includes(String(value))\n      ) {\n        return [[key, value]];\n      }\n      if (\n        key === 'outcome' &&\n        ['success', 'failure', 'cancelled', 'empty'].includes(String(value))\n      ) {\n        return [[key, value]];\n      }\n      return typeof value === 'string' && SAFE_IDENTIFIER.test(value)\n        ? [[key, value]]\n        : [];\n    }),\n  );\n}\n\nexport function isReplaySensitiveRoute(pathname: string): boolean {\n  const route = normalizeDashboardRoute(pathname);\n  if (!route) return false;\n  return REPLAY_SENSITIVE_SECTIONS.has(route.split('/')[2] ?? '');\n}\n"],"mappings":"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","names":[]}

package/dist/analytics/product-performance-panel.d.ts

@@ -0,0 +1,35 @@
+/**
+ * What this item did, and where its buyers came from.
+ *
+ * The return leg of the loop, and the reason it is worth building: a merchant
+ * could always make an item and put it out, and nothing ever came back to it.
+ * The item screen described the record — price, stock, category — and never
+ * once said what it earned. That is the difference between a filing cabinet
+ * and a feed, and it is the half every social platform gets right by default.
+ *
+ * Three decisions that are load-bearing:
+ *
+ * - **The sources are whatever reported.** There is no fixed list of platforms
+ *   here and there must never be one. Meta's commerce surfaces are closed to
+ *   most of the world (no African country is on the eligible list at all), so
+ *   a panel with a hardcoded Instagram row would render an empty promise for
+ *   the merchants who cannot have it, and a hardcoded list would need editing
+ *   every time a merchant tags a link with something new. Capability is
+ *   discovered from what came back, never assumed from where someone is.
+ *
+ * - **A never-sold item still gets an answer.** The event panel next door
+ *   returns null when nothing has happened, which is right for an event: an
+ *   unopened night is not a failed one. It is wrong here. If creating a thing
+ *   and coming back to silence is the bug, then rendering nothing on the item
+ *   that most needs an answer reproduces it exactly. It says so in words.
+ *
+ * - **The prior window is shown, not just the total.** "It earned ₦40,000" is
+ *   a receipt. "It earned ₦40,000, up from ₦12,000" is a reason to come back.
+ */
+export declare function ProductPerformancePanel({ productId, 
+/** How far back to look. A prop so a period control can drive it later. */
+days, className, }: {
+    productId: string;
+    days?: number;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/analytics/product-performance-panel.js

@@ -0,0 +1,162 @@
+"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 SOURCE_LABELS = {
+  // Short enough for the label column. "Came straight here" was friendlier and
+  // truncated to "Came straight h…" at every width the panel actually renders
+  // at, which is worse than plain. It also pairs with the sentence under the
+  // rows, which already explains what having no source means.
+  direct: "No source",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  tiktok: "TikTok",
+  youtube: "YouTube",
+  whatsapp: "WhatsApp",
+  google: "Google",
+  x: "X",
+  twitter: "X",
+  email: "Email",
+  sms: "SMS"
+};
+const sourceLabel = (key) => SOURCE_LABELS[key.toLowerCase()] ?? key.charAt(0).toUpperCase() + key.slice(1).replace(/[_-]+/g, " ");
+function ProductPerformancePanel({
+  productId,
+  /** How far back to look. A prop so a period control can drive it later. */
+  days = 30,
+  className = ""
+}) {
+  const formatCurrency = useFormatCurrency();
+  const endDate = /* @__PURE__ */ new Date();
+  const startDate = new Date(endDate.getTime() - days * 24 * 60 * 60 * 1e3);
+  const range = {
+    startDate: startDate.toISOString().slice(0, 10),
+    endDate: endDate.toISOString().slice(0, 10)
+  };
+  const { data, isLoading } = useApiQuery(
+    ["product-performance", productId, range.startDate, range.endDate],
+    (slug) => analyticsApi.getProductPerformance(slug, productId, range).catch(() => null)
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: `surface p-4 ${className}`, children: [
+      /* @__PURE__ */ jsx(Heading, { days }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: "Loading\u2026" })
+    ] });
+  }
+  if (!data) return null;
+  const {
+    revenue,
+    units,
+    orders,
+    customers,
+    priorRevenue,
+    bySource,
+    unattributedRevenue,
+    lastSoldAt,
+    socialReach
+  } = data;
+  if (orders === 0 && priorRevenue <= 0) return null;
+  if (orders === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: `surface p-4 ${className}`, children: [
+      /* @__PURE__ */ jsx(Heading, { days }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-secondary)]", children: [
+        "Nothing sold in this window. It earned ",
+        formatCurrency(priorRevenue),
+        " ",
+        "before."
+      ] })
+    ] });
+  }
+  const delta = revenue - priorRevenue;
+  const maxSource = Math.max(1, ...bySource.map((s) => s.revenue));
+  const movement = priorRevenue > 0 ? `${delta >= 0 ? "up from" : "down from"} ${formatCurrency(priorRevenue)}` : null;
+  return /* @__PURE__ */ jsxs("div", { className: `surface p-4 ${className}`, children: [
+    /* @__PURE__ */ jsx(Heading, { days }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold tabular-nums text-[var(--text-primary)]", children: formatCurrency(revenue) }),
+      movement && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: delta >= 0 ? "text-sm text-[var(--success)]" : "text-sm text-[var(--text-muted)]",
+          children: movement
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "mb-4 text-2xs text-[var(--text-muted)]", children: [
+      units.toLocaleString(),
+      " sold across ",
+      orders.toLocaleString(),
+      " ",
+      orders === 1 ? "order" : "orders",
+      customers > 0 && customers !== orders && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " \xB7 ",
+        customers.toLocaleString(),
+        " buyers"
+      ] }),
+      lastSoldAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " \xB7 last on ",
+        formatDay(lastSoldAt)
+      ] })
+    ] }),
+    socialReach && /* @__PURE__ */ jsxs("div", { className: "mb-4 border-t border-[var(--border-default)] pt-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-2xs text-[var(--text-muted)]", children: "Seen on social" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-secondary)]", children: [
+        socialReach.reach !== null && socialReach.reachKnown > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: socialReach.reach.toLocaleString() }),
+          " ",
+          "reached"
+        ] }) : socialReach.views !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: socialReach.views.toLocaleString() }),
+          " ",
+          "views"
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Posted" }),
+        " ",
+        "across ",
+        socialReach.posts.toLocaleString(),
+        " ",
+        socialReach.posts === 1 ? "post" : "posts",
+        " carrying a link to this"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-default)] pt-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 text-2xs text-[var(--text-muted)]", children: "Where the buyers came from" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: bySource.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-28 shrink-0 truncate text-[var(--text-secondary)]", children: sourceLabel(s.source) }),
+        /* @__PURE__ */ jsx("span", { className: "h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `block h-full w-full origin-left rounded-full ${s.source === "direct" ? "bg-[var(--text-muted)]" : "bg-brand-500"}`,
+            style: {
+              transform: `scaleX(${Math.max(s.revenue / maxSource, 0.015)})`,
+              transition: "transform var(--motion-normal) var(--motion-ease-out)"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]", children: formatCurrency(s.revenue) })
+      ] }, s.source)) }),
+      unattributedRevenue > 0 && revenue > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-2xs text-[var(--text-muted)]", children: [
+        Math.round(unattributedRevenue / revenue * 100),
+        "% of this item\u2019s money arrived without a source. Share a tagged link to find out what is sending it."
+      ] })
+    ] })
+  ] });
+}
+function Heading({ days }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-baseline justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "What this earned" }),
+    /* @__PURE__ */ jsxs("span", { className: "text-2xs text-[var(--text-muted)]", children: [
+      "Last ",
+      days,
+      " days"
+    ] })
+  ] });
+}
+const formatDay = (iso) => new Date(iso).toLocaleDateString(void 0, {
+  day: "numeric",
+  month: "short"
+});
+export {
+  ProductPerformancePanel
+};
+//# sourceMappingURL=product-performance-panel.js.map

package/dist/analytics/product-performance-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/analytics/product-performance-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 { ProductPerformance } from '@withpotter/lib/api/types';\n\n/**\n * How a raw `utm_source` is spelled for a human.\n *\n * Display only, and deliberately partial. An unknown source is NOT dropped and\n * NOT bucketed into \"other\" — it renders under its own name, title-cased. A\n * merchant who tags a link `whatsapp-status` sees `Whatsapp-status`, which is\n * ugly and true, rather than nothing, which is neither.\n */\nconst SOURCE_LABELS: Record<string, string> = {\n  // Short enough for the label column. \"Came straight here\" was friendlier and\n  // truncated to \"Came straight h…\" at every width the panel actually renders\n  // at, which is worse than plain. It also pairs with the sentence under the\n  // rows, which already explains what having no source means.\n  direct: 'No source',\n  instagram: 'Instagram',\n  facebook: 'Facebook',\n  tiktok: 'TikTok',\n  youtube: 'YouTube',\n  whatsapp: 'WhatsApp',\n  google: 'Google',\n  x: 'X',\n  twitter: 'X',\n  email: 'Email',\n  sms: 'SMS',\n};\n\nconst sourceLabel = (key: string) =>\n  SOURCE_LABELS[key.toLowerCase()] ??\n  key.charAt(0).toUpperCase() + key.slice(1).replace(/[_-]+/g, ' ');\n\n/**\n * What this item did, and where its buyers came from.\n *\n * The return leg of the loop, and the reason it is worth building: a merchant\n * could always make an item and put it out, and nothing ever came back to it.\n * The item screen described the record — price, stock, category — and never\n * once said what it earned. That is the difference between a filing cabinet\n * and a feed, and it is the half every social platform gets right by default.\n *\n * Three decisions that are load-bearing:\n *\n * - **The sources are whatever reported.** There is no fixed list of platforms\n *   here and there must never be one. Meta's commerce surfaces are closed to\n *   most of the world (no African country is on the eligible list at all), so\n *   a panel with a hardcoded Instagram row would render an empty promise for\n *   the merchants who cannot have it, and a hardcoded list would need editing\n *   every time a merchant tags a link with something new. Capability is\n *   discovered from what came back, never assumed from where someone is.\n *\n * - **A never-sold item still gets an answer.** The event panel next door\n *   returns null when nothing has happened, which is right for an event: an\n *   unopened night is not a failed one. It is wrong here. If creating a thing\n *   and coming back to silence is the bug, then rendering nothing on the item\n *   that most needs an answer reproduces it exactly. It says so in words.\n *\n * - **The prior window is shown, not just the total.** \"It earned ₦40,000\" is\n *   a receipt. \"It earned ₦40,000, up from ₦12,000\" is a reason to come back.\n */\nexport function ProductPerformancePanel({\n  productId,\n  /** How far back to look. A prop so a period control can drive it later. */\n  days = 30,\n  className = '',\n}: {\n  productId: string;\n  days?: number;\n  className?: string;\n}) {\n  const formatCurrency = useFormatCurrency();\n\n  const endDate = new Date();\n  const startDate = new Date(endDate.getTime() - days * 24 * 60 * 60 * 1000);\n  const range = {\n    startDate: startDate.toISOString().slice(0, 10),\n    endDate: endDate.toISOString().slice(0, 10),\n  };\n\n  // Self-fetching, like StockByLocation and the event panel beside it: the\n  // detail page passes an id and nothing else.\n  const { data, isLoading } = useApiQuery<ProductPerformance | null>(\n    ['product-performance', productId, range.startDate, range.endDate],\n    (slug) =>\n      analyticsApi\n        .getProductPerformance(slug, productId, range)\n        .catch(() => null),\n  );\n\n  if (isLoading) {\n    return (\n      <div className={`surface p-4 ${className}`}>\n        <Heading days={days} />\n        <p className=\"text-sm text-[var(--text-muted)]\">Loading…</p>\n      </div>\n    );\n  }\n\n  // The request failed. Say nothing rather than claim the item earned zero —\n  // a zero the merchant cannot distinguish from a broken panel is worse than\n  // an absent panel.\n  if (!data) return null;\n\n  const {\n    revenue,\n    units,\n    orders,\n    customers,\n    priorRevenue,\n    bySource,\n    unattributedRevenue,\n    lastSoldAt,\n    socialReach,\n  } = data;\n\n  // Nothing in the window and nothing before it: the Record card already says\n  // \"Never sold\", so a second card saying \"Not sold yet\" is the same fact twice.\n  if (orders === 0 && priorRevenue <= 0) return null;\n\n  if (orders === 0) {\n    return (\n      <div className={`surface p-4 ${className}`}>\n        <Heading days={days} />\n        <p className=\"text-sm text-[var(--text-secondary)]\">\n          Nothing sold in this window. It earned {formatCurrency(priorRevenue)}{' '}\n          before.\n        </p>\n      </div>\n    );\n  }\n\n  const delta = revenue - priorRevenue;\n  const maxSource = Math.max(1, ...bySource.map((s) => s.revenue));\n\n  // Only worth saying when there is something to compare against. A first\n  // window has no prior, and \"up 100%\" from nothing is not a fact.\n  const movement =\n    priorRevenue > 0\n      ? `${delta >= 0 ? 'up from' : 'down from'} ${formatCurrency(priorRevenue)}`\n      : null;\n\n  return (\n    <div className={`surface p-4 ${className}`}>\n      <Heading days={days} />\n\n      {/* Money leads. It is the question the merchant came back to ask. */}\n      <div className=\"mb-1 flex items-baseline gap-2\">\n        <span className=\"text-2xl font-semibold tabular-nums text-[var(--text-primary)]\">\n          {formatCurrency(revenue)}\n        </span>\n        {movement && (\n          <span\n            className={\n              delta >= 0\n                ? 'text-sm text-[var(--success)]'\n                : 'text-sm text-[var(--text-muted)]'\n            }\n          >\n            {movement}\n          </span>\n        )}\n      </div>\n      <p className=\"mb-4 text-2xs text-[var(--text-muted)]\">\n        {units.toLocaleString()} sold across {orders.toLocaleString()}{' '}\n        {orders === 1 ? 'order' : 'orders'}\n        {/*\n          Only when there is a real count to show. `customers` is a COUNT of\n          distinct `customer_id`, and a guest checkout leaves that null — so a\n          shop selling entirely to walk-ins gets 0 here beside 36 orders, and\n          \"· 0 buyers\" reads as a broken panel rather than as \"nobody left a\n          name\". Verified on tura-bodywork: 37 orders, 0 with a customer id.\n        */}\n        {customers > 0 && customers !== orders && (\n          <> · {customers.toLocaleString()} buyers</>\n        )}\n        {lastSoldAt && <> · last on {formatDay(lastSoldAt)}</>}\n      </p>\n\n      {/*\n        The funnel, and only when Box can actually see the top of it.\n        `socialReach` is null — not zero — for a workspace that has connected\n        no account, because nobody was reached is a measurement and cannot be\n        seen is an absence.\n\n        Reach itself can still be null inside a present block: YouTube counts\n        views, not people, and reports no reach figure at all. So the number is\n        shown only when at least one post supplied one, and views stand in\n        where they did not.\n\n        NO ARROW TO THE ORDER COUNT. It read \"5,200 reached → 36 orders\" and\n        that is a causal claim this panel cannot support: `orders` is the\n        item's TOTAL, and on the very workspace it was first rendered against,\n        every one of those orders was unattributed — the line two rows below\n        said \"100% of this item's money arrived without a source\" at the same\n        time. The rows below are where attribution is stated, and they are\n        stated per source because that is the only place it is known.\n      */}\n      {socialReach && (\n        <div className=\"mb-4 border-t border-[var(--border-default)] pt-4\">\n          <p className=\"mb-2 text-2xs text-[var(--text-muted)]\">\n            Seen on social\n          </p>\n          <p className=\"text-sm text-[var(--text-secondary)]\">\n            {socialReach.reach !== null && socialReach.reachKnown > 0 ? (\n              <>\n                <span className=\"font-medium text-[var(--text-primary)]\">\n                  {socialReach.reach.toLocaleString()}\n                </span>{' '}\n                reached\n              </>\n            ) : socialReach.views !== null ? (\n              <>\n                <span className=\"font-medium text-[var(--text-primary)]\">\n                  {socialReach.views.toLocaleString()}\n                </span>{' '}\n                views\n              </>\n            ) : (\n              <>Posted</>\n            )}{' '}\n            across {socialReach.posts.toLocaleString()}{' '}\n            {socialReach.posts === 1 ? 'post' : 'posts'} carrying a link to this\n          </p>\n        </div>\n      )}\n\n      <div className=\"border-t border-[var(--border-default)] pt-4\">\n        <p className=\"mb-3 text-2xs text-[var(--text-muted)]\">\n          Where the buyers came from\n        </p>\n        <ul className=\"space-y-3\">\n          {bySource.map((s) => (\n            <li key={s.source} className=\"flex items-center gap-3 text-sm\">\n              <span className=\"w-28 shrink-0 truncate text-[var(--text-secondary)]\">\n                {sourceLabel(s.source)}\n              </span>\n              <span className=\"h-2 flex-1 overflow-hidden rounded-full bg-[var(--bg-muted)]\">\n                <span\n                  className={`block h-full w-full origin-left rounded-full ${\n                    s.source === 'direct'\n                      ? 'bg-[var(--text-muted)]'\n                      : 'bg-brand-500'\n                  }`}\n                  style={{\n                    transform: `scaleX(${Math.max(s.revenue / maxSource, 0.015)})`,\n                    transition:\n                      'transform var(--motion-normal) var(--motion-ease-out)',\n                  }}\n                />\n              </span>\n              <span className=\"w-20 shrink-0 text-right tabular-nums font-medium text-[var(--text-primary)]\">\n                {formatCurrency(s.revenue)}\n              </span>\n            </li>\n          ))}\n        </ul>\n\n        {/*\n          The share that carries no source at all, stated rather than left to\n          be worked out from the rows. It is the number that decides whether\n          the rest of this card is worth reading: an item whose money is almost\n          all unattributed is not telling you about your marketing, it is\n          telling you the capture is not reaching checkout.\n        */}\n        {unattributedRevenue > 0 && revenue > 0 && (\n          <p className=\"mt-3 text-2xs text-[var(--text-muted)]\">\n            {Math.round((unattributedRevenue / revenue) * 100)}% of this\n            item&rsquo;s money arrived without a source. Share a tagged link to\n            find out what is sending it.\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction Heading({ days }: { days: number }) {\n  return (\n    <div className=\"mb-4 flex items-baseline justify-between gap-3\">\n      <h3 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n        What this earned\n      </h3>\n      <span className=\"text-2xs text-[var(--text-muted)]\">\n        Last {days} days\n      </span>\n    </div>\n  );\n}\n\nconst formatDay = (iso: string) =>\n  new Date(iso).toLocaleDateString(undefined, {\n    day: 'numeric',\n    month: 'short',\n  });\n"],"mappings":"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","names":[]}

package/dist/analytics/share-links-panel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The links this item is being sold through, and what each one has brought.
+ *
+ * This is the half that makes the performance panel above it mean anything. On
+ * real data that panel says "100% of this item's money arrived without a
+ * source" — true, and useless, because nothing was minting links that carried
+ * attribution. A link from here stamps `utm_source` and `utm_content` on the
+ * way to the shop, the storefront writes them onto the order at checkout, and
+ * the panel's source rows fill in by themselves.
+ *
+ * Clicks are shown beside orders on purpose. A link with clicks and no sales
+ * is an offer that is not landing; a link with neither is a post nobody
+ * watched. Those call for opposite responses, and a panel that only counted
+ * money could not tell them apart.
+ */
+export declare function ShareLinksPanel({ productId, className, }: {
+    productId: string;
+    className?: string;
+}): import("react").JSX.Element;