@elaraai/e3-ui-components 1.0.18 → 1.0.20

package/dist/index.js

@@ -27,8 +27,9 @@ import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useId, useMemo, useContext, createContext, useRef, useEffect, useState, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
 import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Badge, Button, Tabs, useTabs } from "@chakra-ui/react";
-import { implementUIComponent, SliceEditPopover, SlicePredicateBuilder, formatPredicate, getSomeorUndefined, StateRuntime, buildSliceHandle, DEFAULT_SLICE_STATE, registerPlatformImplementation as registerPlatformImplementation$1, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, OverlayImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
+import { implementUIComponent, getSomeorUndefined, SliceEditPopover, SlicePredicateBuilder, formatPredicate, StateRuntime, buildSliceHandle, DEFAULT_SLICE_STATE, registerPlatformImplementation as registerPlatformImplementation$1, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, OverlayImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
+import "@elaraai/e3-ui";
 import { sliceMatches } from "@elaraai/east-ui/internal";
 import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -8326,7 +8327,7 @@ function parseManualDraft(leafType, draft) {
   }
 }
 const diffValueEqual = equalFor(Diff.Component.schema);
-function getOpt$2(opt) {
+function getOpt$1(opt) {
   return opt.type === "some" ? opt.value : void 0;
 }
 const DENSITY_METRICS = {
@@ -8970,9 +8971,9 @@ const EastChakraDiff = memo(function EastChakraDiff2({ value }) {
     () => value.bindings ?? [],
     [value.bindings]
   );
-  const interactive = !(getOpt$2(value.readonly) ?? false);
-  const onCommittedFn = getOpt$2(value.onCommitted);
-  const onDiscardedFn = getOpt$2(value.onDiscarded);
+  const interactive = !(getOpt$1(value.readonly) ?? false);
+  const onCommittedFn = getOpt$1(value.onCommitted);
+  const onDiscardedFn = getOpt$1(value.onDiscarded);
   const density = resolveDensity(value.density);
   const metrics = DENSITY_METRICS[density];
   const eyebrow = useSlotRecipe({ key: "eyebrowRow" });
@@ -56718,7 +56719,7 @@ function freshNodeId() {
 }
 const NODE_TYPES = { ontology: OntologyNode };
 const EDGE_TYPES = { ontology: OntologyEdge };
-function getOpt$1(opt) {
+function getOpt(opt) {
   return opt.type === "some" ? opt.value : void 0;
 }
 function nextLinkId(existing) {
@@ -57033,10 +57034,10 @@ const EastChakraOntology = memo(function EastChakraOntology2({ value }) {
   var _a2;
   const binding = value.binding;
   const { ontology, pending, mutate } = useBindingOntology(binding);
-  const readonly = getOpt$1(value.readonly) ?? false;
-  const hideMiniMap = getOpt$1(value.hideMiniMap) ?? false;
-  const hideSearch = getOpt$1(value.hideSearch) ?? false;
-  const defaultView2 = ((_a2 = getOpt$1(value.defaultView)) == null ? void 0 : _a2.type) ?? "graph";
+  const readonly = getOpt(value.readonly) ?? false;
+  const hideMiniMap = getOpt(value.hideMiniMap) ?? false;
+  const hideSearch = getOpt(value.hideSearch) ?? false;
+  const defaultView2 = ((_a2 = getOpt(value.defaultView)) == null ? void 0 : _a2.type) ?? "graph";
   const [view, setView] = useState(defaultView2);
   const [tableSelectedId, setTableSelectedId] = useState(null);
   const handlers = useMemo(() => {
@@ -57249,12 +57250,13 @@ function useBindingValue(binding) {
     if (!types) return null;
     return defaultBindRuntime.buildBindHandle(types.sourceType, sourcePath, patchPath, mode);
   }, [binding, workspace, sourcePath, patchPath, mode]);
-  const { value, pending } = useMemo(() => {
-    if (!handle || !handle.has()) return { value: null, pending: false };
+  const { value, pending, error: error3 } = useMemo(() => {
+    if (!handle || !handle.has()) return { value: null, pending: false, error: void 0 };
     try {
-      return { value: handle.read(), pending: handle.pending() };
-    } catch {
-      return { value: null, pending: false };
+      return { value: handle.read(), pending: handle.pending(), error: void 0 };
+    } catch (e3) {
+      console.error(`[Experiment] failed to read binding "${String(sourcePath)}":`, e3);
+      return { value: null, pending: false, error: e3 };
     }
   }, [handle, version2]);
   const mutate = useCallback((next2) => {
@@ -57267,7 +57269,7 @@ function useBindingValue(binding) {
   const discard = useCallback(() => {
     handle == null ? void 0 : handle.discard();
   }, [handle]);
-  return { value, mode, pending, mutate, commit, discard };
+  return { value, mode, pending, error: error3, mutate, commit, discard };
 }
 const IDLE = { call: () => {
 }, result: null, status: "idle", pending: false, error: null };
@@ -60112,7 +60114,6 @@ function OverlapHistogram({ treated, control, domain = [0, 1], supportLabel, pos
 }
 const arr = (v3) => v3 ? Array.from(v3, Number) : [];
 const arrI = (v3) => v3 ? Array.from(v3, Number) : [];
-const getOpt = (o2) => o2 && o2.type === "some" ? o2.value : void 0;
 const fmt$1 = (x2) => {
   const r2 = Number.isInteger(x2) ? String(x2) : x2.toFixed(1);
   return r2 === "-0.0" ? "0.0" : r2;
@@ -60130,7 +60131,7 @@ function band(absStd) {
 const colMeta = (meta3, col) => meta3 == null ? void 0 : meta3.get(col);
 const unitOf = (meta3, col) => {
   var _a2;
-  return getOpt((_a2 = colMeta(meta3, col)) == null ? void 0 : _a2.unit) ?? "";
+  return getSomeorUndefined((_a2 = colMeta(meta3, col)) == null ? void 0 : _a2.unit) ?? "";
 };
 const kindOf = (cols, name) => {
   var _a2;
@@ -60186,9 +60187,9 @@ function deriveSpec(config2, cols, result, meta3, dataLen) {
   const inPlay = /* @__PURE__ */ new Set([config2.treatment, config2.outcome, ...config2.common_causes]);
   const suggest = cols.find((c2) => !inPlay.has(c2.name));
   const suggestion = suggest ? `add ${suggest.name}` : "";
-  const methodV = getOpt(config2.method);
+  const methodV = getSomeorUndefined(config2.method);
   const method = (methodV == null ? void 0 : methodV.type) === "propensity_score_weighting" ? "reweighting" : "regression";
-  const targetV = getOpt(config2.estimand);
+  const targetV = getSomeorUndefined(config2.estimand);
   const target = targetV && (targetV.type === "att" || targetV.type === "atc") ? "treated" : "all";
   return {
     treatment: config2.treatment,
@@ -60208,9 +60209,9 @@ function balanceDisplay(b2, categorical) {
   return isProp ? `${Math.round(b2.treated_mean * 100)}% vs ${Math.round(b2.control_mean * 100)}%` : `${b2.treated_mean.toFixed(1)} vs ${b2.control_mean.toFixed(1)}`;
 }
 function deriveAnswer(config2, result, adj, meta3) {
-  const ci = getOpt(adj.ci);
-  const nci = getOpt(result.naive_ci);
-  const categorical = new Set(getOpt(config2.categorical) ?? []);
+  const ci = getSomeorUndefined(adj.ci);
+  const nci = getSomeorUndefined(result.naive_ci);
+  const categorical = new Set(getSomeorUndefined(config2.categorical) ?? []);
   const balance = [...result.balance].sort((a2, b2) => Math.abs(b2.std_diff) - Math.abs(a2.std_diff)).map((b2) => ({
     col: b2.column,
     treated: b2.treated_mean,
@@ -60308,43 +60309,43 @@ function zeroCrossing(xs, ys) {
 function deriveRefute(r2, adj) {
   const checks = [];
   const est = (adj == null ? void 0 : adj.effect) ?? 0;
-  const placeboEffect = getOpt(r2.placebo_effect);
-  const placeboPasses = getOpt(r2.placebo_passes);
+  const placeboEffect = getSomeorUndefined(r2.placebo_effect);
+  const placeboPasses = getSomeorUndefined(r2.placebo_passes);
   if (placeboEffect !== void 0 || placeboPasses !== void 0) {
     checks.push({
       name: "Shuffle test",
       desc: "Shuffle which rows were treated; a real effect should collapse to zero.",
       value: placeboEffect !== void 0 ? `→ ${signed(placeboEffect)}` : placeboPasses ? "passed" : "failed",
       passed: placeboPasses ?? (placeboEffect !== void 0 && Math.abs(placeboEffect) < Math.max(0.5, Math.abs(est) * 0.15)),
-      tip: { type: "some", value: "Randomly re-label which rows were treated. A genuine effect should vanish." },
+      tip: some("Randomly re-label which rows were treated. A genuine effect should vanish."),
       help: "check_shuffle"
     });
   }
-  const ds = getOpt(r2.data_subset_effect);
+  const ds = getSomeorUndefined(r2.data_subset_effect);
   if (ds !== void 0) {
-    const dstd = getOpt(r2.data_subset_std) ?? 0;
+    const dstd = getSomeorUndefined(r2.data_subset_std) ?? 0;
     checks.push({
       name: "Drop-some test",
       desc: "Re-estimate on random subsamples; a trustworthy effect stays put.",
       value: `${fmt$1(ds)} ± ${fmt$1(dstd)}`,
       passed: Math.abs(ds - est) < Math.max(0.5, Math.abs(est) * 0.2),
-      tip: { type: "none", value: null },
+      tip: none$1,
       help: "check_dropsome"
     });
   }
-  const rcc = getOpt(r2.random_cc_within_ci);
+  const rcc = getSomeorUndefined(r2.random_cc_within_ci);
   if (rcc !== void 0) {
     checks.push({
       name: "Decoy cause",
       desc: "Add an irrelevant random factor; the answer should not move.",
       value: rcc ? "within range" : "moved",
       passed: rcc,
-      tip: { type: "none", value: null },
+      tip: none$1,
       help: "check_decoy"
     });
   }
-  const sens = getOpt(r2.sensitivity);
-  const evalue = getOpt(r2.robustness_value);
+  const sens = getSomeorUndefined(r2.sensitivity);
+  const evalue = getSomeorUndefined(r2.robustness_value);
   if (sens !== void 0 || evalue !== void 0) {
     const strengths = sens ? arr(sens.strengths) : [];
     const effects = sens ? arr(sens.effects) : [];
@@ -60355,7 +60356,7 @@ function deriveRefute(r2, adj) {
       desc: "How strong an unrecorded common cause would need to be to overturn the result.",
       value,
       passed: tip === null,
-      tip: { type: "some", value: "Something unrecorded could drive both the treatment choice and the outcome." },
+      tip: some("Something unrecorded could drive both the treatment choice and the outcome."),
       help: "check_hidden"
     });
   }
@@ -60363,7 +60364,7 @@ function deriveRefute(r2, adj) {
   if (sens !== void 0) {
     const mid = arr(sens.effects);
     if (mid.length) {
-      const ci = getOpt(adj == null ? void 0 : adj.ci);
+      const ci = getSomeorUndefined(adj == null ? void 0 : adj.ci);
       const half = ci ? Math.abs(ci.upper - ci.lower) / 2 : 0;
       const lo2 = mid.map((m2) => m2 - half);
       const hi = mid.map((m2) => m2 + half);
@@ -60376,8 +60377,8 @@ function deriveRefute(r2, adj) {
 function deriveDose(dose, config2, meta3) {
   const grid = arr(dose.grid);
   const mid = arr(dose.effect);
-  const lo2 = getOpt(dose.lower) ? arr(getOpt(dose.lower)) : mid.slice();
-  const hi = getOpt(dose.upper) ? arr(getOpt(dose.upper)) : mid.slice();
+  const lo2 = getSomeorUndefined(dose.lower) ? arr(getSomeorUndefined(dose.lower)) : mid.slice();
+  const hi = getSomeorUndefined(dose.upper) ? arr(getSomeorUndefined(dose.upper)) : mid.slice();
   const sizes = arrI(dose.size);
   const featureUnit = unitOf(meta3, dose.feature);
   const here = sizes.length ? sizes.indexOf(Math.max(...sizes)) : 0;
@@ -60437,7 +60438,7 @@ const VERDICT_WORD = {
   not_estimable: "n/a"
 };
 function deriveJournalRow(row, now2) {
-  const adj = getOpt(row.adjusted);
+  const adj = getSomeorUndefined(row.adjusted);
   return {
     treatment: row.config.treatment,
     outcome: row.config.outcome,
@@ -60446,13 +60447,16 @@ function deriveJournalRow(row, now2) {
     verdict: VERDICT_WORD[row.verdict.type],
     verdictTone: VERDICT_TONE[row.verdict.type],
     who: row.committed_by,
-    when: relTime(row.committed_at, now2)
+    when: relTime(row.committed_at, now2),
+    // The originating preset id (resolved to a label by the surface); `none` for a
+    // free-form / pre-presets row.
+    preset: row.preset
   };
 }
 function deriveView(config2, ranConfig, cols, result, journal, meta3, dataLen, now2) {
-  const adj = result ? getOpt(result.adjusted) : void 0;
-  const refutation = result ? getOpt(result.refutation) : void 0;
-  const doseR = result ? getOpt(result.dose_response) : void 0;
+  const adj = result ? getSomeorUndefined(result.adjusted) : void 0;
+  const refutation = result ? getSomeorUndefined(result.refutation) : void 0;
+  const doseR = result ? getSomeorUndefined(result.dose_response) : void 0;
   return {
     // The set-up rail reflects the LIVE config (the editor); the result deck
     // reflects RANCONFIG — the config that produced `result` — so the result
@@ -60499,7 +60503,7 @@ function deriveDesign(d2, result, ranConfig, meta3) {
     const b2 = balByCol.get(col);
     const absStd = b2 ? Math.abs(b2.std_diff) : 0;
     const { tone } = band(absStd);
-    return { col, frac: clamp01(absStd), tone, display: getOpt((_a2 = colMeta(meta3, col)) == null ? void 0 : _a2.label) ?? col };
+    return { col, frac: clamp01(absStd), tone, display: getSomeorUndefined((_a2 = colMeta(meta3, col)) == null ? void 0 : _a2.label) ?? col };
   });
   const ns = arrI(d2.power_curve.n);
   const powers = arr(d2.power_curve.power);
@@ -60518,7 +60522,7 @@ function deriveDesign(d2, result, ranConfig, meta3) {
   const xTicks = len ? [String(ns[0]), String(ns[Math.floor((len - 1) / 2)]), String(ns[len - 1])] : [];
   const marks = [];
   if (len) marks.push({ at: nearest(primary.nTotal), label: `target ${(d2.target_power * 100).toFixed(0)}%`, tone: "pos", help: "validate_power" });
-  const cp = getOpt(d2.current_power);
+  const cp = getSomeorUndefined(d2.current_power);
   if (cp !== void 0 && len) {
     const curN = result ? Number(result.n_total) : 0;
     if (curN > 0) {
@@ -60720,8 +60724,20 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
   const configBind = useBindingValue(v3.config);
   const journalBind = useBindingValue(v3.journal.type === "some" ? v3.journal.value : null);
   const populationBind = useBindingValue(v3.population.type === "some" ? v3.population.value : null);
-  const meta3 = getOpt(v3.columnMeta);
-  const readonly = getOpt(v3.readonly) ?? false;
+  const meta3 = getSomeorUndefined(v3.columnMeta);
+  const readonly = getSomeorUndefined(v3.readonly) ?? false;
+  const presets = useMemo(() => getSomeorUndefined(v3.presets) ?? [], [v3.presets]);
+  const [currentPreset, setCurrentPreset] = useState(void 0);
+  const presetGroups = useMemo(() => {
+    const buckets = /* @__PURE__ */ new Map();
+    for (const p2 of presets) {
+      const label = getSomeorUndefined(p2.group) ?? "Saved questions";
+      const bucket = buckets.get(label);
+      if (bucket) bucket.push(p2);
+      else buckets.set(label, [p2]);
+    }
+    return [...buckets].map(([label, items]) => ({ label, items }));
+  }, [presets]);
   const { columns, rowArrayType } = useColumns(workspace, v3.data.source);
   const config2 = configBind.value;
   const [localPop, setLocalPop] = useState([]);
@@ -60735,7 +60751,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
       var _a3;
       return {
         fieldId: c2.name,
-        label: getOpt((_a3 = meta3 == null ? void 0 : meta3.get(c2.name)) == null ? void 0 : _a3.label) ?? c2.name,
+        label: getSomeorUndefined((_a3 = meta3 == null ? void 0 : meta3.get(c2.name)) == null ? void 0 : _a3.label) ?? c2.name,
         kind: c2.kind
       };
     }),
@@ -60773,17 +60789,24 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     if (experiment.result !== null) setRanConfig(pendingConfigRef.current);
   }, [experiment.result]);
   const [stale, setStale] = useState(false);
-  const editConfig = useCallback((next2) => {
+  const editConfig = useCallback((next2, fromPreset) => {
     if (readonly) return;
     setStale(true);
+    setCurrentPreset(fromPreset);
     queueMicrotask(() => configBind.mutate(next2));
   }, [readonly, configBind]);
-  const editPopulation = useCallback((next2) => {
+  const editPopulation = useCallback((next2, fromPreset) => {
     if (readonly) return;
     setStale(true);
+    setCurrentPreset(fromPreset);
     if (v3.population.type === "some") queueMicrotask(() => populationBind.mutate(next2));
     else setLocalPop(next2);
   }, [readonly, v3.population.type, populationBind]);
+  const selectPreset = useCallback((p2) => {
+    if (readonly) return;
+    editConfig(p2.config, p2.id);
+    editPopulation(getSomeorUndefined(p2.population) ?? [], p2.id);
+  }, [readonly, editConfig, editPopulation]);
   const onRun = useCallback(() => {
     runAll();
     setStale(false);
@@ -60797,7 +60820,9 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
       naive: r2.naive,
       adjusted: r2.adjusted.type === "some" ? some(r2.adjusted.value.effect) : none$1,
       committed_at: /* @__PURE__ */ new Date(),
-      committed_by: "you"
+      committed_by: "you",
+      // Record which preset framed this experiment (none for a free-form run).
+      preset: currentPreset !== void 0 ? some(currentPreset) : none$1
     };
     journalBind.mutate([row, ...journalBind.value ?? []]);
     try {
@@ -60807,8 +60832,8 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
       setStale(false);
     } catch {
     }
-  }, [config2, experiment.result, journalBind, configBind, populationBind, v3.population.type]);
-  const [tab, setTab] = useState(((_a2 = getOpt(v3.defaultTab)) == null ? void 0 : _a2.type) ?? "answer");
+  }, [config2, experiment.result, journalBind, configBind, populationBind, v3.population.type, currentPreset]);
+  const [tab, setTab] = useState(((_a2 = getSomeorUndefined(v3.defaultTab)) == null ? void 0 : _a2.type) ?? "answer");
   const [guidance, setGuidance] = useState(true);
   const now2 = useMemo(() => /* @__PURE__ */ new Date(), []);
   const nRows = (filteredRows == null ? void 0 : filteredRows.length) ?? 0;
@@ -60816,7 +60841,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     const rc = ranConfig ?? config2;
     const labelOf = (col) => {
       var _a3;
-      return col ? getOpt((_a3 = meta3 == null ? void 0 : meta3.get(col)) == null ? void 0 : _a3.label) ?? col : "";
+      return col ? getSomeorUndefined((_a3 = meta3 == null ? void 0 : meta3.get(col)) == null ? void 0 : _a3.label) ?? col : "";
     };
     return { treatment: labelOf(rc == null ? void 0 : rc.treatment), outcome: labelOf(rc == null ? void 0 : rc.outcome), subject: SUBJECT_ONE, subjects: SUBJECT_MANY };
   }, [ranConfig, config2, meta3]);
@@ -60846,10 +60871,18 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
   const designFresh = design.result !== null && ((_b2 = designSnapRef.current) == null ? void 0 : _b2.result) === experiment.result && !design.pending;
   if (!config2 || !view) {
     const failed2 = experiment.status === "failed";
-    return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: failed2 && experiment.error ? /* @__PURE__ */ jsx$1(RunError, { error: experiment.error }) : /* @__PURE__ */ jsx$1(Text, { className: failed2 ? void 0 : "elara-skeleton", textStyle: "body.sm", color: "fg.muted", children: failed2 ? "Could not run the experiment." : "Loading experiment…" }) });
+    const which = data4.error ? "dataset" : configBind.error ? "config" : journalBind.error ? "journal" : populationBind.error ? "population filter" : null;
+    const bindError = data4.error ?? configBind.error ?? journalBind.error ?? populationBind.error;
+    const bindMsg = bindError instanceof Error ? bindError.message : bindError != null ? String(bindError) : null;
+    return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: bindMsg ? /* @__PURE__ */ jsxs(Text, { textStyle: "body.sm", color: "fg.danger", children: [
+      "Couldn’t load the experiment ",
+      which,
+      ": ",
+      bindMsg
+    ] }) : failed2 && experiment.error ? /* @__PURE__ */ jsx$1(RunError, { error: experiment.error }) : /* @__PURE__ */ jsx$1(Text, { className: failed2 ? void 0 : "elara-skeleton", textStyle: "body.sm", color: "fg.muted", children: failed2 ? "Could not run the experiment." : "Loading experiment…" }) });
   }
   const { spec: vs, answer: a2, refusal: ref, overlap: ov, refute: vr, dose: vd, journal, verdict } = view;
-  const higherBetter = getOpt((_c2 = meta3 == null ? void 0 : meta3.get(vs.outcome)) == null ? void 0 : _c2.higherIsBetter);
+  const higherBetter = getSomeorUndefined((_c2 = meta3 == null ? void 0 : meta3.get(vs.outcome)) == null ? void 0 : _c2.higherIsBetter);
   const dataStatus = statusR({ status: "success", size: "sm" });
   const barList = (rows) => /* @__PURE__ */ jsx$1(Box, { css: bs.root, children: rows.map((r2, i) => /* @__PURE__ */ jsxs(Box, { css: bs.row, children: [
     /* @__PURE__ */ jsx$1(Text, { css: bs.label, textStyle: "mono.sm", color: "fg.default", truncate: true, children: r2.label }),
@@ -60867,7 +60900,25 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
   const tabKeys = [...["answer", "trust", "dose"], ...hasDesign ? ["validate"] : []];
   return /* @__PURE__ */ jsx$1(GuidanceProvider, { on: guidance, vars: helpVars, children: /* @__PURE__ */ jsxs(Box, { layerStyle: "frame", overflow: "visible", children: [
     /* @__PURE__ */ jsxs(Box, { layerStyle: "header.bar", display: "flex", alignItems: "center", gap: "3.5", children: [
-      /* @__PURE__ */ jsx$1(Text, { textStyle: "title.card", color: "fg.muted", children: /* @__PURE__ */ jsxs(Help, { id: "header", children: [
+      presets.length > 0 && !readonly ? /* @__PURE__ */ jsxs(Menu.Root, { children: [
+        /* @__PURE__ */ jsx$1(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Box, { as: "button", bg: "transparent", border: "0", p: "0", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "2", textAlign: "start", children: [
+          /* @__PURE__ */ jsxs(Text, { textStyle: "title.card", color: "fg.muted", children: [
+            "Does ",
+            /* @__PURE__ */ jsx$1(Text, { as: "span", color: "brand.solid", fontWeight: "bold", children: vs.treatment }),
+            " change ",
+            /* @__PURE__ */ jsx$1(Text, { as: "span", color: "brand.solid", fontWeight: "bold", children: vs.outcome }),
+            "?"
+          ] }),
+          /* @__PURE__ */ jsx$1(Box, { as: "span", color: "fg.subtle", fontSize: "11px", lineHeight: "1", children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faChevronDown }) })
+        ] }) }),
+        /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Menu.Positioner, { children: /* @__PURE__ */ jsx$1(Menu.Content, { minW: "280px", children: presetGroups.map((g2) => /* @__PURE__ */ jsxs(Menu.ItemGroup, { children: [
+          g2.label !== "Saved questions" && /* @__PURE__ */ jsx$1(Menu.ItemGroupLabel, { textStyle: "caption.eyebrow", fontSize: "9px", children: g2.label }),
+          g2.items.map((p2) => /* @__PURE__ */ jsxs(Menu.Item, { value: p2.id, onClick: () => selectPreset(p2), gap: "2", children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", width: "14px", flexShrink: "0", color: "brand.fg", children: p2.id === currentPreset && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faCheck, style: { fontSize: "10px" } }) }),
+            p2.label
+          ] }, p2.id))
+        ] }, g2.label)) }) }) })
+      ] }) : /* @__PURE__ */ jsx$1(Text, { textStyle: "title.card", color: "fg.muted", children: /* @__PURE__ */ jsxs(Help, { id: "header", children: [
         "Does ",
         /* @__PURE__ */ jsx$1(Text, { as: "span", color: "brand.solid", fontWeight: "bold", children: vs.treatment }),
         " change ",
@@ -61115,7 +61166,20 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
           /* @__PURE__ */ jsxs(Text, { as: "span", color: "fg.muted", children: [
             "· vs ",
             r2.confounders
-          ] })
+          ] }),
+          (() => {
+            var _a3;
+            const id3 = getSomeorUndefined(r2.preset);
+            if (id3 === void 0) return null;
+            const label = ((_a3 = presets.find((p2) => p2.id === id3)) == null ? void 0 : _a3.label) ?? id3;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsxs(Box, { as: "span", css: chip({ tone: "brand", size: "sm" }), children: [
+                "from ",
+                label
+              ] })
+            ] });
+          })()
         ] }),
         /* @__PURE__ */ jsx$1(Text, { textStyle: "mono.sm", fontWeight: "semibold", textAlign: "right", fontVariantNumeric: "tabular-nums", color: r2.verdictTone === "pos" ? "fg.success" : "fg.default", children: r2.effect }),
         /* @__PURE__ */ jsx$1(Text, { textStyle: "caption.eyebrow", textAlign: "right", color: toneToken(r2.verdictTone), children: r2.verdict }),