@qoretechnologies/reqraft 0.10.57-pr.127.ge03fd3a → 0.10.57

package/.claude/CLAUDE.md

@@ -307,7 +307,7 @@ yarn build:test         # Type-check without emit
 | `src/components/form/` | Form field components |
 | `src/components/log/` | Log display component |
 | `src/components/menu/` | Navigation menu component |
-| `src/tracking/` | First-party tracking, consent and A/B testing (`core/` no DOM, `browser/`, `react/`); how-to in `design/TRACKING.md` |
+| `src/tracking/` | First-party tracking, consent and A/B testing (`core/` no DOM, `browser/`, `react/`, and `ui/`: the A/B test card and overlay on Reqore); how-to in `design/TRACKING.md` |
 | `src/types/` | Shared TypeScript types |
 | `__tests__/` | Vitest unit tests (jsdom) |
 

package/README.md

@@ -166,7 +166,7 @@ const tracking = createBrowserTracker({
 </TrackingProvider>;
 ```
 
-`@qoretechnologies/reqraft/dist/tracking` loads nothing else from Reqraft; the same names are exported from the package root. Config, consent, `useExperiment`, `trackClick` / `trackSection` markup, `createMemoryTracker` for tests and the server contract: [design/TRACKING.md](design/TRACKING.md).
+`@qoretechnologies/reqraft/dist/tracking` loads nothing else from Reqraft; the same names are exported from the package root. The A/B test UI every product shows (`<ExperimentsOverlay>`, `<ExperimentCard>`, `useExperimentsAdmin`) is in `@qoretechnologies/reqraft/dist/tracking/ui`. Config, consent, `useExperiment`, `trackClick` / `trackSection` markup, `createMemoryTracker` for tests and the server contract: [design/TRACKING.md](design/TRACKING.md).
 
 Clients on the same LSP endpoint share ONE underlying WebSocket — each `ReqraftLspClient` is a per-document facade over the shared connection, multiplexed by document URI (the server keys language sessions per document), so N editors cost one socket. Auto-reconnect re-opens every document on the shared socket, 15s request timeout, request/response correlation by `id`, pending requests rejected on close. A `connect()` never outlives its socket: once the socket exhausts `maxReconnectTries`, a handshake still waiting rejects, and the next `connect()` — from that client or any other — dials again, so an editor opened after an outage connects once the server is back, without a page reload. Document URIs should be opaque and client-generated — per the Qonsole LSP contract they must not contain session tokens, usernames, sandbox identifiers, or other secrets that end up in server logs.
 

package/design/TRACKING.md

@@ -49,7 +49,7 @@ The module has three layers, and each only imports the ones above it:
 | browser | `src/tracking/browser/` | the only code that touches `window` / `document`: transport (`sendBeacon` → `fetch` keepalive), storage, listeners, `IntersectionObserver` on sections, delegated clicks |
 | react | `src/tracking/react/` | `<TrackingProvider>`, `useTracker`, `useConsent`, `useExperiment`, `<Experiment>` |
 
-Plus `markup.ts` (`trackClick`, `trackSection`) and `testing.ts` (`createMemoryTracker`).
+Plus `markup.ts` (`trackClick`, `trackSection`) and `testing.ts` (`createMemoryTracker`). The A/B test UI (the card and the overlay, on Reqore) is a fourth layer, `src/tracking/ui/`, with its own entry (§8); the engine never imports it.
 
 ## 3. Configure one tracker per app
 
@@ -203,8 +203,88 @@ Options: `config` (any config field; `property` defaults to `test`), `consent`,
 `start` (the clock), `seed` (localStorage before the tracker starts). In a story, pass
 `m.tracker` to `<TrackingProvider>` without `attach`; seed the experiments cache
 (`KEYS.experimentsCache`) so the first render already has the definitions — see
-`src/tracking/react/Experiment.stories.tsx`.
+`src/tracking/ui/ExperimentsOverlay.stories.tsx`.
 
 Unit tests: `__tests__/tracking/` (hashing vectors, assignment, consent gating, batching,
 sections, page views, sign-up links, concluded winners, the in-app switch, product config,
 the React bindings, and the layer rules).
+
+## 8. The A/B test UI: embed the overlay
+
+The same A/B test controls every product shows, built on Reqore, in their own entry so the engine
+stays light:
+
+```ts
+import { ExperimentsOverlay, ExperimentCard, useExperimentsAdmin } from '@qoretechnologies/reqraft/dist/tracking/ui';
+```
+
+| Export | What |
+|---|---|
+| `<ExperimentsOverlay>` | Finds every `<Experiment>` on the page (its `data-experiment` marker) and draws a dashed outline and an "A/B test · <name>" handle at its corner. Hover, keyboard focus or a click opens the test's card, anchored to the element: it scrolls and resizes with it and flips above or below the handle to stay in view. ✕, Esc and a click outside close it. An ended test shows "Winner live · code clean-up pending" instead. |
+| `<ExperimentCard>` | One test: name, status tag, a "?" help and ✕; the verdict; one row per version, best first (conversion on the primary metric, then visitors; re-sorted only when new data arrives), the best one tagged "Leading", or "Winner" for a likely winner or an ended test's winner (a success-coloured glow and wash on its row, stronger for a winner; static, nothing animates), the original tagged "Original". Tags use Reqore's `appearance="soft"` (reqore 0.77.2+); a long title stays on one line with an ellipsis. A row shows visitors, conversion, chance to beat the original and a bar; the shown version has an info-coloured ring and wash (`aria-current`; the row itself takes no intent, so its actions stay neutral); the whole row shows that version (Enter / Space too). Row actions: a neutral, minimal "Show analytics" for that version (`versionDetailsUrl`), minimal Accept, and a bin icon (Remove) at the far end. Footer: the optional "Open in …" link (hidden while the test is not set up; just its icon in a card narrower than 400 px) and Start / Resume (solid), Pause, Stop. Past three and a half rows the list scrolls inside the card. Every action asks first (Reqore's confirm dialog) and notifies what happened. |
+| `useExperimentsAdmin(options)` | Optional: the list and the actions from the qorus-api routes. |
+| `createExperimentsAdminClient(options)` | The same without React. |
+| `placeCard`, `cardReducer`, `versionRows`, `verdictLine`, `versionsMaxHeight`, … | The plain logic behind them, for tests and custom UIs. |
+
+Both components are driven by props only: the data is the qorus-api editor / admin list (an array of
+`{ experiment, results }`: the admin experiment object with `status`, `variants`, `phase`,
+`phases`, `history`, `winner`, and the results object with `verdict_text` and the per-metric
+numbers), and every action is a callback that may return a promise (the button shows busy until it
+settles, and a rejection's message is shown). An action whose callback is not given does not
+appear. Neither makes a request of its own.
+
+```tsx
+import { ExperimentsOverlay, useExperimentsAdmin } from '@qoretechnologies/reqraft/dist/tracking/ui';
+
+const AbTestsLayer = ({ visible }: { visible: boolean }) => {
+  const admin = useExperimentsAdmin({
+    listUrl: '/qorus-cloud/editor/experiments?property=ide', // actions go to …/experiments/<key>/<action>
+    headers: { Authorization: `Bearer ${editorToken}` },      // or leave it to a proxy
+    enabled: visible,
+  });
+  return (
+    <ExperimentsOverlay
+      visible={visible}                     // the product's "hide editor elements"
+      tests={admin.tests}
+      loadError={admin.error}
+      onAccept={admin.accept}
+      onRemove={admin.remove}
+      onStart={admin.start}
+      onPause={admin.pause}
+      onStop={admin.stop}
+      detailsUrl={(key) => `${ADMIN_PORTAL}/analytics?dashboard=tracking&experiment=${key}`}
+      actorLabels={{ 'ide-editor': 'in the IDE' }}
+      topInset={() => document.querySelector('header')?.getBoundingClientRect().bottom ?? 0}
+    />
+  );
+};
+```
+
+- Mount it inside `<TrackingProvider>`: then clicking a version's row uses the tracker's in-app
+  switch (`tracker.experiments.setEditorOverride`, this browser only, never logged), and after
+  an action the page shows what visitors see now (the switch is cleared and the tracker reloads
+  the definitions). Pass `onShow` / `onSettled` to do something else.
+- `versionDetailsUrl={(key, variant) => \`${ADMIN_PORTAL}/analytics?dashboard=tracking&experiment=${key}&variant=${variant}\`}`
+  adds the per-version "Show analytics" action (the admin portal opens the test with that version
+  expanded); without it the action is hidden. `detailsUrl` stays for the whole test.
+- The "?" opens a dialog explaining the test for a marketer: every button, how visitors are split
+  and counted, reading the verdict and the chance to beat, the too-early rule (the test's
+  `min_sample`, 200 visitors per version and 7 days by default), a test that is not set up, and
+  where the full analytics are (`analyticsLabel`).
+- A test that is in the page's code (`<Experiment>`) but not registered in the analytics service
+  yet shows "Not set up" and asks to have it set up (`notSetUpText` changes the words); when the list
+  cannot be loaded (`loadError`) it shows "No connection" instead.
+- `exclude` (a selector) skips markers inside the product's own UI (e.g. its preview frames);
+  markers inside the overlay itself are always skipped.
+- The same overlay works inside a phone-preview iframe: mount it in the frame's page too. The
+  switch is shared through `localStorage`, so both follow it.
+- `useExperimentsAdmin` reloads the list every minute (`refreshMs`) and after every action; its
+  errors explain a 401 / 403 as a missing or wrong key. `actionUrl` and `createUrl` change the
+  routes; `fetch` replaces the transport.
+- The card on its own: `<ExperimentCard experimentKey="signup-cta" test={entry} shown="a" codeVariants={['a', 'b']} onShow={…} onAccept={…} … />`.
+
+Stories: `Tracking/Experiment Card` (draft, running with two and five versions, paused, concluded,
+no data yet, not set up, no connection, the confirm step on Remove, the help) and
+`Tracking/Experiments Overlay` (anchored, flipped above near the bottom, hidden), each in dark,
+light and phone. The visually empty ones (hidden, the phone flip) run as tests without a Qlip
+snapshot (`parameters.qlip.skip`).

package/dist/index.d.ts

@@ -30,4 +30,5 @@ export * from './components/ticketReferences';
 export * from './components/searchFilterBar';
 export * from './components/codeSize';
 export * from './tracking';
+export * from './tracking/ui';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,4BAA4B,EAC5B,eAAe,EACf,gCAAgC,GACjC,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC/F,YAAY,EACV,YAAY,EACZ,iBAAiB,GAClB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,4BAA4B,EAC5B,eAAe,EACf,gCAAgC,GACjC,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC/F,YAAY,EACV,YAAY,EACZ,iBAAiB,GAClB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AAItC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -62,6 +62,8 @@ __exportStar(require("./components/ticketReferences"), exports);
 __exportStar(require("./components/searchFilterBar"), exports);
 __exportStar(require("./components/codeSize"), exports);
 // First-party tracking, consent and A/B testing (design/TRACKING.md). Also importable
-// on its own, without the rest of Reqraft: `@qoretechnologies/reqraft/dist/tracking`.
+// on its own, without the rest of Reqraft: `@qoretechnologies/reqraft/dist/tracking`
+// (the engine, React only) and `@qoretechnologies/reqraft/dist/tracking/ui` (the A/B test UI).
 __exportStar(require("./tracking"), exports);
+__exportStar(require("./tracking/ui"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,uDAAqC;AACrC,qDAS+B;AAR7B,4GAAA,aAAa,OAAA;AACb,sHAAA,uBAAuB,OAAA;AACvB,yGAAA,UAAU,OAAA;AACV,+GAAA,gBAAgB,OAAA;AAChB,6GAAA,cAAc,OAAA;AACd,2HAAA,4BAA4B,OAAA;AAC5B,8GAAA,eAAe,OAAA;AACf,+HAAA,gCAAgC,OAAA;AAGlC,iDAAoD;AAA3C,0GAAA,aAAa,OAAA;AACtB,6DAA2C;AAC3C,+CAAqD;AAA5C,mGAAA,WAAW,OAAA;AAQpB,sDAAqD;AAA5C,oGAAA,QAAQ,OAAA;AAEjB,4DAAkE;AAAzD,+GAAA,iBAAiB,OAAA;AAE1B,oEAAkD;AAClD,+DAIqC;AAHnC,oHAAA,iBAAiB,OAAA;AACjB,kHAAA,eAAe,OAAA;AACf,qHAAA,kBAAkB,OAAA;AAEpB,gEAA+F;AAAtF,sHAAA,gBAAgB,OAA2B;AAKpD,uCAOuB;AANrB,oGAAA,WAAW,OAAA;AACX,8FAAA,KAAK,OAAA;AACL,iGAAA,QAAQ,OAAA;AACR,uGAAA,cAAc,OAAA;AACd,wGAAA,eAAe,OAAA;AACf,mGAAA,UAAU,OAAA;AAQZ,oDAAkC;AAClC,+CAAqD;AAA5C,6GAAA,gBAAgB,OAAA;AAiBzB,wDAAsC;AACtC,2DAAyC;AACzC,0DAAwC;AACxC,iEAA+C;AAC/C,6DAA2C;AAC3C,4DAA0C;AAC1C,gEAA8C;AAC9C,+DAA6C;AAC7C,wDAAsC;AACtC,sFAAsF;AACtF,sFAAsF;AACtF,6CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,uDAAqC;AACrC,qDAS+B;AAR7B,4GAAA,aAAa,OAAA;AACb,sHAAA,uBAAuB,OAAA;AACvB,yGAAA,UAAU,OAAA;AACV,+GAAA,gBAAgB,OAAA;AAChB,6GAAA,cAAc,OAAA;AACd,2HAAA,4BAA4B,OAAA;AAC5B,8GAAA,eAAe,OAAA;AACf,+HAAA,gCAAgC,OAAA;AAGlC,iDAAoD;AAA3C,0GAAA,aAAa,OAAA;AACtB,6DAA2C;AAC3C,+CAAqD;AAA5C,mGAAA,WAAW,OAAA;AAQpB,sDAAqD;AAA5C,oGAAA,QAAQ,OAAA;AAEjB,4DAAkE;AAAzD,+GAAA,iBAAiB,OAAA;AAE1B,oEAAkD;AAClD,+DAIqC;AAHnC,oHAAA,iBAAiB,OAAA;AACjB,kHAAA,eAAe,OAAA;AACf,qHAAA,kBAAkB,OAAA;AAEpB,gEAA+F;AAAtF,sHAAA,gBAAgB,OAA2B;AAKpD,uCAOuB;AANrB,oGAAA,WAAW,OAAA;AACX,8FAAA,KAAK,OAAA;AACL,iGAAA,QAAQ,OAAA;AACR,uGAAA,cAAc,OAAA;AACd,wGAAA,eAAe,OAAA;AACf,mGAAA,UAAU,OAAA;AAQZ,oDAAkC;AAClC,+CAAqD;AAA5C,6GAAA,gBAAgB,OAAA;AAiBzB,wDAAsC;AACtC,2DAAyC;AACzC,0DAAwC;AACxC,iEAA+C;AAC/C,6DAA2C;AAC3C,4DAA0C;AAC1C,gEAA8C;AAC9C,+DAA6C;AAC7C,wDAAsC;AACtC,sFAAsF;AACtF,qFAAqF;AACrF,+FAA+F;AAC/F,6CAA2B;AAC3B,gDAA8B"}

package/dist/tracking/ui/ExperimentCard.d.ts

@@ -0,0 +1,55 @@
+import type { IExperimentEntry, TExperimentActionResult } from './types';
+type TMaybeAsync<T = unknown> = T | Promise<T>;
+export interface IExperimentCardProps {
+    /** The experiment key (`data-experiment` of `<Experiment>`). */
+    experimentKey: string;
+    /** The server's experiment and its results; absent while the test is not on the server. */
+    test?: IExperimentEntry | null;
+    /** The card's title. Default: the experiment's name, else its key. */
+    name?: string;
+    /** The version this page shows now: its row takes the info colour (and `aria-current`). */
+    shown?: string;
+    /** The versions the page's code renders (`data-variants`); a server version outside it cannot be shown. */
+    codeVariants?: string[];
+    /** The room the card has (px): the versions scroll inside when it is short. */
+    maxHeight?: number;
+    /** Why the list could not be loaded (the analytics service cannot be reached). */
+    loadError?: string | null;
+    /** An "Open in …" link at the start of the footer (a new tab). */
+    detailsUrl?: string | null;
+    /** The link's label. Default `Open in admin portal`. */
+    detailsLabel?: string;
+    /** One version's analytics (a new tab): a "Show analytics" action on each row; none without it. */
+    versionDetailsUrl?: (variant: string) => string | null | undefined;
+    /** Where the full analytics live, in the help's words. Default `the admin portal`. */
+    analyticsLabel?: string;
+    /** Best first (conversion on the primary metric, then visitors). Default true. */
+    sort?: boolean;
+    /** The words for a test that is in the page's code but not set up in the analytics service yet. */
+    notSetUpText?: string;
+    /** Who removed a version, in words, by the history's `actor` (`{ 'landing-editor': 'in the editor' }`). */
+    actorLabels?: Record<string, string>;
+    /** Asks before Accept, Remove, Start, Pause and Stop (Reqore's confirm dialog). Default true. */
+    confirm?: boolean;
+    /** A notification after each action (what happened, or the server's error). Default true. */
+    notify?: boolean;
+    /** A click (or Enter / Space) on a version's row: show that version on this page. Rows are not clickable without it. */
+    onShow?: (variant: string) => void;
+    /** Each action appears only when its callback is given; a returned promise shows the button busy until it settles. */
+    onAccept?: (variant: string) => TMaybeAsync<TExperimentActionResult | unknown>;
+    onRemove?: (variant: string) => TMaybeAsync<TExperimentActionResult | unknown>;
+    onStart?: () => TMaybeAsync;
+    onPause?: () => TMaybeAsync;
+    onStop?: () => TMaybeAsync;
+    /** The ✕ in the header. */
+    onClose?: () => void;
+}
+/**
+ * One A/B test: its name and status, the verdict in plain words, one row per version (visitors,
+ * conversion, chance to beat the original, a bar; click a row to show that version; Accept, and
+ * Remove at the far end), and the test's own controls (Start / Resume, Pause, Stop) with an
+ * optional link to its details. Driven only by props: no requests of its own.
+ */
+export declare const ExperimentCard: ({ experimentKey, test, name, shown, codeVariants, maxHeight, loadError, detailsUrl, detailsLabel, versionDetailsUrl, analyticsLabel, sort, notSetUpText, actorLabels, confirm, notify, onShow, onAccept, onRemove, onStart, onPause, onStop, onClose, }: IExperimentCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExperimentCard.d.ts.map

package/dist/tracking/ui/ExperimentCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperimentCard.d.ts","sourceRoot":"","sources":["../../../src/tracking/ui/ExperimentCard.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,gBAAgB,EAAqB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAE5F,KAAK,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAE/C,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kFAAkF;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mGAAmG;IACnG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2GAA2G;IAC3G,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iGAAiG;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wHAAwH;IACxH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sHAAsH;IACtH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,WAAW,CAAC,uBAAuB,GAAG,OAAO,CAAC,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,WAAW,CAAC,uBAAuB,GAAG,OAAO,CAAC,CAAC;IAC/E,OAAO,CAAC,EAAE,MAAM,WAAW,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,WAAW,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,WAAW,CAAC;IAC3B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAoGD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,4PAwBxB,oBAAoB,4CAubtB,CAAC"}

package/dist/tracking/ui/ExperimentCard.js

@@ -0,0 +1,396 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExperimentCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var sizes_1 = require("@qoretechnologies/reqore/dist/constants/sizes");
+var polished_1 = require("polished");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var anchor_1 = require("./anchor");
+var card_1 = require("./card");
+// Soft tags: an outlined pill over a wash of its colour, readable on dark and light themes.
+var soft = function (intent) { return ({ intent: intent, appearance: 'soft' }); };
+var ROW_GAP = 6;
+/** Below this width (the versions list, px) the footer's link drops its words for its icon. */
+var NARROW_CARD = 400;
+/** Room around the rows for the leader's glow, taken from the card's own padding. */
+var GLOW_ROOM = 6;
+/**
+ * How a version's row stands out, drawn around and over the row without taking the pointer:
+ *
+ * - the version this page shows: an inset ring and a flat wash in the info colour (the row itself
+ *   keeps no intent, so its actions stay neutral);
+ * - the leading version: a ring and a soft glow in the success colour, and a wash from the left;
+ * - the winner (a likely-winner verdict or an ended test's winner): the same, clearly stronger.
+ *
+ * Static (nothing animates, so there is nothing for reduced motion to stop), and in the theme's
+ * own intent colours, so it reads on dark and light.
+ */
+var StyledVersion = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    /* The shown version's ring sits over the row (an inset shadow on the wrapper would be\n       painted under the row's own background). */\n    box-shadow: ", ";\n    background: ", ";\n  }\n"], ["\n  position: relative;\n  border-radius: ", "px;\n  box-shadow: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    /* The shown version's ring sits over the row (an inset shadow on the wrapper would be\n       painted under the row's own background). */\n    box-shadow: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
+    var $radius = _a.$radius;
+    return $radius;
+}, function (_a) {
+    var $highlight = _a.$highlight, $success = _a.$success;
+    return [
+        $highlight === 'winner' ?
+            "0 0 0 1px ".concat((0, polished_1.rgba)($success, 0.95), ", 0 0 18px ").concat((0, polished_1.rgba)($success, 0.4))
+            : null,
+        $highlight === 'leading' ?
+            "0 0 0 1px ".concat((0, polished_1.rgba)($success, 0.5), ", 0 0 10px ").concat((0, polished_1.rgba)($success, 0.18))
+            : null,
+    ]
+        .filter(Boolean)
+        .join(', ') || 'none';
+}, function (_a) {
+    var $shown = _a.$shown, $info = _a.$info;
+    return ($shown ? "inset 0 0 0 1px ".concat((0, polished_1.rgba)($info, 0.85)) : 'none');
+}, function (_a) {
+    var $highlight = _a.$highlight, $shown = _a.$shown, $success = _a.$success, $info = _a.$info;
+    return [
+        $highlight ?
+            "linear-gradient(100deg, ".concat((0, polished_1.rgba)($success, $highlight === 'winner' ? 0.26 : 0.13), " 0%, ").concat((0, polished_1.rgba)($success, $highlight === 'winner' ? 0.08 : 0.04), " 45%, ").concat((0, polished_1.rgba)($success, 0), " 75%)")
+            : null,
+        $shown ? "linear-gradient(".concat((0, polished_1.rgba)($info, 0.1), ", ").concat((0, polished_1.rgba)($info, 0.1), ")") : null,
+    ]
+        .filter(Boolean)
+        .join(', ') || 'none';
+});
+// Layout only: the versions scroll inside the card past three and a half rows.
+var StyledVersions = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  max-height: ", ";\n  overflow-y: ", ";\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  min-width: 0;\n  /* Room for the leader's glow, taken back from the card's padding so the rows keep their width. */\n  margin: 0 -", "px;\n  padding: ", "px;\n\n  /* The rows take the card's width, never their content's, padding included: a host page\n     without a global border-box reset would otherwise push each row past the card's edge. */\n  > * {\n    min-width: 0;\n  }\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  max-height: ", ";\n  overflow-y: ", ";\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n  min-width: 0;\n  /* Room for the leader's glow, taken back from the card's padding so the rows keep their width. */\n  margin: 0 -", "px;\n  padding: ", "px;\n\n  /* The rows take the card's width, never their content's, padding included: a host page\n     without a global border-box reset would otherwise push each row past the card's edge. */\n  > * {\n    min-width: 0;\n  }\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n"])), ROW_GAP, function (_a) {
+    var $max = _a.$max;
+    return ($max ? "".concat($max, "px") : 'none');
+}, function (_a) {
+    var $max = _a.$max;
+    return ($max ? 'auto' : 'visible');
+}, GLOW_ROOM, GLOW_ROOM);
+/** Header, verdict and footer take about this much of `maxHeight`; the versions get the rest. */
+var CHROME_HEIGHT = 230;
+/**
+ * One A/B test: its name and status, the verdict in plain words, one row per version (visitors,
+ * conversion, chance to beat the original, a bar; click a row to show that version; Accept, and
+ * Remove at the far end), and the test's own controls (Start / Resume, Pause, Stop) with an
+ * optional link to its details. Driven only by props: no requests of its own.
+ */
+var ExperimentCard = function (_a) {
+    var experimentKey = _a.experimentKey, test = _a.test, name = _a.name, shown = _a.shown, _b = _a.codeVariants, codeVariants = _b === void 0 ? [] : _b, maxHeight = _a.maxHeight, loadError = _a.loadError, detailsUrl = _a.detailsUrl, _c = _a.detailsLabel, detailsLabel = _c === void 0 ? 'Open in admin portal' : _c, versionDetailsUrl = _a.versionDetailsUrl, _d = _a.analyticsLabel, analyticsLabel = _d === void 0 ? 'the admin portal' : _d, _e = _a.sort, sort = _e === void 0 ? true : _e, notSetUpText = _a.notSetUpText, actorLabels = _a.actorLabels, _f = _a.confirm, confirm = _f === void 0 ? true : _f, _g = _a.notify, notify = _g === void 0 ? true : _g, onShow = _a.onShow, onAccept = _a.onAccept, onRemove = _a.onRemove, onStart = _a.onStart, onPause = _a.onPause, onStop = _a.onStop, onClose = _a.onClose;
+    var entry = test !== null && test !== void 0 ? test : undefined;
+    var confirmAction = (0, reqore_1.useReqoreProperty)('confirmAction');
+    var addNotification = (0, reqore_1.useReqoreProperty)('addNotification');
+    var theme = (0, reqore_1.useReqoreTheme)();
+    // The card's own width, not the window's: it lives in a narrow overlay on a wide page.
+    var _h = (0, react_1.useState)(false), narrow = _h[0], setNarrow = _h[1];
+    var versionsList = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var el = versionsList.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return undefined;
+        var ro = new ResizeObserver(function () { return setNarrow(el.offsetWidth < NARROW_CARD); });
+        ro.observe(el);
+        return function () { return ro.disconnect(); };
+    }, []);
+    var light = (function () {
+        try {
+            return (0, polished_1.getLuminance)(theme.main) > 0.5;
+        }
+        catch (_a) {
+            return false;
+        }
+    })();
+    var _j = (0, react_1.useState)(null), busy = _j[0], setBusy = _j[1];
+    var _k = (0, react_1.useState)(false), helpOpen = _k[0], setHelpOpen = _k[1];
+    var _l = (0, react_1.useState)(0), rowHeight = _l[0], setRowHeight = _l[1];
+    var firstRow = (0, react_1.useRef)(null);
+    var mounted = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () { return function () {
+        mounted.current = false;
+    }; }, []);
+    var unreachable = !entry && !!loadError;
+    var codeKey = codeVariants.join(',');
+    // The order is decided when the data arrives (a refresh), never while the user works in the card.
+    var order = (0, react_1.useMemo)(function () {
+        var all = (0, card_1.versionRows)(entry, codeVariants);
+        return (sort ? (0, card_1.sortVersionRows)(all) : all).map(function (r) { return r.key; });
+        // `codeVariants` is followed by its keys, not its identity.
+    }, [entry, codeKey, sort]);
+    var unsorted = (0, card_1.versionRows)(entry, codeVariants);
+    var rows = order
+        .map(function (key) { return unsorted.find(function (r) { return r.key === key; }); })
+        .filter(Boolean)
+        .concat(unsorted.filter(function (r) { return !order.includes(r.key); }));
+    var leader = (0, card_1.leadingVersion)(entry, rows);
+    var bars = (0, card_1.barValues)(rows);
+    var metric = (0, card_1.primaryMetric)(entry === null || entry === void 0 ? void 0 : entry.results);
+    var status = entry === null || entry === void 0 ? void 0 : entry.experiment.status;
+    var title = name || (entry === null || entry === void 0 ? void 0 : entry.experiment.name) || experimentKey;
+    var tag = (0, card_1.statusTag)(entry, unreachable);
+    var note = (0, card_1.phaseNote)(entry, actorLabels);
+    var busyOn = function (action, variant) {
+        if (variant === void 0) { variant = ''; }
+        return busy === "".concat(action, ":").concat(variant);
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        var _a, _b;
+        var h = (_b = (_a = firstRow.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        if (h && h !== rowHeight)
+            setRowHeight(h);
+    });
+    // A row's height changes with the card's width (a phone, a resized window): measure it again.
+    (0, react_1.useEffect)(function () {
+        var el = firstRow.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return undefined;
+        var ro = new ResizeObserver(function () { return setRowHeight(el.offsetHeight); });
+        ro.observe(el);
+        return function () { return ro.disconnect(); };
+    }, []);
+    // Minimal buttons tint their text from the intent, too pale on a light theme: a deeper shade there.
+    var quiet = function (intent) { return (__assign({ minimal: true }, (light && intent ?
+        {
+            effect: { color: "".concat(intent, ":darken:2"), weight: 'thick' },
+            iconColor: "".concat(intent, ":darken:2"),
+        }
+        : {}))); };
+    var act = function (action, variant) {
+        if (!entry)
+            return;
+        var callbacks = {
+            accept: onAccept,
+            remove: onRemove,
+            start: onStart,
+            pause: onPause,
+            stop: onStop,
+        };
+        var callback = callbacks[action];
+        if (!callback)
+            return;
+        var isVersion = action === 'accept' || action === 'remove';
+        var copy = isVersion ? (0, card_1.confirmCopy)(action, entry, variant) : (0, card_1.lifecycleCopy)(action, entry);
+        var titles = {
+            accept: ['Winner accepted', 'Could not accept'],
+            remove: ['Version removed', 'Could not remove'],
+            start: [status === 'paused' ? 'Test resumed' : 'Test started', 'Could not start'],
+            pause: ['Test paused', 'Could not pause'],
+            stop: ['Test stopped', 'Could not stop'],
+        };
+        var run = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var result, content, err_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setBusy("".concat(action, ":").concat(variant !== null && variant !== void 0 ? variant : ''));
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, callback(variant)];
+                    case 2:
+                        result = _b.sent();
+                        if (notify) {
+                            content = isVersion ?
+                                (0, card_1.actionOutcome)(action, result, variant)
+                                : "\u201C".concat(title, "\u201D is ").concat(action === 'start' ? 'running'
+                                    : action === 'pause' ? 'paused'
+                                        : 'stopped', ".");
+                            addNotification === null || addNotification === void 0 ? void 0 : addNotification({
+                                intent: 'success',
+                                title: titles[action][0],
+                                content: content,
+                                duration: 8000,
+                            });
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _b.sent();
+                        if (notify) {
+                            addNotification === null || addNotification === void 0 ? void 0 : addNotification({
+                                intent: 'danger',
+                                title: titles[action][1],
+                                content: (_a = err_1 === null || err_1 === void 0 ? void 0 : err_1.message) !== null && _a !== void 0 ? _a : String(err_1),
+                                duration: 10000,
+                            });
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        if (mounted.current)
+                            setBusy(null);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        if (confirm && confirmAction) {
+            confirmAction({
+                title: copy.title,
+                description: copy.description,
+                confirmLabel: copy.confirmLabel,
+                confirmButtonIntent: action === 'accept' || action === 'start' ? 'success'
+                    : action === 'pause' ? 'warning'
+                        : 'danger',
+                onConfirm: function () { return void run(); },
+            });
+        }
+        else {
+            void run();
+        }
+    };
+    var footer = [];
+    // A test the analytics service does not know has no analytics to open.
+    if (detailsUrl && entry) {
+        footer.push(__assign(__assign({ position: 'left', icon: 'ExternalLinkLine', 
+            // In a narrow card it is the icon alone (with its tooltip and name), so the footer fits one row.
+            label: narrow ? undefined : detailsLabel, 'aria-label': detailsLabel, responsive: false }, quiet()), { tooltip: 'This test’s details (a new tab)', onClick: function () { return window.open(detailsUrl, '_blank', 'noopener'); } }));
+    }
+    if (entry && status) {
+        // Every button in the card is minimal, except Start test / Resume: the one primary action.
+        if (onStart && (0, card_1.canStart)(status)) {
+            footer.push({
+                position: 'right',
+                icon: 'PlayLine',
+                intent: 'success',
+                label: status === 'paused' ? 'Resume' : 'Start test',
+                responsive: false,
+                disabled: !!busy,
+                loading: busyOn('start'),
+                tooltip: status === 'paused' ?
+                    'Split visitors between the versions again'
+                    : 'Start splitting visitors between the versions and counting',
+                onClick: function () { return act('start'); },
+            });
+        }
+        if (onPause && (0, card_1.canPause)(status)) {
+            footer.push(__assign(__assign({ position: 'right', icon: 'PauseLine', intent: 'warning', label: 'Pause', responsive: false }, quiet('warning')), { disabled: !!busy, loading: busyOn('pause'), tooltip: 'Everybody sees the original until you resume', onClick: function () { return act('pause'); } }));
+        }
+        if (onStop && (0, card_1.canStop)(status)) {
+            footer.push(__assign(__assign({ position: 'right', icon: 'StopLine', intent: 'danger', label: 'Stop', responsive: false }, quiet('danger')), { disabled: !!busy, loading: busyOn('stop'), tooltip: 'End the test without a winner', onClick: function () { return act('stop'); } }));
+        }
+    }
+    var accept = status ? (0, card_1.canAccept)(status) : false;
+    var remove = status ? (0, card_1.canRemove)(status, rows.length) : false;
+    var listMax = (0, card_1.versionsMaxHeight)({
+        rows: rows.length,
+        rowHeight: rowHeight,
+        gap: ROW_GAP,
+        available: maxHeight ? Math.max(rowHeight, maxHeight - CHROME_HEIGHT) : undefined,
+    });
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqorePanel, { className: 'reqraft-experiment-card', label: title, showLabelTooltip: true, labelMaxLines: 1, icon: 'FlaskLine', badge: __assign({ label: tag.label, icon: tag.icon }, soft(tag.intent)), size: 'small', rounded: true, flat: false, padded: true, collapsible: false, onClose: onClose, closeTooltip: 'Close (Esc)', closeButtonProps: { 'aria-label': 'Close the test card', minimal: true }, actions: [
+            {
+                icon: 'QuestionLine',
+                minimal: true,
+                flat: true,
+                tooltip: 'How A/B tests work',
+                'aria-label': 'How A/B tests work',
+                onClick: function () { return setHelpOpen(true); },
+            },
+        ], bottomActions: footer.length ? footer : undefined, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreCallout, { size: 'small', flat: true, icon: 'LineChartLine', intent: unreachable ? 'warning' : (0, card_1.verdictIntent)(entry), effect: { weight: 500 }, children: (0, card_1.verdictLine)(entry, { unreachable: unreachable, notSetUpText: notSetUpText }) }), note && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 6 }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.7 }, children: note })] })), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 10 }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.75, weight: 500 }, children: "".concat(rows.length, " versions").concat((metric === null || metric === void 0 ? void 0 : metric.name) ? " \u00B7 goal: \u201C".concat(metric.name, "\u201D") : '') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 6 }), (0, jsx_runtime_1.jsx)(StyledVersions, { ref: versionsList, "$max": listMax, role: 'list', "aria-label": 'Versions', className: 'reqraft-experiment-versions', children: rows.map(function (r, i) {
+                    var _a, _b;
+                    var isShown = r.key === shown;
+                    var highlight = (leader === null || leader === void 0 ? void 0 : leader.key) === r.key ? leader.kind : undefined;
+                    var badges = [];
+                    if ((leader === null || leader === void 0 ? void 0 : leader.key) === r.key) {
+                        badges.push(leader.kind === 'winner' ? __assign({ label: 'Winner', icon: 'TrophyLine' }, soft('success')) : __assign({ label: 'Leading', icon: 'ArrowUpLine' }, soft('success')));
+                    }
+                    if (r.control)
+                        badges.push(__assign({ label: 'Original', icon: 'HomeLine' }, soft('muted')));
+                    if (!r.inCode)
+                        badges.push(__assign({ label: 'Not in the code', icon: 'AlertLine' }, soft('warning')));
+                    // The whole row shows its version; Accept and Remove stop the click (Reqore's row actions do).
+                    var showable = !!onShow && r.inCode && !isShown;
+                    var actions = [];
+                    var analytics = entry ? versionDetailsUrl === null || versionDetailsUrl === void 0 ? void 0 : versionDetailsUrl(r.key) : null;
+                    if (analytics) {
+                        actions.push(__assign(__assign({ size: 'small', icon: 'BarChartBoxLine', label: 'Show analytics' }, quiet()), { tooltip: "Show analytics for \u201C".concat(r.name, "\u201D (a new tab)"), 'aria-label': "Show analytics for ".concat(r.name), onClick: function () { return window.open(analytics, '_blank', 'noopener'); } }));
+                    }
+                    if (entry && onAccept) {
+                        actions.push(__assign(__assign({ size: 'small', icon: 'TrophyLine', intent: 'success', label: 'Accept' }, quiet('success')), { disabled: !accept || !!busy, loading: busyOn('accept', r.key), tooltip: accept ?
+                                "End the test: every visitor sees \u201C".concat(r.name, "\u201D")
+                                : 'Only a started test can be accepted', onClick: function () { return act('accept', r.key); } }));
+                    }
+                    if (entry && onRemove) {
+                        actions.push(__assign(__assign({ size: 'small', icon: 'DeleteBinLine', intent: 'danger' }, quiet('danger')), { 'aria-label': "Remove version ".concat(r.name), 
+                            // At the far end of the row, away from Accept, so it is not clicked by accident.
+                            style: { marginLeft: 'auto' }, disabled: !remove || !!busy, loading: busyOn('remove', r.key), tooltip: remove ?
+                                "Remove version: drop \u201C".concat(r.name, "\u201D from the test")
+                                : 'This version cannot be removed now', onClick: function () { return act('remove', r.key); } }));
+                    }
+                    return ((0, jsx_runtime_1.jsx)(StyledVersion, { role: 'listitem', ref: i === 0 ? firstRow : undefined, "data-version": r.key, "data-highlight": highlight, "aria-current": isShown || undefined, "$highlight": highlight, "$shown": isShown, "$success": (_a = theme.intents) === null || _a === void 0 ? void 0 : _a.success, "$info": (_b = theme.intents) === null || _b === void 0 ? void 0 : _b.info, "$radius": sizes_1.RADIUS_FROM_SIZE.small, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreEntityRow, __assign({ size: 'small', rounded: true, flat: true, label: r.name, badge: badges, description: (0, card_1.numbersLine)(r, metric === null || metric === void 0 ? void 0 : metric.name, status), metadata: r.visitors ?
+                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreProgress, { value: bars[i], size: 'tiny', rounded: true, flat: true, style: { width: '100%', minWidth: 160 }, intent: isShown ? 'info'
+                                        : r.control ?
+                                            'muted'
+                                            : 'success', "aria-label": "".concat(r.name, ": conversion compared with the best version") })
+                                : undefined, iconHasBackground: false, showIcon: false, actions: actions.length ? actions : undefined }, (showable ?
+                            {
+                                role: 'button',
+                                tabIndex: 0,
+                                'aria-label': "Show \u201C".concat(r.name, "\u201D on this page"),
+                                tooltip: "Show \u201C".concat(r.name, "\u201D on this page (only here, never counted)"),
+                                onClick: function () { return onShow(r.key); },
+                                onKeyDown: function (e) {
+                                    if (!(0, anchor_1.activatesRow)(e.key, e.target === e.currentTarget))
+                                        return;
+                                    e.preventDefault();
+                                    onShow(r.key);
+                                },
+                            }
+                            : {}))) }, r.key));
+                }) }), !entry && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 8 }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.7 }, children: unreachable ?
+                            'Start, Accept and Remove come back once the analytics service answers.'
+                            : 'Start, Accept and Remove appear once the test is set up.' })] })), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreModal, { isOpen: helpOpen, onClose: function () { return setHelpOpen(false); }, label: 'How A/B tests work', icon: 'QuestionLine', width: '640px', blur: 2, className: 'reqraft-experiment-help', children: (0, card_1.helpSections)(entry, analyticsLabel).map(function (section) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreH4, { children: section.title }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 4 }), section.paragraphs.map(function (text) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { weight: 500 }, children: text }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 6 })] }, text)); }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 14 })] }, section.title)); }) })] }));
+};
+exports.ExperimentCard = ExperimentCard;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ExperimentCard.js.map