@primestyleai/tryon 5.10.107 → 5.10.109

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

@@ -29,8 +29,6 @@ interface ButtonOptions {
     label?: string;
     accentColor?: string;
 }
-/** Exposed so the storefront entry can clone these into a shadow root. */
-export declare const SIZE_GUIDE_STYLES = "\n  .ps-sg-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px;\n    margin: 0 0 10px 0;\n    background: transparent;\n    border: 1px solid rgba(0, 0, 0, 0.12);\n    border-radius: 8px;\n    color: var(--ps-sg-accent, #2154EF);\n    font-size: 13px;\n    font-weight: 600;\n    font-family: inherit;\n    cursor: pointer;\n    transition: background 0.15s, border-color 0.15s;\n  }\n  .ps-sg-btn:hover {\n    background: rgba(33, 84, 239, 0.04);\n    border-color: var(--ps-sg-accent, #2154EF);\n  }\n  .ps-sg-btn svg { width: 14px; height: 14px; }\n  .ps-sg-overlay {\n    position: fixed; inset: 0;\n    background: rgba(15, 23, 42, 0.55);\n    display: flex; align-items: center; justify-content: center;\n    z-index: 99999;\n    padding: 16px;\n    opacity: 0;\n    animation: ps-sg-fadein 0.18s ease forwards;\n  }\n  @keyframes ps-sg-fadein { to { opacity: 1; } }\n  .ps-sg-modal {\n    background: #FFFFFF;\n    border-radius: 14px;\n    width: 100%;\n    max-width: 720px;\n    max-height: 88vh;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: #1f2937;\n  }\n  .ps-sg-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 18px 22px 14px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-title {\n    margin: 0;\n    font-size: 17px;\n    font-weight: 700;\n  }\n  .ps-sg-toggle {\n    display: inline-flex;\n    background: rgba(15, 23, 42, 0.06);\n    border-radius: 8px;\n    padding: 3px;\n    margin-right: 12px;\n  }\n  .ps-sg-toggle button {\n    padding: 5px 14px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    color: rgba(15, 23, 42, 0.55);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    font-family: inherit;\n  }\n  .ps-sg-toggle button.ps-sg-active {\n    background: #FFFFFF;\n    color: #1f2937;\n    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-close {\n    background: transparent;\n    border: none;\n    color: rgba(15, 23, 42, 0.55);\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 6px;\n    font-family: inherit;\n  }\n  .ps-sg-close:hover { background: rgba(15, 23, 42, 0.06); }\n  .ps-sg-close svg { width: 18px; height: 18px; }\n  .ps-sg-body {\n    padding: 18px 22px 22px;\n    overflow-y: auto;\n    flex: 1;\n  }\n  .ps-sg-section { margin-bottom: 22px; }\n  .ps-sg-section:last-child { margin-bottom: 0; }\n  .ps-sg-section-title {\n    margin: 0 0 6px;\n    font-size: 14px;\n    font-weight: 700;\n    color: #0f172a;\n  }\n  .ps-sg-section-desc {\n    margin: 0 0 10px;\n    font-size: 12px;\n    color: rgba(15, 23, 42, 0.6);\n  }\n  .ps-sg-table-wrap {\n    overflow-x: auto;\n    border: 1px solid rgba(15, 23, 42, 0.08);\n    border-radius: 10px;\n  }\n  .ps-sg-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 13px;\n  }\n  .ps-sg-table thead th {\n    background: rgba(15, 23, 42, 0.04);\n    padding: 10px 12px;\n    text-align: left;\n    font-weight: 700;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: rgba(15, 23, 42, 0.6);\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-table tbody td {\n    padding: 10px 12px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.05);\n  }\n  .ps-sg-table tbody tr:last-child td { border-bottom: none; }\n  .ps-sg-htm {\n    margin-top: 18px;\n    padding: 14px 16px;\n    background: rgba(33, 84, 239, 0.05);\n    border-radius: 10px;\n    border: 1px solid rgba(33, 84, 239, 0.12);\n  }\n  .ps-sg-htm-title {\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--ps-sg-accent, #2154EF);\n    margin-bottom: 8px;\n  }\n  .ps-sg-htm ul {\n    margin: 0;\n    padding-left: 18px;\n    font-size: 12px;\n    line-height: 1.6;\n    color: #1f2937;\n  }\n";
 /**
  * Create a "Size Guide" button and insert it as a sibling above the
  * given parent element. Returns a teardown function that removes the

package/dist/types.d.ts

@@ -234,6 +234,15 @@ export interface SizingResult {
      *  default path) or "photo" (free-measurement mode triggered by a
      *  detected mismatch between the photo and entered weight). */
     measurementSource?: "inputs+photo" | "photo";
+    /** Per-size lookup: { sizeLabel: { measurement: { chartRange, fit } } }.
+     *  When the user clicks a non-recommended size pill, the SDK reads from
+     *  this map to swap the table cells + fit pills to that row's pre-
+     *  classified values. NO client-side recomputation — the backend's
+     *  matcher already classified every row + every measurement field. */
+    allSizes?: Record<string, Record<string, {
+        chartRange: string;
+        fit: string;
+    }>>;
 }
 /** Fit info for a body area — tells Gemini how the garment should render at this region */
 export interface FitAreaInfo {

package/package.json

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