@imagineio/configurator-sdk 0.1.6 → 0.1.7

package/README.md

@@ -21,10 +21,6 @@ To install with React 18, use this command:
 npm install @imagineio/configurator-sdk react@^18.2 react-dom@^18.2 three@~0.159.0 @react-three/fiber@^8.15 @react-three/drei@^9.88 @react-three/postprocessing@^2.16 postprocessing@~6.36.0
 ```
 
-(The second line matters even in a JavaScript project: create-vite scaffolds React 19
-*types*, and pinning the runtime alone leaves them mismatched — no error, just wrong
-autocomplete everywhere.)
-
 Then either add the Vite plugin (recommended — serves the SDK's static assets and
 dedupes three/react for you):
 

package/dist/066fc9aa40.js

@@ -1 +1 @@
-import{themeLayoutKey as u}from"./5c9fd9201c.js";import o from"./8f60e5059a.js";import m from"./872c4302e0.js";import a from"./be337ddda5.js";function p(){const t=o(e=>e.bootLoading),r=o(e=>e.uiReady),s=o(e=>e.bootDetail),n=o(e=>e.bootProgress),c=o(e=>e.themeReady),i=m(e=>e.isLoading),d=a(e=>e.isLoading);return{loading:!!t,uiReady:!!r,detail:s??null,progress:n??null,themeReady:!!c,catalogLoading:!!i,configLoading:!!d,ready:!i&&!d}}function h(){try{o.getState().endBootLoading?.()}catch{}}function L(){const t=a(n=>n.systemId),r=a(n=>n.systemName),s=a(n=>n.systemConfiguratorKey);return{id:t??null,name:r??null,configuratorKey:s??null}}function S(){try{o.setState(t=>t.themeReady?t:{themeReady:!0})}catch{}}function b(t){try{o.setState({embedded:!!t})}catch{}}function R(t){try{a.setState({systemTheme:u(t),systemThemeRecord:t&&typeof t=="object"?t:null})}catch{}}export{h as endBootLoading,S as markThemeReady,b as setEmbedded,R as setSystemTheme,p as useBootStatus,L as useSystem};
+import{themeLayoutKey as c}from"./5c9fd9201c.js";import o from"./8f60e5059a.js";import m from"./872c4302e0.js";import s from"./be337ddda5.js";function p(){const e=o(t=>t.bootLoading),a=o(t=>t.uiReady),n=o(t=>t.bootDetail),r=o(t=>t.bootProgress),u=o(t=>t.themeReady),d=m(t=>t.isLoading),i=s(t=>t.isLoading);return{loading:!!e,uiReady:!!a,detail:n??null,progress:r??null,themeReady:!!u,catalogLoading:!!d,configLoading:!!i,ready:!d&&!i}}function h(){try{o.getState().endBootLoading?.()}catch{}}function L(){const e=s(r=>r.systemId),a=s(r=>r.systemName),n=s(r=>r.systemConfiguratorKey);return{id:e??null,name:a??null,configuratorKey:n??null}}function R(){try{o.setState(e=>e.themeReady?e:{themeReady:!0})}catch{}}function S(e){try{o.setState({embedded:!!e})}catch{}}function b(e){try{s.setState({systemTheme:c(e),systemThemeRecord:e&&typeof e=="object"?e:null})}catch{}}function x(){return o(e=>e.hostMode)||"public"}function K(){const e=s(n=>n.systemRenderMode)||"3d",a=s(n=>n.systemRender)||null;return{mode:e,render:a}}export{h as endBootLoading,R as markThemeReady,S as setEmbedded,b as setSystemTheme,p as useBootStatus,x as useHostMode,K as useRenderMode,L as useSystem};

package/dist/17876f4322.css

@@ -54,6 +54,24 @@
   transition: background 0.2s;
 }
 
+/* why AR did not start (Android, 2026-11-11): above the button */
+.arv-status {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 104px;
+  z-index: 10;
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #b42318;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: center;
+  word-break: break-word;
+}
+
 .arv-view-btn:active {
   background: var(--color-brand-primary-dark, #e64a19);
 }

package/dist/2d1e844d0e.css

@@ -0,0 +1,564 @@
+@layer sdk-base, vendor, sdk;
+@layer sdk {
+/* THE FINAL-RENDER STRIP under the configurator's 3D scene (ui/FinalRendersDock.jsx, 2026-10-23).
+   The Studio's final-viewer rules (studio/studio.css, `.studio-final-*`, `.studio-btn`, `.studio-muted`),
+   verbatim but anchored to the scene stage: the Studio's stage begins right of its sidebar, so its
+   `left` offsets were the sidebar's width; here the `.scene-canvas` wrapper is the stage, so they are
+   0 / 16px. Generated by scratchpad/patch_public_dock.py from the Studio file; edit there, then rerun. */
+/* ── Shared atoms ──────────────────────────────────────────────────────── */
+.studio-muted {
+  color: var(--text-secondary, #6b6b6b);
+  font-size: 12px;
+}
+.studio-btn {
+  padding: 7px 14px;
+  border: 1px solid var(--border-color, #e1e1e1);
+  border-radius: var(--border-radius, 6px);
+  background: transparent;
+  color: var(--text-primary, #1a1a1a);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.studio-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
+.studio-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.studio-btn--primary {
+  border-color: transparent;
+  background: var(--color-primary, #e07b39);
+  color: var(--text-inverse, #fff);
+}
+.studio-btn--primary:hover:not(:disabled) { background: var(--color-primary-dark, #c8692c); }
+/* ── A final version is read-only ─────────────────────────────────────────── */
+.studio-final-banner {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  max-width: min(720px, calc(100% - 24px));
+  padding: 10px 14px;
+  border-radius: var(--radius-md, 8px);
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f2328);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  font-size: 13px;
+  line-height: 1.4;
+}
+.studio-final-banner__text { flex: 1 1 320px; }
+.studio-final-banner__prompt { margin: 0; padding: 0; border: 0; flex: 1 1 280px; }
+.studio-final-banner__prompt > .studio-muted { display: none; }
+.studio-final-banner__prompt .studio-field { margin: 0; }
+/* -- The final-render page: the dock along the bottom of the stage (2026-10-15) -- */
+.studio-final-dock {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 12px 12px;
+  border-radius: var(--radius-md, 10px);
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f2328);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  font-size: 13px;
+}
+.studio-final-dock--closed { padding-bottom: 10px; }
+.studio-final-dock__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
+.studio-final-dock__title { display: flex; align-items: baseline; gap: 10px; }
+.studio-final-dock__head { justify-content: space-between; }
+.studio-final-dock__error { color: #b42318; font-size: 12px; }
+.studio-final-dock__cards {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.studio-final-card {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 168px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.studio-final-card:disabled { cursor: default; }
+.studio-final-card__img {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 168px;
+  height: 94px;
+  overflow: hidden;
+  border: 1px solid var(--border-light, #e6e8eb);
+  border-radius: 8px;
+  background: var(--bg-secondary, #f4f5f7);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.studio-final-card:not(:disabled):hover .studio-final-card__img {
+  border-color: var(--color-primary, #ff5a1f);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #ff5a1f) 20%, transparent);
+}
+.studio-final-card__img img { width: 100%; height: 100%; object-fit: contain; }
+.studio-final-card__img--text { font-weight: 600; color: var(--color-primary, #ff5a1f); }
+.studio-final-card__wait {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.08), rgba(0,0,0,0.03));
+  background-size: 200% 100%;
+  animation: studio-final-shimmer 1.4s linear infinite;
+}
+@keyframes studio-final-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.studio-final-card__badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(26, 26, 26, 0.75);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+}
+.studio-final-card__progress {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+.studio-final-card__progress > span { display: block; height: 100%; background: var(--color-primary, #ff5a1f); transition: width 0.3s ease; }
+.studio-final-card__name { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.studio-final-card__meta { font-size: 11px; color: var(--text-secondary, #6b7280); }
+.studio-final-card--failed .studio-final-card__meta { color: #b42318; }
+.studio-final-card.is-dragging { opacity: 0.4; }
+.studio-final-card[aria-disabled] { cursor: grab; }
+.studio-final-card__grip {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  padding: 2px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--text-secondary, #6b7280);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  cursor: grab;
+}
+.studio-final-card:hover .studio-final-card__grip { opacity: 1; }
+.studio-final-card__img--ar { color: var(--color-primary, #ff5a1f); background: color-mix(in srgb, var(--color-primary, #ff5a1f) 7%, var(--bg-primary, #fff)); }
+/* -- The final viewer's slide: an image over the canvas, no popup (2026-10-15) -- */
+.studio-final-stage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 12;                       /* over the canvas, under the toolbar (15) and the dock (30) */
+  overflow: hidden;
+  pointer-events: none;
+}
+/* One item on the slide: a view's image or AR. Two at once only while one leaves. */
+.studio-final-stage__panel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 72px 24px 24px;
+  /* the SCENE's own backdrop, not the panel surface (2026-11-05): the dark-mode themes paint
+     --bg-secondary near-black, and a black field around a render read as a fault */
+  background: var(--bg-final-stage, #ececef);
+  pointer-events: auto;
+  will-change: transform;
+}
+.studio-final-stage.has-dock .studio-final-stage__panel { padding-bottom: 236px; }
+.studio-final-stage__panel[aria-hidden="true"] { pointer-events: none; }
+/* Forward: in from the right, out to the left. Back: the mirror. 380 ms = SLIDE_MS. */
+.studio-final-stage__panel.is-entering-next { animation: studio-final-in-right 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
+.studio-final-stage__panel.is-entering-prev { animation: studio-final-in-left 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
+.studio-final-stage__panel.is-leaving-next { animation: studio-final-out-left 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
+.studio-final-stage__panel.is-leaving-prev { animation: studio-final-out-right 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
+@keyframes studio-final-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes studio-final-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes studio-final-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes studio-final-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) {
+  .studio-final-stage__panel { animation: none !important; }
+}
+.studio-final-stage__bar { display: flex; align-items: center; gap: 12px; align-self: stretch; font-size: 13px; }
+.studio-final-stage__bar .studio-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
+.studio-final-stage__image { user-select: none; -webkit-user-select: none;
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  align-self: stretch;
+  align-items: center;
+  justify-content: center;
+}
+.studio-final-stage__image--spin { cursor: grab; touch-action: none; }
+.studio-final-stage__image--spin:active { cursor: grabbing; }
+.studio-final-stage__image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 6px;
+  user-select: none;
+  transition: opacity 0.2s ease;
+}
+.studio-final-stage__image img.is-loading { opacity: 0.6; }
+/* zoom (2026-10-21): the image in a wrapper the zoom transforms, clipped to the stage */
+.studio-final-stage__image { overflow: hidden; }
+.studio-final-stage__image.is-zoomed { cursor: grab; touch-action: none; }
+.studio-final-stage__image.is-zoomed:active { cursor: grabbing; }
+.studio-final-stage__zoom { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; will-change: transform; }
+.studio-final-stage__zoom-badge {
+  position: absolute;
+  left: 50%;
+  bottom: 12px;
+  transform: translateX(-50%);   /* centred under the image (2026-10-23) */
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(15, 17, 20, 0.6);
+  color: #fff;
+  font-size: 12px;
+  pointer-events: none;
+}
+.studio-final-stage__frames { width: min(520px, 100%); accent-color: var(--color-primary, #ff5a1f); }
+.studio-final-stage__ar {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+}
+.studio-final-stage__qr { padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
+.studio-final-stage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
+.studio-final-stage__actions .studio-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
+.studio-final-card.is-active .studio-final-card__img {
+  border-color: var(--color-primary, #ff5a1f);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #ff5a1f) 25%, transparent);
+}
+.studio-final-card--not_rendered .studio-final-card__wait { animation: none; background: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0 8px, rgba(0,0,0,0.06) 8px 16px); }
+/* pointer reordering: the row is the drag surface */
+.studio-final-card { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
+.studio-final-dock.is-reordering, .studio-final-dock.is-reordering .studio-final-card { cursor: grabbing; }
+.studio-final-card.is-dragging { opacity: 0.55; transform: scale(0.97); transition: transform 0.12s ease; }
+/* -- Arrows on the stage: step through the final viewer (2026-10-15) -- */
+.studio-final-nav {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 14;                       /* over the slide (12), under the toolbar (15) and the dock (30) */
+  pointer-events: none;
+}
+.studio-final-nav.has-dock { bottom: 220px; }
+.studio-final-nav__btn {
+  position: absolute;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f2328);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(-50%);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.studio-final-nav__btn:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
+.studio-final-nav__btn--prev { left: 16px; }
+.studio-final-nav__btn--next { right: 16px; }
+/* =====================================================================================
+   FINAL VIEWER GALLERY (2026-10-15) — in the THEME's colours: surfaces, text, borders,
+   shadows, radii and the accent all come from theme tokens, so it reads as part of the
+   configurator in any theme. At the very bottom of the stage; the selected-product bar
+   moves up above it. Later rules win over the first pass above.
+   ===================================================================================== */
+.studio-final-dock {
+  left: 0;
+  right: 16px;
+  bottom: 14px;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+.studio-final-dock__strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding: 6px;
+  border: 1px solid var(--border-light, #e6e8eb);
+  border-radius: var(--radius-lg, 14px);
+  background: color-mix(in srgb, var(--bg-primary, #fff) 88%, transparent);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.12));
+  pointer-events: auto;
+}
+.studio-final-dock__cards {
+  display: flex;
+  gap: 6px;
+  padding: 3px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.studio-final-dock__cards::-webkit-scrollbar { display: none; }
+.studio-final-dock__status {
+  flex: none;
+  align-self: center;
+  margin-left: 4px;
+  padding: 4px 9px;
+  border-radius: var(--radius-full, 999px);
+  background: var(--color-primary-light, color-mix(in srgb, var(--color-primary, #ff5a1f) 12%, transparent));
+  color: var(--color-primary, #ff5a1f);
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-semibold, 600);
+  white-space: nowrap;
+}
+.studio-final-dock__status.is-error { background: #fdecec; color: #b42318; }
+/* tiles */
+.studio-final-card {
+  position: relative;
+  flex: none;
+  width: 76px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  opacity: 1;
+  transition: transform 0.15s ease;
+}
+.studio-final-card[aria-disabled] { opacity: 0.45; }
+.studio-final-card__img {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76px;
+  height: 50px;
+  overflow: hidden;
+  border: 1px solid var(--border-light, #e6e8eb);
+  border-radius: var(--radius-md, 10px);
+  background: var(--bg-thumbnail, var(--bg-secondary, #f2f3f5));
+  box-shadow: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+.studio-final-card__img img { width: 100%; height: 100%; object-fit: cover; }
+.studio-final-card:not([aria-disabled]):hover .studio-final-card__img {
+  transform: translateY(-2px);
+  border-color: var(--border-dark, #c9ced4);
+  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
+}
+.studio-final-card.is-active .studio-final-card__img,
+.studio-final-card.is-active:hover .studio-final-card__img {
+  border-color: var(--color-primary, #ff5a1f);
+  box-shadow: 0 0 0 1px var(--color-primary, #ff5a1f);
+}
+/* 3D and AR: an icon and a word, on the same footing as the photos */
+.studio-final-card__img--ar {
+  flex-direction: column;
+  gap: 2px;
+  color: var(--text-primary, #1f2328);
+  background: var(--bg-secondary, #f2f3f5);
+}
+.studio-final-card.is-active .studio-final-card__img--ar { color: var(--color-primary, #ff5a1f); }
+.studio-final-card--3d .studio-final-card__img svg,
+.studio-final-card--ar .studio-final-card__img svg { width: 20px !important; height: 20px !important; margin: 0 0 12px; }
+/* names: inside the 3D/AR tiles; a tooltip above the photos, on hover */
+.studio-final-card__name {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  max-width: 160px;
+  padding: 4px 9px;
+  border-radius: var(--radius-sm, 6px);
+  background: var(--bg-tooltip, rgba(0, 0, 0, 0.8));
+  color: var(--text-inverse, #fff);
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-semibold, 600);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0;
+  transform: translate(-50%, 4px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  pointer-events: none;
+}
+.studio-final-card:hover .studio-final-card__name { opacity: 1; transform: translate(-50%, 0); }
+.studio-final-card--3d .studio-final-card__name,
+.studio-final-card--ar .studio-final-card__name {
+  bottom: 7px;
+  max-width: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+.studio-final-card--3d .studio-final-card__name { color: var(--text-secondary, #5b6470); }
+.studio-final-card--ar .studio-final-card__name { color: var(--text-secondary, #5b6470); }
+.studio-final-card.is-active .studio-final-card__name { color: var(--color-primary, #ff5a1f); }
+.studio-final-card__meta { display: none; }
+.studio-final-card__badge {
+  top: 4px;
+  left: 4px;
+  padding: 0 5px;
+  border-radius: var(--radius-xs, 4px);
+  background: var(--bg-tooltip, rgba(0, 0, 0, 0.75));
+  color: var(--text-inverse, #fff);
+  font-size: 9px;
+  line-height: 15px;
+}
+.studio-final-card__grip { display: none; }
+.studio-final-card__progress { left: 5px; right: 5px; bottom: 5px; height: 3px; background: var(--border-light, #e6e8eb); }
+.studio-final-card__progress > span { background: var(--color-primary, #ff5a1f); }
+.studio-final-dock.is-reordering .studio-final-card { cursor: grabbing; }
+.studio-final-card.is-dragging { transform: translateY(-6px) scale(1.06); z-index: 2; }
+.studio-final-card.is-dragging .studio-final-card__img { box-shadow: var(--shadow-lg, 0 12px 26px rgba(0, 0, 0, 0.18)); }
+/* arrows: the theme's surface and text, set in; a label on hover */
+.studio-final-nav.has-dock { bottom: 90px; }
+.studio-final-nav__btn {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border-light, #e6e8eb);
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f2328);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
+}
+.studio-final-nav__btn:hover { background: var(--bg-secondary, #f6f7f9); color: var(--color-primary, #ff5a1f); }
+.studio-final-nav__btn--prev { left: 24px; }
+.studio-final-nav__btn--next { right: 24px; }
+.studio-final-nav__btn::after {
+  content: attr(data-label);
+  position: absolute;
+  top: 50%;
+  padding: 4px 9px;
+  border-radius: var(--radius-sm, 6px);
+  background: var(--bg-tooltip, rgba(0, 0, 0, 0.8));
+  color: var(--text-inverse, #fff);
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-semibold, 600);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition: opacity 0.15s ease;
+}
+.studio-final-nav__btn--prev::after { left: calc(100% + 8px); }
+.studio-final-nav__btn--next::after { right: calc(100% + 8px); }
+.studio-final-nav__btn:hover::after { opacity: 1; }
+/* the slide: the image framed; caption and download TOGETHER at the top left, clear of the
+   configurator's own toolbar on the right */
+/* the later, winning rule (2026-11-05): a light field of its own on dark themes — --bg-final-stage,
+   set in themes.css for dark mode — else the scene's backdrop */
+.studio-final-stage__panel { padding: 64px 84px 24px; background: var(--bg-final-stage, #ececef); }
+.studio-final-stage.has-dock .studio-final-stage__panel { padding-bottom: 100px; }
+.studio-final-stage__image img { border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.14)); }
+.studio-final-stage__caption {
+  position: absolute;
+  top: 16px;
+  left: 24px;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  height: 36px;
+  padding: 0 12px;
+  align-items: center;
+  border: 1px solid var(--border-light, #e6e8eb);
+  border-radius: var(--radius-md, 10px);
+  background: var(--bg-primary, #fff);
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
+  color: var(--text-primary, #1f2328);
+  font-size: var(--font-size-sm, 12.5px);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.studio-final-stage__caption span { color: var(--text-secondary, #6b7280); font-size: var(--font-size-xs, 11.5px); font-variant-numeric: tabular-nums; }
+.studio-final-stage__download {
+  position: absolute;
+  top: 16px;
+  right: auto;
+  left: var(--final-download-left, 24px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border-light, #e6e8eb);
+  border-radius: var(--radius-md, 10px);
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f2328);
+  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  cursor: pointer;
+}
+.studio-final-stage__download:hover:not(:disabled) { color: var(--color-primary, #ff5a1f); border-color: var(--border-dark, #c9ced4); }
+.studio-final-stage__download:disabled { opacity: 0.5; cursor: default; }
+.studio-final-stage__frames { width: min(420px, 80%); accent-color: var(--color-primary, #ff5a1f); }
+/* caption and download side by side, top left */
+.studio-final-stage__top { position: absolute; top: 16px; left: 24px; display: flex; align-items: center; gap: 8px; z-index: 1; }
+.studio-final-stage__top .studio-final-stage__caption,
+.studio-final-stage__top .studio-final-stage__download { position: static; }
+
+/* THE STRIP IS LAST: the selected-product bar sits above it, and steps aside while an image is on
+   the slide (it acts on the 3D scene). The dock renders before the bar in the stage overlay. */
+.scene-canvas:has(.studio-final-dock) .selection-panel-overlay { bottom: 92px; }
+.scene-canvas .studio-final-stage.is-open ~ .selection-panel-overlay,
+.scene-canvas .studio-final-stage.is-open ~ * .selection-panel-overlay { opacity: 0; pointer-events: none; }
+/* One stage, one strip: inside the wrapper the stage fills it, so nothing else is offset. */
+.scene-canvas .studio-final-dock { left: 16px; right: 16px; }
+.scene-canvas .studio-final-stage, .scene-canvas .studio-final-nav { left: 0; right: 0; }
+/* Under the shell's own overlays: the scene toolbar and the price chip (z 4) and the chat
+   button (z 21) stay usable over an image, as in the Studio. The strip stays on top. */
+.scene-canvas .studio-final-stage { z-index: 3; }
+.scene-canvas .studio-final-nav { z-index: 5; }
+
+/* IMAGE AND 360 VIEWS STAND ON WHITE (2026-11-05, user's rule): a view with no backdrop of its own
+   is a transparent picture, and it was showing the field's grey through — the farm's light
+   setup renders on white, so white it is. A view's own backdrop is merged into the picture
+   and covers this; a snap is opaque anyway. */
+.studio-final-stage__image img, .studio-final-stage__image .spin-frames { background: #fff; }
+
+}

package/dist/371ed78aa2.js

@@ -1 +1 @@
-import{getApiBaseUrl as F}from"./8ade32d067.js";import{describeBootFailure as K,probeBackendReachable as N,warnIntegrator as q}from"./05973a4da2.js";import{adoptUrlCredentials as J}from"./1fff100656.js";import Q from"./872c4302e0.js";import f from"./be337ddda5.js";import X from"./9c6c598569.js";import i from"./8f60e5059a.js";import b from"./1fac915f8b.js";import{recomputePrice as A}from"./67f6338a4a.js";import{setUseMobileTextures as Y}from"./c44d37da7a.js";import{initIframeMessageService as Z}from"./1e243363f6.js";import{whenPiecePositionsReady as ee,waitForAssetsIdle as D}from"./2774152dd2.js";import{applyLayoutSceneSelections as te,applyLayoutStyling as ae}from"./37addc7fb3.js";import{setTokenProvider as ne}from"./33fa2c8ca2.js";import{hideUI as G}from"./2cafe3274b.js";import{UI_REGIONS as k}from"./9840b9ce12.js";const be="This configurator is unavailable.";function ke({resolveInitialSystemId:W,resolveConfigurator:v,resolveConfiguratorKey:R,resolveInitialChannelId:B,getToken:T,onReady:M,onError:P}={}){typeof T=="function"&&ne(T);let s=!1,w=null;return(async()=>{const u=await import("./a77b15c0d6.js"),C=B?.();C!=null&&u.setChannelId?.(C),import.meta.env?.DEV&&!window.__sdkEventLoggerRegistered&&(window.__sdkEventLoggerRegistered=!0,u.on?.("*",n=>{}));let m=W?.();const y=J().shareToken;y&&u.setShareToken?.(y);let r=null;if(y)try{r=await u.loadProject(y);const n=r?.system?.id??r?.system??r?.scene_snapshot?.canonical?.systemId??null;n!=null&&(m=n);try{const d=(r?.scene_snapshot??r?.sceneSnapshot??null)?.theme??null,o=d?.systemThemeRecord??d?.systemTheme??null;if(o!=null){const{applySystemTheme:h}=await import("./5c9fd9201c.js");h(o),i.setState({themeReady:!0})}}catch{}}catch{}const{checkConfiguratorLicence:x,getConfiguratorBlockedMessage:$}=await import("./3bbcee0334.js"),H=await x({systemId:m});if(s)return;if(!H){i.getState().markUiReady?.(),P?.($(),{code:"unlicensed"});return}try{const{refreshEntitlements:n}=await import("./32861ea2b0.js");n().catch(()=>{})}catch{}try{const{ui:n,sceneCapabilities:c}=v?.(m)||{};n&&Object.keys(n).length&&i.setState(n),c&&i.setState({sceneCapabilities:c});const d=R?.(m);d!=null&&f.setState({configuratorKey:d}),i.setState({showWalls:!!c?.walls})}catch{}let L=!1;try{const{prepareTheme:n}=await import("./be0cfe2236.js");L=await n(m)}catch{}if(!s)try{try{await u.loadConfigurator(m)}catch(e){if(e?.status===401||e?.status===403||e?.status===404)throw e;await Q.getState().loadCatalog({systemId:m}),await f.getState().loadConfigurations(m);const t=f.getState(),a=t.systemDomainDefaults??t.systemRoom?.domain_defaults??null;a&&await u.loadDomainDefaults(a)}try{const e=f.getState(),t=e.systemId??m,a=v?.(t)||{};a.ui&&Object.keys(a.ui).length&&i.setState(a.ui);const l=!!e.systemRoom;i.setState({sceneCapabilities:{dimensions:l,walls:l},showWalls:l});const p=R?.(t);p!=null&&f.setState({configuratorKey:p})}catch{}if(!L)try{const{applySystemTheme:e}=await import("./5c9fd9201c.js");let t=null,a=!1;try{const S=new URLSearchParams(window.location.search);S.has("theme")&&(t=S.get("theme"),a=!0)}catch{}if(!a)for(let S=0;S<20;S+=1){const O=f.getState();if(t=O.systemThemeRecord??O.systemTheme,t!=null||s)break;await new Promise(z=>setTimeout(z,100))}if(s)return;const l=typeof document<"u"&&!!document.documentElement.getAttribute("data-theme-id"),p=typeof t=="string"&&/^\d+$/.test(t.trim()),V=l&&p&&!a;(t!=null||a)&&!V&&e(t)}catch{}if(s)return;i.setState({themeReady:!0});const n="ontouchstart"in window||navigator.maxTouchPoints>0,c=Math.min(window.innerWidth,window.innerHeight)<768;Y(n&&c);const d=r?null:await u.parseShareLink(),o=f.getState().sceneConfigurations,h=f.getState().defaultPresetId;let _=h!=null&&o[h]?h:null;_||(_=Object.values(o||{})[0]?.id);const I=r?.scene_snapshot?._state?.sceneGraph?.activeSceneConfigId,g=I!=null&&o[I]?I:d?.sc||_;u.preloadMaterials(o[g]),X.getState().initializeScene(g);try{const{applySceneConfigDefaults:e}=await import("./a77b15c0d6.js");e(g)}catch{}te(o[g]),ae(o[g]),!r&&d&&await u.restoreShareLink(d);const U=new URLSearchParams(window.location.search),E=U.get("gui");(E==="false"||E==="0")&&i.getState().setGuiVisible(!1);const j=U.get("hide");if(j){const e=j.split(",").map(t=>t.trim()).filter(Boolean);if(e.includes("all"))G();else{const t=e.filter(l=>k.includes(l)),a=e.filter(l=>!k.includes(l)&&l!=="all");a.length&&console.warn(`[sdk] ?hide= ignored unknown region(s): ${a.join(", ")}. Known regions: ${k.join(", ")}, or "all".`),t.length&&G(t)}}A(),b.getState().clearHistory(),Z(),import("./a77b15c0d6.js").then(({initConfigEngine:e})=>e()).catch(()=>{}),(()=>{if(s)return;i.setState({bootEvaluating:!0});const e=b.getState();e.pauseTracking();let t=!1;const a=()=>{t||(t=!0,i.setState({bootEvaluating:!1}),e.resumeTracking())};D().then(()=>{if(s){a();return}import("./a77b15c0d6.js").then(async({seedInitialState:l,reevaluateForFocus:p})=>{await l(),!s&&await p()}).catch(()=>{}).finally(()=>{a(),u.prefetchRemainingMaterialsWhenIdle?.()})}).catch(a)})(),M?.(),setTimeout(()=>{s||i.getState().markUiReady?.()},2500),r?(i.setState({isLayoutLoading:!0}),i.getState().setSceneLoading(!0,"Loading your saved design..."),w=ee(async()=>{s||(await u.restoreProject(r),A(),D().then(()=>{if(s)return;i.getState().setInitialPerPieceOverrides(),i.setState({isLayoutLoading:!1}),i.getState().clearSceneLoading(),b.getState().clearHistory();const e=r?.scene_snapshot?.canonical||null;import("./a77b15c0d6.js").then(({restoreConfiguration:t,refreshCanonicalState:a})=>e?t(e):a()).catch(()=>{})}))})):i.getState().setInitialPerPieceOverrides()}catch(n){i.getState().markUiReady?.();const c=n?.status,d=c==null?await N(F()):null,o=K(n,{reachable:d});q(o,n);const h=o.code==="unavailable"?"unavailable":c===401||c===403?"unauthorized":c===404?"unavailable":"network";P?.(`${o.title} ${o.body}`,{code:h,reason:o.code,title:o.title,body:o.body,fix:o.fix,status:c,cause:n})}})(),{cancel(){s=!0,w&&w()}}}export{be as ORG_UNAVAILABLE_MESSAGE,ke as bootConfigurator};
+import{getApiBaseUrl as q}from"./8ade32d067.js";import{describeBootFailure as J,probeBackendReachable as Q,warnIntegrator as X}from"./05973a4da2.js";import{adoptUrlCredentials as Y}from"./1fff100656.js";import Z from"./872c4302e0.js";import f from"./be337ddda5.js";import tt from"./9c6c598569.js";import n from"./8f60e5059a.js";import k from"./1fac915f8b.js";import{recomputePrice as D}from"./67f6338a4a.js";import{setUseMobileTextures as et}from"./c44d37da7a.js";import{initIframeMessageService as at}from"./1e243363f6.js";import{whenPiecePositionsReady as nt,waitForAssetsIdle as G}from"./2774152dd2.js";import{applyLayoutSceneSelections as ot,applyLayoutStyling as it}from"./37addc7fb3.js";import{setTokenProvider as st}from"./33fa2c8ca2.js";import{setOrganizationId as rt}from"./431a2d8618.js";import{hideUI as M}from"./2cafe3274b.js";import{UI_REGIONS as v}from"./9840b9ce12.js";const Tt="This configurator is unavailable.";function Ct({resolveInitialSystemId:W,resolveConfigurator:P,resolveConfiguratorKey:R,resolveInitialChannelId:B,getToken:T,host:x="public",organizationId:H=null,engine:w=!0,onReady:$,onError:C}={}){typeof T=="function"&&st(T),rt(H);try{n.getState().setHostMode?.(x)}catch{}let s=!1,_=null;return(async()=>{const u=await import("./a77b15c0d6.js"),L=B?.();L!=null&&u.setChannelId?.(L),import.meta.env?.DEV&&!window.__sdkEventLoggerRegistered&&(window.__sdkEventLoggerRegistered=!0,u.on?.("*",o=>{}));let m=W?.();const S=Y().shareToken;S&&u.setShareToken?.(S);let r=null;if(S)try{r=await u.loadProject(S);const o=r?.system?.id??r?.system??r?.scene_snapshot?.canonical?.systemId??null;o!=null&&(m=o);try{const d=(r?.scene_snapshot??r?.sceneSnapshot??null)?.theme??null,i=d?.systemThemeRecord??d?.systemTheme??null;if(i!=null){const{applySystemTheme:h}=await import("./5c9fd9201c.js");h(i),n.setState({themeReady:!0})}}catch{}}catch{}const{checkConfiguratorLicence:z,getConfiguratorBlockedMessage:V}=await import("./3bbcee0334.js"),F=await z({systemId:m});if(s)return;if(!F){n.getState().markUiReady?.(),C?.(V(),{code:"unlicensed"});return}try{const{refreshEntitlements:o}=await import("./32861ea2b0.js");o().catch(()=>{})}catch{}try{const{ui:o,sceneCapabilities:c}=P?.(m)||{};o&&Object.keys(o).length&&n.setState(o),c&&n.setState({sceneCapabilities:c});const d=R?.(m);d!=null&&f.setState({configuratorKey:d}),n.setState({showWalls:!!c?.walls})}catch{}let U=!1;try{const{prepareTheme:o}=await import("./be0cfe2236.js");U=await o(m)}catch{}if(!s)try{try{await u.loadConfigurator(m,{geometry:w})}catch(t){if(t?.status===401||t?.status===403||t?.status===404)throw t;await Z.getState().loadCatalog({systemId:m,skipProducts:!w}),await f.getState().loadConfigurations(m);const e=f.getState(),a=e.systemDomainDefaults??e.systemRoom?.domain_defaults??null;a&&await u.loadDomainDefaults(a)}try{const t=f.getState(),e=t.systemId??m,a=P?.(e)||{};a.ui&&Object.keys(a.ui).length&&n.setState(a.ui);const l=!!t.systemRoom;n.setState({sceneCapabilities:{dimensions:l,walls:l},showWalls:l});const p=R?.(e);p!=null&&f.setState({configuratorKey:p})}catch{}if(!U)try{const{applySystemTheme:t}=await import("./5c9fd9201c.js");let e=null,a=!1;try{const y=new URLSearchParams(window.location.search);y.has("theme")&&(e=y.get("theme"),a=!0)}catch{}if(!a)for(let y=0;y<20;y+=1){const A=f.getState();if(e=A.systemThemeRecord??A.systemTheme,e!=null||s)break;await new Promise(N=>setTimeout(N,100))}if(s)return;const l=typeof document<"u"&&!!document.documentElement.getAttribute("data-theme-id"),p=typeof e=="string"&&/^\d+$/.test(e.trim()),K=l&&p&&!a;(e!=null||a)&&!K&&t(e)}catch{}if(s)return;n.setState({themeReady:!0});const o="ontouchstart"in window||navigator.maxTouchPoints>0,c=Math.min(window.innerWidth,window.innerHeight)<768;et(o&&c);const d=r?null:await u.parseShareLink(),i=f.getState().sceneConfigurations,h=f.getState().defaultPresetId;let I=h!=null&&i[h]?h:null;I||(I=Object.values(i||{})[0]?.id);const b=r?.scene_snapshot?._state?.sceneGraph?.activeSceneConfigId,g=b!=null&&i[b]?b:d?.sc||I;u.preloadMaterials(i[g]),tt.getState().initializeScene(g);try{const{applySceneConfigDefaults:t}=await import("./a77b15c0d6.js");t(g)}catch{}ot(i[g]),it(i[g]),!r&&d&&await u.restoreShareLink(d);const E=new URLSearchParams(window.location.search),j=E.get("gui");(j==="false"||j==="0")&&n.getState().setGuiVisible(!1);const O=E.get("hide");if(O){const t=O.split(",").map(e=>e.trim()).filter(Boolean);if(t.includes("all"))M();else{const e=t.filter(l=>v.includes(l)),a=t.filter(l=>!v.includes(l)&&l!=="all");a.length&&console.warn(`[sdk] ?hide= ignored unknown region(s): ${a.join(", ")}. Known regions: ${v.join(", ")}, or "all".`),e.length&&M(e)}}D(),k.getState().clearHistory(),at(),import("./a77b15c0d6.js").then(({initConfigEngine:t})=>t()).catch(()=>{}),w&&(()=>{if(s)return;n.setState({bootEvaluating:!0});const t=k.getState();t.pauseTracking();let e=!1;const a=()=>{e||(e=!0,n.setState({bootEvaluating:!1}),t.resumeTracking())};G().then(()=>{if(s){a();return}import("./a77b15c0d6.js").then(async({seedInitialState:l,reevaluateForFocus:p})=>{await l(),!s&&await p()}).catch(()=>{}).finally(()=>{a(),u.prefetchRemainingMaterialsWhenIdle?.()})}).catch(a)})(),$?.(),setTimeout(()=>{s||n.getState().markUiReady?.()},2500),r?(n.setState({isLayoutLoading:!0}),n.getState().setSceneLoading(!0,"Loading your saved design..."),_=nt(async()=>{s||(await u.restoreProject(r),D(),G().then(()=>{if(s)return;n.getState().setInitialPerPieceOverrides(),n.setState({isLayoutLoading:!1}),n.getState().clearSceneLoading(),k.getState().clearHistory();const t=r?.scene_snapshot?.canonical||null;import("./a77b15c0d6.js").then(({restoreConfiguration:e,refreshCanonicalState:a})=>t?e(t):a()).catch(()=>{})}))})):n.getState().setInitialPerPieceOverrides()}catch(o){n.getState().markUiReady?.();const c=o?.status,d=c==null?await Q(q()):null,i=J(o,{reachable:d});X(i,o);const h=i.code==="unavailable"?"unavailable":c===401||c===403?"unauthorized":c===404?"unavailable":"network";C?.(`${i.title} ${i.body}`,{code:h,reason:i.code,title:i.title,body:i.body,fix:i.fix,status:c,cause:o})}})(),{cancel(){s=!0,_&&_()}}}export{Tt as ORG_UNAVAILABLE_MESSAGE,Ct as bootConfigurator};