@thorprovider/blocks 4.0.0 → 4.3.0

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

@@ -0,0 +1,62 @@
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+function safeTimeZone(timeZone) {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone });
+    return timeZone;
+  } catch {
+    return "UTC";
+  }
+}
+function offsetMs(date, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).formatToParts(date);
+  const read = (type) => Number(parts.find((part) => part.type === type)?.value ?? "0");
+  const wallClock = Date.UTC(
+    read("year"),
+    read("month") - 1,
+    read("day"),
+    read("hour"),
+    read("minute"),
+    read("second")
+  );
+  return wallClock - date.getTime();
+}
+function zonedStartOfDay(dateOnly, timeZone) {
+  const zone = safeTimeZone(timeZone);
+  const [year, month, day] = dateOnly.split("-").map(Number);
+  const midnight = Date.UTC(year ?? 1970, (month ?? 1) - 1, day ?? 1);
+  const firstPass = new Date(midnight - offsetMs(new Date(midnight), zone));
+  return new Date(midnight - offsetMs(firstPass, zone));
+}
+function toInstant(value, timeZone) {
+  if (DATE_ONLY.test(value)) return zonedStartOfDay(value, timeZone);
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+function scheduleStatus(schedule, now) {
+  if (!schedule) return "unscheduled";
+  const zone = safeTimeZone(schedule.timezone);
+  const from = schedule.from ? toInstant(schedule.from, zone) : null;
+  const to = schedule.to ? toInstant(schedule.to, zone) : null;
+  if (from && now.getTime() < from.getTime()) return "scheduled";
+  if (to && now.getTime() >= to.getTime()) return "expired";
+  return "active";
+}
+function isActive(schedule, now) {
+  const status = scheduleStatus(schedule, now);
+  return status === "active" || status === "unscheduled";
+}
+export {
+  isActive,
+  scheduleStatus,
+  zonedStartOfDay
+};
+//# sourceMappingURL=schedule.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/schedule.ts"],"sourcesContent":["import type { Schedule } from './contracts'\n\nexport type ScheduleStatus = 'active' | 'scheduled' | 'expired' | 'unscheduled'\n\nconst DATE_ONLY = /^\\d{4}-\\d{2}-\\d{2}$/\n\nfunction safeTimeZone(timeZone: string): string {\n  try {\n    new Intl.DateTimeFormat('en-US', { timeZone })\n    return timeZone\n  } catch {\n    return 'UTC'\n  }\n}\n\nfunction offsetMs(date: Date, timeZone: string): number {\n  const parts = new Intl.DateTimeFormat('en-US', {\n    timeZone,\n    hourCycle: 'h23',\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  }).formatToParts(date)\n  const read = (type: Intl.DateTimeFormatPartTypes) => Number(parts.find((part) => part.type === type)?.value ?? '0')\n  const wallClock = Date.UTC(\n    read('year'),\n    read('month') - 1,\n    read('day'),\n    read('hour'),\n    read('minute'),\n    read('second'),\n  )\n  return wallClock - date.getTime()\n}\n\n/** Midnight of a date-only value in the store's time zone. */\nexport function zonedStartOfDay(dateOnly: string, timeZone: string): Date {\n  const zone = safeTimeZone(timeZone)\n  const [year, month, day] = dateOnly.split('-').map(Number)\n  const midnight = Date.UTC(year ?? 1970, (month ?? 1) - 1, day ?? 1)\n  const firstPass = new Date(midnight - offsetMs(new Date(midnight), zone))\n  return new Date(midnight - offsetMs(firstPass, zone))\n}\n\nfunction toInstant(value: string, timeZone: string): Date | null {\n  if (DATE_ONLY.test(value)) return zonedStartOfDay(value, timeZone)\n  const parsed = new Date(value)\n  return Number.isNaN(parsed.getTime()) ? null : parsed\n}\n\n/**\n * Evaluates the window as `[from, to)`: a banner stops being active at the\n * exact `to` instant. Date-only bounds are read at midnight in the store zone.\n */\nexport function scheduleStatus(schedule: Schedule | undefined, now: Date): ScheduleStatus {\n  if (!schedule) return 'unscheduled'\n  const zone = safeTimeZone(schedule.timezone)\n  const from = schedule.from ? toInstant(schedule.from, zone) : null\n  const to = schedule.to ? toInstant(schedule.to, zone) : null\n  if (from && now.getTime() < from.getTime()) return 'scheduled'\n  if (to && now.getTime() >= to.getTime()) return 'expired'\n  return 'active'\n}\n\nexport function isActive(schedule: Schedule | undefined, now: Date): boolean {\n  const status = scheduleStatus(schedule, now)\n  return status === 'active' || status === 'unscheduled'\n}\n"],"mappings":"AAIA,MAAM,YAAY;AAElB,SAAS,aAAa,UAA0B;AAC9C,MAAI;AACF,QAAI,KAAK,eAAe,SAAS,EAAE,SAAS,CAAC;AAC7C,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,SAAS,MAAY,UAA0B;AACtD,QAAM,QAAQ,IAAI,KAAK,eAAe,SAAS;AAAA,IAC7C;AAAA,IACA,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC,EAAE,cAAc,IAAI;AACrB,QAAM,OAAO,CAAC,SAAuC,OAAO,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,GAAG,SAAS,GAAG;AAClH,QAAM,YAAY,KAAK;AAAA,IACrB,KAAK,MAAM;AAAA,IACX,KAAK,OAAO,IAAI;AAAA,IAChB,KAAK,KAAK;AAAA,IACV,KAAK,MAAM;AAAA,IACX,KAAK,QAAQ;AAAA,IACb,KAAK,QAAQ;AAAA,EACf;AACA,SAAO,YAAY,KAAK,QAAQ;AAClC;AAGO,SAAS,gBAAgB,UAAkB,UAAwB;AACxE,QAAM,OAAO,aAAa,QAAQ;AAClC,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACzD,QAAM,WAAW,KAAK,IAAI,QAAQ,OAAO,SAAS,KAAK,GAAG,OAAO,CAAC;AAClE,QAAM,YAAY,IAAI,KAAK,WAAW,SAAS,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI,KAAK,WAAW,SAAS,WAAW,IAAI,CAAC;AACtD;AAEA,SAAS,UAAU,OAAe,UAA+B;AAC/D,MAAI,UAAU,KAAK,KAAK,EAAG,QAAO,gBAAgB,OAAO,QAAQ;AACjE,QAAM,SAAS,IAAI,KAAK,KAAK;AAC7B,SAAO,OAAO,MAAM,OAAO,QAAQ,CAAC,IAAI,OAAO;AACjD;AAMO,SAAS,eAAe,UAAgC,KAA2B;AACxF,MAAI,CAAC,SAAU,QAAO;AACtB,QAAM,OAAO,aAAa,SAAS,QAAQ;AAC3C,QAAM,OAAO,SAAS,OAAO,UAAU,SAAS,MAAM,IAAI,IAAI;AAC9D,QAAM,KAAK,SAAS,KAAK,UAAU,SAAS,IAAI,IAAI,IAAI;AACxD,MAAI,QAAQ,IAAI,QAAQ,IAAI,KAAK,QAAQ,EAAG,QAAO;AACnD,MAAI,MAAM,IAAI,QAAQ,KAAK,GAAG,QAAQ,EAAG,QAAO;AAChD,SAAO;AACT;AAEO,SAAS,SAAS,UAAgC,KAAoB;AAC3E,QAAM,SAAS,eAAe,UAAU,GAAG;AAC3C,SAAO,WAAW,YAAY,WAAW;AAC3C;","names":[]}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { BannerRecord } from './contracts';
+export type StoryCopy = {
+    storyPrevious: string;
+    storyNext: string;
+    storyRole: string;
+    carouselStatus: string;
+};
+export type StoryCarouselProps = {
+    banners: BannerRecord[];
+    copy: StoryCopy;
+    renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode;
+};
+/**
+ * Mobile story layout: one portrait card, progress segments instead of dots and
+ * tap zones on the edges. Only the current banner exists in the DOM, so no
+ * off-screen slide can overflow the page.
+ */
+export declare function StoryCarousel({ banners, copy, renderBanner }: StoryCarouselProps): import("react").JSX.Element | null;
+//# sourceMappingURL=story-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"story-carousel.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/story-carousel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG/C,MAAM,MAAM,SAAS,GAAG;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAA;CACvE,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,kBAAkB,sCAqDhF"}

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

@@ -0,0 +1,85 @@
+"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 story_carousel_exports = {};
+__export(story_carousel_exports, {
+  StoryCarousel: () => StoryCarousel
+});
+module.exports = __toCommonJS(story_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");
+function StoryCarousel({ banners, copy, renderBanner }) {
+  const [index, setIndex] = (0, import_react.useState)(0);
+  const count = banners.length;
+  const current = Math.min(index, Math.max(count - 1, 0));
+  const banner = banners[current];
+  (0, import_react.useEffect)(() => {
+    setIndex(0);
+  }, [count]);
+  if (!banner) return null;
+  const go = (delta) => setIndex((value) => (value + delta + count) % count);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": copy.storyRole,
+      "aria-label": copy.storyRole,
+      "data-slot": "story",
+      className: "relative",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative mx-auto aspect-9/16 w-full overflow-hidden rounded-2xl bg-muted", children: [
+          renderBanner(banner, true),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", "data-slot": "story-progress", className: "absolute inset-x-3 top-3 z-30 flex gap-1", children: banners.map((entry, segment) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_blocks.cn)("h-1 flex-1 rounded-full", segment === current ? "bg-background" : "bg-background/40")
+            },
+            entry.id
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": copy.storyPrevious,
+              onClick: () => go(-1),
+              className: "absolute inset-y-0 left-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": copy.storyNext,
+              onClick: () => go(1),
+              className: "absolute inset-y-0 right-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "aria-live": "polite", className: "sr-only", children: (0, import_format.fillTemplate)(copy.carouselStatus, { page: current + 1, pages: count }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StoryCarousel
+});
+//# sourceMappingURL=story-carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/story-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 } from './contracts'\nimport { fillTemplate } from './format'\n\nexport type StoryCopy = {\n  storyPrevious: string\n  storyNext: string\n  storyRole: string\n  carouselStatus: string\n}\n\nexport type StoryCarouselProps = {\n  banners: BannerRecord[]\n  copy: StoryCopy\n  renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode\n}\n\n/**\n * Mobile story layout: one portrait card, progress segments instead of dots and\n * tap zones on the edges. Only the current banner exists in the DOM, so no\n * off-screen slide can overflow the page.\n */\nexport function StoryCarousel({ banners, copy, renderBanner }: StoryCarouselProps) {\n  const [index, setIndex] = useState(0)\n  const count = banners.length\n  const current = Math.min(index, Math.max(count - 1, 0))\n  const banner = banners[current]\n\n  useEffect(() => {\n    setIndex(0)\n  }, [count])\n\n  if (!banner) return null\n\n  const go = (delta: number) => setIndex((value) => (value + delta + count) % count)\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription={copy.storyRole}\n      aria-label={copy.storyRole}\n      data-slot=\"story\"\n      className=\"relative\"\n    >\n      <div className=\"relative mx-auto aspect-9/16 w-full overflow-hidden rounded-2xl bg-muted\">\n        {renderBanner(banner, true)}\n\n        <div aria-hidden=\"true\" data-slot=\"story-progress\" className=\"absolute inset-x-3 top-3 z-30 flex gap-1\">\n          {banners.map((entry, segment) => (\n            <span\n              key={entry.id}\n              className={cn('h-1 flex-1 rounded-full', segment === current ? 'bg-background' : 'bg-background/40')}\n            />\n          ))}\n        </div>\n\n        <button\n          type=\"button\"\n          aria-label={copy.storyPrevious}\n          onClick={() => go(-1)}\n          className=\"absolute inset-y-0 left-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n        <button\n          type=\"button\"\n          aria-label={copy.storyNext}\n          onClick={() => go(1)}\n          className=\"absolute inset-y-0 right-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n      </div>\n\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {fillTemplate(copy.carouselStatus, { page: current + 1, pages: count })}\n      </p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDM;AAhDN,mBAAoC;AAGpC,oBAAmB;AAGnB,oBAA6B;AAoBtB,SAAS,cAAc,EAAE,SAAS,MAAM,aAAa,GAAuB;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,QAAQ,QAAQ;AACtB,QAAM,UAAU,KAAK,IAAI,OAAO,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC;AACtD,QAAM,SAAS,QAAQ,OAAO;AAE9B,8BAAU,MAAM;AACd,aAAS,CAAC;AAAA,EACZ,GAAG,CAAC,KAAK,CAAC;AAEV,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,KAAK,CAAC,UAAkB,SAAS,CAAC,WAAW,QAAQ,QAAQ,SAAS,KAAK;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,wBAAsB,KAAK;AAAA,MAC3B,cAAY,KAAK;AAAA,MACjB,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,qDAAC,SAAI,WAAU,4EACZ;AAAA,uBAAa,QAAQ,IAAI;AAAA,UAE1B,4CAAC,SAAI,eAAY,QAAO,aAAU,kBAAiB,WAAU,4CAC1D,kBAAQ,IAAI,CAAC,OAAO,YACnB;AAAA,YAAC;AAAA;AAAA,cAEC,eAAW,kBAAG,2BAA2B,YAAY,UAAU,kBAAkB,kBAAkB;AAAA;AAAA,YAD9F,MAAM;AAAA,UAEb,CACD,GACH;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,KAAK;AAAA,cACjB,SAAS,MAAM,GAAG,EAAE;AAAA,cACpB,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,KAAK;AAAA,cACjB,SAAS,MAAM,GAAG,CAAC;AAAA,cACnB,WAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,QAEA,4CAAC,OAAE,aAAU,UAAS,WAAU,WAC7B,0CAAa,KAAK,gBAAgB,EAAE,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,GACxE;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "@thorprovider/blocks";
+import { fillTemplate } from "./format.mjs";
+function StoryCarousel({ banners, copy, renderBanner }) {
+  const [index, setIndex] = useState(0);
+  const count = banners.length;
+  const current = Math.min(index, Math.max(count - 1, 0));
+  const banner = banners[current];
+  useEffect(() => {
+    setIndex(0);
+  }, [count]);
+  if (!banner) return null;
+  const go = (delta) => setIndex((value) => (value + delta + count) % count);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": copy.storyRole,
+      "aria-label": copy.storyRole,
+      "data-slot": "story",
+      className: "relative",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-9/16 w-full overflow-hidden rounded-2xl bg-muted", children: [
+          renderBanner(banner, true),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-slot": "story-progress", className: "absolute inset-x-3 top-3 z-30 flex gap-1", children: banners.map((entry, segment) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("h-1 flex-1 rounded-full", segment === current ? "bg-background" : "bg-background/40")
+            },
+            entry.id
+          )) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": copy.storyPrevious,
+              onClick: () => go(-1),
+              className: "absolute inset-y-0 left-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": copy.storyNext,
+              onClick: () => go(1),
+              className: "absolute inset-y-0 right-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: fillTemplate(copy.carouselStatus, { page: current + 1, pages: count }) })
+      ]
+    }
+  );
+}
+export {
+  StoryCarousel
+};
+//# sourceMappingURL=story-carousel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/story-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 } from './contracts'\nimport { fillTemplate } from './format'\n\nexport type StoryCopy = {\n  storyPrevious: string\n  storyNext: string\n  storyRole: string\n  carouselStatus: string\n}\n\nexport type StoryCarouselProps = {\n  banners: BannerRecord[]\n  copy: StoryCopy\n  renderBanner: (banner: BannerRecord, fillHeight: boolean) => ReactNode\n}\n\n/**\n * Mobile story layout: one portrait card, progress segments instead of dots and\n * tap zones on the edges. Only the current banner exists in the DOM, so no\n * off-screen slide can overflow the page.\n */\nexport function StoryCarousel({ banners, copy, renderBanner }: StoryCarouselProps) {\n  const [index, setIndex] = useState(0)\n  const count = banners.length\n  const current = Math.min(index, Math.max(count - 1, 0))\n  const banner = banners[current]\n\n  useEffect(() => {\n    setIndex(0)\n  }, [count])\n\n  if (!banner) return null\n\n  const go = (delta: number) => setIndex((value) => (value + delta + count) % count)\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription={copy.storyRole}\n      aria-label={copy.storyRole}\n      data-slot=\"story\"\n      className=\"relative\"\n    >\n      <div className=\"relative mx-auto aspect-9/16 w-full overflow-hidden rounded-2xl bg-muted\">\n        {renderBanner(banner, true)}\n\n        <div aria-hidden=\"true\" data-slot=\"story-progress\" className=\"absolute inset-x-3 top-3 z-30 flex gap-1\">\n          {banners.map((entry, segment) => (\n            <span\n              key={entry.id}\n              className={cn('h-1 flex-1 rounded-full', segment === current ? 'bg-background' : 'bg-background/40')}\n            />\n          ))}\n        </div>\n\n        <button\n          type=\"button\"\n          aria-label={copy.storyPrevious}\n          onClick={() => go(-1)}\n          className=\"absolute inset-y-0 left-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n        <button\n          type=\"button\"\n          aria-label={copy.storyNext}\n          onClick={() => go(1)}\n          className=\"absolute inset-y-0 right-0 z-30 w-1/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n      </div>\n\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {fillTemplate(copy.carouselStatus, { page: current + 1, pages: count })}\n      </p>\n    </div>\n  )\n}\n"],"mappings":";AAkDM,SAKM,KALN;AAhDN,SAAS,WAAW,gBAAgB;AAGpC,SAAS,UAAU;AAGnB,SAAS,oBAAoB;AAoBtB,SAAS,cAAc,EAAE,SAAS,MAAM,aAAa,GAAuB;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,QAAQ,QAAQ;AACtB,QAAM,UAAU,KAAK,IAAI,OAAO,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC;AACtD,QAAM,SAAS,QAAQ,OAAO;AAE9B,YAAU,MAAM;AACd,aAAS,CAAC;AAAA,EACZ,GAAG,CAAC,KAAK,CAAC;AAEV,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,KAAK,CAAC,UAAkB,SAAS,CAAC,WAAW,QAAQ,QAAQ,SAAS,KAAK;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,wBAAsB,KAAK;AAAA,MAC3B,cAAY,KAAK;AAAA,MACjB,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,4EACZ;AAAA,uBAAa,QAAQ,IAAI;AAAA,UAE1B,oBAAC,SAAI,eAAY,QAAO,aAAU,kBAAiB,WAAU,4CAC1D,kBAAQ,IAAI,CAAC,OAAO,YACnB;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,GAAG,2BAA2B,YAAY,UAAU,kBAAkB,kBAAkB;AAAA;AAAA,YAD9F,MAAM;AAAA,UAEb,CACD,GACH;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,KAAK;AAAA,cACjB,SAAS,MAAM,GAAG,EAAE;AAAA,cACpB,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,KAAK;AAAA,cACjB,SAAS,MAAM,GAAG,CAAC;AAAA,cACnB,WAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,QAEA,oBAAC,OAAE,aAAU,UAAS,WAAU,WAC7B,uBAAa,KAAK,gBAAgB,EAAE,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,GACxE;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/blocks/designs/universal-banner/use-container-width.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject } from 'react';
+import type { Breakpoint } from './contracts';
+export type ContainerWidth = {
+    width: number;
+    breakpoint: Breakpoint;
+};
+/**
+ * Measures the block root once and republishes on resize. The same 448/672
+ * thresholds drive the CSS container variants, so the carousel page math and
+ * the layout can never disagree.
+ *
+ * Measurements are scheduled on an animation frame: a `ResizeObserver` can fire
+ * while React is still committing the mount, and updating state there triggers
+ * React's "hasn't mounted yet" warning.
+ */
+export declare function useContainerWidth(ref: RefObject<Element | null>): ContainerWidth;
+//# sourceMappingURL=use-container-width.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-container-width.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/universal-banner/use-container-width.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,cAAc,CAgChF"}

