@apotech-os/ui-sdk 1.0.0 → 2.1.0

package/dist/index.cjs

@@ -2,9 +2,22 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
+var React2 = require('react');
+var dialog = require('@base-ui/react/dialog');
+var menu = require('@base-ui/react/menu');
+var checkbox = require('@base-ui/react/checkbox');
+var popover = require('@base-ui/react/popover');
+var select = require('@base-ui/react/select');
+var _switch = require('@base-ui/react/switch');
+var tabs = require('@base-ui/react/tabs');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
+var fr = require('date-fns/locale/fr');
+var reactDayPicker = require('react-day-picker');
+var dateFns = require('date-fns');
+var recharts = require('recharts');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -24,16 +37,16 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/cn.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var AppContextInternalCtx = React.createContext(null);
+var AppContextInternalCtx = React2.createContext(null);
 var AppContextProvider = AppContextInternalCtx.Provider;
 function useAppContext() {
-  const ctx = React.useContext(AppContextInternalCtx);
+  const ctx = React2.useContext(AppContextInternalCtx);
   if (!ctx) throw new Error("useAppContext must be used inside an app page mounted by the shell");
   return ctx;
 }
@@ -46,10 +59,10 @@ var AppInvokeError = class extends Error {
     this.name = "AppInvokeError";
   }
 };
-var AppApiCtx = React.createContext(null);
+var AppApiCtx = React2.createContext(null);
 var AppApiProvider = AppApiCtx.Provider;
 function useAppApi() {
-  const client = React.useContext(AppApiCtx);
+  const client = React2.useContext(AppApiCtx);
   if (!client) throw new Error("useAppApi must be used inside an app page mounted by the shell");
   return client;
 }
@@ -57,16 +70,16 @@ function useAppSettings() {
   const { appSlug } = useAppContext();
   const api = useAppApi();
   const path = `/data/apps/${appSlug}/settings`;
-  const [settings, setSettings] = React.useState(void 0);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(void 0);
-  const [isSaving, setIsSaving] = React.useState(false);
-  const [saveError, setSaveError] = React.useState(void 0);
-  const clientRef = React.useRef(api);
+  const [settings, setSettings] = React2.useState(void 0);
+  const [isLoading, setIsLoading] = React2.useState(true);
+  const [error, setError] = React2.useState(void 0);
+  const [isSaving, setIsSaving] = React2.useState(false);
+  const [saveError, setSaveError] = React2.useState(void 0);
+  const clientRef = React2.useRef(api);
   clientRef.current = api;
-  const requestIdRef = React.useRef(0);
-  const isMountedRef = React.useRef(true);
-  const load = React.useCallback(
+  const requestIdRef = React2.useRef(0);
+  const isMountedRef = React2.useRef(true);
+  const load = React2.useCallback(
     async ({ silent } = {}) => {
       const requestId = ++requestIdRef.current;
       if (!silent) setIsLoading(true);
@@ -84,7 +97,7 @@ function useAppSettings() {
     },
     [path]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     isMountedRef.current = true;
     void load();
     return () => {
@@ -92,7 +105,7 @@ function useAppSettings() {
       requestIdRef.current += 1;
     };
   }, [load]);
-  const save = React.useCallback(
+  const save = React2.useCallback(
     async (patch) => {
       setIsSaving(true);
       setSaveError(void 0);
@@ -134,15 +147,15 @@ function useAppRun(runId, opts = {}) {
   const api = useAppApi();
   const intervalMs = opts.intervalMs ?? DEFAULT_RUN_POLL_INTERVAL_MS;
   const maxIntervalMs = opts.maxIntervalMs ?? MAX_RUN_POLL_INTERVAL_MS;
-  const [run, setRun] = React.useState(void 0);
-  const [isPolling, setIsPolling] = React.useState(false);
-  const [error, setError] = React.useState(void 0);
-  const clientRef = React.useRef(api);
+  const [run, setRun] = React2.useState(void 0);
+  const [isPolling, setIsPolling] = React2.useState(false);
+  const [error, setError] = React2.useState(void 0);
+  const clientRef = React2.useRef(api);
   clientRef.current = api;
-  const requestIdRef = React.useRef(0);
-  const isMountedRef = React.useRef(true);
+  const requestIdRef = React2.useRef(0);
+  const isMountedRef = React2.useRef(true);
   const path = runId !== null ? `/data/apps/${appSlug}/runs/${encodeURIComponent(runId)}` : null;
-  const fetchOnce = React.useCallback(async () => {
+  const fetchOnce = React2.useCallback(async () => {
     if (path === null) return { kind: "no-path" };
     const requestId = ++requestIdRef.current;
     try {
@@ -157,7 +170,7 @@ function useAppRun(runId, opts = {}) {
       return { kind: "error", err };
     }
   }, [path]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     isMountedRef.current = true;
     requestIdRef.current += 1;
     setRun(void 0);
@@ -209,7 +222,7 @@ function useAppRun(runId, opts = {}) {
       if (timeoutHandle) clearTimeout(timeoutHandle);
     };
   }, [path, fetchOnce, intervalMs, maxIntervalMs]);
-  const refresh = React.useCallback(async () => {
+  const refresh = React2.useCallback(async () => {
     await fetchOnce();
   }, [fetchOnce]);
   return { run, isPolling, error, refresh };
@@ -218,13 +231,13 @@ function useAppRuns(opts) {
   const { appSlug } = useAppContext();
   const api = useAppApi();
   const follow = opts.follow ?? true;
-  const [runs, setRuns] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(void 0);
-  const clientRef = React.useRef(api);
+  const [runs, setRuns] = React2.useState([]);
+  const [isLoading, setIsLoading] = React2.useState(true);
+  const [error, setError] = React2.useState(void 0);
+  const clientRef = React2.useRef(api);
   clientRef.current = api;
-  const requestIdRef = React.useRef(0);
-  const isMountedRef = React.useRef(true);
+  const requestIdRef = React2.useRef(0);
+  const isMountedRef = React2.useRef(true);
   const params = {};
   if (opts.kind) params["kind"] = opts.kind;
   if (opts.key) params["key"] = opts.key;
@@ -232,7 +245,7 @@ function useAppRuns(opts) {
   if (opts.limit) params["limit"] = String(opts.limit);
   const paramsKey = JSON.stringify(params);
   const path = `/data/apps/${appSlug}/runs`;
-  const fetchOnce = React.useCallback(
+  const fetchOnce = React2.useCallback(
     async ({ silent } = {}) => {
       const requestId = ++requestIdRef.current;
       if (!silent) setIsLoading(true);
@@ -255,7 +268,7 @@ function useAppRuns(opts) {
     },
     [path, paramsKey]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     isMountedRef.current = true;
     let timeoutHandle;
     let cancelled = false;
@@ -273,7 +286,7 @@ function useAppRuns(opts) {
       if (timeoutHandle) clearTimeout(timeoutHandle);
     };
   }, [fetchOnce, follow]);
-  const refresh = React.useCallback(async () => {
+  const refresh = React2.useCallback(async () => {
     await fetchOnce({ silent: true });
   }, [fetchOnce]);
   return { runs, isLoading, error, refresh };
@@ -310,6 +323,12 @@ function downloadCsv(rows, filename) {
   const blob = new Blob([`${BOM}${toCsv(rows)}`], { type: "text/csv;charset=utf-8" });
   downloadBlob(blob, filename);
 }
+function triggerProps(trigger) {
+  if (React2__namespace.isValidElement(trigger)) {
+    return { render: trigger, nativeButton: trigger.type === "button" || trigger.type === Button };
+  }
+  return { render: /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger }), nativeButton: false };
+}
 var buttonVariants = classVarianceAuthority.cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -319,7 +338,7 @@ var buttonVariants = classVarianceAuthority.cva(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        destructive: "bg-destructive text-white hover:bg-destructive/90"
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -331,7 +350,7 @@ var buttonVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React__namespace.forwardRef(
+var Button = React2__namespace.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { ref, className: cn(buttonVariants({ variant, size, className })), ...props })
 );
 Button.displayName = "Button";
@@ -373,10 +392,19 @@ function CardHeader({ className, ...props }) {
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props });
 }
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pt-0", className), ...props });
 }
-var Input = React__namespace.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
+}
+var Input = React2__namespace.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     type,
@@ -396,7 +424,13 @@ function TableHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
+      ...props
+    }
+  );
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -418,7 +452,7 @@ function TableHead({ className, ...props }) {
     "th",
     {
       className: cn(
-        "h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground",
         className
       ),
       ...props
@@ -428,57 +462,92 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn("p-4 align-middle", className), ...props });
 }
-var Select = React__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  items,
+  placeholder = "Choisir\u2026",
+  disabled,
+  name,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    select.Select.Root,
     {
-      ref,
-      className: cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children
+      items,
+      value,
+      defaultValue,
+      onValueChange: (next) => onValueChange?.(String(next)),
+      disabled,
+      name,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          select.Select.Trigger,
+          {
+            className: cn(
+              "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+              className
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "\u25BE" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { className: "z-50", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { className: "max-h-72 min-w-(--anchor-width) overflow-auto rounded-md border bg-card p-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          select.Select.Item,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            className: "cursor-pointer rounded px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children: item.label })
+          },
+          item.value
+        )) }) }) })
+      ]
     }
