@thorprovider/blocks 4.0.0 → 4.3.0

package/dist/blocks/designs/universal-banner/block.mjs.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":";AA6BI;AAxBJ,SAAS,mBAAmB;AAC5B,SAAS,eAAe,mBAAmB;AAc5B,SAAR,gBAAiC;AAAA,EAAE;AAAA,EACzC;AAAA,EAAe;AAAW,GAAyB;AAClD,QAAM,WAAW,cAAc,KAAK,QAAQ;AAC5C,QAAM,SAAS,YAAY,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/carousel.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { BannerRecord, Breakpoint, CarouselOptions, MaxHeightToken } from './contracts';
+export type BannerCopy = {
+    carouselPrevious: string;
+    carouselNext: string;
+    carouselStatus: string;
+    carouselRole: string;
+    storyPrevious: string;
+    storyNext: string;
+    storyRole: string;
+};
+export type BannerCarouselProps = {
+    banners: BannerRecord[];
+    options: CarouselOptions;
+    breakpoint: Breakpoint;
+    copy: BannerCopy;
+    slideHeight?: MaxHeightToken;
+    renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode;
+};
+/**
+ * Windowed carousel: only the banners of the current page exist in the DOM, so
+ * no slide sits outside the viewport and no `overflow` clips real content.
+ */
+export declare function BannerCarousel({ banners, options, breakpoint, copy, slideHeight, renderBanner, }: BannerCarouselProps): import("react").JSX.Element;
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/carousel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAI5F,MAAM,MAAM,UAAU,GAAG;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AA2CD,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAA;CACvE,CAAA;AASD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,UAAU,EACV,IAAI,EACJ,WAAoB,EACpB,YAAY,GACb,EAAE,mBAAmB,+BA0GrB"}

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