package/dist/blocks/designs/universal-banner/use-container-width.js

@@ -0,0 +1,59 @@
+"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 use_container_width_exports = {};
+__export(use_container_width_exports, {
+  useContainerWidth: () => useContainerWidth
+});
+module.exports = __toCommonJS(use_container_width_exports);
+var import_react = require("react");
+var import_responsive = require("./responsive.js");
+function useContainerWidth(ref) {
+  const [width, setWidth] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const next = element.getBoundingClientRect().width;
+      setWidth((current) => current === next ? current : next);
+    };
+    const schedule = () => {
+      if (frame !== 0) return;
+      frame = requestAnimationFrame(measure);
+    };
+    schedule();
+    if (typeof ResizeObserver === "undefined") {
+      return () => cancelAnimationFrame(frame);
+    }
+    const observer = new ResizeObserver(schedule);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [ref]);
+  return { width, breakpoint: (0, import_responsive.breakpointForWidth)(width) };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useContainerWidth
+});
+//# sourceMappingURL=use-container-width.js.map

package/dist/blocks/designs/universal-banner/use-container-width.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/use-container-width.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { RefObject } from 'react'\n\nimport type { Breakpoint } from './contracts'\nimport { breakpointForWidth } from './responsive'\n\nexport type ContainerWidth = {\n  width: number\n  breakpoint: Breakpoint\n}\n\n/**\n * Measures the block root once and republishes on resize. The same 448/672\n * thresholds drive the CSS container variants, so the carousel page math and\n * the layout can never disagree.\n *\n * Measurements are scheduled on an animation frame: a `ResizeObserver` can fire\n * while React is still committing the mount, and updating state there triggers\n * React's \"hasn't mounted yet\" warning.\n */\nexport function useContainerWidth(ref: RefObject<Element | null>): ContainerWidth {\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    let frame = 0\n    const measure = () => {\n      frame = 0\n      const next = element.getBoundingClientRect().width\n      setWidth((current) => (current === next ? current : next))\n    }\n    const schedule = () => {\n      if (frame !== 0) return\n      frame = requestAnimationFrame(measure)\n    }\n\n    schedule()\n\n    if (typeof ResizeObserver === 'undefined') {\n      return () => cancelAnimationFrame(frame)\n    }\n    const observer = new ResizeObserver(schedule)\n    observer.observe(element)\n    return () => {\n      observer.disconnect()\n      cancelAnimationFrame(frame)\n    }\n  }, [ref])\n\n  return { width, breakpoint: breakpointForWidth(width) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAoC;AAIpC,wBAAmC;AAgB5B,SAAS,kBAAkB,KAAgD;AAChF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,QAAI,QAAQ;AACZ,UAAM,UAAU,MAAM;AACpB,cAAQ;AACR,YAAM,OAAO,QAAQ,sBAAsB,EAAE;AAC7C,eAAS,CAAC,YAAa,YAAY,OAAO,UAAU,IAAK;AAAA,IAC3D;AACA,UAAM,WAAW,MAAM;AACrB,UAAI,UAAU,EAAG;AACjB,cAAQ,sBAAsB,OAAO;AAAA,IACvC;AAEA,aAAS;AAET,QAAI,OAAO,mBAAmB,aAAa;AACzC,aAAO,MAAM,qBAAqB,KAAK;AAAA,IACzC;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,EAAE,OAAO,gBAAY,sCAAmB,KAAK,EAAE;AACxD;","names":[]}

package/dist/blocks/designs/universal-banner/use-container-width.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useState } from "react";
+import { breakpointForWidth } from "./responsive.mjs";
+function useContainerWidth(ref) {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const next = element.getBoundingClientRect().width;
+      setWidth((current) => current === next ? current : next);
+    };
+    const schedule = () => {
+      if (frame !== 0) return;
+      frame = requestAnimationFrame(measure);
+    };
+    schedule();
+    if (typeof ResizeObserver === "undefined") {
+      return () => cancelAnimationFrame(frame);
+    }
+    const observer = new ResizeObserver(schedule);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [ref]);
+  return { width, breakpoint: breakpointForWidth(width) };
+}
+export {
+  useContainerWidth
+};
+//# sourceMappingURL=use-container-width.mjs.map