-  )
-);
-Select.displayName = "Select";
-var TabsContext = React__namespace.createContext(null);
-function useTabsContext() {
-  const ctx = React__namespace.useContext(TabsContext);
-  if (!ctx) throw new Error("Tabs sub-component must be used within <Tabs>");
-  return ctx;
+  );
 }
 function Tabs({ defaultValue, value, onValueChange, className, children }) {
-  const [internal, setInternal] = React__namespace.useState(defaultValue ?? "");
-  const current = value ?? internal;
-  const setValue = (v) => {
-    setInternal(v);
-    onValueChange?.(v);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
+    {
+      className,
+      defaultValue,
+      value,
+      onValueChange: (next) => onValueChange?.(String(next)),
+      children
+    }
+  );
 }
 function TabsList({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.List,
+    {
+      className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className),
+      children
+    }
+  );
 }
 function TabsTrigger({
   value,
   className,
   children
 }) {
-  const { value: current, setValue } = useTabsContext();
-  const active = current === value;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    tabs.Tabs.Tab,
     {
-      type: "button",
-      onClick: () => setValue(value),
+      value,
       className: cn(
         "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-        active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+        "text-muted-foreground hover:text-foreground",
+        "data-[active]:bg-card data-[active]:text-foreground data-[active]:shadow-sm",
         className
       ),
       children
@@ -490,38 +559,25 @@ function TabsContent({
   className,
   children
 }) {
-  const { value: current } = useTabsContext();
-  if (current !== value) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { value, className, children });
 }
 function Modal({ open, onClose, title, children, className }) {
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Close",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { "aria-label": "Close", className: "fixed inset-0 z-50 bg-overlay" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      dialog.Dialog.Popup,
       {
-        role: "dialog",
-        "aria-modal": true,
         className: cn(
-          "relative z-10 w-full max-w-md rounded-xl border bg-card p-5 shadow-lg",
+          "fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border bg-card p-5 shadow-lg",
           className
         ),
         children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-base font-semibold", children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "mb-3 text-base font-semibold", children: title }),
           children
         ]
       }
     )
-  ] });
+  ] }) });
 }
 var spinnerSizes = { sm: "size-4", md: "size-6", lg: "size-8" };
 function Spinner({ className, size = "md" }) {
@@ -548,7 +604,7 @@ function Spinner({ className, size = "md" }) {
     }
   );
 }
-var Link = React__namespace.forwardRef(
+var Link = React2__namespace.forwardRef(
   ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "a",
     {
@@ -571,58 +627,22 @@ function Switch({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    _switch.Switch.Root,
     {
-      type: "button",
-      role: "switch",
-      "aria-checked": checked,
+      checked,
+      onCheckedChange: (next) => onCheckedChange?.(next),
       disabled,
-      onClick: () => onCheckedChange?.(!checked),
       className: cn(
-        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        checked ? "bg-primary" : "bg-input",
+        // `data-[disabled]`, not `disabled:` — the root is a span, so `:disabled`
+        // never matches it and the dimming would silently stop happening.
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: cn(
-            "inline-block size-4 transform rounded-full bg-white shadow transition-transform",
-            checked ? "translate-x-4" : "translate-x-0.5"
-          )
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "inline-block size-4 translate-x-0.5 rounded-full bg-white shadow transition-transform data-[checked]:translate-x-4" })
     }
   );
 }
-function DateRangePicker({ value, onChange, className, disabled }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "date",
-        disabled,
-        value: value.from,
-        max: value.to || void 0,
-        onChange: (e) => onChange({ ...value, from: e.target.value }),
-        className: "flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "\u2192" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "date",
-        disabled,
-        value: value.to,
-        min: value.from || void 0,
-        onChange: (e) => onChange({ ...value, to: e.target.value }),
-        className: "flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      }
-    )
-  ] });
-}
 function IconX({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -676,43 +696,69 @@ function IconCheck({ className }) {
     }
   );
 }
-var Textarea = React__namespace.forwardRef(
-  function Textarea2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        ref,
-        className: cn(
-          "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-var Checkbox = React__namespace.forwardRef(
-  function Checkbox2({ className, label, onCheckedChange, ...props }, ref) {
-    const input = /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        className: cn(
-          "size-4 shrink-0 cursor-pointer rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        onChange: (e) => onCheckedChange?.(e.target.checked),
-        ...props
-      }
-    );
-    if (!label) return input;
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm", children: [
-      input,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-    ] });
-  }
-);
+var Textarea = React2__namespace.forwardRef(function Textarea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref,
+      className: cn(
+        "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Checkbox({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  label,
+  name,
+  className,
+  ...props
+}) {
+  const labelId = React2__namespace.useId();
+  const control = React2__namespace.useRef(null);
+  const box = /* @__PURE__ */ jsxRuntime.jsx(
+    checkbox.Checkbox.Root,
+    {
+      ref: control,
+      "aria-labelledby": label ? labelId : void 0,
+      checked,
+      defaultChecked,
+      onCheckedChange: (next) => onCheckedChange?.(next),
+      disabled,
+      name,
+      className: cn(
+        "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded border border-input text-primary-foreground transition-colors data-[checked]:border-primary data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: "text-[10px] leading-none", children: "\u2713" })
+    }
+  );
+  if (!label) return box;
+  return (
+    // Not a wrapping <label>: Base UI would associate it AND keep its own label,
+    // so the text and the control would both answer to the same name and
+    // `getByLabelText` would go ambiguous. Pointing `aria-labelledby` at the text
+    // names the control once; the click handler keeps the label clickable.
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 text-sm", children: [
+      box,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: labelId,
+          className: "cursor-pointer",
+          onClick: () => control.current?.click(),
+          children: label
+        }
+      )
+    ] })
+  );
+}
 function SidePanel({
   open,
   onClose,
@@ -721,47 +767,26 @@ function SidePanel({
   children,
   className
 }) {
-  React__namespace.useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Fermer",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { "aria-label": "Fermer", className: "fixed inset-0 z-50 bg-overlay" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "aside",
+      dialog.Dialog.Popup,
       {
-        role: "dialog",
-        "aria-modal": true,
         className: cn(
-          "absolute inset-y-0 right-0 flex w-full max-w-lg flex-col border-l bg-card shadow-xl",
+          "fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col border-l bg-card shadow-xl",
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b px-5 py-4", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold", children: title }),
-              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+              title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "text-base font-semibold", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { className: "mt-0.5 text-xs text-muted-foreground", children: description })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              dialog.Dialog.Close,
               {
-                type: "button",
                 "aria-label": "Fermer",
                 className: "-mr-1 shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
-                onClick: onClose,
                 children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "size-4" })
               }
             )
