npm - @primestyleai/tryon - Versions diffs - 5.7.8 → 5.7.9 - Mend

@primestyleai/tryon 5.7.8 → 5.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/storefront/primestyle-tryon.js +346 -2
package/dist/storefront/size-guide-modal.d.ts +38 -0
package/package.json +1 -1

package/dist/storefront/primestyle-tryon.js CHANGED Viewed

@@ -9992,7 +9992,7 @@ function isImperial(locale) {
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
-const STYLES = `
+const STYLES$1 = `
   /* Variable defaults must live on BOTH the root (for the trigger button)
      and the overlay (which is React-portaled to <body> and therefore not
      a descendant of .ps-tryon-root, so the cascade is broken). Without
@@ -19604,7 +19604,7 @@ if (typeof document !== "undefined") {
   if (!document.getElementById(id2)) {
     const el2 = document.createElement("style");
     el2.id = id2;
-    el2.textContent = STYLES;
+    el2.textContent = STYLES$1;
     document.head.appendChild(el2);
   }
 }
@@ -20991,6 +20991,339 @@ function PrimeStyleTryonInner({
 function PrimeStyleTryon(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(PrimeStyleTryonInner, { ...props });
 }
+const STYLES = `
+  .ps-sg-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    margin: 0 0 10px 0;
+    background: transparent;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    color: var(--ps-sg-accent, #2154EF);
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+  .ps-sg-btn:hover {
+    background: rgba(33, 84, 239, 0.04);
+    border-color: var(--ps-sg-accent, #2154EF);
+  }
+  .ps-sg-btn svg { width: 14px; height: 14px; }
+  .ps-sg-overlay {
+    position: fixed; inset: 0;
+    background: rgba(15, 23, 42, 0.55);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 99999;
+    padding: 16px;
+    opacity: 0;
+    animation: ps-sg-fadein 0.18s ease forwards;
+  }
+  @keyframes ps-sg-fadein { to { opacity: 1; } }
+  .ps-sg-modal {
+    background: #FFFFFF;
+    border-radius: 14px;
+    width: 100%;
+    max-width: 720px;
+    max-height: 88vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: #1f2937;
+  }
+  .ps-sg-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  }
+  .ps-sg-title {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+  }
+  .ps-sg-toggle {
+    display: inline-flex;
+    background: rgba(15, 23, 42, 0.06);
+    border-radius: 8px;
+    padding: 3px;
+    margin-right: 12px;
+  }
+  .ps-sg-toggle button {
+    padding: 5px 14px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    cursor: pointer;
+    color: rgba(15, 23, 42, 0.55);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-family: inherit;
+  }
+  .ps-sg-toggle button.ps-sg-active {
+    background: #FFFFFF;
+    color: #1f2937;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  }
+  .ps-sg-close {
+    background: transparent;
+    border: none;
+    color: rgba(15, 23, 42, 0.55);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+    font-family: inherit;
+  }
+  .ps-sg-close:hover { background: rgba(15, 23, 42, 0.06); }
+  .ps-sg-close svg { width: 18px; height: 18px; }
+  .ps-sg-body {
+    padding: 18px 22px 22px;
+    overflow-y: auto;
+    flex: 1;
+  }
+  .ps-sg-section { margin-bottom: 22px; }
+  .ps-sg-section:last-child { margin-bottom: 0; }
+  .ps-sg-section-title {
+    margin: 0 0 6px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+  }
+  .ps-sg-section-desc {
+    margin: 0 0 10px;
+    font-size: 12px;
+    color: rgba(15, 23, 42, 0.6);
+  }
+  .ps-sg-table-wrap {
+    overflow-x: auto;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 10px;
+  }
+  .ps-sg-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+  .ps-sg-table thead th {
+    background: rgba(15, 23, 42, 0.04);
+    padding: 10px 12px;
+    text-align: left;
+    font-weight: 700;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgba(15, 23, 42, 0.6);
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  }
+  .ps-sg-table tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
+  }
+  .ps-sg-table tbody tr:last-child td { border-bottom: none; }
+  .ps-sg-htm {
+    margin-top: 18px;
+    padding: 14px 16px;
+    background: rgba(33, 84, 239, 0.05);
+    border-radius: 10px;
+    border: 1px solid rgba(33, 84, 239, 0.12);
+  }
+  .ps-sg-htm-title {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ps-sg-accent, #2154EF);
+    margin-bottom: 8px;
+  }
+  .ps-sg-htm ul {
+    margin: 0;
+    padding-left: 18px;
+    font-size: 12px;
+    line-height: 1.6;
+    color: #1f2937;
+  }
+`;
+let stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected) return;
+  const tag = document.createElement("style");
+  tag.id = "ps-sg-styles";
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+  stylesInjected = true;
+}
+const RULER_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/><path d="m17.5 15.5 2-2"/></svg>`;
+const X_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+function cmToInch(value) {
+  return value.replace(/[\d]+(?:\.\d+)?/g, (m2) => {
+    const n2 = parseFloat(m2);
+    if (isNaN(n2)) return m2;
+    const inches = n2 / 2.54;
+    return inches % 1 === 0 ? inches.toFixed(0) : inches.toFixed(1);
+  }).replace(/\s*cm\s*/gi, "");
+}
+function inchToCm(value) {
+  return value.replace(/[\d]+(?:\.\d+)?/g, (m2) => {
+    const n2 = parseFloat(m2);
+    return isNaN(n2) ? m2 : String(Math.round(n2 * 2.54));
+  }).replace(/[\u0022\u2033\u201D″"]/g, "").trim();
+}
+function normalizeToSections(guide) {
+  if (Array.isArray(guide.sections) && guide.sections.length > 0) {
+    return guide.sections;
+  }
+  if (guide.headers && guide.rows) {
+    return [
+      {
+        name: guide.title || "Size Guide",
+        headers: guide.headers,
+        rows: guide.rows
+      }
+    ];
+  }
+  return [];
+}
+function buildSectionTable(section, unit, sourceUnit) {
+  const allKeys = section.headers && section.headers.length > 0 ? section.headers : Object.keys(section.rows[0] || {});
+  const colKeys = allKeys.filter((k2) => {
+    const lower = k2.toLowerCase();
+    const hasIn = lower.includes("(in)") || lower.endsWith(" in");
+    const hasCm = lower.includes("(cm)") || lower.endsWith(" cm");
+    if (hasIn) {
+      const base = lower.replace(/\s*\(in\)\s*/, "").replace(/\s+in$/, "").trim();
+      const cmExists = allKeys.some((o) => {
+        const ol2 = o.toLowerCase();
+        return ol2 !== lower && ol2.includes(base) && (ol2.includes("(cm)") || ol2.endsWith(" cm"));
+      });
+      return cmExists ? unit === "in" : true;
+    }
+    if (hasCm) {
+      const base = lower.replace(/\s*\(cm\)\s*/, "").replace(/\s+cm$/, "").trim();
+      const inExists = allKeys.some((o) => {
+        const ol2 = o.toLowerCase();
+        return ol2 !== lower && ol2.includes(base) && (ol2.includes("(in)") || ol2.endsWith(" in"));
+      });
+      return inExists ? unit === "cm" : true;
+    }
+    return true;
+  });
+  const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const displayHeader = (key) => escapeHtml(key.replace(/\s*\((cm|in)\)\s*$/i, "").trim());
+  const convertCell = (value, key) => {
+    const keyLower = key.toLowerCase();
+    const headerHasUnit = /\((cm|in)\)|\s+(cm|in)$/.test(keyLower);
+    if (headerHasUnit) return value;
+    if (/^[a-z\s]+$/i.test(value)) return value;
+    if (sourceUnit === "cm" && unit === "in") return cmToInch(value);
+    if (sourceUnit === "in" && unit === "cm") return inchToCm(value);
+    return value;
+  };
+  const head = colKeys.map((k2) => `<th>${displayHeader(k2)}</th>`).join("");
+  const body = section.rows.map((row) => {
+    const cells = colKeys.map((k2) => {
+      const raw = row[k2] ?? row[k2.toLowerCase()] ?? "";
+      return `<td>${escapeHtml(convertCell(String(raw), k2))}</td>`;
+    }).join("");
+    return `<tr>${cells}</tr>`;
+  }).join("");
+  return `
+    <div class="ps-sg-section">
+      <h3 class="ps-sg-section-title">${escapeHtml(section.name)}</h3>
+      ${section.description ? `<p class="ps-sg-section-desc">${escapeHtml(section.description)}</p>` : ""}
+      <div class="ps-sg-table-wrap">
+        <table class="ps-sg-table"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>
+      </div>
+    </div>
+  `;
+}
+function createSizeGuideButton(parent, sizeGuide, options = {}) {
+  injectStyles();
+  const sections = normalizeToSections(sizeGuide);
+  if (sections.length === 0) {
+    console.log("[primestyle-tryon] size guide has no sections, skipping button");
+    return () => {
+    };
+  }
+  const sourceUnit = sizeGuide.unit === "in" ? "in" : "cm";
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "ps-sg-btn";
+  btn.innerHTML = `${RULER_ICON}<span>${options.label || "Size Guide"}</span>`;
+  if (options.accentColor) {
+    btn.style.setProperty("--ps-sg-accent", options.accentColor);
+  }
+  let unit = sourceUnit;
+  let overlayEl = null;
+  function renderModal() {
+    const overlay = document.createElement("div");
+    overlay.className = "ps-sg-overlay";
+    overlay.innerHTML = `
+      <div class="ps-sg-modal" role="dialog" aria-modal="true">
+        <div class="ps-sg-header">
+          <h2 class="ps-sg-title">${(sizeGuide.title || "Size Guide").replace(/</g, "&lt;")}</h2>
+          <div style="display:flex;align-items:center">
+            <div class="ps-sg-toggle" role="group" aria-label="Unit">
+              <button type="button" data-unit="cm" class="${unit === "cm" ? "ps-sg-active" : ""}">CM</button>
+              <button type="button" data-unit="in" class="${unit === "in" ? "ps-sg-active" : ""}">IN</button>
+            </div>
+            <button class="ps-sg-close" type="button" aria-label="Close">${X_ICON}</button>
+          </div>
+        </div>
+        <div class="ps-sg-body">
+          ${sections.map((s) => buildSectionTable(s, unit, sourceUnit)).join("")}
+          ${sizeGuide.howToMeasure && sizeGuide.howToMeasure.length > 0 ? `<div class="ps-sg-htm">
+                <div class="ps-sg-htm-title">How to measure</div>
+                <ul>${sizeGuide.howToMeasure.map((h) => `<li>${h.replace(/</g, "&lt;")}</li>`).join("")}</ul>
+              </div>` : ""}
+        </div>
+      </div>
+    `;
+    if (options.accentColor) {
+      overlay.style.setProperty("--ps-sg-accent", options.accentColor);
+    }
+    document.body.appendChild(overlay);
+    overlayEl = overlay;
+    document.body.style.overflow = "hidden";
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    overlay.querySelector(".ps-sg-close")?.addEventListener("click", close);
+    overlay.querySelectorAll(".ps-sg-toggle button").forEach((b) => {
+      b.addEventListener("click", () => {
+        const next = b.getAttribute("data-unit");
+        if (next === unit) return;
+        unit = next;
+        close();
+        renderModal();
+      });
+    });
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    overlay.__onKey = onKey;
+  }
+  function close() {
+    if (!overlayEl) return;
+    const onKey = overlayEl.__onKey;
+    if (onKey) document.removeEventListener("keydown", onKey);
+    overlayEl.remove();
+    overlayEl = null;
+    document.body.style.overflow = "";
+  }
+  btn.addEventListener("click", renderModal);
+  parent.parentElement?.insertBefore(btn, parent);
+  return () => {
+    btn.remove();
+    close();
+  };
+}
 const TAG = "[primestyle-tryon]";
 console.log(`${TAG} bundle loaded — version 5.7.x storefront entry`);
 const MOUNTED = /* @__PURE__ */ new WeakMap();
@@ -21073,6 +21406,17 @@ async function mount(el2) {
       props.sizeGuideData = fetched;
     }
   }
+  if (props.sizeGuideData) {
+    try {
+      const buttonStyles = props.buttonStyles;
+      createSizeGuideButton(el2, props.sizeGuideData, {
+        accentColor: buttonStyles?.backgroundColor
+      });
+      console.log(`${TAG} ✓ size guide button mounted`);
+    } catch (err) {
+      console.warn(`${TAG} size guide button failed`, err);
+    }
+  }
   try {
     const root = createRoot(el2);
     root.render(reactExports.createElement(PrimeStyleTryon, props));

package/dist/storefront/size-guide-modal.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * Vanilla JS size-guide button + modal for the Shopify storefront.
+ *
+ * Mirrors the prime-main SizeGuideModal design but built without React
+ * so it can attach next to (not inside) the React-mounted SDK root.
+ *
+ * Usage:
+ *   createSizeGuideButton(parentEl, sizeGuide, { buttonStyles, ... });
+ *
+ * The button is inserted as a sibling above the React root. Clicking
+ * it appends a modal to <body> with a size-chart table, cm/in toggle,
+ * and "How to measure" hints.
+ */
+interface RawSection {
+    name: string;
+    description?: string;
+    headers: string[];
+    rows: Array<Record<string, string>>;
+}
+interface RawSizeGuide {
+    title?: string;
+    headers?: string[];
+    rows?: Array<Record<string, string>>;
+    unit?: "cm" | "in";
+    sections?: RawSection[];
+    howToMeasure?: string[];
+}
+interface ButtonOptions {
+    label?: string;
+    accentColor?: string;
+}
+/**
+ * Create a "Size Guide" button and insert it as a sibling above the
+ * given parent element. Returns a teardown function that removes the
+ * button + any open modal.
+ */
+export declare function createSizeGuideButton(parent: Element, sizeGuide: RawSizeGuide, options?: ButtonOptions): () => void;
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.7.8",
+  "version": "5.7.9",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",