@rebuy/rebuy 3.31.0 → 3.33.0

package/README.md

@@ -17,7 +17,7 @@ Node `^22.14.0 || ^24.10.0 || ^26.0.0` for development; the published artifacts
 | Subpath | Contents |
 | --- | --- |
 | `@rebuy/rebuy` | Root barrel: schemas, client helpers, utilities |
-| `@rebuy/rebuy/cab` | zod-free CAB renderer helpers shared by every renderer (`contentText`, `tiptapPlainText`, `tiptapRuns`, `asLayout`, `idFromGid`, `toCents`, `decoratedOrderId`) |
+| `@rebuy/rebuy/cab` | zod-free CAB renderer helpers shared by every renderer (`contentText`, `tiptapPlainText`, `tiptapRuns`, `asLayout`, `idFromGid`, `toCents`, `decoratedOrderId`, `reviewStars`) |
 | `@rebuy/rebuy/client` | `RebuyClient` API client |
 | `@rebuy/rebuy/gwp` | Gift-with-purchase validation helpers |
 | `@rebuy/rebuy/pricing` | Variant pricing/discount forecast (`priceVariant`, `currencyDecimals`) |

package/dist/cab/index.cjs

@@ -26,6 +26,7 @@ __export(cab_exports, {
   idFromGid: () => idFromGid,
   interpolateAndSanitize: () => interpolateAndSanitize,
   isTiptapDoc: () => isTiptapDoc,
+  reviewStars: () => reviewStars,
   selectLanguage: () => selectLanguage,
   tiptapPlainText: () => tiptapPlainText,
   tiptapRuns: () => tiptapRuns,
@@ -94,6 +95,34 @@ var decoratedOrderId = (orderId) => orderId?.match(/\/Order(?:Identity)?\/(\d+)$
 // src/cab/gid.ts
 var idFromGid = (gid) => gid.slice(gid.lastIndexOf("/") + 1);
 
+// src/cab/reviewStars.ts
+var STAR_WIDTH = 120;
+var STAR_PATH = "M43 41C62 0 58 0 77 41c45 6 45 1 11 33 8 46 12 41-28 21-40 20-36 25-28-21C-2 42-2 47 43 41Z";
+var escapeXml = (value) => value.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+var reviewStars = ({ color, height, outline, rating, total = 5 }) => {
+  const filled = `${(rating / total * 100).toFixed()}%`;
+  const empty = `${(100 - rating / total * 100).toFixed()}%`;
+  const label = `${rating} out of ${total} stars`;
+  const stars = Array.from({ length: total }, (_, index) => `<use href='#star' x='${index * STAR_WIDTH}' />`).join(
+    ""
+  );
+  const stroke = outline ? `<g fill='none' stroke='${escapeXml(outline.color)}' stroke-width='${outline.width * STAR_WIDTH / height}'>${stars}</g>` : "";
+  return {
+    label,
+    svg: [
+      `<svg aria-label='${label}' height='${height}' viewBox='0 0 ${total * STAR_WIDTH} 120'`,
+      ` width='${height * total}' xmlns='http://www.w3.org/2000/svg'>`,
+      `<defs><mask id='partial'>`,
+      `<rect fill='#fff' height='100%' width='${filled}' x='0' y='0' />`,
+      `<rect fill='#333' height='100%' width='${empty}' x='${filled}' y='0' />`,
+      `</mask><path d='${STAR_PATH}' id='star' /></defs>`,
+      `<g fill='${escapeXml(color)}' mask='url(#partial)'>${stars}</g>`,
+      stroke,
+      "</svg>"
+    ].join("")
+  };
+};
+
 // src/transforms/htmlToTiptap/isValidHref.ts
 var RELATIVE_BASE = "https://x.invalid";
 var ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);

package/dist/cab/index.d.ts

@@ -3,6 +3,7 @@ export * from '../cab/contentText';
 export * from '../cab/decoratedOrderId';
 export * from '../cab/gid';
 export * from '../cab/interpolateAndSanitize';
+export * from '../cab/reviewStars';
 export * from '../cab/selectLanguage';
 export * from '../cab/tiptapPlain';
 export * from '../cab/tiptapRuns';

package/dist/cab/index.mjs

@@ -59,6 +59,34 @@ var decoratedOrderId = (orderId) => orderId?.match(/\/Order(?:Identity)?\/(\d+)$
 // src/cab/gid.ts
 var idFromGid = (gid) => gid.slice(gid.lastIndexOf("/") + 1);
 
+// src/cab/reviewStars.ts
+var STAR_WIDTH = 120;
+var STAR_PATH = "M43 41C62 0 58 0 77 41c45 6 45 1 11 33 8 46 12 41-28 21-40 20-36 25-28-21C-2 42-2 47 43 41Z";
+var escapeXml = (value) => value.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+var reviewStars = ({ color, height, outline, rating, total = 5 }) => {
+  const filled = `${(rating / total * 100).toFixed()}%`;
+  const empty = `${(100 - rating / total * 100).toFixed()}%`;
+  const label = `${rating} out of ${total} stars`;
+  const stars = Array.from({ length: total }, (_, index) => `<use href='#star' x='${index * STAR_WIDTH}' />`).join(
+    ""
+  );
+  const stroke = outline ? `<g fill='none' stroke='${escapeXml(outline.color)}' stroke-width='${outline.width * STAR_WIDTH / height}'>${stars}</g>` : "";
+  return {
+    label,
+    svg: [
+      `<svg aria-label='${label}' height='${height}' viewBox='0 0 ${total * STAR_WIDTH} 120'`,
+      ` width='${height * total}' xmlns='http://www.w3.org/2000/svg'>`,
+      `<defs><mask id='partial'>`,
+      `<rect fill='#fff' height='100%' width='${filled}' x='0' y='0' />`,
+      `<rect fill='#333' height='100%' width='${empty}' x='${filled}' y='0' />`,
+      `</mask><path d='${STAR_PATH}' id='star' /></defs>`,
+      `<g fill='${escapeXml(color)}' mask='url(#partial)'>${stars}</g>`,
+      stroke,
+      "</svg>"
+    ].join("")
+  };
+};
+
 // src/transforms/htmlToTiptap/isValidHref.ts
 var RELATIVE_BASE = "https://x.invalid";
 var ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
@@ -147,6 +175,7 @@ export {
   idFromGid,
   interpolateAndSanitize,
   isTiptapDoc,
+  reviewStars,
   selectLanguage,
   tiptapPlainText,
   tiptapRuns,

package/dist/cab/reviewStars.d.ts

@@ -0,0 +1,24 @@
+export type ReviewStarsOptions = {
+    /** Fill colour of the rated portion; merchant-supplied, so it is XML-escaped. */
+    color: string;
+    /** Pixel height of one star; the row is `height * total` wide. */
+    height: number;
+    /** Stroke drawn over every star, `width` in px (scaled into viewBox units); omit for no outline. */
+    outline?: {
+        color: string;
+        width: number;
+    };
+    rating: number;
+    total?: number;
+};
+/**
+ * A partially-filled review-star row as an SVG string plus its accessible label — the same stars in every
+ * renderer. A mask clips the fill to `rating / total`; each renderer wraps the string in its own element
+ * (a data-URL image on checkout) and keeps its own rating and count provider. The string must stay an isolated
+ * document (a data URL / `<img>`), never inlined into the page: its `#partial` and `#star` ids are fixed, so two
+ * inlined rows would share the first row's mask.
+ */
+export declare const reviewStars: ({ color, height, outline, rating, total }: ReviewStarsOptions) => {
+    label: string;
+    svg: string;
+};