@@ -770,7 +795,7 @@ function SidePanel({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 var COPY_FEEDBACK_MS = 2e3;
 function CopyButton({
@@ -781,9 +806,9 @@ function CopyButton({
   size = "sm",
   className
 }) {
-  const [state, setState] = React__namespace.useState("idle");
-  const timeout = React__namespace.useRef(void 0);
-  React__namespace.useEffect(() => () => clearTimeout(timeout.current), []);
+  const [state, setState] = React2__namespace.useState("idle");
+  const timeout = React2__namespace.useRef(void 0);
+  React2__namespace.useEffect(() => () => clearTimeout(timeout.current), []);
   async function copy() {
     const ok = await copyToClipboard(value);
     setState(ok ? "copied" : "error");
@@ -813,89 +838,1423 @@ function Popover({
   align = "start",
   className
 }) {
-  const root = React__namespace.useRef(null);
-  React__namespace.useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (e) => {
-      if (!root.current?.contains(e.target)) onOpenChange(false);
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onOpenChange(false);
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: root, className: "relative inline-block", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-expanded": open, onClick: () => onOpenChange(!open), children: trigger }),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  return (
+    // The callback is re-wrapped so Base UI's event-details argument stops at the
+    // SDK boundary: the engine is an implementation detail, not part of the API.
+    /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover.Root, { open, onOpenChange: (next) => onOpenChange(next), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...triggerProps(trigger) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+        popover.Popover.Popup,
+        {
+          className: cn("min-w-48 rounded-md border bg-card p-2 shadow-lg", className),
+          children
+        }
+      ) }) })
+    ] })
+  );
+}
+function DropdownMenu({ trigger, items, align = "end", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { ...triggerProps(trigger) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Popup,
       {
         className: cn(
-          "absolute z-40 mt-1 min-w-48 rounded-md border bg-card p-2 shadow-lg",
-          align === "end" ? "right-0" : "left-0",
+          "flex min-w-48 flex-col rounded-md border bg-card p-1 shadow-lg",
           className
         ),
-        children
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Item,
+          {
+            disabled: item.disabled,
+            onClick: item.onSelect,
+            className: cn(
+              "cursor-pointer rounded px-2 py-1.5 text-left text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+              item.destructive && "text-destructive"
+            ),
+            children: item.label
+          },
+          i
+        ))
       }
-    )
+    ) }) })
   ] });
 }
