@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/universal-banner/banner-block.mjs

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "@thorprovider/blocks";
+import { Banner } from "./banner.mjs";
+import { BannerCarousel } from "./carousel.mjs";
+import { fillTemplate } from "./format.mjs";
+import { BannerGrid } from "./grid.mjs";
+import { resolveLayout } from "./presets.mjs";
+import { resolveBlockBanners, resolveBlockState } from "./resolve.mjs";
+import { StoryCarousel } from "./story-carousel.mjs";
+import { useContainerWidth } from "./use-container-width.mjs";
+function BannerBlock({ campaign, config, now, copy, router, analytics, className }) {
+  const rootRef = useRef(null);
+  const { breakpoint } = useContainerWidth(rootRef);
+  const resolution = resolveBlockBanners(campaign, config, now);
+  const state = resolveBlockState(campaign, config, now);
+  const renderBanner = (banner, index, fillHeight = false, maxHeight = config.layout.maxHeight) => /* @__PURE__ */ jsx(
+    Banner,
+    {
+      banner,
+      blockId: config.blockId,
+      campaignId: campaign.campaignId,
+      breakpoint,
+      responsiveEnabled: config.responsiveEnabled,
+      router,
+      analytics,
+      priority: index === 0,
+      fillHeight,
+      maxHeight
+    },
+    banner.id
+  );
+  const layout = resolveLayout(config.preset, resolution.active.length, {
+    columns: config.layout.columns,
+    spans: config.layout.spans
+  });
+  const body = () => {
+    if (state !== "ready") {
+      return /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-dashed bg-muted/40 p-4 text-sm text-muted-foreground", children: state === "empty" ? config.rules.emptyLabel : config.rules.inactiveLabel });
+    }
+    if (config.presentation === "single") {
+      const first = resolution.active[0];
+      return first ? renderBanner(first, 0) : null;
+    }
+    if (config.carousel.story && breakpoint === "base") {
+      return /* @__PURE__ */ jsx(
+        StoryCarousel,
+        {
+          banners: resolution.active,
+          copy,
+          renderBanner: (banner, fillHeight) => renderBanner(banner, 0, fillHeight, "none")
+        }
+      );
+    }
+    const asCarousel = config.presentation === "carousel" || config.carousel.carouselOnMobile && breakpoint === "base";
+    if (asCarousel) {
+      return /* @__PURE__ */ jsx(
+        BannerCarousel,
+        {
+          banners: resolution.active,
+          options: config.carousel,
+          breakpoint,
+          copy,
+          slideHeight: config.layout.maxHeight,
+          renderBanner: (banner, fillHeight) => renderBanner(banner, 0, fillHeight)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(BannerGrid, { layout, config: config.layout, children: resolution.active.map((banner, index) => renderBanner(banner, index, true)) });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("@container w-full", className), children: [
+    body(),
+    resolution.dangling.length > 0 ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: fillTemplate(config.rules.danglingLabel, { ids: resolution.dangling.join(", ") }) }) : null
+  ] });
+}
+export {
+  BannerBlock
+};
+//# sourceMappingURL=banner-block.mjs.map