package/dist/blocks/designs/universal-banner/use-container-width.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/universal-banner/use-container-width.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { RefObject } from 'react'\n\nimport type { Breakpoint } from './contracts'\nimport { breakpointForWidth } from './responsive'\n\nexport type ContainerWidth = {\n  width: number\n  breakpoint: Breakpoint\n}\n\n/**\n * Measures the block root once and republishes on resize. The same 448/672\n * thresholds drive the CSS container variants, so the carousel page math and\n * the layout can never disagree.\n *\n * Measurements are scheduled on an animation frame: a `ResizeObserver` can fire\n * while React is still committing the mount, and updating state there triggers\n * React's \"hasn't mounted yet\" warning.\n */\nexport function useContainerWidth(ref: RefObject<Element | null>): ContainerWidth {\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    let frame = 0\n    const measure = () => {\n      frame = 0\n      const next = element.getBoundingClientRect().width\n      setWidth((current) => (current === next ? current : next))\n    }\n    const schedule = () => {\n      if (frame !== 0) return\n      frame = requestAnimationFrame(measure)\n    }\n\n    schedule()\n\n    if (typeof ResizeObserver === 'undefined') {\n      return () => cancelAnimationFrame(frame)\n    }\n    const observer = new ResizeObserver(schedule)\n    observer.observe(element)\n    return () => {\n      observer.disconnect()\n      cancelAnimationFrame(frame)\n    }\n  }, [ref])\n\n  return { width, breakpoint: breakpointForWidth(width) }\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAIpC,SAAS,0BAA0B;AAgB5B,SAAS,kBAAkB,KAAgD;AAChF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,QAAI,QAAQ;AACZ,UAAM,UAAU,MAAM;AACpB,cAAQ;AACR,YAAM,OAAO,QAAQ,sBAAsB,EAAE;AAC7C,eAAS,CAAC,YAAa,YAAY,OAAO,UAAU,IAAK;AAAA,IAC3D;AACA,UAAM,WAAW,MAAM;AACrB,UAAI,UAAU,EAAG;AACjB,cAAQ,sBAAsB,OAAO;AAAA,IACvC;AAEA,aAAS;AAET,QAAI,OAAO,mBAAmB,aAAa;AACzC,aAAO,MAAM,qBAAqB,KAAK;AAAA,IACzC;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,EAAE,OAAO,YAAY,mBAAmB,KAAK,EAAE;AACxD;","names":[]}