-function DropdownMenu({ trigger, items, align = "end", className }) {
-  const [open, setOpen] = React__namespace.useState(false);
+var EMPTY_STATE = {
+  search: "",
+  sort: null,
+  filters: {},
+  hidden: [],
+  selected: []
+};
+var MIN_COLUMN_WIDTH_PX = 64;
+var DEFAULT_VIRTUALIZE_FROM = 100;
+var ROW_HEIGHT_PX = 53;
+var VIRTUAL_VIEWPORT_PX = 640;
+function useDataTableState(controlled, initial, onStateChange) {
+  const [internal, setInternal] = React2__namespace.useState({ ...EMPTY_STATE, ...initial });
+  const state = React2__namespace.useMemo(
+    () => ({ ...EMPTY_STATE, ...initial, ...internal, ...controlled }),
+    [controlled, initial, internal]
+  );
+  const patch = (next) => {
+    const merged = { ...state, ...next };
+    setInternal(merged);
+    onStateChange?.(merged);
+  };
+  return [state, patch];
+}
+function DataTable({
+  columns,
+  rows,
+  rowId,
+  state: controlled,
+  defaultState,
+  onStateChange,
+  facets = [],
+  searchPlaceholder = "Rechercher\u2026",
+  selectable = false,
+  onRowClick,
+  pagination,
+  manual = false,
+  loading = false,
+  error,
+  empty = "Aucun r\xE9sultat.",
+  virtualizeFrom = DEFAULT_VIRTUALIZE_FROM,
+  className
+}) {
+  const [state, patch] = useDataTableState(controlled, defaultState, onStateChange);
+  const [widths, setWidths] = React2__namespace.useState({});
+  const hidden = React2__namespace.useMemo(() => new Set(state.hidden), [state.hidden]);
+  const selected = React2__namespace.useMemo(() => new Set(state.selected), [state.selected]);
+  const visibleColumns = React2__namespace.useMemo(
+    () => columns.filter((column) => !hidden.has(column.key)),
+    [columns, hidden]
+  );
+  const columnDefs = React2__namespace.useMemo(
+    () => visibleColumns.map((column) => ({
+      id: column.key,
+      accessorFn: (row) => column.value ? column.value(row) : row[column.key],
+      enableSorting: column.sortable ?? false,
+      size: column.width,
+      cell: ({ row }) => column.cell ? column.cell(row.original) : String(row.original[column.key] ?? "")
+    })),
+    [visibleColumns]
+  );
+  const sorting = React2__namespace.useMemo(
+    () => state.sort ? [{ id: state.sort.key, desc: state.sort.direction === "desc" }] : [],
+    [state.sort]
+  );
+  const table = reactTable.useReactTable({
+    data: rows,
+    columns: columnDefs,
+    state: { sorting, globalFilter: manual ? "" : state.search },
+    getRowId: (row) => rowId(row),
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    ...manual ? { manualSorting: true, manualFiltering: true } : { getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel() }
+  });
+  const facetedRows = React2__namespace.useMemo(() => {
+    const active = Object.entries(state.filters).filter(([, filter]) => isApplied(filter));
+    if (manual || active.length === 0) return table.getRowModel().rows;
+    return table.getRowModel().rows.filter(
+      (row) => active.every(([key, filter]) => {
+        const column = columns.find((c) => c.key === key);
+        const raw = column?.value ? column.value(row.original) : row.original[key];
+        return matches(raw, filter);
+      })
+    );
+  }, [columns, manual, state.filters, table.getRowModel().rows]);
+  const bodyRef = React2__namespace.useRef(null);
+  const longEnoughToVirtualise = facetedRows.length > virtualizeFrom;
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: facetedRows.length,
+    getScrollElement: () => bodyRef.current,
+    estimateSize: () => ROW_HEIGHT_PX,
+    overscan: 8,
+    enabled: longEnoughToVirtualise
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const virtualise = longEnoughToVirtualise && virtualItems.length > 0;
+  const toggleSort = (key) => {
+    const next = state.sort?.key !== key ? { key, direction: "asc" } : state.sort.direction === "asc" ? { key, direction: "desc" } : null;
+    patch({ sort: next });
+  };
+  const toggleSelected = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    patch({ selected: [...next] });
+  };
+  const allVisibleSelected = facetedRows.length > 0 && facetedRows.every((row) => selected.has(row.id));
+  const toggleAll = () => {
+    patch({ selected: allVisibleSelected ? [] : facetedRows.map((row) => row.id) });
+  };
+  const setFilter = (facetKey, filter) => {
+    const next = { ...state.filters };
+    if (filter) next[facetKey] = filter;
+    else delete next[facetKey];
+    patch({ filters: next });
+  };
+  const renderedRows = virtualise ? virtualItems.map((item) => facetedRows[item.index]) : facetedRows;
+  const spaceAbove = virtualise ? virtualItems[0]?.start ?? 0 : 0;
+  const spaceBelow = virtualise ? virtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1]?.end ?? 0) : 0;
+  const columnCount = visibleColumns.length + (selectable ? 1 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          value: state.search,
+          onChange: (event) => patch({ search: event.target.value }),
+          placeholder: searchPlaceholder,
+          "aria-label": searchPlaceholder,
+          className: "h-9 max-w-xs"
+        }
+      ),
+      facets.map((facet) => /* @__PURE__ */ jsxRuntime.jsx(
+        FacetFilter,
+        {
+          facet,
+          filter: state.filters[facet.key],
+          onChange: (filter) => setFilter(facet.key, filter)
+        },
+        facet.key
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ColumnPicker,
+        {
+          columns,
+          hidden,
+          onToggle: (key) => patch({
+            hidden: hidden.has(key) ? state.hidden.filter((k) => k !== key) : [...state.hidden, key]
+          })
+        }
+      ),
+      selectable && selected.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", role: "status", children: [
+        selected.size,
+        " s\xE9lectionn\xE9",
+        selected.size > 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: bodyRef,
+        className: cn("overflow-auto rounded-xl border bg-card", virtualise && "max-h-160"),
+        style: virtualise ? { maxHeight: VIRTUAL_VIEWPORT_PX } : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: virtualise ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                checked: allVisibleSelected,
+                onCheckedChange: toggleAll,
+                "aria-label": "Tout s\xE9lectionner"
+              }
+            ) }),
+            visibleColumns.map((column) => {
+              const label = typeof column.header === "string" ? column.header : column.key;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                TableHead,
+                {
+                  style: { width: widths[column.key] ?? column.width },
+                  className: cn("relative", column.align === "right" && "text-right"),
+                  "aria-sort": !column.sortable ? void 0 : state.sort?.key === column.key ? state.sort.direction === "asc" ? "ascending" : "descending" : "none",
+                  children: [
+                    column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => toggleSort(column.key),
+                        className: "inline-flex cursor-pointer items-center gap-1 hover:text-foreground",
+                        children: [
+                          column.header,
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            SortGlyph,
+                            {
+                              direction: state.sort?.key === column.key ? state.sort.direction : null
+                            }
+                          )
+                        ]
+                      }
+                    ) : column.header,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ResizeHandle,
+                      {
+                        label,
+                        onResize: (delta, from) => setWidths((current) => ({
+                          ...current,
+                          [column.key]: Math.max(MIN_COLUMN_WIDTH_PX, from + delta)
+                        }))
+                      }
+                    )
+                  ]
+                },
+                column.key
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: error ? /* @__PURE__ */ jsxRuntime.jsx(StatusRow, { colSpan: columnCount, tone: "error", children: error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonRows, { columns: columnCount }) : facetedRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(StatusRow, { colSpan: columnCount, children: empty }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            spaceAbove > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: spaceAbove } }),
+            renderedRows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
+              TableRow,
+              {
+                "data-state": selected.has(row.id) ? "selected" : void 0,
+                className: onRowClick ? "cursor-pointer" : "hover:bg-transparent",
+                onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+                children: [
+                  selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Checkbox,
+                    {
+                      checked: selected.has(row.id),
+                      onCheckedChange: () => toggleSelected(row.id),
+                      "aria-label": `S\xE9lectionner ${row.id}`
+                    }
+                  ) }),
+                  row.getVisibleCells().map((cell) => {
+                    const column = visibleColumns.find((c) => c.key === cell.column.id);
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      TableCell,
+                      {
+                        className: column?.align === "right" ? "text-right" : void 0,
+                        children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                      },
+                      cell.id
+                    );
+                  })
+                ]
+              },
+              row.id
+            )),
+            spaceBelow > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: spaceBelow } })
+          ] }) })
+        ] })
+      }
+    ),
+    pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          disabled: !pagination.hasPrevious,
+          onClick: pagination.onPrevious,
+          children: "Pr\xE9c\xE9dent"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          disabled: !pagination.hasNext,
+          onClick: pagination.onNext,
+          children: "Suivant"
+        }
+      )
+    ] })
+  ] });
+}
+function ResizeHandle({
+  label,
+  onResize
+}) {
+  const start = (event) => {
+    const header = event.currentTarget.parentElement;
+    if (!header) return;
+    const from = header.getBoundingClientRect().width;
+    const originX = event.clientX;
+    const move = (moveEvent) => onResize(moveEvent.clientX - originX, from);
+    const stop = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", stop);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", stop);
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-resize-handle": label,
+      onPointerDown: start,
+      className: "absolute inset-y-0 right-0 w-1 cursor-col-resize select-none hover:bg-border"
+    }
+  );
+}
+function SortGlyph({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[10px] leading-none", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" });
+}
+function StatusRow({
+  colSpan,
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(
+    TableCell,
+    {
+      colSpan,
+      className: cn(
+        "text-sm",
+        tone === "error" ? "text-status-blocked" : "text-muted-foreground"
+      ),
+      children
+    }
+  ) });
+}
+function SkeletonRows({ columns }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }, (_, row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columns }, (_2, cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, cell)) }, row)) });
+}
+var VALUELESS = /* @__PURE__ */ new Set(["empty", "nempty"]);
+var SINGLE_VALUE = /* @__PURE__ */ new Set([
+  "contains",
+  "ncontains",
+  "gt",
+  "lt",
+  "gte",
+  "lte"
+]);
+var OPERATOR_LABELS = {
+  eq: "est",
+  neq: "n'est pas",
+  contains: "contient",
+  ncontains: "ne contient pas",
+  gt: "sup\xE9rieur \xE0",
+  lt: "inf\xE9rieur \xE0",
+  gte: "sup\xE9rieur ou \xE9gal \xE0",
+  lte: "inf\xE9rieur ou \xE9gal \xE0",
+  empty: "est vide",
+  nempty: "n'est pas vide"
+};
+function isApplied(filter) {
+  if (!filter) return false;
+  return VALUELESS.has(filter.operator) || filter.values.length > 0;
+}
+function compare(value, bound) {
+  if (value === "" || bound === "") return null;
+  const boundNumber = Number(bound);
+  if (!Number.isNaN(boundNumber)) {
+    const valueNumber = Number(value);
+    return Number.isNaN(valueNumber) ? null : valueNumber - boundNumber;
+  }
+  const boundDate = Date.parse(bound);
+  if (!Number.isNaN(boundDate)) {
+    const valueDate = Date.parse(value);
+    return Number.isNaN(valueDate) ? null : valueDate - boundDate;
+  }
+  return value < bound ? -1 : value > bound ? 1 : 0;
+}
+function matches(raw, filter) {
+  const value = raw == null ? "" : String(raw);
+  const [bound = ""] = filter.values;
+  const ordering = compare(value, bound);
+  switch (filter.operator) {
+    case "eq":
+      return filter.values.includes(value);
+    case "neq":
+      return !filter.values.includes(value);
+    case "contains":
+      return value.toLowerCase().includes(bound.toLowerCase());
+    case "ncontains":
+      return !value.toLowerCase().includes(bound.toLowerCase());
+    case "gt":
+      return ordering !== null && ordering > 0;
+    case "lt":
+      return ordering !== null && ordering < 0;
+    case "gte":
+      return ordering !== null && ordering >= 0;
+    case "lte":
+      return ordering !== null && ordering <= 0;
+    case "empty":
+      return value === "";
+    case "nempty":
+      return value !== "";
+  }
+}
+function FacetFilter({
+  facet,
+  filter,
+  onChange
+}) {
+  const [open, setOpen] = React2__namespace.useState(false);
+  const operators = facet.operators ?? ["eq"];
+  const operator = filter?.operator ?? operators[0] ?? "eq";
+  const values = filter?.values ?? [];
+  const summary = !isApplied(filter) ? facet.label : VALUELESS.has(operator) ? `${facet.label} \xB7 ${OPERATOR_LABELS[operator]}` : `${facet.label} \xB7 ${values.length}`;
+  const setOperator = (next) => {
+    const sameKind = SINGLE_VALUE.has(next) === SINGLE_VALUE.has(operator);
+    onChange({
+      operator: next,
+      values: VALUELESS.has(next) || !sameKind ? [] : SINGLE_VALUE.has(next) ? values.slice(0, 1) : values
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover,
     {
       open,
       onOpenChange: setOpen,
-      trigger,
+      trigger: (
+        // Named for what it does: a chip reading just "Nom" tells a screen-reader
+        // user nothing, and collides with the sortable column header of that name.
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", "aria-label": `Filtrer par ${summary}`, children: summary })
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-56 flex-col gap-2", children: [
+        operators.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            value: operator,
+            "aria-label": `Op\xE9rateur \u2014 ${facet.label}`,
+            onValueChange: (next) => setOperator(next),
+            items: operators.map((candidate) => ({
+              value: candidate,
+              label: OPERATOR_LABELS[candidate]
+            }))
+          }
+        ),
+        VALUELESS.has(operator) ? null : SINGLE_VALUE.has(operator) || !facet.options ? /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            value: values[0] ?? "",
+            "aria-label": `Valeur \u2014 ${facet.label}`,
+            onChange: (event) => onChange({ operator, values: event.target.value ? [event.target.value] : [] })
+          }
+        ) : facet.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            checked: values.includes(option.value),
+            onCheckedChange: () => onChange({
+              operator,
+              values: values.includes(option.value) ? values.filter((v) => v !== option.value) : [...values, option.value]
+            }),
+            label: option.label ?? option.value
+          },
+          option.value
+        )),
+        isApplied(filter) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(null), children: "Effacer" })
+      ] })
+    }
+  );
+}
+function ColumnPicker({
+  columns,
+  hidden,
+  onToggle
+}) {
+  const [open, setOpen] = React2__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      align: "end",
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", children: "Colonnes" }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          checked: !hidden.has(column.key),
+          onCheckedChange: () => onToggle(column.key),
+          label: typeof column.header === "string" ? column.header : column.key
+        },
+        column.key
+      )) })
+    }
+  );
+}
+var PERIOD_PRESETS = [
+  { key: "today", label: "Aujourd'hui" },
+  { key: "yesterday", label: "Hier" },
+  { key: "last7", label: "7 derniers jours" },
+  { key: "last30", label: "30 derniers jours" },
+  { key: "last90", label: "90 derniers jours" },
+  { key: "thisMonth", label: "Mois en cours" },
+  { key: "lastMonth", label: "Mois dernier" },
+  { key: "thisQuarter", label: "Trimestre en cours" },
+  { key: "last12Months", label: "12 derniers mois" },
+  { key: "thisYear", label: "Ann\xE9e en cours" },
+  { key: "all", label: "Tout l'historique" }
+];
+var COMPARE_LABELS = {
+  none: "Aucune",
+  previous_period: "P\xE9riode pr\xE9c\xE9dente",
+  previous_year: "Ann\xE9e pr\xE9c\xE9dente",
+  custom: "Personnalis\xE9e"
+};
+var DAY_FORMAT = "yyyy-MM-dd";
+var toDay = (date) => dateFns.format(date, DAY_FORMAT);
+var fromDay = (day) => dateFns.parse(day, DAY_FORMAT, /* @__PURE__ */ new Date());
+var CALENDAR_UNIT = {
+  thisMonth: "month",
+  lastMonth: "month",
+  thisQuarter: "quarter",
+  thisYear: "year"
+};
+function presetRange(preset, today) {
+  const day = toDay(today);
+  switch (preset) {
+    case "today":
+      return { from: day, to: day };
+    case "yesterday": {
+      const yesterday = toDay(dateFns.subDays(today, 1));
+      return { from: yesterday, to: yesterday };
+    }
+    case "last7":
+      return { from: toDay(dateFns.subDays(today, 6)), to: day };
+    case "last30":
+      return { from: toDay(dateFns.subDays(today, 29)), to: day };
+    case "last90":
+      return { from: toDay(dateFns.subDays(today, 89)), to: day };
+    case "thisMonth":
+      return { from: toDay(dateFns.startOfMonth(today)), to: toDay(dateFns.endOfMonth(today)) };
+    case "lastMonth": {
+      const previous = dateFns.subMonths(today, 1);
+      return { from: toDay(dateFns.startOfMonth(previous)), to: toDay(dateFns.endOfMonth(previous)) };
+    }
+    case "thisQuarter":
+      return { from: toDay(dateFns.startOfQuarter(today)), to: toDay(dateFns.endOfQuarter(today)) };
+    case "last12Months":
+      return { from: toDay(dateFns.addDays(dateFns.subYears(today, 1), 1)), to: day };
+    case "thisYear":
+      return { from: toDay(dateFns.startOfYear(today)), to: toDay(dateFns.endOfYear(today)) };
+    case "all":
+      return { to: day };
+    case "custom":
+      return { from: day, to: day };
+  }
+}
+function comparisonRange(preset, range, compare2) {
+  if (compare2 === "none" || compare2 === "custom" || range.from === void 0) return void 0;
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  if (compare2 === "previous_year") {
+    return { from: toDay(dateFns.subYears(from, 1)), to: toDay(dateFns.subYears(to, 1)) };
+  }
+  const unit = CALENDAR_UNIT[preset];
+  if (unit === "month") {
+    const previous = dateFns.subMonths(from, 1);
+    return { from: toDay(dateFns.startOfMonth(previous)), to: toDay(dateFns.endOfMonth(previous)) };
+  }
+  if (unit === "quarter") {
+    const previous = dateFns.addQuarters(from, -1);
+    return { from: toDay(dateFns.startOfQuarter(previous)), to: toDay(dateFns.endOfQuarter(previous)) };
+  }
+  if (unit === "year") {
+    const previous = dateFns.subYears(from, 1);
+    return { from: toDay(dateFns.startOfYear(previous)), to: toDay(dateFns.endOfYear(previous)) };
+  }
+  const length = dateFns.differenceInCalendarDays(to, from) + 1;
+  return { from: toDay(dateFns.subDays(from, length)), to: toDay(dateFns.subDays(to, length)) };
+}
+function makePeriod(preset, range, compare2, customCompareRange) {
+  const resolved = compare2 === "custom" ? customCompareRange : comparisonRange(preset, range, compare2);
+  const effective = resolved === void 0 ? "none" : compare2;
+  return {
+    preset,
+    range,
+    compare: effective,
+    ...resolved ? { compareRange: resolved } : {}
+  };
+}
+function periodFromPreset(preset, today, compare2 = "none") {
+  return makePeriod(preset, presetRange(preset, today), compare2);
+}
+var MONTHS_ABBR = [
+  "janv.",
+  "f\xE9vr.",
+  "mars",
+  "avr.",
+  "mai",
+  "juin",
+  "juil.",
+  "ao\xFBt",
+  "sept.",
+  "oct.",
+  "nov.",
+  "d\xE9c."
+];
+var formatDay = (day) => {
+  const date = fromDay(day);
+  return `${date.getDate()} ${MONTHS_ABBR[date.getMonth()]} ${date.getFullYear()}`;
+};
+function formatRange(range) {
+  if (range.from === void 0) return `Jusqu'au ${formatDay(range.to)}`;
+  if (range.from === range.to) return formatDay(range.from);
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  if (from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth()) {
+    return `${from.getDate()} \u2013 ${to.getDate()} ${MONTHS_ABBR[to.getMonth()]} ${to.getFullYear()}`;
+  }
+  return `${formatDay(range.from)} \u2013 ${formatDay(range.to)}`;
+}
+function formatPeriod(value) {
+  const preset = PERIOD_PRESETS.find((entry) => entry.key === value.preset);
+  if (preset) return preset.label;
+  return isCompleteRange(value.range) ? formatRange(value.range) : "P\xE9riode";
+}
+var DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+var isDay = (value) => value !== void 0 && DAY_PATTERN.test(value);
+function isCompleteRange(range) {
+  return isDay(range.to) && (range.from === void 0 || isDay(range.from));
+}
+function spansTwoMonths(range) {
+  if (!isDay(range.from) || !isDay(range.to)) return false;
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  return from.getFullYear() !== to.getFullYear() || from.getMonth() !== to.getMonth();
+}
+function orderedRange(from, to) {
+  return from <= to ? { from, to } : { from: to, to: from };
+}
+var COMPARE_MODES = [
+  "none",
+  "previous_period",
+  "previous_year",
+  "custom"
+];
+var DAY_PICKER_CLASS_NAMES = {
+  // DayPicker renders its Nav as a sibling of the months, before them, so the
+  // arrows are positioned against this box rather than against a caption.
+  months: "relative flex gap-4",
+  month: "space-y-2",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-sm font-medium capitalize",
+  nav: "flex items-center justify-between absolute inset-x-0 h-8 px-1 pointer-events-none",
+  button_previous: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
+  button_next: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
+  chevron: "h-4 w-4 fill-current",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "w-9 text-xs font-normal text-muted-foreground",
+  week: "flex w-full",
+  day: "h-9 w-9 p-0 text-center text-sm",
+  day_button: "h-9 w-9 rounded-md transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  today: "font-semibold text-primary",
+  outside: "text-muted-foreground/50",
+  disabled: "opacity-40",
+  selected: "bg-primary/15",
+  range_start: "rounded-l-md bg-primary [&_button]:bg-primary [&_button]:text-primary-foreground",
+  range_end: "rounded-r-md bg-primary [&_button]:bg-primary [&_button]:text-primary-foreground",
+  range_middle: "bg-primary/15 [&_button]:hover:bg-primary/25"
+};
+var COMPARE_MODIFIER_CLASS = "bg-chart-2/25 ring-1 ring-inset ring-chart-2/40";
+function draftOf(value) {
+  return {
+    preset: value.preset,
+    // Anything that is not a day is "not chosen yet". The picker this replaced
+    // accepted `{ from: '', to: '' }` for exactly that, and its callers still do.
+    from: isDay(value.range.from) ? value.range.from : void 0,
+    to: isDay(value.range.to) ? value.range.to : void 0,
+    compare: value.compare,
+    compareFrom: value.compareRange?.from,
+    compareTo: value.compareRange?.to
+  };
+}
+function rangeOf(draft) {
+  if (!isDay(draft.to)) return null;
+  if (draft.preset === "all") return { to: draft.to };
+  if (!isDay(draft.from)) return null;
+  return { from: draft.from, to: draft.to };
+}
+function customCompareOf(draft) {
+  if (!isDay(draft.compareFrom) || !isDay(draft.compareTo)) return void 0;
+  return orderedRange(draft.compareFrom, draft.compareTo);
+}
+function previewCompare(draft) {
+  const range = rangeOf(draft);
+  if (!range) return void 0;
+  if (draft.compare === "custom") return customCompareOf(draft);
+  return comparisonRange(draft.preset, range, draft.compare);
+}
+function activeCompare(draft) {
+  return draft.preset === "all" ? "none" : draft.compare;
+}
+function anchorMonth(range) {
+  if (!range) return void 0;
+  if (isDay(range.from)) return fromDay(range.from);
+  return isDay(range.to) ? fromDay(range.to) : void 0;
+}
+function DateRangeCompare({
+  value,
+  onChange,
+  comparable = true,
+  presets = PERIOD_PRESETS,
+  align = "start",
+  disabled,
+  className
+}) {
+  const [open, setOpen] = React2__namespace.useState(false);
+  const [draft, setDraft] = React2__namespace.useState(() => draftOf(value));
+  const [month, setMonth] = React2__namespace.useState(void 0);
+  const [months, setMonths] = React2__namespace.useState(1);
+  const showRange = (range2) => {
+    setMonth(anchorMonth(range2));
+    setMonths(spansTwoMonths(range2) ? 2 : 1);
+  };
+  const openPanel = () => {
+    setDraft(draftOf(value));
+    showRange(value.range);
+    setOpen(true);
+  };
+  const pickPreset = (preset) => {
+    const resolved = periodFromPreset(preset, /* @__PURE__ */ new Date(), activeCompare(draft));
+    setDraft({
+      ...draftOf(resolved),
+      // The rail changes the period, not the comparison: the mode the user chose
+      // survives, and `activeCompare` decides whether it can apply here.
+      compare: draft.compare,
+      compareFrom: draft.compareFrom,
+      compareTo: draft.compareTo
+    });
+    showRange(resolved.range);
+  };
+  const pickDays = (selected) => {
+    setDraft({
+      ...draft,
+      preset: "custom",
+      from: selected?.from ? toDay(selected.from) : void 0,
+      to: selected?.to ? toDay(selected.to) : void 0
+    });
+  };
+  const range = rangeOf(draft);
+  const compareRange = previewCompare(draft);
+  const apply = () => {
+    if (!range) return;
+    onChange(makePeriod(draft.preset, range, activeCompare(draft), customCompareOf(draft)));
+    setOpen(false);
+  };
+  const selectedDays = isDay(draft.from) ? { from: fromDay(draft.from), to: isDay(draft.to) ? fromDay(draft.to) : void 0 } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => next ? openPanel() : setOpen(false),
       align,
-      className: cn("p-1", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", className: "flex flex-col", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      className: cn("w-auto p-0", className),
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", disabled, children: formatPeriod(value) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(PresetRail, { presets, selected: draft.preset, onSelect: pickPreset }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactDayPicker.DayPicker,
+            {
+              mode: "range",
+              locale: fr.fr,
+              weekStartsOn: 1,
+              numberOfMonths: months,
+              month,
+              onMonthChange: setMonth,
+              selected: selectedDays,
+              onSelect: pickDays,
+              modifiers: {
+                compare: compareRange?.from ? [{ from: fromDay(compareRange.from), to: fromDay(compareRange.to) }] : []
+              },
+              modifiersClassNames: { compare: COMPARE_MODIFIER_CLASS },
+              classNames: DAY_PICKER_CLASS_NAMES
+            }
+          ) }),
+          comparable && /* @__PURE__ */ jsxRuntime.jsx(
+            CompareSection,
+            {
+              draft,
+              compareRange,
+              onModeChange: (compare2) => setDraft({ ...draft, compare: compare2 }),
+              onCustomChange: (from, to) => setDraft({ ...draft, compareFrom: from, compareTo: to })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 border-t px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              range ? formatRange(range) : "Choisissez une date de fin",
+              compareRange && ` vs ${formatRange(compareRange)}`
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => setOpen(false), children: "Annuler" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: apply, disabled: !range, children: "Appliquer" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DateRangePicker({ value, onChange, className, disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DateRangeCompare,
+    {
+      value: { preset: "custom", range: value, compare: "none" },
+      onChange: (next) => {
+        if (next.range.from !== void 0) onChange({ from: next.range.from, to: next.range.to });
+      },
+      comparable: false,
+      presets: [],
+      disabled,
+      className
+    }
+  );
+}
+function PresetRail({
+  presets,
+  selected,
+  onSelect
+}) {
+  const refs = React2__namespace.useRef([]);
+  const activeIndex = Math.max(
+    0,
+    presets.findIndex((preset) => preset.key === selected)
+  );
+  const moveTo = (index) => {
+    const next = (index + presets.length) % presets.length;
+    refs.current[next]?.focus();
+    onSelect(presets[next].key);
+  };
+  const onKeyDown = (event, index) => {
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (step !== void 0) {
+      event.preventDefault();
+      moveTo(index + step);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      moveTo(event.key === "Home" ? 0 : presets.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "P\xE9riode pr\xE9d\xE9finie",
+      className: "flex w-44 shrink-0 flex-col gap-0.5 border-r p-2",
+      children: presets.map((preset, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
+          ref: (node) => {
+            refs.current[index] = node;
+          },
           type: "button",
-          role: "menuitem",
-          disabled: item.disabled,
+          role: "radio",
+          "aria-checked": preset.key === selected,
+          tabIndex: index === activeIndex ? 0 : -1,
+          onKeyDown: (event) => onKeyDown(event, index),
+          onClick: () => onSelect(preset.key),
           className: cn(
-            "cursor-pointer rounded px-2 py-1.5 text-left text-sm hover:bg-accent disabled:pointer-events-none disabled:opacity-50",
-            item.destructive && "text-destructive"
+            "rounded px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            preset.key === selected ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
           ),
-          onClick: () => {
-            setOpen(false);
-            item.onSelect();
-          },
-          children: item.label
+          children: preset.label
         },
-        i
-      )) })
+        preset.key
+      ))
     }
   );
 }
