@primestyleai/tryon 5.10.105 → 5.10.107

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

@@ -29,6 +29,8 @@ 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/package.json

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

package/dist/storefront/shadow-style-collector.d.ts

@@ -1,34 +0,0 @@
-/**
- * Shadow-DOM style collector.
- *
- * Vite injects all CSS imported by the storefront bundle as <style>
- * tags appended to document.head at module-eval time. Theme app
- * extensions render into the merchant's theme DOM, so those styles
- * coexist with the merchant's theme CSS — and the theme's CSS leaks
- * into our widget (table borders, button resets, font-family, etc).
- *
- * To isolate the widget inside a shadow root we need our SDK styles
- * inside that shadow root, NOT in document.head. The cleanest way to
- * intercept vite's runtime injection is to monkey-patch
- * `document.head.appendChild` before our other imports evaluate, so
- * every <style> tag the SDK emits during module load gets captured
- * here and re-injected into each shadow root we mount later.
- *
- * IMPORTANT: this file MUST be imported as the *first* import of
- * `src/storefront/index.ts`, before React or any CSS-importing module.
- * ES module evaluation order is import-tree depth-first, so a
- * side-effect import at the top of the entry runs before the rest.
- */
-/**
- * Returns CSS text concatenated from every <style> tag captured at
- * module load + any <style> tags that were already in document.head
- * matching SDK selector patterns (defense-in-depth for cases where
- * patching missed an injection).
- */
-export declare function getCollectedCss(): string;
-/**
- * Inject the SDK's collected styles into a shadow root so the widget
- * looks identical regardless of theme. Idempotent — call once per
- * shadow root after attachShadow().
- */
-export declare function injectStylesIntoShadow(shadow: ShadowRoot): void;