package/dist/blocks/e-commerce/account/account-frame.d.ts

@@ -0,0 +1,38 @@
+/** The bounded account page shapes. `sidebar` is deliberately not offered. */
+export type AccountFramePresentation = 'stack' | 'tabs';
+/** One account module the host has installed and mounted. */
+export interface AccountModule {
+    /** Stable module id; used as the anchor/tab id and reported on selection. */
+    id: string;
+    /** Visible navigation label. */
+    label: string;
+    /** Optional explicit destination; the stacked shape defaults to `#<id>`. */
+    href?: string;
+}
+/** Every user-facing string the frame renders. */
+export interface AccountFrameLabels {
+    title: string;
+    navLabel: string;
+}
+export interface AccountFrameProps {
+    /** Display name supplied by the host (never fetched by the block). */
+    displayName: string;
+    /** Optional email; omitted when absent, never rendered as an empty element. */
+    email?: string;
+    /** Installed modules, in render order. */
+    modules: AccountModule[];
+    /** The module currently shown in the tabbed shape. */
+    activeModule?: string;
+    presentation?: AccountFramePresentation;
+    labels?: Partial<AccountFrameLabels>;
+    /** Report a module selection; the host owns the active module. */
+    onSelectModule?: (id: string) => void;
+    className?: string;
+}
+/**
+ * The account surface header: shopper identity plus module navigation. The block
+ * renders exactly what the host supplies — no order counts, rewards, or other
+ * invented metrics — and owns no state: the active module is host-controlled.
+ */
+export declare function AccountFrame({ displayName, email, modules, activeModule, presentation, labels, onSelectModule, className, }: AccountFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=account-frame.d.ts.map

package/dist/blocks/e-commerce/account/account-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-frame.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/account/account-frame.tsx"],"names":[],"mappings":"AAMA,8EAA8E;AAC9E,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,MAAM,CAAA;AAEvD,6DAA6D;AAC7D,MAAM,WAAW,aAAa;IAC5B,6EAA6E;IAC7E,EAAE,EAAE,MAAM,CAAA;IACV,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,kDAAkD;AAClD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAOD,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAA;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,wBAAwB,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA;IACpC,kEAAkE;IAClE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAsB,EACtB,MAAM,EACN,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,+BAoFnB"}

package/dist/blocks/e-commerce/account/account-frame.js

@@ -0,0 +1,102 @@
+"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 account_frame_exports = {};
+__export(account_frame_exports, {
+  AccountFrame: () => AccountFrame
+});
+module.exports = __toCommonJS(account_frame_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_utils = require("../../../lib/utils.js");
+const defaultLabels = {
+  title: "Mi cuenta",
+  navLabel: "Secciones de la cuenta"
+};
+function AccountFrame({
+  displayName,
+  email,
+  modules,
+  activeModule,
+  presentation = "stack",
+  labels,
+  onSelectModule,
+  className
+}) {
+  if (presentation !== "stack" && presentation !== "tabs") {
+    throw new Error(
+      `AccountFrame does not support presentation "${String(presentation)}". Use "stack" or "tabs".`
+    );
+  }
+  const copy = { ...defaultLabels, ...labels };
+  const tabRefs = (0, import_react.useRef)([]);
+  const moveSelection = (event) => {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const current = Math.max(
+      0,
+      modules.findIndex((module2) => module2.id === activeModule)
+    );
+    const next = event.key === "Home" ? 0 : event.key === "End" ? modules.length - 1 : event.key === "ArrowRight" ? (current + 1) % modules.length : (current - 1 + modules.length) % modules.length;
+    onSelectModule?.(modules[next].id);
+    tabRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: (0, import_utils.cn)("border-b pb-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: copy.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "mt-1 text-2xl font-bold tracking-tight sm:text-3xl", children: displayName }),
+    email ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-sm", children: email }) : null,
+    modules.length > 0 ? presentation === "stack" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": copy.navLabel, className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-wrap gap-x-6 gap-y-2", children: modules.map((module2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        href: module2.href ?? `#${module2.id}`,
+        "aria-current": module2.id === activeModule ? "true" : void 0,
+        className: "hover:text-foreground text-muted-foreground text-sm font-medium underline-offset-4 hover:underline",
+        children: module2.label
+      }
+    ) }, module2.id)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "tablist", "aria-label": copy.navLabel, className: "mt-6 flex flex-wrap gap-2", onKeyDown: moveSelection, children: modules.map((module2) => {
+      const selected = module2.id === activeModule;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ref: (node) => {
+            tabRefs.current[modules.indexOf(module2)] = node;
+          },
+          type: "button",
+          role: "tab",
+          id: `account-tab-${module2.id}`,
+          "aria-selected": selected,
+          "aria-controls": `account-panel-${module2.id}`,
+          tabIndex: selected ? 0 : -1,
+          onClick: () => onSelectModule?.(module2.id),
+          className: (0, import_utils.cn)(
+            "rounded-md border px-3 py-2 text-sm font-medium transition-colors",
+            selected ? "bg-foreground text-background border-transparent" : "hover:bg-muted border-border bg-transparent"
+          ),
+          children: module2.label
+        },
+        module2.id
+      );
+    }) }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountFrame
+});
+//# sourceMappingURL=account-frame.js.map