package/dist/blocks/designs/universal-banner/banner-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/banner-block.tsx"],"sourcesContent":["'use client'\n\nimport { useRef } from 'react'\n\nimport { cn } from '@thorprovider/blocks'\n\nimport type { BannerAnalytics } from './analytics'\nimport { Banner } from './banner'\nimport { BannerCarousel } from './carousel'\nimport type { BannerCopy } from './carousel'\nimport type { BannerBlockConfig, BannerCampaign, BannerRecord, MaxHeightToken } from './contracts'\nimport { fillTemplate } from './format'\nimport { BannerGrid } from './grid'\nimport type { BannerRouter } from './links'\nimport { resolveLayout } from './presets'\nimport { resolveBlockBanners, resolveBlockState } from './resolve'\nimport { StoryCarousel } from './story-carousel'\nimport { useContainerWidth } from './use-container-width'\n\nexport type BannerBlockProps = {\n  campaign: BannerCampaign\n  config: BannerBlockConfig\n  now: Date\n  copy: BannerCopy\n  router?: BannerRouter\n  analytics?: BannerAnalytics\n  className?: string\n}\n\n/**\n * Orchestrates one composition: it owns the container context, resolves the\n * campaign refs, filters inactive banners and picks the presentation. It is the\n * only component that reads the block config.\n */\nexport function BannerBlock({ campaign, config, now, copy, router, analytics, className }: BannerBlockProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const { breakpoint } = useContainerWidth(rootRef)\n\n  const resolution = resolveBlockBanners(campaign, config, now)\n  const state = resolveBlockState(campaign, config, now)\n\n  const renderBanner = (\n    banner: BannerRecord,\n    index: number,\n    fillHeight = false,\n    maxHeight: MaxHeightToken = config.layout.maxHeight,\n  ) => (\n    <Banner\n      key={banner.id}\n      banner={banner}\n      blockId={config.blockId}\n      campaignId={campaign.campaignId}\n      breakpoint={breakpoint}\n      responsiveEnabled={config.responsiveEnabled}\n      router={router}\n      analytics={analytics}\n      priority={index === 0}\n      fillHeight={fillHeight}\n      maxHeight={maxHeight}\n    />\n  )\n\n  const layout = resolveLayout(config.preset, resolution.active.length, {\n    columns: config.layout.columns,\n    spans: config.layout.spans,\n  })\n\n  const body = () => {\n    if (state !== 'ready') {\n      return (\n        <p className=\"rounded-lg border border-dashed bg-muted/40 p-4 text-sm text-muted-foreground\">\n          {state === 'empty' ? config.rules.emptyLabel : config.rules.inactiveLabel}\n        </p>\n      )\n    }\n\n    if (config.presentation === 'single') {\n      const first = resolution.active[0]\n      return first ? renderBanner(first, 0) : null\n    }\n\n    if (config.carousel.story && breakpoint === 'base') {\n      return (\n        <StoryCarousel\n          banners={resolution.active}\n          copy={copy}\n          renderBanner={(banner, fillHeight) => renderBanner(banner, 0, fillHeight, 'none')}\n        />\n      )\n    }\n\n    const asCarousel =\n      config.presentation === 'carousel' || (config.carousel.carouselOnMobile && breakpoint === 'base')\n\n    if (asCarousel) {\n      return (\n        <BannerCarousel\n          banners={resolution.active}\n          options={config.carousel}\n          breakpoint={breakpoint}\n          copy={copy}\n          slideHeight={config.layout.maxHeight}\n          renderBanner={(banner, fillHeight) => renderBanner(banner, 0, fillHeight)}\n        />\n      )\n    }\n\n    return (\n      <BannerGrid layout={layout} config={config.layout}>\n        {resolution.active.map((banner, index) => renderBanner(banner, index, true))}\n      </BannerGrid>\n    )\n  }\n\n  return (\n    <div ref={rootRef} className={cn('@container w-full', className)}>\n      {body()}\n      {resolution.dangling.length > 0 ? (\n        <p className=\"mt-2 text-xs text-muted-foreground\">\n          {fillTemplate(config.rules.danglingLabel, { ids: resolution.dangling.join(', ') })}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";AA+CI,cAoEA,YApEA;AA7CJ,SAAS,cAAc;AAEvB,SAAS,UAAU;AAGnB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAG/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB,yBAAyB;AACvD,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAiB3B,SAAS,YAAY,EAAE,UAAU,QAAQ,KAAK,MAAM,QAAQ,WAAW,UAAU,GAAqB;AAC3G,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,EAAE,WAAW,IAAI,kBAAkB,OAAO;AAEhD,QAAM,aAAa,oBAAoB,UAAU,QAAQ,GAAG;AAC5D,QAAM,QAAQ,kBAAkB,UAAU,QAAQ,GAAG;AAErD,QAAM,eAAe,CACnB,QACA,OACA,aAAa,OACb,YAA4B,OAAO,OAAO,cAE1C;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,SAAS,OAAO;AAAA,MAChB,YAAY,SAAS;AAAA,MACrB;AAAA,MACA,mBAAmB,OAAO;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,UAAU,UAAU;AAAA,MACpB;AAAA,MACA;AAAA;AAAA,IAVK,OAAO;AAAA,EAWd;AAGF,QAAM,SAAS,cAAc,OAAO,QAAQ,WAAW,OAAO,QAAQ;AAAA,IACpE,SAAS,OAAO,OAAO;AAAA,IACvB,OAAO,OAAO,OAAO;AAAA,EACvB,CAAC;AAED,QAAM,OAAO,MAAM;AACjB,QAAI,UAAU,SAAS;AACrB,aACE,oBAAC,OAAE,WAAU,iFACV,oBAAU,UAAU,OAAO,MAAM,aAAa,OAAO,MAAM,eAC9D;AAAA,IAEJ;AAEA,QAAI,OAAO,iBAAiB,UAAU;AACpC,YAAM,QAAQ,WAAW,OAAO,CAAC;AACjC,aAAO,QAAQ,aAAa,OAAO,CAAC,IAAI;AAAA,IAC1C;AAEA,QAAI,OAAO,SAAS,SAAS,eAAe,QAAQ;AAClD,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,WAAW;AAAA,UACpB;AAAA,UACA,cAAc,CAAC,QAAQ,eAAe,aAAa,QAAQ,GAAG,YAAY,MAAM;AAAA;AAAA,MAClF;AAAA,IAEJ;AAEA,UAAM,aACJ,OAAO,iBAAiB,cAAe,OAAO,SAAS,oBAAoB,eAAe;AAE5F,QAAI,YAAY;AACd,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,WAAW;AAAA,UACpB,SAAS,OAAO;AAAA,UAChB;AAAA,UACA;AAAA,UACA,aAAa,OAAO,OAAO;AAAA,UAC3B,cAAc,CAAC,QAAQ,eAAe,aAAa,QAAQ,GAAG,UAAU;AAAA;AAAA,MAC1E;AAAA,IAEJ;AAEA,WACE,oBAAC,cAAW,QAAgB,QAAQ,OAAO,QACxC,qBAAW,OAAO,IAAI,CAAC,QAAQ,UAAU,aAAa,QAAQ,OAAO,IAAI,CAAC,GAC7E;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,KAAK,SAAS,WAAW,GAAG,qBAAqB,SAAS,GAC5D;AAAA,SAAK;AAAA,IACL,WAAW,SAAS,SAAS,IAC5B,oBAAC,OAAE,WAAU,sCACV,uBAAa,OAAO,MAAM,eAAe,EAAE,KAAK,WAAW,SAAS,KAAK,IAAI,EAAE,CAAC,GACnF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/blocks/designs/universal-banner/banner.d.ts

@@ -0,0 +1,22 @@
+import type { BannerAnalytics } from './analytics';
+import type { BannerRecord, Breakpoint, MaxHeightToken } from './contracts';
+import type { BannerRouter } from './links';
+export type BannerProps = {
+    banner: BannerRecord;
+    blockId: string;
+    campaignId: string;
+    breakpoint: Breakpoint;
+    responsiveEnabled: boolean;
+    router?: BannerRouter;
+    analytics?: BannerAnalytics;
+    /** Critical banners load eagerly; everything else is deferred. */
+    priority?: boolean;
+    /** Grid cells that span rows stretch their banner to the cell height. */
+    fillHeight?: boolean;
+    /** Ceiling for the box so a wide single banner does not become a wall. */
+    maxHeight?: MaxHeightToken;
+    /** Standalone use: the banner declares its own container context. */
+    container?: boolean;
+};
+export declare function Banner({ banner, blockId, campaignId, breakpoint, responsiveEnabled, router, analytics, priority, fillHeight, maxHeight, container, }: BannerProps): import("react").JSX.Element;
+//# sourceMappingURL=banner.d.ts.map

package/dist/blocks/designs/universal-banner/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/banner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3C,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,UAAU,CAAA;IACtB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAKD,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAgB,EAChB,UAAkB,EAClB,SAAkB,EAClB,SAAgB,GACjB,EAAE,WAAW,+BA4Jb"}

package/dist/blocks/designs/universal-banner/banner.js

@@ -0,0 +1,190 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var banner_exports = {};
+__export(banner_exports, {
+  Banner: () => Banner
+});
+module.exports = __toCommonJS(banner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_blocks = require("@thorprovider/blocks");
+var import_analytics = require("./analytics.js");
+var import_links = require("./links.js");
+var import_media = require("./media.js");
+var import_responsive = require("./responsive.js");
+const ORDER_START = "@md:order-1";
+const ORDER_END = "@md:order-2";
+function Banner({
+  banner,
+  blockId,
+  campaignId,
+  breakpoint,
+  responsiveEnabled,
+  router,
+  analytics,
+  priority = false,
+  fillHeight = false,
+  maxHeight = "none",
+  container = true
+}) {
+  const rootRef = (0, import_react.useRef)(null);
+  const [failed, setFailed] = (0, import_react.useState)(false);
+  const classes = (0, import_responsive.bannerClasses)(banner, responsiveEnabled);
+  const presentation = (0, import_responsive.coercePresentation)(banner.presentation);
+  const media = (0, import_media.resolveMedia)(banner, breakpoint);
+  const actions = (0, import_links.resolveBannerActions)(banner, router);
+  const hidden = (0, import_responsive.resolveHiddenFields)(banner, breakpoint, responsiveEnabled);
+  (0, import_react.useEffect)(() => {
+    setFailed(false);
+  }, [media.src]);
+  const isImageOnly = presentation.mode === "image-only";
+  const isOverlay = presentation.mode === "overlay";
+  const isSplit = presentation.mode === "split";
+  (0, import_analytics.useBannerImpression)(
+    rootRef,
+    { blockId, campaignId, bannerId: banner.id },
+    analytics?.onBannerImpression
+  );
+  const source = failed ? import_blocks.PRODUCT_IMAGE_FALLBACK : media.src;
+  const reportClick = () => {
+    analytics?.onBannerClick?.({ kind: "click", blockId, campaignId, bannerId: banner.id });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "banner",
+      "data-banner-id": banner.id,
+      className: (0, import_blocks.cn)(classes.root, "group ring-1 ring-border/60 shadow-sm transition duration-300 hover:shadow-md motion-reduce:transition-none", fillHeight && "h-full", container && "@container"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_blocks.cn)(
+              isSplit ? (0, import_blocks.cn)("grid @md:grid-cols-2", fillHeight && "h-full") : (0, import_blocks.cn)("size-full", isOverlay ? "grid" : "block", classes.box, fillHeight && "h-full"),
+              fillHeight && "h-full",
+              isSplit ? void 0 : (0, import_responsive.maxHeightClass)(maxHeight)
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: (0, import_blocks.cn)(
+                    "relative overflow-hidden",
+                    isSplit ? (0, import_blocks.cn)("w-full", fillHeight ? "h-24 @md:h-full" : (0, import_blocks.cn)(classes.box, "min-h-40")) : "col-start-1 row-start-1 size-full",
+                    isSplit ? (0, import_responsive.maxHeightClass)(maxHeight) : void 0,
+                    isSplit && (presentation.splitSide === "media-end" ? ORDER_END : ORDER_START)
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "img",
+                      {
+                        src: source,
+                        srcSet: failed ? void 0 : media.srcSet,
+                        sizes: failed || media.srcSet === void 0 ? void 0 : media.sizes,
+                        alt: media.alt,
+                        loading: priority ? "eager" : "lazy",
+                        fetchPriority: priority ? "high" : "auto",
+                        decoding: "async",
+                        onError: () => setFailed(true),
+                        className: (0, import_blocks.cn)(classes.img, "transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none")
+                      }
+                    ),
+                    isOverlay && presentation.overlay !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", className: (0, import_blocks.cn)("absolute inset-0 z-0", (0, import_responsive.overlayClasses)(presentation)) }) : null
+                  ]
+                }
+              ),
+              isImageOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: (0, import_blocks.cn)(
+                    classes.content,
+                    isOverlay && "col-start-1 row-start-1 drop-shadow-sm",
+                    isSplit && (presentation.splitSide === "media-end" ? ORDER_START : ORDER_END)
+                  ),
+                  children: [
+                    banner.content.badge && !hidden.includes("badge") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Badge, { variant: "secondary", className: (0, import_blocks.cn)(classes.badge, "shadow-sm"), children: banner.content.badge }) : null,
+                    banner.content.title && !hidden.includes("title") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: classes.title, children: banner.content.title }) : null,
+                    banner.content.subtitle && !hidden.includes("subtitle") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: classes.subtitle, children: banner.content.subtitle }) : null,
+                    banner.content.description && !hidden.includes("description") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: classes.description, children: banner.content.description }) : null,
+                    !hidden.includes("cta") && actions.ctas.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_blocks.cn)(
+                          "mt-2 flex flex-wrap gap-2",
+                          presentation.align === "center" && "justify-center",
+                          presentation.align === "end" && "justify-end"
+                        ),
+                        children: actions.ctas.map(({ cta, href }) => {
+                          if (href === null) return null;
+                          if (analytics?.onCtaClick) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_blocks.Button,
+                              {
+                                type: "button",
+                                variant: cta.tone === "primary" ? "default" : "secondary",
+                                className: "rounded-full px-5",
+                                onClick: () => analytics.onCtaClick?.({
+                                  kind: "cta",
+                                  blockId,
+                                  campaignId,
+                                  bannerId: banner.id,
+                                  ctaId: cta.id
+                                }),
+                                children: cta.label
+                              },
+                              cta.id
+                            );
+                          }
+                          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Button, { asChild: true, variant: cta.tone === "primary" ? "default" : "secondary", className: "rounded-full px-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "a",
+                            {
+                              href,
+                              className: cta.tone === "primary" ? "text-primary-foreground" : "text-secondary-foreground",
+                              children: cta.label
+                            }
+                          ) }, cta.id);
+                        })
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        actions.wholeLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: actions.wholeLink,
+            "aria-label": banner.content.title ?? banner.content.alt ?? banner.content.name,
+            onClick: reportClick,
+            className: "absolute inset-0 z-20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});
+//# sourceMappingURL=banner.js.map