+function CompareSection({
+  draft,
+  compareRange,
+  onModeChange,
+  onCustomChange
+}) {
+  const derivable = draft.preset !== "all";
+  const active = activeCompare(draft);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 border-t px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Comparer \xE0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: COMPARE_MODES.map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active === mode,
+        disabled: mode !== "none" && !derivable,
+        onClick: () => onModeChange(mode),
+        className: cn(
+          "rounded-full border px-2.5 py-1 text-xs transition-colors disabled:opacity-40",
+          active === mode ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+        ),
+        children: COMPARE_LABELS[mode]
+      },
+      mode
+    )) }),
+    active === "custom" && // Two inputs rather than a second selection mode in the calendar: with
+    // one grid and two ranges to fill, nothing on screen would say which one
+    // a click is about to change.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": "D\xE9but de la comparaison",
+          value: draft.compareFrom ?? "",
+          max: draft.compareTo,
+          onChange: (event) => onCustomChange(event.target.value || void 0, draft.compareTo),
+          className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2192" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": "Fin de la comparaison",
+          value: draft.compareTo ?? "",
+          min: draft.compareFrom,
+          onChange: (event) => onCustomChange(draft.compareFrom, event.target.value || void 0),
+          className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm"
+        }
+      )
+    ] }),
+    compareRange && active !== "custom" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: formatRange(compareRange) })
+  ] });
+}
+var CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+var COMPARE_COLOR = CHART_COLORS[1];
+var colorAt = (index) => CHART_COLORS[index % CHART_COLORS.length];
+var formatNumber = (value) => new Intl.NumberFormat("fr-FR").format(Math.round(value));
+var ChartContext = React2__namespace.createContext({ formatValue: formatNumber });
+function ChartContainer({
+  children,
+  height = 320,
+  formatValue = formatNumber,
+  label,
+  className
+}) {
+  const context = React2__namespace.useMemo(() => ({ formatValue }), [formatValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "img",
+      "aria-label": label,
+      style: { height },
+      className: cn(
+        "w-full text-xs",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+        "[&_.recharts-cartesian-grid_line]:stroke-border",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
+        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/40",
+        "[&_.recharts-sector]:outline-none",
+        "[&_.recharts-surface]:outline-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children })
+    }
+  ) });
+}
+function ChartTooltipContent({
+  active,
+  payload,
+  label
+}) {
+  const { formatValue } = React2__namespace.useContext(ChartContext);
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border bg-card px-2.5 py-1.5 text-xs shadow-md", children: [
+    label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-2 w-2 shrink-0 rounded-[2px]",
+          style: { backgroundColor: entry.color }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: entry.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto font-medium tabular-nums text-foreground", children: typeof entry.value === "number" ? formatValue(entry.value) : entry.value })
+    ] }, `${entry.dataKey}-${index}`)) })
+  ] });
+}
+var ChartTooltip = /* @__PURE__ */ jsxRuntime.jsx(
+  recharts.Tooltip,
+  {
+    cursor: { strokeWidth: 1 },
+    content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, {}),
+    wrapperStyle: { outline: "none" }
+  }
+);
+function ChartLegendContent({ payload }) {
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", children: payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "h-2 w-2 shrink-0 rounded-[2px]",
+        style: { backgroundColor: entry.color }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: entry.value })
+  ] }, `${entry.dataKey}-${index}`)) });
+}
+var ChartLegend = /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) });
+var COMPARE_LINE_PROPS = {
+  stroke: COMPARE_COLOR,
+  strokeDasharray: "4 4",
+  strokeOpacity: 0.4,
+  strokeWidth: 2,
+  dot: false,
+  activeDot: false,
+  // Not a preference: Recharts animates `strokeDasharray` from `0px 0px`, so an
+  // animated comparison line is drawn solid and only becomes dashed once the
+  // animation ends. Off, it is dashed from the first frame — and a reference
+  // line that draws itself in is pulling the eye towards the thing meant to
+  // recede behind the real series anyway.
+  isAnimationActive: false
+};
+var AXIS_PROPS = {
+  tickLine: false,
+  axisLine: false,
+  tickMargin: 8
+};
+var MARK_PROPS = { isAnimationActive: false };
+function CartesianFrame({ x, formatValue }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: x, ...AXIS_PROPS }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS_PROPS, width: 56, tickFormatter: formatValue })
+  ] });
+}
+function accessibleLabel(series, label) {
+  return label ?? series.map((entry) => entry.label).join(", ");
+}
+function showsLegend(props) {
+  if (props.hideLegend) return false;
+  return props.series.length > 1 || props.compareSeries !== void 0;
+}
+function BarChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            dataKey: entry.key,
+            name: entry.label,
+            fill: colorAt(entry.colorIndex ?? index),
+            radius: [4, 4, 0, 0],
+            ...MARK_PROPS
+          },
+          entry.key
+        )),
+        compareSeries && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            fill: COMPARE_LINE_PROPS.stroke,
+            fillOpacity: COMPARE_LINE_PROPS.strokeOpacity,
+            radius: [4, 4, 0, 0],
+            ...MARK_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function StackedBarChart(props) {
+  const { data, x, series, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            dataKey: entry.key,
+            name: entry.label,
+            stackId: "stack",
+            fill: colorAt(entry.colorIndex ?? index),
+            radius: 0,
+            ...MARK_PROPS
+          },
+          entry.key
+        ))
+      ] })
+    }
+  );
+}
+function LineChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            type: "monotone",
+            dataKey: entry.key,
+            name: entry.label,
+            stroke: colorAt(entry.colorIndex ?? index),
+            strokeWidth: 2,
+            dot: false,
+            ...MARK_PROPS
+          },
+          entry.key
+        )),
+        compareSeries && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            type: "monotone",
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            ...COMPARE_LINE_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function AreaChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => {
+          const color = colorAt(entry.colorIndex ?? index);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              type: "monotone",
+              dataKey: entry.key,
+              name: entry.label,
+              stroke: color,
+              strokeWidth: 2,
+              fill: color,
+              fillOpacity: 0.15,
+              ...MARK_PROPS
+            },
+            entry.key
+          );
+        }),
+        compareSeries && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Area,
+          {
+            type: "monotone",
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            fill: "none",
+            ...COMPARE_LINE_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function FunnelChart({
+  data,
+  formatValue = formatNumber,
+  height,
+  label,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartContainer,
+    {
+      height,
+      formatValue,
+      label: label ?? data.map((step) => step.label).join(", "),
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.FunnelChart, { children: [
+        ChartTooltip,
+        /* @__PURE__ */ jsxRuntime.jsxs(recharts.Funnel, { dataKey: "value", nameKey: "label", data, ...MARK_PROPS, children: [
+          data.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: colorAt(index) }, step.label)),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.LabelList,
+            {
+              dataKey: "label",
+              position: "right",
+              className: "fill-foreground",
+              stroke: "none",
+              fontSize: 12
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function relativeDelta(value, compareValue) {
+  if (compareValue === void 0 || compareValue === 0) return null;
+  return (value - compareValue) / Math.abs(compareValue);
+}
+var DELTA_FORMAT = new Intl.NumberFormat("fr-FR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero"
+});
+function KpiCard({
+  label,
+  value,
+  compareValue,
+  formatValue = formatNumber,
+  lowerIsBetter = false,
+  sparkline,
+  className
+}) {
+  const delta = relativeDelta(value, compareValue);
+  const improved = delta === null ? null : delta > 0 !== lowerIsBetter;
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-1 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-semibold tabular-nums text-foreground", children: formatValue(value) }),
+    delta !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: cn(
+          "text-xs font-medium tabular-nums",
+          // Direction is in the sign as well as the colour: a red figure and
+          // a green one differ by more than hue for nobody who cannot see it.
+          improved ? "text-status-success" : "text-status-blocked"
+        ),
+        children: [
+          DELTA_FORMAT.format(delta),
+          compareValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 font-normal text-muted-foreground", children: [
+            "vs ",
+            formatValue(compareValue)
+          ] })
+        ]
+      }
+    ),
+    sparkline && sparkline.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height: 40, label: `Tendance \u2014 ${label}`, className: "pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.LineChart, { data: sparkline.map((point, index) => ({ index, point })), children: /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Line,
+      {
+        type: "monotone",
+        dataKey: "point",
+        stroke: colorAt(0),
+        strokeWidth: 1.5,
+        dot: false,
+        ...MARK_PROPS
+      }
+    ) }) })
+  ] }) });
+}
+var ToastContext = React2.createContext(null);
+function useToast() {
+  const toast = React2.useContext(ToastContext);
+  if (!toast) throw new Error("useToast must be used within ToastProvider");
+  return toast;
+}
+var TOAST_TTL_MS = 4e3;
+var TONE = {
+  success: "border-l-status-success",
+  error: "border-l-status-blocked",
+  info: "border-l-status-info"
+};
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React2.useState([]);
+  const nextId = React2.useRef(0);
+  const toast = React2.useCallback((input) => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { id, ...input }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), TOAST_TTL_MS);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: toast, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 flex-col gap-2", children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "status",
+        className: cn(
+          "pointer-events-auto rounded-lg border border-l-4 bg-card px-4 py-3 text-foreground shadow-md",
+          TONE[t.variant ?? "success"]
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: t.title }),
+          t.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 break-all text-xs text-muted-foreground", children: t.description })
+        ]
+      },
+      t.id
+    )) })
+  ] });
+}
+var SIDES = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1.5",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1.5"
+};
+function Tooltip2({ label, children, side = "top", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group/tt relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        className: cn(
+          "pointer-events-none absolute z-50 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background opacity-0 shadow-md transition-opacity group-hover/tt:opacity-100",
+          SIDES[side],
+          className
+        ),
+        children: label
+      }
+    )
+  ] });
+}
 
 exports.AppApiProvider = AppApiProvider;
 exports.AppContextProvider = AppContextProvider;
 exports.AppInvokeError = AppInvokeError;