package/dist/blocks/e-commerce/account/account-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/account/account-frame.tsx"],"sourcesContent":["'use client'\n\nimport { useRef } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { cn } from '../../../lib/utils'\n\n/** The bounded account page shapes. `sidebar` is deliberately not offered. */\nexport type AccountFramePresentation = 'stack' | 'tabs'\n\n/** One account module the host has installed and mounted. */\nexport interface AccountModule {\n  /** Stable module id; used as the anchor/tab id and reported on selection. */\n  id: string\n  /** Visible navigation label. */\n  label: string\n  /** Optional explicit destination; the stacked shape defaults to `#<id>`. */\n  href?: string\n}\n\n/** Every user-facing string the frame renders. */\nexport interface AccountFrameLabels {\n  title: string\n  navLabel: string\n}\n\nconst defaultLabels: AccountFrameLabels = {\n  title: 'Mi cuenta',\n  navLabel: 'Secciones de la cuenta',\n}\n\nexport interface AccountFrameProps {\n  /** Display name supplied by the host (never fetched by the block). */\n  displayName: string\n  /** Optional email; omitted when absent, never rendered as an empty element. */\n  email?: string\n  /** Installed modules, in render order. */\n  modules: AccountModule[]\n  /** The module currently shown in the tabbed shape. */\n  activeModule?: string\n  presentation?: AccountFramePresentation\n  labels?: Partial<AccountFrameLabels>\n  /** Report a module selection; the host owns the active module. */\n  onSelectModule?: (id: string) => void\n  className?: string\n}\n\n/**\n * The account surface header: shopper identity plus module navigation. The block\n * renders exactly what the host supplies — no order counts, rewards, or other\n * invented metrics — and owns no state: the active module is host-controlled.\n */\nexport function AccountFrame({\n  displayName,\n  email,\n  modules,\n  activeModule,\n  presentation = 'stack',\n  labels,\n  onSelectModule,\n  className,\n}: AccountFrameProps) {\n  if (presentation !== 'stack' && presentation !== 'tabs') {\n    throw new Error(\n      `AccountFrame does not support presentation \"${String(presentation)}\". Use \"stack\" or \"tabs\".`,\n    )\n  }\n  const copy = { ...defaultLabels, ...labels }\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n  const moveSelection = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) return\n    event.preventDefault()\n    const current = Math.max(\n      0,\n      modules.findIndex((module) => module.id === activeModule),\n    )\n    const next =\n      event.key === 'Home'\n        ? 0\n        : event.key === 'End'\n          ? modules.length - 1\n          : event.key === 'ArrowRight'\n            ? (current + 1) % modules.length\n            : (current - 1 + modules.length) % modules.length\n    onSelectModule?.(modules[next].id)\n    tabRefs.current[next]?.focus()\n  }\n\n  return (\n    <header className={cn('border-b pb-6', className)}>\n      <p className=\"text-muted-foreground text-sm\">{copy.title}</p>\n      <h1 className=\"mt-1 text-2xl font-bold tracking-tight sm:text-3xl\">{displayName}</h1>\n      {email ? <p className=\"text-muted-foreground mt-1 text-sm\">{email}</p> : null}\n\n      {modules.length > 0 ? (\n        presentation === 'stack' ? (\n          <nav aria-label={copy.navLabel} className=\"mt-6\">\n            <ul className=\"flex flex-wrap gap-x-6 gap-y-2\">\n              {modules.map((module) => (\n                <li key={module.id}>\n                  <a\n                    href={module.href ?? `#${module.id}`}\n                    aria-current={module.id === activeModule ? 'true' : undefined}\n                    className=\"hover:text-foreground text-muted-foreground text-sm font-medium underline-offset-4 hover:underline\"\n                  >\n                    {module.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        ) : (\n          <div role=\"tablist\" aria-label={copy.navLabel} className=\"mt-6 flex flex-wrap gap-2\" onKeyDown={moveSelection}>\n            {modules.map((module) => {\n              const selected = module.id === activeModule\n              return (\n                <button\n                  key={module.id}\n                  ref={(node) => {\n                    tabRefs.current[modules.indexOf(module)] = node\n                  }}\n                  type=\"button\"\n                  role=\"tab\"\n                  id={`account-tab-${module.id}`}\n                  aria-selected={selected}\n                  aria-controls={`account-panel-${module.id}`}\n                  tabIndex={selected ? 0 : -1}\n                  onClick={() => onSelectModule?.(module.id)}\n                  className={cn(\n                    'rounded-md border px-3 py-2 text-sm font-medium transition-colors',\n                    selected\n                      ? 'bg-foreground text-background border-transparent'\n                      : 'hover:bg-muted border-border bg-transparent',\n                  )}\n                >\n                  {module.label}\n                </button>\n              )\n            })}\n          </div>\n        )\n      ) : null}\n    </header>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFI;AAvFJ,mBAAuB;AAEvB,mBAAmB;AAqBnB,MAAM,gBAAoC;AAAA,EACxC,OAAO;AAAA,EACP,UAAU;AACZ;AAuBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,iBAAiB,WAAW,iBAAiB,QAAQ;AACvD,UAAM,IAAI;AAAA,MACR,+CAA+C,OAAO,YAAY,CAAC;AAAA,IACrE;AAAA,EACF;AACA,QAAM,OAAO,EAAE,GAAG,eAAe,GAAG,OAAO;AAC3C,QAAM,cAAU,qBAAwC,CAAC,CAAC;AAE1D,QAAM,gBAAgB,CAAC,UAAyC;AAC9D,QAAI,CAAC,CAAC,cAAc,aAAa,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,EAAG;AACrE,UAAM,eAAe;AACrB,UAAM,UAAU,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,UAAU,CAACA,YAAWA,QAAO,OAAO,YAAY;AAAA,IAC1D;AACA,UAAM,OACJ,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,QAAQ,SAAS,IACjB,MAAM,QAAQ,gBACX,UAAU,KAAK,QAAQ,UACvB,UAAU,IAAI,QAAQ,UAAU,QAAQ;AACnD,qBAAiB,QAAQ,IAAI,EAAE,EAAE;AACjC,YAAQ,QAAQ,IAAI,GAAG,MAAM;AAAA,EAC/B;AAEA,SACE,6CAAC,YAAO,eAAW,iBAAG,iBAAiB,SAAS,GAC9C;AAAA,gDAAC,OAAE,WAAU,iCAAiC,eAAK,OAAM;AAAA,IACzD,4CAAC,QAAG,WAAU,sDAAsD,uBAAY;AAAA,IAC/E,QAAQ,4CAAC,OAAE,WAAU,sCAAsC,iBAAM,IAAO;AAAA,IAExE,QAAQ,SAAS,IAChB,iBAAiB,UACf,4CAAC,SAAI,cAAY,KAAK,UAAU,WAAU,QACxC,sDAAC,QAAG,WAAU,kCACX,kBAAQ,IAAI,CAACA,YACZ,4CAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAMA,QAAO,QAAQ,IAAIA,QAAO,EAAE;AAAA,QAClC,gBAAcA,QAAO,OAAO,eAAe,SAAS;AAAA,QACpD,WAAU;AAAA,QAET,UAAAA,QAAO;AAAA;AAAA,IACV,KAPOA,QAAO,EAQhB,CACD,GACH,GACF,IAEA,4CAAC,SAAI,MAAK,WAAU,cAAY,KAAK,UAAU,WAAU,6BAA4B,WAAW,eAC7F,kBAAQ,IAAI,CAACA,YAAW;AACvB,YAAM,WAAWA,QAAO,OAAO;AAC/B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,CAAC,SAAS;AACb,oBAAQ,QAAQ,QAAQ,QAAQA,OAAM,CAAC,IAAI;AAAA,UAC7C;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI,eAAeA,QAAO,EAAE;AAAA,UAC5B,iBAAe;AAAA,UACf,iBAAe,iBAAiBA,QAAO,EAAE;AAAA,UACzC,UAAU,WAAW,IAAI;AAAA,UACzB,SAAS,MAAM,iBAAiBA,QAAO,EAAE;AAAA,UACzC,eAAW;AAAA,YACT;AAAA,YACA,WACI,qDACA;AAAA,UACN;AAAA,UAEC,UAAAA,QAAO;AAAA;AAAA,QAlBHA,QAAO;AAAA,MAmBd;AAAA,IAEJ,CAAC,GACH,IAEA;AAAA,KACN;AAEJ;","names":["module"]}