@@ -0,0 +1,172 @@
+"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 carousel_exports = {};
+__export(carousel_exports, {
+  BannerCarousel: () => BannerCarousel
+});
+module.exports = __toCommonJS(carousel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_blocks = require("@thorprovider/blocks");
+var import_format = require("./format.js");
+var import_media = require("./media.js");
+const PAGE_GRID = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @md:grid-cols-2",
+  3: "grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3",
+  4: "grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-4"
+};
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    const frame = requestAnimationFrame(update);
+    query.addEventListener("change", update);
+    return () => {
+      cancelAnimationFrame(frame);
+      query.removeEventListener("change", update);
+    };
+  }, []);
+  return reduced;
+}
+function Peek({ banner, label, onClick }) {
+  const media = (0, import_media.resolveMedia)(banner, "base");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick,
+      "data-slot": "peek",
+      className: "relative w-10 shrink-0 overflow-hidden rounded-2xl opacity-80 ring-1 ring-border/60 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: media.src, alt: "", "aria-hidden": "true", className: "absolute inset-0 size-full object-cover" })
+    }
+  );
+}
+const SLIDE_HEIGHT = {
+  sm: "h-40",
+  md: "h-56",
+  lg: "h-72",
+  xl: "h-96"
+};
+function BannerCarousel({
+  banners,
+  options,
+  breakpoint,
+  copy,
+  slideHeight = "none",
+  renderBanner
+}) {
+  const [page, setPage] = (0, import_react.useState)(0);
+  const [paused, setPaused] = (0, import_react.useState)(false);
+  const reducedMotion = useReducedMotion();
+  const visible = Math.max(1, Math.min(options.visible[breakpoint] ?? 1, Math.max(banners.length, 1)));
+  const pages = Math.max(1, Math.ceil(banners.length / visible));
+  const current = Math.min(page, pages - 1);
+  (0, import_react.useEffect)(() => {
+    setPage(0);
+  }, [banners.length, visible]);
+  (0, import_react.useEffect)(() => {
+    if (!options.autoplay || paused || reducedMotion || pages <= 1) return;
+    const timer = window.setInterval(() => {
+      setPage((value) => value + 1 < pages ? value + 1 : options.loop ? 0 : value);
+    }, options.intervalMs);
+    return () => window.clearInterval(timer);
+  }, [options.autoplay, options.intervalMs, options.loop, paused, reducedMotion, pages]);
+  const go = (delta) => {
+    setPage((value) => {
+      const next2 = value + delta;
+      if (next2 < 0) return options.loop ? pages - 1 : 0;
+      if (next2 >= pages) return options.loop ? 0 : pages - 1;
+      return next2;
+    });
+  };
+  const pageBanners = banners.slice(current * visible, current * visible + visible);
+  const status = (0, import_format.fillTemplate)(copy.carouselStatus, { page: current + 1, pages });
+  const withPeek = options.peek && visible === 1 && banners.length > 1;
+  const previous = banners[(current - 1 + banners.length) % banners.length];
+  const next = banners[(current + 1) % banners.length];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": copy.carouselRole,
+      "aria-label": copy.carouselRole,
+      className: "relative",
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          go(-1);
+        }
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          go(1);
+        }
+      },
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-stretch gap-2", children: [
+          withPeek && previous ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Peek, { banner: previous, label: copy.carouselPrevious, onClick: () => go(-1) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_blocks.cn)("grid items-start gap-4", PAGE_GRID[visible]), children: pageBanners.map((banner) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_blocks.cn)("min-w-0", slideHeight === "none" ? void 0 : SLIDE_HEIGHT[slideHeight]),
+              children: renderBanner(banner, true)
+            },
+            banner.id
+          )) }) }),
+          withPeek && next ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Peek, { banner: next, label: copy.carouselNext, onClick: () => go(1) }) : null
+        ] }),
+        options.indicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex items-center justify-center gap-1", children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": (0, import_format.fillTemplate)(copy.carouselStatus, { page: index + 1, pages }),
+            "aria-current": index === current ? "true" : void 0,
+            onClick: () => setPage(index),
+            className: "flex size-6 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: (0, import_blocks.cn)(
+                  "size-1.5 rounded-full transition-colors motion-reduce:transition-none",
+                  index === current ? "bg-primary" : "bg-border"
+                )
+              }
+            )
+          },
+          index
+        )) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "aria-live": "polite", className: "sr-only", children: status })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BannerCarousel
+});
+//# sourceMappingURL=carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/carousel.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { ReactNode } from 'react'\n\nimport { cn } from '@thorprovider/blocks'\n\nimport type { BannerRecord, Breakpoint, CarouselOptions, MaxHeightToken } from './contracts'\nimport { fillTemplate } from './format'\nimport { resolveMedia } from './media'\n\nexport type BannerCopy = {\n  carouselPrevious: string\n  carouselNext: string\n  carouselStatus: string\n  carouselRole: string\n  storyPrevious: string\n  storyNext: string\n  storyRole: string\n}\n\nconst PAGE_GRID: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 @md:grid-cols-2',\n  3: 'grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3',\n  4: 'grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-4',\n}\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const update = () => setReduced(query.matches)\n    const frame = requestAnimationFrame(update)\n    query.addEventListener('change', update)\n    return () => {\n      cancelAnimationFrame(frame)\n      query.removeEventListener('change', update)\n    }\n  }, [])\n\n  return reduced\n}\n\n/** A narrow edge of the neighbouring banner, used as a peek and as a control. */\nfunction Peek({ banner, label, onClick }: { banner: BannerRecord; label: string; onClick: () => void }) {\n  const media = resolveMedia(banner, 'base')\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      onClick={onClick}\n      data-slot=\"peek\"\n      className=\"relative w-10 shrink-0 overflow-hidden rounded-2xl opacity-80 ring-1 ring-border/60 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n    >\n      <img src={media.src} alt=\"\" aria-hidden=\"true\" className=\"absolute inset-0 size-full object-cover\" />\n    </button>\n  )\n}\n\nexport type BannerCarouselProps = {\n  banners: BannerRecord[]\n  options: CarouselOptions\n  breakpoint: Breakpoint\n  copy: BannerCopy\n  slideHeight?: MaxHeightToken\n  renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode\n}\n\nconst SLIDE_HEIGHT: Record<Exclude<MaxHeightToken, 'none'>, string> = {\n  sm: 'h-40',\n  md: 'h-56',\n  lg: 'h-72',\n  xl: 'h-96',\n}\n\n/**\n * Windowed carousel: only the banners of the current page exist in the DOM, so\n * no slide sits outside the viewport and no `overflow` clips real content.\n */\nexport function BannerCarousel({\n  banners,\n  options,\n  breakpoint,\n  copy,\n  slideHeight = 'none',\n  renderBanner,\n}: BannerCarouselProps) {\n  const [page, setPage] = useState(0)\n  const [paused, setPaused] = useState(false)\n  const reducedMotion = useReducedMotion()\n\n  const visible = Math.max(1, Math.min(options.visible[breakpoint] ?? 1, Math.max(banners.length, 1)))\n  const pages = Math.max(1, Math.ceil(banners.length / visible))\n  const current = Math.min(page, pages - 1)\n\n  useEffect(() => {\n    setPage(0)\n  }, [banners.length, visible])\n\n  useEffect(() => {\n    if (!options.autoplay || paused || reducedMotion || pages <= 1) return\n    const timer = window.setInterval(() => {\n      setPage((value) => (value + 1 < pages ? value + 1 : options.loop ? 0 : value))\n    }, options.intervalMs)\n    return () => window.clearInterval(timer)\n  }, [options.autoplay, options.intervalMs, options.loop, paused, reducedMotion, pages])\n\n  const go = (delta: number) => {\n    setPage((value) => {\n      const next = value + delta\n      if (next < 0) return options.loop ? pages - 1 : 0\n      if (next >= pages) return options.loop ? 0 : pages - 1\n      return next\n    })\n  }\n\n  const pageBanners = banners.slice(current * visible, current * visible + visible)\n  const status = fillTemplate(copy.carouselStatus, { page: current + 1, pages })\n  const withPeek = options.peek && visible === 1 && banners.length > 1\n  const previous = banners[(current - 1 + banners.length) % banners.length]\n  const next = banners[(current + 1) % banners.length]\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription={copy.carouselRole}\n      aria-label={copy.carouselRole}\n      className=\"relative\"\n      onKeyDown={(event) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          go(-1)\n        }\n        if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          go(1)\n        }\n      }}\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n    >\n      <div className=\"flex items-stretch gap-2\">\n        {withPeek && previous ? (\n          <Peek banner={previous} label={copy.carouselPrevious} onClick={() => go(-1)} />\n        ) : null}\n\n        <div className=\"min-w-0 flex-1\">\n          <div className={cn('grid items-start gap-4', PAGE_GRID[visible])}>\n            {pageBanners.map((banner) => (\n              <div\n                key={banner.id}\n                className={cn('min-w-0', slideHeight === 'none' ? undefined : SLIDE_HEIGHT[slideHeight])}\n              >\n                {renderBanner(banner, true)}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {withPeek && next ? <Peek banner={next} label={copy.carouselNext} onClick={() => go(1)} /> : null}\n      </div>\n\n      {options.indicators ? (\n        <div className=\"mt-3 flex items-center justify-center gap-1\">\n          {Array.from({ length: pages }, (_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              aria-label={fillTemplate(copy.carouselStatus, { page: index + 1, pages })}\n              aria-current={index === current ? 'true' : undefined}\n              onClick={() => setPage(index)}\n              className=\"flex size-6 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  'size-1.5 rounded-full transition-colors motion-reduce:transition-none',\n                  index === current ? 'bg-primary' : 'bg-border',\n                )}\n              />\n            </button>\n          ))}\n        </div>\n      ) : null}\n\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {status}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"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","names":["next"]}

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