package/dist/blocks/designs/universal-banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/banner.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Badge, Button, PRODUCT_IMAGE_FALLBACK, cn } from '@thorprovider/blocks'\n\nimport { useBannerImpression } from './analytics'\nimport type { BannerAnalytics } from './analytics'\nimport type { BannerRecord, Breakpoint, MaxHeightToken } from './contracts'\nimport { resolveBannerActions } from './links'\nimport type { BannerRouter } from './links'\nimport { resolveMedia } from './media'\nimport { bannerClasses, coercePresentation, maxHeightClass, overlayClasses, resolveHiddenFields } from './responsive'\n\nexport type BannerProps = {\n  banner: BannerRecord\n  blockId: string\n  campaignId: string\n  breakpoint: Breakpoint\n  responsiveEnabled: boolean\n  router?: BannerRouter\n  analytics?: BannerAnalytics\n  /** Critical banners load eagerly; everything else is deferred. */\n  priority?: boolean\n  /** Grid cells that span rows stretch their banner to the cell height. */\n  fillHeight?: boolean\n  /** Ceiling for the box so a wide single banner does not become a wall. */\n  maxHeight?: MaxHeightToken\n  /** Standalone use: the banner declares its own container context. */\n  container?: boolean\n}\n\nconst ORDER_START = '@md:order-1'\nconst ORDER_END = '@md:order-2'\n\nexport function Banner({\n  banner,\n  blockId,\n  campaignId,\n  breakpoint,\n  responsiveEnabled,\n  router,\n  analytics,\n  priority = false,\n  fillHeight = false,\n  maxHeight = 'none',\n  container = true,\n}: BannerProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [failed, setFailed] = useState(false)\n\n  const classes = bannerClasses(banner, responsiveEnabled)\n  const presentation = coercePresentation(banner.presentation)\n  const media = resolveMedia(banner, breakpoint)\n  const actions = resolveBannerActions(banner, router)\n  const hidden = resolveHiddenFields(banner, breakpoint, responsiveEnabled)\n\n  useEffect(() => {\n    setFailed(false)\n  }, [media.src])\n\n  const isImageOnly = presentation.mode === 'image-only'\n  const isOverlay = presentation.mode === 'overlay'\n  const isSplit = presentation.mode === 'split'\n\n  useBannerImpression(\n    rootRef,\n    { blockId, campaignId, bannerId: banner.id },\n    analytics?.onBannerImpression,\n  )\n\n  const source = failed ? PRODUCT_IMAGE_FALLBACK : media.src\n\n  const reportClick = () => {\n    analytics?.onBannerClick?.({ kind: 'click', blockId, campaignId, bannerId: banner.id })\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"banner\"\n      data-banner-id={banner.id}\n      className={cn(classes.root, 'group ring-1 ring-border/60 shadow-sm transition duration-300 hover:shadow-md motion-reduce:transition-none', fillHeight && 'h-full', container && '@container')}\n    >\n      <div\n        className={cn(\n          isSplit\n            ? cn('grid @md:grid-cols-2', fillHeight && 'h-full')\n            : cn('size-full', isOverlay ? 'grid' : 'block', classes.box, fillHeight && 'h-full'),\n          fillHeight && 'h-full',\n          isSplit ? undefined : maxHeightClass(maxHeight),\n        )}\n      >\n        <div\n          className={cn(\n            'relative overflow-hidden',\n            isSplit\n              ? cn('w-full', fillHeight ? 'h-24 @md:h-full' : cn(classes.box, 'min-h-40'))\n              : 'col-start-1 row-start-1 size-full',\n            isSplit ? maxHeightClass(maxHeight) : undefined,\n            isSplit && (presentation.splitSide === 'media-end' ? ORDER_END : ORDER_START),\n          )}\n        >\n        <img\n          src={source}\n          srcSet={failed ? undefined : media.srcSet}\n          sizes={failed || media.srcSet === undefined ? undefined : media.sizes}\n          alt={media.alt}\n          loading={priority ? 'eager' : 'lazy'}\n          fetchPriority={priority ? 'high' : 'auto'}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n          className={cn(classes.img, 'transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none')}\n        />\n        {isOverlay && presentation.overlay !== 'none' ? (\n          <div aria-hidden=\"true\" className={cn('absolute inset-0 z-0', overlayClasses(presentation))} />\n        ) : null}\n      </div>\n\n      {isImageOnly ? null : (\n        <div\n          className={cn(\n            classes.content,\n            isOverlay && 'col-start-1 row-start-1 drop-shadow-sm',\n            isSplit && (presentation.splitSide === 'media-end' ? ORDER_START : ORDER_END),\n          )}\n        >\n          {banner.content.badge && !hidden.includes('badge') ? (\n            <Badge variant=\"secondary\" className={cn(classes.badge, 'shadow-sm')}>\n              {banner.content.badge}\n            </Badge>\n          ) : null}\n\n          {banner.content.title && !hidden.includes('title') ? (\n            <h3 className={classes.title}>{banner.content.title}</h3>\n          ) : null}\n\n          {banner.content.subtitle && !hidden.includes('subtitle') ? (\n            <p className={classes.subtitle}>{banner.content.subtitle}</p>\n          ) : null}\n\n          {banner.content.description && !hidden.includes('description') ? (\n            <p className={classes.description}>{banner.content.description}</p>\n          ) : null}\n\n          {!hidden.includes('cta') && actions.ctas.length > 0 ? (\n            <div\n              className={cn(\n                'mt-2 flex flex-wrap gap-2',\n                presentation.align === 'center' && 'justify-center',\n                presentation.align === 'end' && 'justify-end',\n              )}\n            >\n              {actions.ctas.map(({ cta, href }) => {\n                if (href === null) return null\n                if (analytics?.onCtaClick) {\n                  return (\n                    <Button\n                      key={cta.id}\n                      type=\"button\"\n                      variant={cta.tone === 'primary' ? 'default' : 'secondary'}\n                      className=\"rounded-full px-5\"\n                      onClick={() =>\n                        analytics.onCtaClick?.({\n                          kind: 'cta',\n                          blockId,\n                          campaignId,\n                          bannerId: banner.id,\n                          ctaId: cta.id,\n                        })\n                      }\n                    >\n                      {cta.label}\n                    </Button>\n                  )\n                }\n                return (\n                  <Button key={cta.id} asChild variant={cta.tone === 'primary' ? 'default' : 'secondary'} className=\"rounded-full px-5\">\n                    <a\n                      href={href}\n                      className={cta.tone === 'primary' ? 'text-primary-foreground' : 'text-secondary-foreground'}\n                    >\n                      {cta.label}\n                    </a>\n                  </Button>\n                )\n              })}\n            </div>\n          ) : null}\n        </div>\n      )}\n      </div>\n\n      {actions.wholeLink ? (\n        <a\n          href={actions.wholeLink}\n          aria-label={banner.content.title ?? banner.content.alt ?? banner.content.name}\n          onClick={reportClick}\n          className=\"absolute inset-0 z-20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none\"\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/universal-banner/banner.mjs

@@ -0,0 +1,166 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Badge, Button, PRODUCT_IMAGE_FALLBACK, cn } from "@thorprovider/blocks";
+import { useBannerImpression } from "./analytics.mjs";
+import { resolveBannerActions } from "./links.mjs";
+import { resolveMedia } from "./media.mjs";
+import { bannerClasses, coercePresentation, maxHeightClass, overlayClasses, resolveHiddenFields } from "./responsive.mjs";
+const ORDER_START = "@md:order-1";
+const ORDER_END = "@md:order-2";
+function Banner({
+  banner,
+  blockId,
+  campaignId,
+  breakpoint,
+  responsiveEnabled,
+  router,
+  analytics,
+  priority = false,
+  fillHeight = false,
+  maxHeight = "none",
+  container = true
+}) {
+  const rootRef = useRef(null);
+  const [failed, setFailed] = useState(false);
+  const classes = bannerClasses(banner, responsiveEnabled);
+  const presentation = coercePresentation(banner.presentation);
+  const media = resolveMedia(banner, breakpoint);
+  const actions = resolveBannerActions(banner, router);
+  const hidden = resolveHiddenFields(banner, breakpoint, responsiveEnabled);
+  useEffect(() => {
+    setFailed(false);
+  }, [media.src]);
+  const isImageOnly = presentation.mode === "image-only";
+  const isOverlay = presentation.mode === "overlay";
+  const isSplit = presentation.mode === "split";
+  useBannerImpression(
+    rootRef,
+    { blockId, campaignId, bannerId: banner.id },
+    analytics?.onBannerImpression
+  );
+  const source = failed ? PRODUCT_IMAGE_FALLBACK : media.src;
+  const reportClick = () => {
+    analytics?.onBannerClick?.({ kind: "click", blockId, campaignId, bannerId: banner.id });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "banner",
+      "data-banner-id": banner.id,
+      className: cn(classes.root, "group ring-1 ring-border/60 shadow-sm transition duration-300 hover:shadow-md motion-reduce:transition-none", fillHeight && "h-full", container && "@container"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              isSplit ? cn("grid @md:grid-cols-2", fillHeight && "h-full") : cn("size-full", isOverlay ? "grid" : "block", classes.box, fillHeight && "h-full"),
+              fillHeight && "h-full",
+              isSplit ? void 0 : maxHeightClass(maxHeight)
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative overflow-hidden",
+                    isSplit ? cn("w-full", fillHeight ? "h-24 @md:h-full" : cn(classes.box, "min-h-40")) : "col-start-1 row-start-1 size-full",
+                    isSplit ? maxHeightClass(maxHeight) : void 0,
+                    isSplit && (presentation.splitSide === "media-end" ? ORDER_END : ORDER_START)
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: source,
+                        srcSet: failed ? void 0 : media.srcSet,
+                        sizes: failed || media.srcSet === void 0 ? void 0 : media.sizes,
+                        alt: media.alt,
+                        loading: priority ? "eager" : "lazy",
+                        fetchPriority: priority ? "high" : "auto",
+                        decoding: "async",
+                        onError: () => setFailed(true),
+                        className: cn(classes.img, "transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none")
+                      }
+                    ),
+                    isOverlay && presentation.overlay !== "none" ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 z-0", overlayClasses(presentation)) }) : null
+                  ]
+                }
+              ),
+              isImageOnly ? null : /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    classes.content,
+                    isOverlay && "col-start-1 row-start-1 drop-shadow-sm",
+                    isSplit && (presentation.splitSide === "media-end" ? ORDER_START : ORDER_END)
+                  ),
+                  children: [
+                    banner.content.badge && !hidden.includes("badge") ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn(classes.badge, "shadow-sm"), children: banner.content.badge }) : null,
+                    banner.content.title && !hidden.includes("title") ? /* @__PURE__ */ jsx("h3", { className: classes.title, children: banner.content.title }) : null,
+                    banner.content.subtitle && !hidden.includes("subtitle") ? /* @__PURE__ */ jsx("p", { className: classes.subtitle, children: banner.content.subtitle }) : null,
+                    banner.content.description && !hidden.includes("description") ? /* @__PURE__ */ jsx("p", { className: classes.description, children: banner.content.description }) : null,
+                    !hidden.includes("cta") && actions.ctas.length > 0 ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "mt-2 flex flex-wrap gap-2",
+                          presentation.align === "center" && "justify-center",
+                          presentation.align === "end" && "justify-end"
+                        ),
+                        children: actions.ctas.map(({ cta, href }) => {
+                          if (href === null) return null;
+                          if (analytics?.onCtaClick) {
+                            return /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                type: "button",
+                                variant: cta.tone === "primary" ? "default" : "secondary",
+                                className: "rounded-full px-5",
+                                onClick: () => analytics.onCtaClick?.({
+                                  kind: "cta",
+                                  blockId,
+                                  campaignId,
+                                  bannerId: banner.id,
+                                  ctaId: cta.id
+                                }),
+                                children: cta.label
+                              },
+                              cta.id
+                            );
+                          }
+                          return /* @__PURE__ */ jsx(Button, { asChild: true, variant: cta.tone === "primary" ? "default" : "secondary", className: "rounded-full px-5", children: /* @__PURE__ */ jsx(
+                            "a",
+                            {
+                              href,
+                              className: cta.tone === "primary" ? "text-primary-foreground" : "text-secondary-foreground",
+                              children: cta.label
+                            }
+                          ) }, cta.id);
+                        })
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        actions.wholeLink ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: actions.wholeLink,
+            "aria-label": banner.content.title ?? banner.content.alt ?? banner.content.name,
+            onClick: reportClick,
+            className: "absolute inset-0 z-20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  Banner
+};
+//# sourceMappingURL=banner.mjs.map