+exports.AreaChart = AreaChart;
 exports.Badge = Badge;
+exports.BarChart = BarChart;
 exports.Button = Button;
+exports.COMPARE_LABELS = COMPARE_LABELS;
 exports.Card = Card;
 exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.CopyButton = CopyButton;
+exports.DataTable = DataTable;
+exports.DateRangeCompare = DateRangeCompare;
 exports.DateRangePicker = DateRangePicker;
 exports.DropdownMenu = DropdownMenu;
+exports.FunnelChart = FunnelChart;
 exports.Input = Input;
+exports.KpiCard = KpiCard;
+exports.LineChart = LineChart;
 exports.Link = Link;
 exports.Modal = Modal;
+exports.PERIOD_PRESETS = PERIOD_PRESETS;
 exports.Popover = Popover;
 exports.Select = Select;
 exports.SidePanel = SidePanel;
 exports.Spinner = Spinner;
+exports.StackedBarChart = StackedBarChart;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -908,15 +2267,26 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip2;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
 exports.cn = cn;
+exports.comparisonRange = comparisonRange;
 exports.copyToClipboard = copyToClipboard;
 exports.downloadBlob = downloadBlob;
 exports.downloadCsv = downloadCsv;
+exports.formatPeriod = formatPeriod;
+exports.formatRange = formatRange;
+exports.makePeriod = makePeriod;
+exports.periodFromPreset = periodFromPreset;
+exports.relativeDelta = relativeDelta;
 exports.toCsv = toCsv;
 exports.useAppApi = useAppApi;
 exports.useAppContext = useAppContext;
 exports.useAppRun = useAppRun;
 exports.useAppRuns = useAppRuns;
 exports.useAppSettings = useAppSettings;
+exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map