@@ -0,0 +1,148 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "@thorprovider/blocks";
+import { fillTemplate } from "./format.mjs";
+import { resolveMedia } from "./media.mjs";
+const PAGE_GRID = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @md:grid-cols-2",
+  3: "grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3",
+  4: "grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-4"
+};
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    const frame = requestAnimationFrame(update);
+    query.addEventListener("change", update);
+    return () => {
+      cancelAnimationFrame(frame);
+      query.removeEventListener("change", update);
+    };
+  }, []);
+  return reduced;
+}
+function Peek({ banner, label, onClick }) {
+  const media = resolveMedia(banner, "base");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick,
+      "data-slot": "peek",
+      className: "relative w-10 shrink-0 overflow-hidden rounded-2xl opacity-80 ring-1 ring-border/60 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+      children: /* @__PURE__ */ jsx("img", { src: media.src, alt: "", "aria-hidden": "true", className: "absolute inset-0 size-full object-cover" })
+    }
+  );
+}
+const SLIDE_HEIGHT = {
+  sm: "h-40",
+  md: "h-56",
+  lg: "h-72",
+  xl: "h-96"
+};
+function BannerCarousel({
+  banners,
+  options,
+  breakpoint,
+  copy,
+  slideHeight = "none",
+  renderBanner
+}) {
+  const [page, setPage] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const visible = Math.max(1, Math.min(options.visible[breakpoint] ?? 1, Math.max(banners.length, 1)));
+  const pages = Math.max(1, Math.ceil(banners.length / visible));
+  const current = Math.min(page, pages - 1);
+  useEffect(() => {
+    setPage(0);
+  }, [banners.length, visible]);
+  useEffect(() => {
+    if (!options.autoplay || paused || reducedMotion || pages <= 1) return;
+    const timer = window.setInterval(() => {
+      setPage((value) => value + 1 < pages ? value + 1 : options.loop ? 0 : value);
+    }, options.intervalMs);
+    return () => window.clearInterval(timer);
+  }, [options.autoplay, options.intervalMs, options.loop, paused, reducedMotion, pages]);
+  const go = (delta) => {
+    setPage((value) => {
+      const next2 = value + delta;
+      if (next2 < 0) return options.loop ? pages - 1 : 0;
+      if (next2 >= pages) return options.loop ? 0 : pages - 1;
+      return next2;
+    });
+  };
+  const pageBanners = banners.slice(current * visible, current * visible + visible);
+  const status = fillTemplate(copy.carouselStatus, { page: current + 1, pages });
+  const withPeek = options.peek && visible === 1 && banners.length > 1;
+  const previous = banners[(current - 1 + banners.length) % banners.length];
+  const next = banners[(current + 1) % banners.length];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": copy.carouselRole,
+      "aria-label": copy.carouselRole,
+      className: "relative",
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          go(-1);
+        }
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          go(1);
+        }
+      },
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2", children: [
+          withPeek && previous ? /* @__PURE__ */ jsx(Peek, { banner: previous, label: copy.carouselPrevious, onClick: () => go(-1) }) : null,
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: cn("grid items-start gap-4", PAGE_GRID[visible]), children: pageBanners.map((banner) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("min-w-0", slideHeight === "none" ? void 0 : SLIDE_HEIGHT[slideHeight]),
+              children: renderBanner(banner, true)
+            },
+            banner.id
+          )) }) }),
+          withPeek && next ? /* @__PURE__ */ jsx(Peek, { banner: next, label: copy.carouselNext, onClick: () => go(1) }) : null
+        ] }),
+        options.indicators ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-1", children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": fillTemplate(copy.carouselStatus, { page: index + 1, pages }),
+            "aria-current": index === current ? "true" : void 0,
+            onClick: () => setPage(index),
+            className: "flex size-6 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "size-1.5 rounded-full transition-colors motion-reduce:transition-none",
+                  index === current ? "bg-primary" : "bg-border"
+                )
+              }
+            )
+          },
+          index
+        )) }) : null,
+        /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: status })
+      ]
+    }
+  );
+}
+export {
+  BannerCarousel
+};
+//# sourceMappingURL=carousel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/carousel.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { ReactNode } from 'react'\n\nimport { cn } from '@thorprovider/blocks'\n\nimport type { BannerRecord, Breakpoint, CarouselOptions, MaxHeightToken } from './contracts'\nimport { fillTemplate } from './format'\nimport { resolveMedia } from './media'\n\nexport type BannerCopy = {\n  carouselPrevious: string\n  carouselNext: string\n  carouselStatus: string\n  carouselRole: string\n  storyPrevious: string\n  storyNext: string\n  storyRole: string\n}\n\nconst PAGE_GRID: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 @md:grid-cols-2',\n  3: 'grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3',\n  4: 'grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-4',\n}\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const update = () => setReduced(query.matches)\n    const frame = requestAnimationFrame(update)\n    query.addEventListener('change', update)\n    return () => {\n      cancelAnimationFrame(frame)\n      query.removeEventListener('change', update)\n    }\n  }, [])\n\n  return reduced\n}\n\n/** A narrow edge of the neighbouring banner, used as a peek and as a control. */\nfunction Peek({ banner, label, onClick }: { banner: BannerRecord; label: string; onClick: () => void }) {\n  const media = resolveMedia(banner, 'base')\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      onClick={onClick}\n      data-slot=\"peek\"\n      className=\"relative w-10 shrink-0 overflow-hidden rounded-2xl opacity-80 ring-1 ring-border/60 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n    >\n      <img src={media.src} alt=\"\" aria-hidden=\"true\" className=\"absolute inset-0 size-full object-cover\" />\n    </button>\n  )\n}\n\nexport type BannerCarouselProps = {\n  banners: BannerRecord[]\n  options: CarouselOptions\n  breakpoint: Breakpoint\n  copy: BannerCopy\n  slideHeight?: MaxHeightToken\n  renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode\n}\n\nconst SLIDE_HEIGHT: Record<Exclude<MaxHeightToken, 'none'>, string> = {\n  sm: 'h-40',\n  md: 'h-56',\n  lg: 'h-72',\n  xl: 'h-96',\n}\n\n/**\n * Windowed carousel: only the banners of the current page exist in the DOM, so\n * no slide sits outside the viewport and no `overflow` clips real content.\n */\nexport function BannerCarousel({\n  banners,\n  options,\n  breakpoint,\n  copy,\n  slideHeight = 'none',\n  renderBanner,\n}: BannerCarouselProps) {\n  const [page, setPage] = useState(0)\n  const [paused, setPaused] = useState(false)\n  const reducedMotion = useReducedMotion()\n\n  const visible = Math.max(1, Math.min(options.visible[breakpoint] ?? 1, Math.max(banners.length, 1)))\n  const pages = Math.max(1, Math.ceil(banners.length / visible))\n  const current = Math.min(page, pages - 1)\n\n  useEffect(() => {\n    setPage(0)\n  }, [banners.length, visible])\n\n  useEffect(() => {\n    if (!options.autoplay || paused || reducedMotion || pages <= 1) return\n    const timer = window.setInterval(() => {\n      setPage((value) => (value + 1 < pages ? value + 1 : options.loop ? 0 : value))\n    }, options.intervalMs)\n    return () => window.clearInterval(timer)\n  }, [options.autoplay, options.intervalMs, options.loop, paused, reducedMotion, pages])\n\n  const go = (delta: number) => {\n    setPage((value) => {\n      const next = value + delta\n      if (next < 0) return options.loop ? pages - 1 : 0\n      if (next >= pages) return options.loop ? 0 : pages - 1\n      return next\n    })\n  }\n\n  const pageBanners = banners.slice(current * visible, current * visible + visible)\n  const status = fillTemplate(copy.carouselStatus, { page: current + 1, pages })\n  const withPeek = options.peek && visible === 1 && banners.length > 1\n  const previous = banners[(current - 1 + banners.length) % banners.length]\n  const next = banners[(current + 1) % banners.length]\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription={copy.carouselRole}\n      aria-label={copy.carouselRole}\n      className=\"relative\"\n      onKeyDown={(event) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          go(-1)\n        }\n        if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          go(1)\n        }\n      }}\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n    >\n      <div className=\"flex items-stretch gap-2\">\n        {withPeek && previous ? (\n          <Peek banner={previous} label={copy.carouselPrevious} onClick={() => go(-1)} />\n        ) : null}\n\n        <div className=\"min-w-0 flex-1\">\n          <div className={cn('grid items-start gap-4', PAGE_GRID[visible])}>\n            {pageBanners.map((banner) => (\n              <div\n                key={banner.id}\n                className={cn('min-w-0', slideHeight === 'none' ? undefined : SLIDE_HEIGHT[slideHeight])}\n              >\n                {renderBanner(banner, true)}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {withPeek && next ? <Peek banner={next} label={copy.carouselNext} onClick={() => go(1)} /> : null}\n      </div>\n\n      {options.indicators ? (\n        <div className=\"mt-3 flex items-center justify-center gap-1\">\n          {Array.from({ length: pages }, (_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              aria-label={fillTemplate(copy.carouselStatus, { page: index + 1, pages })}\n              aria-current={index === current ? 'true' : undefined}\n              onClick={() => setPage(index)}\n              className=\"flex size-6 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  'size-1.5 rounded-full transition-colors motion-reduce:transition-none',\n                  index === current ? 'bg-primary' : 'bg-border',\n                )}\n              />\n            </button>\n          ))}\n        </div>\n      ) : null}\n\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {status}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"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","names":["next"]}

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

