@reblu/site-blocks 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all3) => {
   for (var name in all3)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -13053,9 +13043,13 @@ function markdownToSafeHtml(markdown) {
 }
 
 // src/components/markdown-renderer.tsx
-var import_site_ui = require("@reblu/site-ui");
-var import_html_react_parser = __toESM(require("html-react-parser"), 1);
+var import_utils = require("@reblu/site-ui/utils");
+var import_html_react_parser = require("html-react-parser");
 var import_jsx_runtime = require("react/jsx-runtime");
+var HTML_TO_DOM_OPTIONS = { lowerCaseAttributeNames: false };
+function parse3(html5, options) {
+  return (0, import_html_react_parser.domToReact)((0, import_html_react_parser.htmlToDOM)(html5, HTML_TO_DOM_OPTIONS), options);
+}
 var HEADING_CLASSES = {
   1: "text-3xl font-bold mt-8 mb-4 first:mt-0",
   2: "text-2xl font-bold mt-7 mb-3 first:mt-0",
@@ -13067,6 +13061,41 @@ var HEADING_CLASSES = {
 function hasClass(el, name) {
   return typeof el.attribs.class === "string" && el.attribs.class.split(/\s+/).includes(name);
 }
+var PRESERVED_GLOBAL_ATTRIBUTES = [
+  // Anchor targets. In-document links ("see clause 4" → `#clause-4`) resolve to
+  // nothing without them.
+  "id",
+  // Language and direction of a passage — a bilingual legal page is the normal case
+  // here, and screen readers switch voice on it.
+  "lang",
+  "dir",
+  // Advisory text the author wrote; it is content, not styling.
+  "title",
+  // Explicit "do not publish this". Without it a block authored as `<p hidden>`
+  // becomes VISIBLE — publishing what the author marked as not-for-publication.
+  "hidden",
+  // Accessible semantics. `../lib/markdown` restores these through the sanitiser
+  // precisely so they are not lost (REB-286's axe gate); dropping them one layer
+  // later would undo that.
+  "role"
+];
+var PRESERVED_ATTRIBUTE_PREFIXES = ["aria-", "data-"];
+var PRESERVED_TAG_ATTRIBUTES = {
+  ol: ["start", "type"],
+  li: ["value", "type"]
+};
+var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set(["hidden"]);
+function authorAttributes(el) {
+  const tagSpecific = PRESERVED_TAG_ATTRIBUTES[el.name] ?? [];
+  const preserved = {};
+  for (const [rawName, value] of Object.entries(el.attribs)) {
+    const name = rawName.toLowerCase();
+    const keep = PRESERVED_GLOBAL_ATTRIBUTES.includes(name) || tagSpecific.includes(name) || PRESERVED_ATTRIBUTE_PREFIXES.some((prefix) => name.startsWith(prefix));
+    if (!keep) continue;
+    preserved[name] = BOOLEAN_ATTRIBUTES.has(name) ? true : value;
+  }
+  return preserved;
+}
 function isExternalHref(href) {
   return !!href && /^(https?:)?\/\//.test(href);
 }
@@ -13076,29 +13105,46 @@ function buildOptions(headingOffset) {
       if (!(node instanceof import_html_react_parser.Element)) return void 0;
       const children2 = () => (0, import_html_react_parser.domToReact)(node.children, options);
       const { name, attribs } = node;
+      const author = authorAttributes(node);
       const headingMatch = /^h([1-6])$/.exec(name);
       if (headingMatch) {
         const rendered = Math.min(6, Number(headingMatch[1]) + headingOffset);
         const Tag = `h${rendered}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { className: HEADING_CLASSES[rendered], children: children2() });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ...author, className: HEADING_CLASSES[rendered], children: children2() });
       }
       switch (name) {
         case "p":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "my-4 leading-relaxed text-foreground/90", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...author, className: "my-4 leading-relaxed text-foreground/90", children: children2() });
         case "ul":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: hasClass(node, "contains-task-list") ? "list-none pl-0 my-4 space-y-1" : "list-disc ml-6 my-4", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ...author, className: hasClass(node, "contains-task-list") ? "list-none pl-0 my-4 space-y-1" : "list-disc ml-6 my-4", children: children2() });
         case "ol":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "list-decimal ml-6 my-4", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { ...author, className: "list-decimal ml-6 my-4", children: children2() });
         case "li":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: hasClass(node, "task-list-item") ? "flex items-start gap-2 my-1" : "my-1", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...author, className: hasClass(node, "task-list-item") ? "flex items-start gap-2 my-1" : "my-1", children: children2() });
         case "blockquote":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { className: "border-l-4 border-primary/50 pl-6 italic my-6 text-muted-foreground", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "blockquote",
+            {
+              ...author,
+              className: "border-l-4 border-primary/50 pl-6 italic my-6 text-muted-foreground",
+              children: children2()
+            }
+          );
         case "pre":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "rounded-lg border border-input bg-muted p-4 my-6 overflow-x-auto font-mono text-sm", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "pre",
+            {
+              ...author,
+              className: "rounded-lg border border-input bg-muted p-4 my-6 overflow-x-auto font-mono text-sm",
+              children: children2()
+            }
+          );
         case "code": {
           const isBlock = node.parent instanceof import_html_react_parser.Element && node.parent.name === "pre";
-          if (isBlock) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "block", children: children2() });
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-sm", children: children2() });
+          if (isBlock) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ...author, className: "block", children: children2() });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ...author, className: "rounded bg-muted px-1.5 py-0.5 font-mono text-sm", children: children2() });
         }
         case "a": {
           const href = attribs.href;
@@ -13106,6 +13152,7 @@ function buildOptions(headingOffset) {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "a",
             {
+              ...author,
               href,
               className: "text-primary underline underline-offset-4 hover:text-primary/80",
               ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
@@ -13122,6 +13169,7 @@ function buildOptions(headingOffset) {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "img",
               {
+                ...author,
                 src: attribs.src,
                 alt: attribs.alt ?? "",
                 loading: "lazy",
@@ -13133,6 +13181,7 @@ function buildOptions(headingOffset) {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative my-6 aspect-video w-full overflow-hidden rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "iframe",
             {
+              ...author,
               src: attribs.src,
               title: attribs.title ?? "Embedded video",
               allow: attribs.allow ?? "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
@@ -13141,13 +13190,13 @@ function buildOptions(headingOffset) {
             }
           ) });
         case "hr":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-8 border-muted-foreground/30" });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { ...author, className: "my-8 border-muted-foreground/30" });
         case "strong":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "font-bold text-foreground", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { ...author, className: "font-bold text-foreground", children: children2() });
         case "em":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: "italic", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { ...author, className: "italic", children: children2() });
         case "del":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("del", { className: "line-through", children: children2() });
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("del", { ...author, className: "line-through", children: children2() });
         default:
           return void 0;
       }
@@ -13158,18 +13207,19 @@ function buildOptions(headingOffset) {
 function MarkdownRenderer({ content, className, headingOffset = 0 }) {
   const html5 = markdownToSafeHtml(content);
   if (!html5) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_site_ui.cn)("max-w-none", className), "data-slot": "markdown", children: (0, import_html_react_parser.default)(html5, buildOptions(headingOffset)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("max-w-none", className), "data-slot": "markdown", children: parse3(html5, buildOptions(headingOffset)) });
 }
 function SafeHtml({ html: html5, className, headingOffset = 0 }) {
   if (!html5) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_site_ui.cn)("max-w-none", className), "data-slot": "safe-html", children: (0, import_html_react_parser.default)(html5, buildOptions(headingOffset)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("max-w-none", className), "data-slot": "safe-html", children: parse3(html5, buildOptions(headingOffset)) });
 }
 
 // src/components/treatment.tsx
-var import_site_ui3 = require("@reblu/site-ui");
+var import_utils3 = require("@reblu/site-ui/utils");
 
 // src/components/_page-parts.tsx
-var import_site_ui2 = require("@reblu/site-ui");
+var import_utils2 = require("@reblu/site-ui/utils");
+var import_button_variants = require("@reblu/site-ui/button-variants");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var KNOWN_BUTTON_VARIANTS = /* @__PURE__ */ new Set([
   "default",
@@ -13200,18 +13250,23 @@ function PageHero({ page }) {
 }
 function SectionCta({ section }) {
   if (!section.ctaLabel || !section.ctaUrl) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_site_ui2.Button, { asChild: true, variant: toButtonVariant(section.ctaVariant), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const variant = toButtonVariant(section.ctaVariant);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "a",
     {
       href: section.ctaUrl,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": "default",
+      className: (0, import_utils2.cn)((0, import_button_variants.buttonVariants)({ variant, size: "default" })),
       ...section.ctaIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {},
       children: section.ctaLabel
     }
-  ) }) });
+  ) });
 }
 function SectionImages({ section }) {
   if (section.images.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_site_ui2.cn)("grid gap-4", section.images.length > 1 ? "sm:grid-cols-2" : "grid-cols-1"), children: section.images.map((img) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("figure", { className: "space-y-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_utils2.cn)("grid gap-4", section.images.length > 1 ? "sm:grid-cols-2" : "grid-cols-1"), children: section.images.map((img) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("figure", { className: "space-y-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: img.url, alt: img.alt, loading: "lazy", className: "h-full w-full object-cover" }) }),
     img.caption && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("figcaption", { className: "text-sm text-muted-foreground", children: img.caption })
   ] }, `${img.url}-${img.order}`)) });
@@ -13248,14 +13303,14 @@ function PageSectionList({ sections }) {
 // src/components/treatment.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Treatment({ page, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("article", { className: (0, import_site_ui3.cn)("space-y-12", className), "data-slot": "treatment", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("article", { className: (0, import_utils3.cn)("space-y-12", className), "data-slot": "treatment", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PageHero, { page }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PageSectionList, { sections: page.sections })
   ] });
 }
 
 // src/components/specialty.tsx
-var import_site_ui4 = require("@reblu/site-ui");
+var import_utils4 = require("@reblu/site-ui/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Specialty({
   page,
@@ -13264,7 +13319,7 @@ function Specialty({
   treatmentsLabel = "Treatments",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("article", { className: (0, import_site_ui4.cn)("space-y-12", className), "data-slot": "specialty", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("article", { className: (0, import_utils4.cn)("space-y-12", className), "data-slot": "specialty", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PageHero, { page }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PageSectionList, { sections: page.sections }),
     treatments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "space-y-6", children: [
@@ -13296,7 +13351,7 @@ function Specialty({
 }
 
 // src/components/profile-card.tsx
-var import_site_ui5 = require("@reblu/site-ui");
+var import_utils5 = require("@reblu/site-ui/utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function initials(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
@@ -13306,7 +13361,7 @@ function ProfileCard({ name, role, imageUrl, specialties = [], bio, href, classN
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "article",
     {
-      className: (0, import_site_ui5.cn)(
+      className: (0, import_utils5.cn)(
         "flex flex-col items-center gap-3 rounded-lg border bg-card p-6 text-center",
         className
       ),
@@ -13338,7 +13393,7 @@ function ProfileCard({ name, role, imageUrl, specialties = [], bio, href, classN
 }
 
 // src/components/product-card.tsx
-var import_site_ui6 = require("@reblu/site-ui");
+var import_utils6 = require("@reblu/site-ui/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ProductCard({ product, href, currencyCode = "EUR", locale, className }) {
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
@@ -13346,7 +13401,7 @@ function ProductCard({ product, href, currencyCode = "EUR", locale, className })
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "article",
     {
-      className: (0, import_site_ui6.cn)(
+      className: (0, import_utils6.cn)(
         "group flex flex-col overflow-hidden rounded-lg border bg-card transition-shadow hover:shadow-lg",
         className
       ),