package/dist/blocks/e-commerce/account/account-frame.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../../lib/utils.mjs";
+const defaultLabels = {
+  title: "Mi cuenta",
+  navLabel: "Secciones de la cuenta"
+};
+function AccountFrame({
+  displayName,
+  email,
+  modules,
+  activeModule,
+  presentation = "stack",
+  labels,
+  onSelectModule,
+  className
+}) {
+  if (presentation !== "stack" && presentation !== "tabs") {
+    throw new Error(
+      `AccountFrame does not support presentation "${String(presentation)}". Use "stack" or "tabs".`
+    );
+  }
+  const copy = { ...defaultLabels, ...labels };
+  const tabRefs = useRef([]);
+  const moveSelection = (event) => {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const current = Math.max(
+      0,
+      modules.findIndex((module) => module.id === activeModule)
+    );
+    const next = event.key === "Home" ? 0 : event.key === "End" ? modules.length - 1 : event.key === "ArrowRight" ? (current + 1) % modules.length : (current - 1 + modules.length) % modules.length;
+    onSelectModule?.(modules[next].id);
+    tabRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsxs("header", { className: cn("border-b pb-6", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: copy.title }),
+    /* @__PURE__ */ jsx("h1", { className: "mt-1 text-2xl font-bold tracking-tight sm:text-3xl", children: displayName }),
+    email ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: email }) : null,
+    modules.length > 0 ? presentation === "stack" ? /* @__PURE__ */ jsx("nav", { "aria-label": copy.navLabel, className: "mt-6", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-2", children: modules.map((module) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: module.href ?? `#${module.id}`,
+        "aria-current": module.id === activeModule ? "true" : void 0,
+        className: "hover:text-foreground text-muted-foreground text-sm font-medium underline-offset-4 hover:underline",
+        children: module.label
+      }
+    ) }, module.id)) }) }) : /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": copy.navLabel, className: "mt-6 flex flex-wrap gap-2", onKeyDown: moveSelection, children: modules.map((module) => {
+      const selected = module.id === activeModule;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (node) => {
+            tabRefs.current[modules.indexOf(module)] = node;
+          },
+          type: "button",
+          role: "tab",
+          id: `account-tab-${module.id}`,
+          "aria-selected": selected,
+          "aria-controls": `account-panel-${module.id}`,
+          tabIndex: selected ? 0 : -1,
+          onClick: () => onSelectModule?.(module.id),
+          className: cn(
+            "rounded-md border px-3 py-2 text-sm font-medium transition-colors",
+            selected ? "bg-foreground text-background border-transparent" : "hover:bg-muted border-border bg-transparent"
+          ),
+          children: module.label
+        },
+        module.id
+      );
+    }) }) : null
+  ] });
+}
+export {
+  AccountFrame
+};
+//# sourceMappingURL=account-frame.mjs.map