@@ -0,0 +1,190 @@
+/**
+ * The versioned contract of the universal banner system.
+ *
+ * Two documents travel together: `BannerCampaign` owns the content (text,
+ * media, destinations, schedule) and `BannerBlockConfig` owns a composition
+ * that references campaign banners by id. A block never copies a banner, so
+ * the same campaign can feed several compositions without duplicated content.
+ */
+export declare const CONFIG_SCHEMA_VERSION = 1;
+export type Breakpoint = 'base' | 'md' | '2xl';
+export type FocalPoint = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type BannerMode = 'image-only' | 'overlay' | 'split';
+export type SplitSide = 'media-start' | 'media-end';
+export type AspectToken = 'square' | 'video' | 'photo' | 'wide' | 'tall' | 'natural';
+export type HeightMode = 'auto' | 'fixed' | 'adaptive';
+export type HeightToken = 'sm' | 'md' | 'lg' | 'xl';
+export type RadiusToken = 'none' | 'md' | 'lg' | 'xl' | '2xl';
+export type SurfaceToken = 'none' | 'card' | 'muted' | 'primary' | 'secondary' | 'accent';
+export type OverlayToken = 'none' | 'scrim' | 'gradient';
+export type OverlayOpacity = 'light' | 'medium' | 'strong';
+export type PaddingToken = 'none' | 'sm' | 'md' | 'lg';
+export type TextScale = 'sm' | 'md' | 'lg';
+export type AlignToken = 'start' | 'center' | 'end';
+export type FitToken = 'cover' | 'contain' | 'natural';
+export type WidthToken = 'full' | 'content' | 'custom';
+export type MaxWidthToken = 'sm' | 'md' | 'lg' | 'xl';
+export type GapToken = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type MaxHeightToken = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type PresetId = 'one' | 'two' | 'three' | 'four' | 'mosaic' | 'hero-two' | 'hero-three' | 'custom';
+export type PresentationKind = 'single' | 'grid' | 'carousel';
+export type ContentField = 'badge' | 'title' | 'subtitle' | 'description' | 'cta';
+export type CtaTone = 'primary' | 'secondary';
+export type LinkTarget = {
+    kind: 'product';
+    id: string;
+} | {
+    kind: 'category';
+    id: string;
+} | {
+    kind: 'collection';
+    id: string;
+} | {
+    kind: 'page';
+    slug: string;
+} | {
+    kind: 'search';
+    query: string;
+} | {
+    kind: 'external';
+    url: string;
+};
+export type Cta = {
+    id: string;
+    label: string;
+    target: LinkTarget;
+    tone: CtaTone;
+};
+export type BannerContent = {
+    name: string;
+    alt: string;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: string;
+    target?: LinkTarget;
+    ctas: Cta[];
+};
+export type BannerMedia = {
+    desktop?: string;
+    tablet?: string;
+    mobile?: string;
+};
+export type Schedule = {
+    from?: string;
+    to?: string;
+    timezone: string;
+};
+export type BannerPresentation = {
+    mode: BannerMode;
+    width: WidthToken;
+    maxWidth?: MaxWidthToken;
+    height: HeightMode;
+    heightToken?: HeightToken;
+    aspect: AspectToken;
+    fit: FitToken;
+    focal: FocalPoint;
+    align: AlignToken;
+    radius: RadiusToken;
+    surface: SurfaceToken;
+    overlay: OverlayToken;
+    overlayOpacity: OverlayOpacity;
+    padding: PaddingToken;
+    textScale: TextScale;
+    splitSide?: SplitSide;
+    hiddenFields?: ContentField[];
+};
+export type BannerRecord = {
+    id: string;
+    campaignId: string;
+    content: BannerContent;
+    media: BannerMedia;
+    presentation: BannerPresentation;
+    responsive?: Partial<Record<Breakpoint, Partial<BannerPresentation>>>;
+    schedule?: Schedule;
+    visible: boolean;
+};
+export type BannerCampaign = {
+    schemaVersion: number;
+    campaignId: string;
+    banners: BannerRecord[];
+};
+export type BannerRef = {
+    bannerId: string;
+    overrides?: Partial<BannerPresentation>;
+};
+export type GridLayout = {
+    gapX: GapToken;
+    gapY: GapToken;
+    maxWidth: 'full' | MaxWidthToken;
+    maxHeight: MaxHeightToken;
+    align: AlignToken;
+    radius: RadiusToken;
+    columns?: Record<Breakpoint, number>;
+    spans?: number[];
+};
+export type CarouselOptions = {
+    visible: Record<Breakpoint, number>;
+    autoplay: boolean;
+    intervalMs: number;
+    loop: boolean;
+    indicators: boolean;
+    carouselOnMobile: boolean;
+    /** Neighbour slivers beside a single visible banner. */
+    peek: boolean;
+    /** Mobile story layout: portrait card, progress segments and edge taps. */
+    story: boolean;
+};
+export type BlockRules = {
+    emptyLabel: string;
+    inactiveLabel: string;
+    danglingLabel: string;
+};
+export type BannerBlockConfig = {
+    schemaVersion: number;
+    blockId: string;
+    name: string;
+    visible: boolean;
+    schedule?: Schedule;
+    scheduleAware: boolean;
+    responsiveEnabled: boolean;
+    presentation: PresentationKind;
+    preset: PresetId;
+    refs: BannerRef[];
+    layout: GridLayout;
+    carousel: CarouselOptions;
+    rules: BlockRules;
+};
+export type ConfigError = {
+    path: string;
+    message: string;
+};
+export type ParseResult<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    errors: ConfigError[];
+};
+export declare const DEFAULT_PRESENTATION: BannerPresentation;
+export declare const DEFAULT_LAYOUT: GridLayout;
+export declare const DEFAULT_CAROUSEL: CarouselOptions;
+export declare function createDefaultConfig(): BannerBlockConfig;
+export declare function normalizeBanner(record: BannerRecord): BannerRecord;
+export declare function parseCampaign(input: unknown): ParseResult<BannerCampaign>;
+export declare function parseConfig(input: unknown): ParseResult<BannerBlockConfig>;
+export type BannerBundle = {
+    schemaVersion: number;
+    campaign: BannerCampaign;
+    config: BannerBlockConfig;
+};
+export declare function serializeBundle(campaign: BannerCampaign, config: BannerBlockConfig): string;
+export declare function parseBundle(json: string): {
+    ok: true;
+    campaign: BannerCampaign;
+    config: BannerBlockConfig;
+} | {
+    ok: false;
+    errors: ConfigError[];
+};
+//# sourceMappingURL=contracts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contracts.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/contracts.ts"],"names":[],"mappings":"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"}