package/dist/blocks/designs/universal-banner/banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/banner.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Badge, Button, PRODUCT_IMAGE_FALLBACK, cn } from '@thorprovider/blocks'\n\nimport { useBannerImpression } from './analytics'\nimport type { BannerAnalytics } from './analytics'\nimport type { BannerRecord, Breakpoint, MaxHeightToken } from './contracts'\nimport { resolveBannerActions } from './links'\nimport type { BannerRouter } from './links'\nimport { resolveMedia } from './media'\nimport { bannerClasses, coercePresentation, maxHeightClass, overlayClasses, resolveHiddenFields } from './responsive'\n\nexport type BannerProps = {\n  banner: BannerRecord\n  blockId: string\n  campaignId: string\n  breakpoint: Breakpoint\n  responsiveEnabled: boolean\n  router?: BannerRouter\n  analytics?: BannerAnalytics\n  /** Critical banners load eagerly; everything else is deferred. */\n  priority?: boolean\n  /** Grid cells that span rows stretch their banner to the cell height. */\n  fillHeight?: boolean\n  /** Ceiling for the box so a wide single banner does not become a wall. */\n  maxHeight?: MaxHeightToken\n  /** Standalone use: the banner declares its own container context. */\n  container?: boolean\n}\n\nconst ORDER_START = '@md:order-1'\nconst ORDER_END = '@md:order-2'\n\nexport function Banner({\n  banner,\n  blockId,\n  campaignId,\n  breakpoint,\n  responsiveEnabled,\n  router,\n  analytics,\n  priority = false,\n  fillHeight = false,\n  maxHeight = 'none',\n  container = true,\n}: BannerProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [failed, setFailed] = useState(false)\n\n  const classes = bannerClasses(banner, responsiveEnabled)\n  const presentation = coercePresentation(banner.presentation)\n  const media = resolveMedia(banner, breakpoint)\n  const actions = resolveBannerActions(banner, router)\n  const hidden = resolveHiddenFields(banner, breakpoint, responsiveEnabled)\n\n  useEffect(() => {\n    setFailed(false)\n  }, [media.src])\n\n  const isImageOnly = presentation.mode === 'image-only'\n  const isOverlay = presentation.mode === 'overlay'\n  const isSplit = presentation.mode === 'split'\n\n  useBannerImpression(\n    rootRef,\n    { blockId, campaignId, bannerId: banner.id },\n    analytics?.onBannerImpression,\n  )\n\n  const source = failed ? PRODUCT_IMAGE_FALLBACK : media.src\n\n  const reportClick = () => {\n    analytics?.onBannerClick?.({ kind: 'click', blockId, campaignId, bannerId: banner.id })\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"banner\"\n      data-banner-id={banner.id}\n      className={cn(classes.root, 'group ring-1 ring-border/60 shadow-sm transition duration-300 hover:shadow-md motion-reduce:transition-none', fillHeight && 'h-full', container && '@container')}\n    >\n      <div\n        className={cn(\n          isSplit\n            ? cn('grid @md:grid-cols-2', fillHeight && 'h-full')\n            : cn('size-full', isOverlay ? 'grid' : 'block', classes.box, fillHeight && 'h-full'),\n          fillHeight && 'h-full',\n          isSplit ? undefined : maxHeightClass(maxHeight),\n        )}\n      >\n        <div\n          className={cn(\n            'relative overflow-hidden',\n            isSplit\n              ? cn('w-full', fillHeight ? 'h-24 @md:h-full' : cn(classes.box, 'min-h-40'))\n              : 'col-start-1 row-start-1 size-full',\n            isSplit ? maxHeightClass(maxHeight) : undefined,\n            isSplit && (presentation.splitSide === 'media-end' ? ORDER_END : ORDER_START),\n          )}\n        >\n        <img\n          src={source}\n          srcSet={failed ? undefined : media.srcSet}\n          sizes={failed || media.srcSet === undefined ? undefined : media.sizes}\n          alt={media.alt}\n          loading={priority ? 'eager' : 'lazy'}\n          fetchPriority={priority ? 'high' : 'auto'}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n          className={cn(classes.img, 'transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none')}\n        />\n        {isOverlay && presentation.overlay !== 'none' ? (\n          <div aria-hidden=\"true\" className={cn('absolute inset-0 z-0', overlayClasses(presentation))} />\n        ) : null}\n      </div>\n\n      {isImageOnly ? null : (\n        <div\n          className={cn(\n            classes.content,\n            isOverlay && 'col-start-1 row-start-1 drop-shadow-sm',\n            isSplit && (presentation.splitSide === 'media-end' ? ORDER_START : ORDER_END),\n          )}\n        >\n          {banner.content.badge && !hidden.includes('badge') ? (\n            <Badge variant=\"secondary\" className={cn(classes.badge, 'shadow-sm')}>\n              {banner.content.badge}\n            </Badge>\n          ) : null}\n\n          {banner.content.title && !hidden.includes('title') ? (\n            <h3 className={classes.title}>{banner.content.title}</h3>\n          ) : null}\n\n          {banner.content.subtitle && !hidden.includes('subtitle') ? (\n            <p className={classes.subtitle}>{banner.content.subtitle}</p>\n          ) : null}\n\n          {banner.content.description && !hidden.includes('description') ? (\n            <p className={classes.description}>{banner.content.description}</p>\n          ) : null}\n\n          {!hidden.includes('cta') && actions.ctas.length > 0 ? (\n            <div\n              className={cn(\n                'mt-2 flex flex-wrap gap-2',\n                presentation.align === 'center' && 'justify-center',\n                presentation.align === 'end' && 'justify-end',\n              )}\n            >\n              {actions.ctas.map(({ cta, href }) => {\n                if (href === null) return null\n                if (analytics?.onCtaClick) {\n                  return (\n                    <Button\n                      key={cta.id}\n                      type=\"button\"\n                      variant={cta.tone === 'primary' ? 'default' : 'secondary'}\n                      className=\"rounded-full px-5\"\n                      onClick={() =>\n                        analytics.onCtaClick?.({\n                          kind: 'cta',\n                          blockId,\n                          campaignId,\n                          bannerId: banner.id,\n                          ctaId: cta.id,\n                        })\n                      }\n                    >\n                      {cta.label}\n                    </Button>\n                  )\n                }\n                return (\n                  <Button key={cta.id} asChild variant={cta.tone === 'primary' ? 'default' : 'secondary'} className=\"rounded-full px-5\">\n                    <a\n                      href={href}\n                      className={cta.tone === 'primary' ? 'text-primary-foreground' : 'text-secondary-foreground'}\n                    >\n                      {cta.label}\n                    </a>\n                  </Button>\n                )\n              })}\n            </div>\n          ) : null}\n        </div>\n      )}\n      </div>\n\n      {actions.wholeLink ? (\n        <a\n          href={actions.wholeLink}\n          aria-label={banner.content.title ?? banner.content.alt ?? banner.content.name}\n          onClick={reportClick}\n          className=\"absolute inset-0 z-20 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none\"\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/universal-banner/block.d.ts

@@ -0,0 +1,15 @@
+import type { UniversalBannerData } from '../../../lib/contracts/universal-banner';
+import type { BannerEvent } from './analytics';
+export type UniversalBannerProps = {
+    data: UniversalBannerData;
+    onBannerClick?: (event: BannerEvent) => void;
+    onCtaClick?: (event: BannerEvent) => void;
+};
+/**
+ * The deliverable entry. It maps the delivered data into the banner system and
+ * forwards the declared analytics callbacks; the editor, the preview and the
+ * scenario controls live in `Harness.tsx` and never land in the component
+ * library.
+ */
+export default function UniversalBanner({ data, onBannerClick, onCtaClick }: UniversalBannerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=block.d.ts.map

package/dist/blocks/designs/universal-banner/block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAElF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC5C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,IAAI,EAC7C,aAAa,EAAE,UAAU,EAAE,EAAE,oBAAoB,sCAgBjD"}

package/dist/blocks/designs/universal-banner/block.js

@@ -0,0 +1,48 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var block_exports = {};
+__export(block_exports, {
+  default: () => UniversalBanner
+});
+module.exports = __toCommonJS(block_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_banner_block = require("./banner-block.js");
+var import_contracts = require("./contracts.js");
+function UniversalBanner({
+  data,
+  onBannerClick,
+  onCtaClick
+}) {
+  const campaign = (0, import_contracts.parseCampaign)(data.campaign);
+  const config = (0, import_contracts.parseConfig)(data.config);
+  if (!campaign.ok || !config.ok) return null;
+  const analytics = onBannerClick || onCtaClick ? { onBannerClick, onCtaClick } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_banner_block.BannerBlock,
+    {
+      campaign: campaign.value,
+      config: config.value,
+      now: new Date(data.now),
+      copy: data.banner,
+      analytics
+    }
+  );
+}
+//# sourceMappingURL=block.js.map

package/dist/blocks/designs/universal-banner/block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/block.tsx"],"sourcesContent":["'use client'\n\nimport type { UniversalBannerData } from '../../../lib/contracts/universal-banner'\n\nimport type { BannerEvent } from './analytics'\nimport { BannerBlock } from './banner-block'\nimport { parseCampaign, parseConfig } from './contracts'\n\nexport type UniversalBannerProps = {\n  data: UniversalBannerData;\n  onBannerClick?: (event: BannerEvent) => void\n  onCtaClick?: (event: BannerEvent) => void\n}\n\n/**\n * The deliverable entry. It maps the delivered data into the banner system and\n * forwards the declared analytics callbacks; the editor, the preview and the\n * scenario controls live in `Harness.tsx` and never land in the component\n * library.\n */\nexport default function UniversalBanner({ data,\n onBannerClick, onCtaClick }: UniversalBannerProps) {\n  const campaign = parseCampaign(data.campaign)\n  const config = parseConfig(data.config)\n  if (!campaign.ok || !config.ok) return null\n\n  const analytics = onBannerClick || onCtaClick ? { onBannerClick, onCtaClick } : undefined\n\n  return (\n    <BannerBlock\n      campaign={campaign.value}\n      config={config.value}\n      now={new Date(data.now)}\n      copy={data.banner}\n      analytics={analytics}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AAxBJ,0BAA4B;AAC5B,uBAA2C;AAc5B,SAAR,gBAAiC;AAAA,EAAE;AAAA,EACzC;AAAA,EAAe;AAAW,GAAyB;AAClD,QAAM,eAAW,gCAAc,KAAK,QAAQ;AAC5C,QAAM,aAAS,8BAAY,KAAK,MAAM;AACtC,MAAI,CAAC,SAAS,MAAM,CAAC,OAAO,GAAI,QAAO;AAEvC,QAAM,YAAY,iBAAiB,aAAa,EAAE,eAAe,WAAW,IAAI;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,SAAS;AAAA,MACnB,QAAQ,OAAO;AAAA,MACf,KAAK,IAAI,KAAK,KAAK,GAAG;AAAA,MACtB,MAAM,KAAK;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/blocks/designs/universal-banner/block.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { BannerBlock } from "./banner-block.mjs";
+import { parseCampaign, parseConfig } from "./contracts.mjs";
+function UniversalBanner({
+  data,
+  onBannerClick,
+  onCtaClick
+}) {
+  const campaign = parseCampaign(data.campaign);
+  const config = parseConfig(data.config);
+  if (!campaign.ok || !config.ok) return null;
+  const analytics = onBannerClick || onCtaClick ? { onBannerClick, onCtaClick } : void 0;
+  return /* @__PURE__ */ jsx(
+    BannerBlock,
+    {
+      campaign: campaign.value,
+      config: config.value,
+      now: new Date(data.now),
+      copy: data.banner,
+      analytics
+    }
+  );
+}
+export {
+  UniversalBanner as default
+};
+//# sourceMappingURL=block.mjs.map