@etus/ui 0.4.0-beta.3 → 0.4.0-beta.5

package/dist/chunk-2HM5Z2YP.js

@@ -0,0 +1,834 @@
+import { NumberInput } from './chunk-U74PNG4S.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WBE6VQOO.js';
+import { Checkbox } from './chunk-XETKCF73.js';
+import { Dialog, DialogContent, DialogTitle } from './chunk-ZUFM33AV.js';
+import { Popover, PopoverAnchor, PopoverContent } from './chunk-AFCSDND5.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Table, Filter, X, Shapes, Search } from 'lucide-react';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var NUMBER_OPS = [
+  { v: ">=", l: "\u2265" },
+  { v: "<=", l: "\u2264" },
+  { v: ">", l: ">" },
+  { v: "<", l: "<" },
+  { v: "=", l: "=" },
+  { v: "between", l: "between" }
+];
+var GAM_CHECKBOX = "size-[18px] rounded-xs border-2 border-[color:var(--report-builder-fg-subtle)] data-[state=checked]:border-[color:var(--report-builder-accent)] data-[state=checked]:bg-[color:var(--report-builder-accent)] data-[state=checked]:text-[color:var(--report-builder-on-accent)]";
+var GAM_POPUP = "rounded-lg border-0 p-0 [--report-builder-popup-shadow:0_1px_2px_0_var(--report-builder-shadow),0_2px_6px_2px_var(--report-builder-shadow-subtle)] shadow-[var(--report-builder-popup-shadow)]";
+var numFmt = (n) => n == null ? "" : n.toLocaleString("en-US");
+function listFmt(vals) {
+  const head = vals.slice(0, 3).join(", ");
+  return vals.length > 3 ? `${head} +${String(vals.length - 3)}` : head;
+}
+function editorStateFor(existing) {
+  return {
+    a: existing?.a != null ? String(existing.a) : "",
+    b: existing?.b != null ? String(existing.b) : "",
+    op: existing && existing.op !== "anyOf" && existing.op !== "contains" ? existing.op : ">=",
+    text: existing?.text ?? "",
+    vals: existing?.values ?? []
+  };
+}
+function fieldLabel(label, key) {
+  return label.toLowerCase() === key.toLowerCase() ? label : `${label} (${key})`;
+}
+function MetricGlyph() {
+  return /* @__PURE__ */ jsx("span", { className: "flex h-4 w-[22px] items-center justify-center text-[12px] font-bold leading-none tracking-tighter text-[color:var(--report-builder-positive)]", children: "123" });
+}
+function DimGlyph() {
+  return /* @__PURE__ */ jsx(Shapes, { className: "shrink-0 text-[color:var(--report-builder-accent-bright)]", size: 16 });
+}
+function KindGlyph({ kind }) {
+  return kind === "metric" ? /* @__PURE__ */ jsx(MetricGlyph, {}) : /* @__PURE__ */ jsx(DimGlyph, {});
+}
+function GamChip({
+  icon,
+  children,
+  active,
+  onClick,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex h-[26px] items-center rounded-xl border pl-3 text-[13px] font-medium",
+        active ? "border-[color:var(--report-builder-accent-border)] bg-[color:var(--report-builder-accent-bg)] text-[color:var(--report-builder-accent-hover)]" : "border-[color:var(--report-builder-border)] bg-[color:var(--report-builder-surface)] text-[color:var(--report-builder-fg-muted)]",
+        !onRemove && "pr-3",
+        onClick && "cursor-pointer",
+        onClick && !active && "hover:bg-[color:var(--report-builder-surface-subtle)]"
+      ),
+      onClick,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "flex h-6 w-8 items-center justify-center",
+              active ? "text-[color:var(--report-builder-accent-hover)]" : "text-[color:var(--report-builder-fg-muted)] hover:text-[color:var(--report-builder-fg-secondary)]"
+            ),
+            "aria-label": "Remove",
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ jsx(X, { size: 18 })
+          }
+        )
+      ]
+    }
+  );
+}
+function AllFieldsDialog({
+  onOpenChange,
+  fields,
+  dimensions,
+  metrics,
+  onSelectionChange
+}) {
+  const [draftDims, setDraftDims] = React.useState(dimensions);
+  const [draftMets, setDraftMets] = React.useState(metrics);
+  const [display, setDisplay] = React.useState("all");
+  const [category, setCategory] = React.useState(
+    "popular"
+  );
+  const [search, setSearch] = React.useState("");
+  const [hovered, setHovered] = React.useState(null);
+  function toggleDraft(kind, key) {
+    const [cur, set] = kind === "dimension" ? [draftDims, setDraftDims] : [draftMets, setDraftMets];
+    set(cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key]);
+  }
+  function apply() {
+    onSelectionChange("dimensions", draftDims);
+    onSelectionChange("metrics", draftMets);
+    onOpenChange(false);
+  }
+  const match = (l) => l.toLowerCase().includes(search.trim().toLowerCase());
+  const items = fields.filter((f) => {
+    if (!match(f.label)) return false;
+    if (display === "dimensions" && f.kind !== "dimension") return false;
+    if (display === "metrics" && f.kind !== "metric") return false;
+    if (category === "dimensions" && f.kind !== "dimension") return false;
+    if (category === "metrics" && f.kind !== "metric") return false;
+    return true;
+  });
+  const selected = [
+    ...draftDims.map((k) => fields.find((f) => f.kind === "dimension" && f.key === k)),
+    ...draftMets.map((k) => fields.find((f) => f.kind === "metric" && f.key === k))
+  ].filter((f) => !!f);
+  const CATS = [
+    { k: "popular", l: "Popular" },
+    { k: "dimensions", l: "Dimensions" },
+    { k: "metrics", l: "Metrics" }
+  ];
+  const DISPLAYS = [
+    { k: "all", l: "All" },
+    { k: "dimensions", l: "Dimensions" },
+    { k: "metrics", l: "Metrics" }
+  ];
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "left-0 top-0 flex h-screen max-h-screen w-[min(1500px,96vw)] max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none border-0 bg-[color:var(--report-builder-surface)] p-0 text-[color:var(--report-builder-fg)]",
+      showCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4 px-4 py-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Close",
+              className: "rounded-full p-1.5 text-[color:var(--report-builder-fg-muted)] hover:bg-[color:var(--report-builder-surface-hover)]",
+              type: "button",
+              onClick: () => {
+                onOpenChange(false);
+              },
+              children: /* @__PURE__ */ jsx(X, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-normal text-[color:var(--report-builder-fg)]", children: "All dimensions and metrics" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[color:var(--report-builder-fg-muted)]", children: "Display" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: DISPLAYS.map((d) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: cn(
+                "h-8 rounded px-3 text-sm font-medium",
+                display === d.k ? "bg-[color:var(--report-builder-accent-bg)] text-[color:var(--report-builder-accent-hover)]" : "border border-[color:var(--report-builder-border)] text-[color:var(--report-builder-fg-secondary)] hover:bg-[color:var(--report-builder-surface-subtle)]"
+              ),
+              type: "button",
+              onClick: () => {
+                setDisplay(d.k);
+              },
+              children: [
+                display === d.k ? "\u2713 " : "",
+                d.l
+              ]
+            },
+            d.k
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 border-y border-[color:var(--report-builder-border-strong)] px-4 py-2.5", children: [
+          /* @__PURE__ */ jsx(Search, { className: "text-[color:var(--report-builder-fg-muted)]", size: 18 }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoFocus: true,
+              className: "w-full bg-transparent text-sm text-[color:var(--report-builder-fg)] outline-none placeholder:text-[color:var(--report-builder-fg-subtle)]",
+              placeholder: "Search",
+              value: search,
+              onChange: (e) => {
+                setSearch(e.target.value);
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-56 shrink-0 overflow-auto border-r border-[color:var(--report-builder-border-strong)] py-1", children: CATS.map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "flex h-9 w-full items-center px-4 text-left text-sm",
+                category === c.k ? "bg-[color:var(--report-builder-surface-hover)] text-[color:var(--report-builder-fg)]" : "text-[color:var(--report-builder-fg-secondary)] hover:bg-[color:var(--report-builder-surface-subtle)]"
+              ),
+              type: "button",
+              onClick: () => {
+                setCategory(c.k);
+              },
+              children: c.l
+            },
+            c.k
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-[1.4] overflow-auto py-1", children: [
+            items.map((f) => {
+              const sel = f.kind === "dimension" ? draftDims.includes(f.key) : draftMets.includes(f.key);
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "flex h-9 cursor-pointer items-center gap-3 px-4 text-[15px] text-[color:var(--report-builder-fg-strong)] hover:bg-[color:var(--report-builder-surface-muted)]",
+                  onMouseEnter: () => {
+                    setHovered(`${f.kind}:${f.key}`);
+                  },
+                  onMouseLeave: () => {
+                    setHovered(null);
+                  },
+                  onFocus: () => {
+                    setHovered(`${f.kind}:${f.key}`);
+                  },
+                  onBlur: () => {
+                    setHovered(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: sel,
+                        className: GAM_CHECKBOX,
+                        onCheckedChange: () => {
+                          toggleDraft(f.kind, f.key);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(KindGlyph, { kind: f.kind }),
+                      f.label
+                    ] })
+                  ]
+                },
+                `${f.kind}:${f.key}`
+              );
+            }),
+            items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-sm text-[color:var(--report-builder-fg-subtle)]", children: "No matches" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "w-96 shrink-0 overflow-auto border-l border-[color:var(--report-builder-border-strong)]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[color:var(--report-builder-fg)]", children: [
+                selected.length,
+                " Selected"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "text-sm font-medium text-[color:var(--report-builder-accent-hover)] hover:underline",
+                  type: "button",
+                  onClick: () => {
+                    setDraftDims([]);
+                    setDraftMets([]);
+                  },
+                  children: "Clear all"
+                }
+              )
+            ] }),
+            selected.map((f) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-[color:var(--report-builder-fg-muted)]", children: f.kind === "dimension" ? "Dimensions" : "Metrics" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(KindGlyph, { kind: f.kind }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-[color:var(--report-builder-fg)]", children: f.label }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": `Remove ${f.label}`,
+                    className: "rounded-full p-1 text-[color:var(--report-builder-fg-muted)] hover:bg-[color:var(--report-builder-surface-hover)]",
+                    type: "button",
+                    onClick: () => {
+                      toggleDraft(f.kind, f.key);
+                    },
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ] })
+            ] }, `${f.kind}:${f.key}`))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-80 shrink-0 overflow-auto border-l border-[color:var(--report-builder-border-strong)] p-4 text-sm text-[color:var(--report-builder-fg)]", children: hovered ? fields.find((f) => `${f.kind}:${f.key}` === hovered)?.description ?? fields.find((f) => `${f.kind}:${f.key}` === hovered)?.label : "Hover over a dimension or metric to see a description" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4 border-t border-[color:var(--report-builder-border-strong)] px-4 py-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded bg-[color:var(--report-builder-accent)] px-6 py-2 text-sm font-medium text-[color:var(--report-builder-on-accent)] hover:bg-[color:var(--report-builder-accent-hover)] disabled:cursor-not-allowed disabled:opacity-50",
+              disabled: draftDims.length === 0 || draftMets.length === 0,
+              type: "button",
+              onClick: apply,
+              children: "Apply"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded px-2 py-2 text-sm font-medium text-[color:var(--report-builder-accent-hover)] hover:bg-[color:var(--report-builder-accent-bg-subtle)]",
+              type: "button",
+              onClick: () => {
+                onOpenChange(false);
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function FieldsBar({
+  fields,
+  dimensions,
+  metrics,
+  onSelectionChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [viewAllOpen, setViewAllOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [hovered, setHovered] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const byKey = (kind, key) => fields.find((f) => f.kind === kind && f.key === key);
+  function toggle(kind, key) {
+    const plural = kind === "dimension" ? "dimensions" : "metrics";
+    const cur = kind === "dimension" ? dimensions : metrics;
+    if (cur.includes(key)) {
+      if (cur.length === 1) return;
+      onSelectionChange(plural, cur.filter((k) => k !== key));
+    } else {
+      onSelectionChange(plural, [...cur, key]);
+    }
+  }
+  const match = (l) => l.toLowerCase().includes(search.trim().toLowerCase());
+  const items = fields.filter((f) => match(f.label));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start border-b border-[color:var(--report-builder-border)] bg-[color:var(--report-builder-surface)] py-3", children: [
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open,
+        onOpenChange: (o) => {
+          setOpen(o);
+          if (!o) {
+            setSearch("");
+            setHovered(null);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center px-3", children: /* @__PURE__ */ jsx(Table, { className: "text-[color:var(--report-builder-fg)]", size: 24, strokeWidth: 1.5 }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+                dimensions.map((k) => /* @__PURE__ */ jsx(
+                  GamChip,
+                  {
+                    icon: /* @__PURE__ */ jsx(DimGlyph, {}),
+                    onRemove: dimensions.length > 1 ? () => {
+                      toggle("dimension", k);
+                    } : void 0,
+                    children: byKey("dimension", k)?.label ?? k
+                  },
+                  `d:${k}`
+                )),
+                metrics.map((k) => /* @__PURE__ */ jsx(
+                  GamChip,
+                  {
+                    icon: /* @__PURE__ */ jsx(MetricGlyph, {}),
+                    onRemove: metrics.length > 1 ? () => {
+                      toggle("metric", k);
+                    } : void 0,
+                    children: byKey("metric", k)?.label ?? k
+                  },
+                  `m:${k}`
+                ))
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  className: "mt-2 w-full max-w-md bg-transparent text-sm text-[color:var(--report-builder-fg)] outline-none placeholder:text-[color:var(--report-builder-fg-subtle)]",
+                  placeholder: "Select dimensions and metrics",
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    if (!open) setOpen(true);
+                  },
+                  onFocus: () => {
+                    setOpen(true);
+                  }
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              align: "start",
+              className: GAM_POPUP,
+              sideOffset: 4,
+              style: { width: "var(--radix-popper-anchor-width)" },
+              onInteractOutside: (e) => {
+                if (e.target === inputRef.current) e.preventDefault();
+              },
+              onOpenAutoFocus: (e) => {
+                e.preventDefault();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "max-h-[340px] flex-[1.6] overflow-auto py-1", children: [
+                    !search.trim() && /* @__PURE__ */ jsx("div", { className: "px-4 pb-1 pt-2 text-xs font-normal text-[color:var(--report-builder-fg-subtle)]", children: "Popular" }),
+                    items.map((f) => {
+                      const sel = f.kind === "dimension" ? dimensions.includes(f.key) : metrics.includes(f.key);
+                      return /* @__PURE__ */ jsxs(
+                        "label",
+                        {
+                          className: "flex h-8 cursor-pointer items-center gap-3 px-4 text-[15px] text-[color:var(--report-builder-fg-strong)] hover:bg-[color:var(--report-builder-surface-muted)]",
+                          onMouseEnter: () => {
+                            setHovered(`${f.kind}:${f.key}`);
+                          },
+                          onMouseLeave: () => {
+                            setHovered(null);
+                          },
+                          onFocus: () => {
+                            setHovered(`${f.kind}:${f.key}`);
+                          },
+                          onBlur: () => {
+                            setHovered(null);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Checkbox,
+                              {
+                                checked: sel,
+                                className: GAM_CHECKBOX,
+                                onCheckedChange: () => {
+                                  toggle(f.kind, f.key);
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx(KindGlyph, { kind: f.kind }),
+                              f.label
+                            ] })
+                          ]
+                        },
+                        `${f.kind}:${f.key}`
+                      );
+                    }),
+                    items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 text-sm text-[color:var(--report-builder-fg-subtle)]", children: "No matches" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "min-h-[200px] flex-1 border-l border-[color:var(--report-builder-border-strong)] p-4 text-sm text-[color:var(--report-builder-fg)]", children: hovered ? fields.find((f) => `${f.kind}:${f.key}` === hovered)?.description ?? fields.find((f) => `${f.kind}:${f.key}` === hovered)?.label : "Hover over a dimension or metric to see a description" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "border-t border-[color:var(--report-builder-border-strong)] px-4 py-2.5", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": "View all fields",
+                    className: "text-sm font-medium text-[color:var(--report-builder-accent-hover)] hover:underline",
+                    type: "button",
+                    onClick: () => {
+                      setOpen(false);
+                      setViewAllOpen(true);
+                    },
+                    children: "View all"
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center self-stretch border-l border-[color:var(--report-builder-border)] px-4", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "View all dimensions and metrics",
+        className: "text-sm font-medium text-[color:var(--report-builder-accent-hover)] hover:underline",
+        type: "button",
+        onClick: () => {
+          setViewAllOpen(true);
+        },
+        children: "View all"
+      }
+    ) }),
+    viewAllOpen && /* @__PURE__ */ jsx(
+      AllFieldsDialog,
+      {
+        dimensions,
+        fields,
+        metrics,
+        onOpenChange: setViewAllOpen,
+        onSelectionChange
+      }
+    )
+  ] });
+}
+function filterChipLabel(f, ff) {
+  const label = ff ? fieldLabel(ff.label, ff.key) : f.field;
+  if (f.op === "anyOf") return `${label} is any of ${listFmt(f.values ?? [])}`;
+  if (f.op === "contains") return `${label} contains "${f.text ?? ""}"`;
+  if (f.op === "between") return `${ff?.label ?? f.field} between ${numFmt(f.a)} and ${numFmt(f.b)}`;
+  const op = NUMBER_OPS.find((o) => o.v === f.op)?.l ?? f.op;
+  return `${ff?.label ?? f.field} ${op} ${numFmt(f.a)}`;
+}
+function buildFilterEntry(ff, s) {
+  if (ff.type === "enum") {
+    return s.vals.length ? { field: ff.key, op: "anyOf", values: s.vals } : null;
+  }
+  if (ff.type === "text") {
+    const t = s.text.trim();
+    return t ? { field: ff.key, op: "contains", text: t } : null;
+  }
+  const na = Number.parseFloat(s.a);
+  if (Number.isNaN(na)) return "invalid";
+  const nb = s.op === "between" ? Number.parseFloat(s.b) : null;
+  if (nb != null && Number.isNaN(nb)) return "invalid";
+  return { a: na, b: nb, field: ff.key, op: s.op };
+}
+function FiltersBar({
+  filterFields,
+  filters,
+  onFiltersChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [fieldKey, setFieldKey] = React.useState(null);
+  const [editIdx, setEditIdx] = React.useState(null);
+  const [vals, setVals] = React.useState([]);
+  const [text, setText] = React.useState("");
+  const [op, setOp] = React.useState(">=");
+  const [a, setA] = React.useState("");
+  const [b, setB] = React.useState("");
+  const [fsearch, setFsearch] = React.useState("");
+  const [vsearch, setVsearch] = React.useState("");
+  const inputRef = React.useRef(null);
+  const fieldOf = (key) => filterFields.find((f) => f.key === key);
+  function reset() {
+    setFieldKey(null);
+    setEditIdx(null);
+    setVals([]);
+    setText("");
+    setOp(">=");
+    setA("");
+    setB("");
+    setFsearch("");
+    setVsearch("");
+  }
+  function openEditor(key, idx) {
+    const ff = fieldOf(key);
+    if (!ff) return;
+    const existingIdx = idx ?? (ff.type === "number" ? -1 : filters.findIndex((x) => x.field === key));
+    const seed = editorStateFor(existingIdx >= 0 ? filters[existingIdx] : void 0);
+    setFieldKey(key);
+    setEditIdx(existingIdx >= 0 ? existingIdx : null);
+    setVsearch("");
+    setVals(seed.vals);
+    setText(seed.text);
+    setOp(seed.op);
+    setA(seed.a);
+    setB(seed.b);
+    setOpen(true);
+  }
+  function apply() {
+    const ff = fieldKey ? fieldOf(fieldKey) : null;
+    if (!ff) return;
+    const entry = buildFilterEntry(ff, { a, b, op, text, vals });
+    if (entry === "invalid") return;
+    const next = [...filters];
+    if (editIdx != null) {
+      if (entry) next[editIdx] = entry;
+      else next.splice(editIdx, 1);
+    } else if (entry) {
+      next.push(entry);
+    }
+    onFiltersChange(next);
+    setOpen(false);
+    reset();
+  }
+  const editorField = fieldKey ? fieldOf(fieldKey) : null;
+  const valueOptions = editorField?.options ?? [];
+  const valueSuggestions = valueOptions.filter(
+    (v) => !vals.includes(v) && v.toLowerCase().includes(vsearch.trim().toLowerCase())
+  );
+  const fieldMatches = (l) => l.toLowerCase().includes(fsearch.trim().toLowerCase());
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-12 items-center bg-[color:var(--report-builder-surface)] py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center px-3", children: /* @__PURE__ */ jsx(Filter, { className: "text-[color:var(--report-builder-accent)]", fill: "currentColor", size: 20, strokeWidth: 0 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1", children: [
+      filters.map((f, i) => /* @__PURE__ */ jsx(
+        GamChip,
+        {
+          active: open && editIdx === i,
+          onClick: () => {
+            openEditor(f.field, i);
+          },
+          onRemove: () => {
+            onFiltersChange(filters.filter((_, j) => j !== i));
+          },
+          children: filterChipLabel(f, fieldOf(f.field))
+        },
+        `${f.field}:${filterChipLabel(f, fieldOf(f.field))}`
+      )),
+      /* @__PURE__ */ jsxs(
+        Popover,
+        {
+          open,
+          onOpenChange: (o) => {
+            setOpen(o);
+            if (!o) reset();
+          },
+          children: [
+            /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                className: "w-28 bg-transparent px-2 py-1 text-sm text-[color:var(--report-builder-fg)] outline-none placeholder:text-[color:var(--report-builder-fg-subtle)]",
+                placeholder: "Add filter",
+                value: fsearch,
+                onChange: (e) => {
+                  setFsearch(e.target.value);
+                  if (!open) setOpen(true);
+                },
+                onFocus: () => {
+                  if (fieldKey === null) setOpen(true);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                align: "start",
+                className: cn(fieldKey === null ? "w-72" : "w-[26rem]", GAM_POPUP),
+                onInteractOutside: (e) => {
+                  if (e.target === inputRef.current) e.preventDefault();
+                },
+                onOpenAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                children: fieldKey === null ? (
+                  // step 1 — field list (filtered by the inline field's text)
+                  /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-auto py-1", children: filterFields.filter((f) => fieldMatches(f.label)).map((f) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: "flex h-8 w-full items-center gap-2 px-4 text-left text-[15px] text-[color:var(--report-builder-fg-strong)] hover:bg-[color:var(--report-builder-surface-muted)]",
+                      type: "button",
+                      onClick: () => {
+                        openEditor(f.key);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(KindGlyph, { kind: f.glyph ?? "dimension" }),
+                        f.label
+                      ]
+                    },
+                    f.key
+                  )) })
+                ) : (
+                  // step 2 — GAM editor popup: title + ✕, operator, values, Apply
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-1 pt-3", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-base text-[color:var(--report-builder-fg)]", children: editorField ? fieldLabel(editorField.label, editorField.key) : fieldKey }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": "Close",
+                          className: "rounded-full p-1 text-[color:var(--report-builder-fg-muted)] hover:bg-[color:var(--report-builder-surface-hover)]",
+                          type: "button",
+                          onClick: () => {
+                            setOpen(false);
+                            reset();
+                          },
+                          children: /* @__PURE__ */ jsx(X, { size: 18 })
+                        }
+                      )
+                    ] }),
+                    editorField?.type === "text" ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+                      /* @__PURE__ */ jsx("div", { className: "mb-2 rounded border border-[color:var(--report-builder-border)] px-3 py-2 text-[13px] text-[color:var(--report-builder-fg-muted)]", children: "contains" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          autoFocus: true,
+                          className: "w-full border-b border-[color:var(--report-builder-border)] bg-transparent py-1 text-sm text-[color:var(--report-builder-fg)] outline-none placeholder:text-[color:var(--report-builder-fg-subtle)] focus:border-[color:var(--report-builder-accent)]",
+                          placeholder: "Type to search",
+                          value: text,
+                          onChange: (e) => {
+                            setText(e.target.value);
+                          }
+                        }
+                      )
+                    ] }) : editorField?.type === "number" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+                      /* @__PURE__ */ jsxs(Select, { value: op, onValueChange: setOp, children: [
+                        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-24", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                        /* @__PURE__ */ jsx(SelectContent, { children: NUMBER_OPS.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.v, children: o.l }, o.v)) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        NumberInput,
+                        {
+                          placeholder: "value",
+                          value: a,
+                          onChange: (e) => {
+                            setA(e.target.value);
+                          }
+                        }
+                      ),
+                      op === "between" && /* @__PURE__ */ jsx(
+                        NumberInput,
+                        {
+                          placeholder: "to",
+                          value: b,
+                          onChange: (e) => {
+                            setB(e.target.value);
+                          }
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+                      /* @__PURE__ */ jsx("div", { className: "mb-2 rounded border border-[color:var(--report-builder-border)] px-3 py-2 text-[13px] text-[color:var(--report-builder-fg-muted)]", children: "is any of" }),
+                      vals.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-1 flex flex-wrap gap-x-2 gap-y-1", children: vals.map((v) => /* @__PURE__ */ jsx(
+                        GamChip,
+                        {
+                          onRemove: () => {
+                            setVals((p) => p.filter((x) => x !== v));
+                          },
+                          children: v
+                        },
+                        v
+                      )) }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          autoFocus: true,
+                          className: "w-full border-b border-[color:var(--report-builder-border)] bg-transparent py-1 text-sm text-[color:var(--report-builder-fg)] outline-none placeholder:text-[color:var(--report-builder-fg-subtle)] focus:border-[color:var(--report-builder-accent)]",
+                          placeholder: "Type to search",
+                          value: vsearch,
+                          onChange: (e) => {
+                            setVsearch(e.target.value);
+                          },
+                          onKeyDown: (e) => {
+                            const first = valueSuggestions[0];
+                            if (e.key === "Enter" && first) {
+                              e.preventDefault();
+                              setVals((p) => [...p, first]);
+                              setVsearch("");
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "mt-1 max-h-44 overflow-auto", children: valueSuggestions.map((v) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: "flex h-8 w-full items-center px-2 text-left text-sm text-[color:var(--report-builder-fg-strong)] hover:bg-[color:var(--report-builder-surface-muted)]",
+                          type: "button",
+                          onClick: () => {
+                            setVals((p) => [...p, v]);
+                            setVsearch("");
+                          },
+                          children: v
+                        },
+                        v
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex justify-end px-3 pb-2 pt-1", children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: "rounded px-2 py-1 text-sm font-medium text-[color:var(--report-builder-accent-hover)] hover:bg-[color:var(--report-builder-accent-bg-subtle)]",
+                        type: "button",
+                        onClick: apply,
+                        children: "Apply"
+                      }
+                    ) })
+                  ] })
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    filters.length > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Clear all filters",
+        className: "mx-2 flex shrink-0 items-center rounded-full p-2 text-[color:var(--report-builder-fg-muted)] hover:bg-[color:var(--report-builder-surface-hover)]",
+        type: "button",
+        onClick: () => {
+          onFiltersChange([]);
+        },
+        children: /* @__PURE__ */ jsx(X, { size: 20 })
+      }
+    )
+  ] });
+}
+function ReportBuilder({
+  fields,
+  dimensions,
+  metrics,
+  onSelectionChange,
+  filterFields,
+  filters = [],
+  onFiltersChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col border border-[color:var(--report-builder-border)] bg-[color:var(--report-builder-surface)]", className),
+      "data-slot": "report-builder",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldsBar,
+          {
+            dimensions,
+            fields,
+            metrics,
+            onSelectionChange
+          }
+        ),
+        filterFields && filterFields.length > 0 && onFiltersChange && /* @__PURE__ */ jsx(
+          FiltersBar,
+          {
+            filterFields,
+            filters,
+            onFiltersChange
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ReportBuilder };
+//# sourceMappingURL=chunk-2HM5Z2YP.js.map
+//# sourceMappingURL=chunk-2HM5Z2YP.js.map