@adhese/sdk-devtools 0.6.3 → 0.6.4

package/dist/devtools-B63USM72.js

@@ -0,0 +1,842 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { forwardRef, useState, useEffect, useMemo, Fragment, useCallback, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import upperFirst from "lodash/upperFirst";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as LabelPrimitive from "@radix-ui/react-label";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function setCooke({
+  key,
+  value,
+  expires,
+  path,
+  samesite,
+  secure
+}) {
+  document.cookie = `${key}=${value}; ${expires ? `expires=${expires.toString()};` : ""} ${path ? `path=${path};` : ""} ${samesite ? `samesite=${samesite};` : ""} ${secure ? `secure=${secure};` : ""}`;
+}
+function deleteCookie(key) {
+  document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+function getCookie(key) {
+  const cookies = document.cookie.split(";");
+  for (const cookie of cookies) {
+    const [cookieKey2, cookieValue] = cookie.split("=");
+    if (cookieKey2.trim() === key)
+      return cookieValue;
+  }
+  return "";
+}
+function hasCookie(key) {
+  return document.cookie.includes(`${key}=`);
+}
+const Table = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-6 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-[calc(100vw-16rem)]"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+const SheetContent = forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+function SheetHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+SheetHeader.displayName = "SheetHeader";
+const SheetTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+const slotStatus = {
+  unloaded: "Waiting to load",
+  loaded: "Ready to render",
+  rendered: "Rendered"
+};
+const slotIndexBadgeClasses = [
+  "bg-blue-500 hover:bg-blue-500",
+  "bg-amber-500 hover:bg-amber-500",
+  "bg-green-500 hover:bg-green-500",
+  "bg-red-500 hover:bg-red-500",
+  "bg-purple-500 hover:bg-purple-500",
+  "bg-cyan-500 hover:bg-cyan-500",
+  "bg-pink-500 hover:bg-pink-500"
+];
+function SlotsTable({ adheseContext }) {
+  const [slots, setSlots] = useState([]);
+  useEffect(() => {
+    var _a, _b;
+    function onSlotsChange(newSlots) {
+      setSlots(newSlots);
+    }
+    (_a = adheseContext.events) == null ? void 0 : _a.changeSlots.addListener(onSlotsChange);
+    onSlotsChange(((_b = adheseContext.getAll) == null ? void 0 : _b.call(adheseContext)) ?? []);
+    return () => {
+      var _a2;
+      (_a2 = adheseContext.events) == null ? void 0 : _a2.changeSlots.removeListener(onSlotsChange);
+    };
+  }, []);
+  const formattedSlots = useMemo(() => slots.map((slot) => {
+    const ad = slot.ad.value;
+    const iframe = slot.getElement();
+    let status = "unloaded";
+    if (iframe)
+      status = "rendered";
+    else if (ad)
+      status = "loaded";
+    return {
+      ...slot,
+      name: slot.name.value,
+      ad,
+      status,
+      format: slot.format.value,
+      iframe,
+      parameters: Array.from(slot.parameters.entries())
+    };
+  }), [slots]);
+  const slotParametersExist = formattedSlots.some((formattedSlot) => formattedSlot.parameters.length > 0);
+  const previewExist = formattedSlots.some((formattedSlot) => {
+    var _a;
+    return (_a = formattedSlot.ad) == null ? void 0 : _a.preview;
+  });
+  const origins = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const slot of formattedSlots) {
+      const { ad } = slot;
+      if (ad)
+        set.add(ad.origin);
+    }
+    return Array.from(set);
+  }, [formattedSlots]);
+  return formattedSlots.length > 0 ? /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: "Name" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Format" }),
+      origins.length > 1 && /* @__PURE__ */ jsx(TableHead, { children: "Origin" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Location" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Render Status" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Campaign ID" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Booking ID" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Creative ID" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Traffic ID" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Creative type" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Viewability tracked" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Impression tracked" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Element" }),
+      slotParametersExist && /* @__PURE__ */ jsx(TableHead, { children: "Parameters" }),
+      previewExist && /* @__PURE__ */ jsx(TableHead, { children: "Preview" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: formattedSlots.map(({
+      ad,
+      name,
+      format,
+      location,
+      status,
+      isViewabilityTracked,
+      isImpressionTracked,
+      iframe,
+      parameters
+    }, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { id: name, children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsx(Badge, { className: cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], "text-white"), children: name }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: !(ad == null ? void 0 : ad.adFormat) || (ad == null ? void 0 : ad.adFormat) === format ? format : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx("del", { className: "text-red-300 italic", children: format }),
+          /* @__PURE__ */ jsx("ins", { className: "no-underline text-green-700", children: ad == null ? void 0 : ad.adFormat })
+        ] }) }),
+        origins.length > 1 && /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.origin) && /* @__PURE__ */ jsx(Badge, { className: cn(slotIndexBadgeClasses[origins.indexOf(ad.origin) % slotIndexBadgeClasses.length], "text-white"), children: upperFirst(ad.origin.toLowerCase()) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: location }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: cn({
+              unloaded: "bg-secondary text-secondary-foreground hover:bg-secondary",
+              loaded: "bg-blue-100 text-blue-900 hover:bg-blue-100",
+              rendered: "bg-green-100 text-green-900 hover:bg-green-100"
+            }[status]),
+            children: slotStatus[status]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.orderId) && (ad == null ? void 0 : ad.orderId) !== "0" ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${ad.orderId}`,
+            target: "_blank",
+            referrerPolicy: "no-referrer",
+            className: cn(buttonVariants({
+              variant: "ghost",
+              size: "sm"
+            })),
+            children: ad.orderId
+          }
+        ) : "-" }),
+        /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.adspaceId) && (ad == null ? void 0 : ad.adspaceId) !== "0" ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${ad.adspaceId}/${ad.orderId}`,
+            target: "_blank",
+            referrerPolicy: "no-referrer",
+            className: cn(buttonVariants({
+              variant: "ghost",
+              size: "sm"
+            })),
+            children: ad.adspaceId
+          }
+        ) : "-" }),
+        /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.libId) && (ad == null ? void 0 : ad.orderId) !== "0" ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${ad.libId}/${ad.orderId}`,
+            target: "_blank",
+            referrerPolicy: "no-referrer",
+            className: cn(buttonVariants({
+              variant: "ghost",
+              size: "sm"
+            })),
+            children: ad.libId
+          }
+        ) : "-" }),
+        /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.id) ?? "-" }),
+        /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.ext) ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: ad.ext }) : "-" }),
+        /* @__PURE__ */ jsx(TableCell, { children: isViewabilityTracked.value ? /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-900 hover:bg-green-100", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "No" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: isImpressionTracked.value ? /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-900 hover:bg-green-100", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "No" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            disabled: !iframe,
+            onClick: () => {
+              if (iframe) {
+                iframe.scrollIntoView();
+                iframe.style.outline = "solid 5px red";
+                setTimeout(() => {
+                  iframe.style.outline = "";
+                }, 1e3);
+              }
+            },
+            children: "Go to element"
+          }
+        ) }),
+        slotParametersExist && /* @__PURE__ */ jsx(TableCell, { children: parameters.length > 0 && /* @__PURE__ */ jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsx(
+            SheetTrigger,
+            {
+              className: buttonVariants({
+                variant: "secondary",
+                size: "sm"
+              }),
+              children: "Show"
+            }
+          ),
+          /* @__PURE__ */ jsxs(SheetContent, { className: "bg-white flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Parameters" }) }),
+            /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { children: "Key" }),
+                /* @__PURE__ */ jsx(TableHead, { children: "Value" })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: parameters.map(([parameterName, value]) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameterName }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: Array.isArray(value) ? /* @__PURE__ */ jsx("ul", { className: "flex gap-1", children: value.map((item, paramIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item }) }, paramIndex)) }) : /* @__PURE__ */ jsx(Badge, { variant: "outline", children: value }) })
+              ] }, parameterName)) })
+            ] })
+          ] })
+        ] }) }),
+        previewExist && /* @__PURE__ */ jsx(TableCell, { children: (ad == null ? void 0 : ad.preview) && /* @__PURE__ */ jsx(Badge, { className: "bg-amber-400 text-amber-950 hover:bg-amber-400", children: "PREVIEW" }) })
+      ] }),
+      (iframe == null ? void 0 : iframe.parentElement) && createPortal(
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-1 flex gap-2 items-start", children: [
+          /* @__PURE__ */ jsx(Badge, { className: cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], "text-white"), children: name }),
+          (ad == null ? void 0 : ad.preview) && /* @__PURE__ */ jsx(Badge, { className: "bg-amber-400 text-amber-950 hover:bg-amber-400", children: "PREVIEW" })
+        ] }),
+        iframe.parentElement
+      )
+    ] }, name)) })
+  ] }) : /* @__PURE__ */ jsx("p", { children: "No slots available" });
+}
+const Tabs = TabsPrimitive.Root;
+const TabsList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  fractionalSecondDigits: 3,
+  hour12: false
+});
+const logTableRowClasses = {
+  error: "bg-red-100 text-red-900",
+  warn: "bg-amber-100 text-amber-900"
+};
+const logBadgeClasses = {
+  error: "bg-red-500 text-white",
+  warn: "bg-amber-500 text-white",
+  info: "bg-blue-500 text-white"
+};
+function LogTable({
+  adheseContext
+}) {
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    function onLogsChange() {
+      setLogs(
+        adheseContext.logger.getLogs().toSorted(
+          (a, b) => b.timestamp - a.timestamp
+        )
+      );
+    }
+    adheseContext.logger.events.log.addListener(onLogsChange);
+    onLogsChange();
+    return () => {
+      adheseContext.logger.events.log.removeListener(onLogsChange);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: "Time" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Scope" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Level" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Message" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Attributes" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: logs.map((log) => /* @__PURE__ */ jsxs(TableRow, { className: logTableRowClasses[log.level] ?? "", children: [
+      /* @__PURE__ */ jsx(TableCell, { children: dateFormatter.format(new Date(log.timestamp)) }),
+      /* @__PURE__ */ jsx(TableCell, { children: log.scope }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "secondary",
+          className: logBadgeClasses[log.level] ?? "",
+          children: upperFirst(log.level)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TableCell, { children: log.message }),
+      /* @__PURE__ */ jsx(TableCell, { children: Boolean(log.attributes) && /* @__PURE__ */ jsxs(Sheet, { children: [
+        /* @__PURE__ */ jsx(
+          SheetTrigger,
+          {
+            className: buttonVariants({
+              variant: "secondary",
+              size: "sm"
+            }),
+            children: "Show"
+          }
+        ),
+        /* @__PURE__ */ jsxs(SheetContent, { className: "bg-white flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Attributes" }) }),
+          /* @__PURE__ */ jsx("pre", { className: "p-4 bg-accent overflow-auto max-h-full text-sm rounded-md", children: JSON.stringify(log.attributes, null, 2) })
+        ] })
+      ] }) })
+    ] }, log.id)) })
+  ] });
+}
+function ParametersTable({
+  adheseContext
+}) {
+  const [parameters, setParameters] = useState([]);
+  useEffect(() => {
+    var _a;
+    function onParametersChange() {
+      var _a2;
+      setParameters(Array.from(((_a2 = adheseContext.parameters) == null ? void 0 : _a2.entries()) ?? []).map(([name, value]) => ({
+        name,
+        value
+      })).toSorted((a, b) => a.name.localeCompare(b.name)));
+    }
+    (_a = adheseContext.events) == null ? void 0 : _a.parametersChange.addListener(onParametersChange);
+    onParametersChange();
+    return () => {
+      var _a2;
+      (_a2 = adheseContext.events) == null ? void 0 : _a2.parametersChange.removeListener(onParametersChange);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: "Parameter" }),
+      /* @__PURE__ */ jsx(TableHead, { children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: parameters.map((parameter) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameter.name }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: Array.isArray(parameter.value) ? /* @__PURE__ */ jsx("ul", { className: "flex gap-1", children: parameter.value.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item }) }, index)) }) : /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameter.value }) })
+    ] }, parameter.name)) })
+  ] });
+}
+const Switch = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+const Input = forwardRef(
+  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+const cookieKey = "debugKey";
+function setDebugCookie(value) {
+  setCooke({
+    key: cookieKey,
+    value,
+    expires: new Date(Date.now() + 24 * 60 * 60 * 1e3)
+  });
+}
+function simpleStringify(value) {
+  if (typeof value === "object")
+    return Object.values(value).map((nestedValue) => `${simpleStringify(nestedValue)}`).join("");
+  if (typeof value === "boolean")
+    return value ? "1" : "0";
+  return String(value);
+}
+function FronttailSettings({
+  adheseContext,
+  className,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const autoGeneratedKey = useMemo(() => `adhese-${adheseContext.options.account}-${btoa(simpleStringify(adheseContext.options)).slice(0, 20)}`, [adheseContext.options]);
+  const [fronttailDebugKey, setFronttailDebugKey] = useState(hasCookie(cookieKey) ? getCookie(cookieKey) : autoGeneratedKey);
+  const [isFronttailEnabled, setIsFronttailEnabled] = useState(hasCookie(cookieKey));
+  const onFronttailDebugKeyChange = useCallback((event) => {
+    const { value } = event.target;
+    setFronttailDebugKey(value);
+    if (isFronttailEnabled && value.length > 4)
+      setDebugCookie(value);
+  }, [setDebugCookie, isFronttailEnabled]);
+  const onFrontailEnabledChange = useCallback(() => {
+    setIsFronttailEnabled((value) => {
+      if (value)
+        deleteCookie(cookieKey);
+      else
+        setDebugCookie(fronttailDebugKey);
+      return !value;
+    });
+  }, [setDebugCookie, fronttailDebugKey]);
+  const id = useId();
+  return /* @__PURE__ */ jsxs("section", { className: cn("flex flex-col gap-6", className), "aria-labelledby": ariaLabelledBy ?? `fronttailHeading${id}`, ...props, children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: `fronttailHeading${id}`, children: "Fronttail settings" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Switch, { checked: isFronttailEnabled, onCheckedChange: onFrontailEnabledChange, id: `fronttailSwitch${id}` }),
+      /* @__PURE__ */ jsxs(Label, { htmlFor: `fronttailSwitch${id}`, children: [
+        "Enable Fronttail debugging",
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-normal", children: " – Cookie will expire automatically in 1 day" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: `fronttailDebugKey${id}`, children: "Debug key" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `fronttailDebugKey${id}`,
+            value: fronttailDebugKey,
+            onChange: onFronttailDebugKeyChange,
+            className: cn("max-w-60", {
+              // eslint-disable-next-line ts/naming-convention
+              "border-destructive": fronttailDebugKey.length < 4
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => {
+              setFronttailDebugKey(autoGeneratedKey);
+              if (isFronttailEnabled)
+                setDebugCookie(autoGeneratedKey);
+            },
+            children: "Auto generate key"
+          }
+        )
+      ] }),
+      fronttailDebugKey.length < 4 && /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: "Debug key must contain at least 4 characters" })
+    ] })
+  ] });
+}
+const settingClasses = "border-solid border-b-2 border-accent pb-8 mb-8 last:mb-0 last:pb-0 last:border-0";
+function Settings({
+  adheseContext
+}) {
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FronttailSettings, { adheseContext, className: settingClasses }) });
+}
+function PreviewButton() {
+  return /* @__PURE__ */ jsx(Fragment$1, { children: window.location.search.includes("adhesePreviewCreativeId") && /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => {
+        const currentUrl = new URL(window.location.href);
+        window.location.replace(`${currentUrl.origin}${currentUrl.pathname === "/" ? "" : currentUrl.pathname}`);
+      },
+      variant: "secondary",
+      children: "Disable preview mode"
+    }
+  ) });
+}
+function Devtools({ adheseContext }) {
+  const [spacing, setSpacing] = useState(0);
+  const appRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    let resizeObserver;
+    if (isOpen) {
+      resizeObserver = new ResizeObserver(
+        ([entry]) => {
+          setSpacing(entry.target.getBoundingClientRect().height);
+        }
+      );
+      if (appRef.current)
+        resizeObserver.observe(appRef.current);
+    }
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx("div", { className: "adhese-devtools", children: isOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: "fixed bottom-0 w-full border-t-2 border-t-accent bg-background shadow-lg overflow-auto",
+        ref: appRef,
+        "aria-label": "Adhese Devtools",
+        children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "slots", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between  p-4", children: [
+            /* @__PURE__ */ jsxs(TabsList, { children: [
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "slots", children: "Slots" }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: "Logs" }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "parameters", children: "Parameters" }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", children: "Settings" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(PreviewButton, {}),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: setIsOpen.bind(null, false),
+                  children: "Close"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "overflow-auto max-h-96 border-t-2 border-t-accent p-4", children: [
+            /* @__PURE__ */ jsx(TabsContent, { value: "slots", children: /* @__PURE__ */ jsx(SlotsTable, { adheseContext }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "logs", children: /* @__PURE__ */ jsx(LogTable, { adheseContext }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "parameters", children: /* @__PURE__ */ jsx(ParametersTable, { adheseContext }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "settings", children: /* @__PURE__ */ jsx(Settings, { adheseContext }) })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          height: spacing
+        }
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Button, { onClick: setIsOpen.bind(null, true), children: "Open Adhese Devtools" }),
+    /* @__PURE__ */ jsx(PreviewButton, {})
+  ] }) });
+}
+const Devtools$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Devtools
+}, Symbol.toStringTag, { value: "Module" }));
+function createAdheseDevtools(element, context) {
+  const root = createRoot(element);
+  root.render(/* @__PURE__ */ jsx(Devtools, { adheseContext: context }));
+  return () => {
+    root.unmount();
+  };
+}
+const main = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createAdheseDevtools
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Devtools$1 as D,
+  main as m
+};
+//# sourceMappingURL=devtools-B63USM72.js.map