@vizbl/react-room-viewer 0.0.14

package/dist/index.js

@@ -0,0 +1,4029 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, createContext, use as external_react_use, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo as external_react_useMemo, useRef, useState } from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { QueryClient, QueryClientProvider, useInfiniteQuery, useQueries, useQuery as react_query_useQuery } from "@tanstack/react-query";
+import { initReactI18next, useTranslation } from "react-i18next";
+import { Label, Popover, Select, Separator as external_radix_ui_Separator, Slider } from "radix-ui";
+import axios, { AxiosHeaders as external_axios_AxiosHeaders } from "axios";
+import { ACESFilmicToneMapping, CanvasTexture, LinearFilter, MathUtils, NearestFilter, Plane, Quaternion, Raycaster, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from "three";
+import { cva } from "class-variance-authority";
+import { ArrowLeft, ArrowRight, Check, ChevronDownIcon, ChevronUpIcon, CircleIcon, XIcon } from "lucide-react";
+import { Indicator, Item, Root } from "@radix-ui/react-radio-group";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Slot } from "@radix-ui/react-slot";
+import "swiper/css";
+import { Content, List, Root as react_tabs_Root, Trigger } from "@radix-ui/react-tabs";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import { Close, Content as react_dialog_Content, Description, Overlay, Portal, Root as react_dialog_Root, Title } from "@radix-ui/react-dialog";
+import { formatHex, oklch } from "culori";
+import qrcode from "qrcode";
+import { GLTFExporter, USDZExporter } from "three/examples/jsm/Addons.js";
+import { UAParser } from "ua-parser-js";
+import "@google/model-viewer";
+import { Clone, DragControls, Environment, useGLTF, useProgress } from "@react-three/drei";
+import { Canvas, useLoader, useThree } from "@react-three/fiber";
+import i18next from "i18next";
+import i18next_browser_languagedetector from "i18next-browser-languagedetector";
+import { createPortal } from "react-dom";
+const initialState = {
+    theme: 'system',
+    setTheme: ()=>null
+};
+const ThemeProviderContext = /*#__PURE__*/ createContext(initialState);
+function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'vizbl-theme', root = window.document.documentElement, enableStorage = false, ...props }) {
+    const [theme, setTheme] = useState(()=>{
+        if (enableStorage) return localStorage.getItem(storageKey) || defaultTheme;
+        return defaultTheme;
+    });
+    useEffect(()=>{
+        root.classList.remove('light', 'dark');
+        if ('system' === theme) {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            root.classList.add(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+    }, [
+        theme,
+        root
+    ]);
+    const value = {
+        theme,
+        setTheme: (theme)=>{
+            if (enableStorage) localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        }
+    };
+    return /*#__PURE__*/ jsx(ThemeProviderContext, {
+        ...props,
+        value: value,
+        children: children
+    });
+}
+function utils_cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+function CheckDone(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M8.21723 14.9975C8.10298 14.997 7.99004 14.9731 7.8854 14.9272C7.78077 14.8814 7.68665 14.8145 7.60889 14.7308L3.55889 10.4225C3.4075 10.2611 3.3264 10.0463 3.33343 9.82513C3.34046 9.604 3.43505 9.39471 3.59639 9.24332C3.75773 9.09192 3.97261 9.01082 4.19374 9.01785C4.41488 9.02489 4.62417 9.11948 4.77556 9.28082L8.20889 12.9392L15.2172 5.27248C15.2883 5.18392 15.3768 5.11083 15.4772 5.0577C15.5776 5.00458 15.6878 4.97254 15.8011 4.96355C15.9143 4.95456 16.0282 4.96882 16.1357 5.00544C16.2432 5.04207 16.3421 5.10029 16.4263 5.17652C16.5105 5.25276 16.5782 5.3454 16.6253 5.44877C16.6724 5.55213 16.6979 5.66403 16.7001 5.7776C16.7024 5.89116 16.6815 6.00399 16.6385 6.10916C16.5956 6.21433 16.5316 6.30961 16.4506 6.38915L8.83389 14.7225C8.75686 14.8077 8.66308 14.8761 8.55841 14.9234C8.45373 14.9707 8.34042 14.996 8.22556 14.9975H8.21723Z",
+            fill: "currentColor"
+        })
+    });
+}
+function DropDownArrow(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M12.0002 15.496C11.8686 15.4968 11.7381 15.4716 11.6163 15.4218C11.4944 15.372 11.3836 15.2987 11.2902 15.206L7.29019 11.206C7.10188 11.0177 6.99609 10.7623 6.99609 10.496C6.99609 10.2297 7.10188 9.97434 7.29019 9.78604C7.47849 9.59773 7.73388 9.49194 8.00019 9.49194C8.26649 9.49194 8.52188 9.59773 8.71019 9.78604L12.0002 13.096L15.3002 9.91604C15.3922 9.81375 15.5043 9.73154 15.6295 9.67455C15.7547 9.61756 15.8903 9.58703 16.0279 9.58485C16.1654 9.58267 16.302 9.60889 16.4289 9.66189C16.5559 9.71488 16.6705 9.79349 16.7657 9.89282C16.8609 9.99214 16.9346 10.11 16.9821 10.2391C17.0297 10.3682 17.0501 10.5057 17.042 10.6431C17.034 10.7804 16.9977 10.9146 16.9355 11.0373C16.8732 11.16 16.7863 11.2685 16.6802 11.356L12.6802 15.216C12.4973 15.3924 12.2542 15.4925 12.0002 15.496Z",
+            fill: "currentColor"
+        })
+    });
+}
+function Loader(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V5C11 5.26522 11.1054 5.51957 11.2929 5.70711C11.4804 5.89464 11.7348 6 12 6C12.2652 6 12.5196 5.89464 12.7071 5.70711C12.8946 5.51957 13 5.26522 13 5V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M21.0002 11H19.0002C18.735 11 18.4806 11.1054 18.2931 11.2929C18.1055 11.4804 18.0002 11.7348 18.0002 12C18.0002 12.2652 18.1055 12.5196 18.2931 12.7071C18.4806 12.8946 18.735 13 19.0002 13H21.0002C21.2654 13 21.5197 12.8946 21.7073 12.7071C21.8948 12.5196 22.0002 12.2652 22.0002 12C22.0002 11.7348 21.8948 11.4804 21.7073 11.2929C21.5197 11.1054 21.2654 11 21.0002 11Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M6 12C6 11.7348 5.89464 11.4804 5.70711 11.2929C5.51957 11.1054 5.26522 11 5 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H5C5.26522 13 5.51957 12.8946 5.70711 12.7071C5.89464 12.5196 6 12.2652 6 12Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M6.22009 5.00298C6.02357 4.82786 5.76656 4.7362 5.50358 4.74744C5.2406 4.75869 4.99234 4.87196 4.8115 5.06322C4.63065 5.25447 4.53143 5.50867 4.5349 5.77187C4.53838 6.03507 4.64426 6.28656 4.83009 6.47298L6.27009 7.86298C6.36673 7.95629 6.48117 8.02917 6.60659 8.07728C6.73201 8.12538 6.86584 8.14773 7.00009 8.14298C7.1348 8.14246 7.26801 8.11474 7.39173 8.06147C7.51546 8.0082 7.62714 7.93048 7.72009 7.83298C7.90634 7.64561 8.01088 7.39216 8.01088 7.12798C8.01088 6.86379 7.90634 6.61034 7.72009 6.42298L6.22009 5.00298Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M17 8.14285C17.2575 8.14182 17.5047 8.04153 17.69 7.86285L19.13 6.47285C19.3057 6.2893 19.4049 6.04577 19.4075 5.79172C19.4102 5.53767 19.316 5.29214 19.1441 5.10502C18.9723 4.91789 18.7356 4.80319 18.4823 4.78421C18.2289 4.76524 17.9779 4.84341 17.78 5.00285L16.34 6.42285C16.1538 6.61021 16.0493 6.86366 16.0493 7.12785C16.0493 7.39203 16.1538 7.64548 16.34 7.83285C16.5132 8.01557 16.7489 8.12627 17 8.14285Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M12 17.9999C11.7348 17.9999 11.4804 18.1053 11.2929 18.2928C11.1054 18.4803 11 18.7347 11 18.9999V20.9999C11 21.2651 11.1054 21.5195 11.2929 21.707C11.4804 21.8946 11.7348 21.9999 12 21.9999C12.2652 21.9999 12.5196 21.8946 12.7071 21.707C12.8946 21.5195 13 21.2651 13 20.9999V18.9999C13 18.7347 12.8946 18.4803 12.7071 18.2928C12.5196 18.1053 12.2652 17.9999 12 17.9999Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M17.7302 16.1399C17.5392 15.9556 17.2829 15.8547 17.0175 15.8594C16.7521 15.864 16.4995 15.974 16.3152 16.1649C16.1309 16.3559 16.0299 16.6122 16.0346 16.8776C16.0393 17.143 16.1492 17.3956 16.3402 17.5799L17.7802 18.9999C17.9702 19.1835 18.2251 19.2845 18.4893 19.2808C18.7535 19.277 19.0055 19.1688 19.1902 18.9799C19.2837 18.8868 19.3579 18.7762 19.4085 18.6543C19.4591 18.5325 19.4851 18.4019 19.4851 18.2699C19.4851 18.138 19.4591 18.0073 19.4085 17.8855C19.3579 17.7637 19.2837 17.653 19.1902 17.5599L17.7302 16.1399Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M6.27011 16.141L4.83011 17.531C4.73638 17.624 4.66198 17.7346 4.61121 17.8564C4.56045 17.9783 4.53431 18.109 4.53431 18.241C4.53431 18.373 4.56045 18.5037 4.61121 18.6256C4.66198 18.7474 4.73638 18.858 4.83011 18.951C4.9239 19.0467 5.03596 19.1226 5.15965 19.1741C5.28333 19.2256 5.41612 19.2518 5.55011 19.251C5.79662 19.2531 6.03522 19.1641 6.22011 19.001L7.66011 17.611C7.75466 17.5197 7.83031 17.4107 7.88273 17.2902C7.93516 17.1697 7.96334 17.0401 7.96566 16.9087C7.96798 16.7773 7.9444 16.6467 7.89626 16.5244C7.84813 16.4022 7.77637 16.2905 7.68511 16.196C7.59384 16.1014 7.48484 16.0258 7.36433 15.9734C7.24383 15.9209 7.11418 15.8928 6.98278 15.8904C6.85139 15.8881 6.72082 15.9117 6.59854 15.9598C6.47626 16.008 6.36466 16.0797 6.27011 16.171V16.141Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+}
+function Move(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("g", {
+                clipPath: "url(#clip0_3784_10281)",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M20.739 11.3791L18.039 8.67909C17.955 8.59517 17.8554 8.52861 17.7458 8.48319C17.6361 8.43778 17.5186 8.4144 17.4 8.4144C17.2813 8.4144 17.1638 8.43778 17.0541 8.48319C16.9445 8.52861 16.8449 8.59517 16.761 8.67909C16.6771 8.763 16.6105 8.86262 16.5651 8.97226C16.5197 9.0819 16.4963 9.19941 16.4963 9.31808C16.4963 9.43676 16.5197 9.55427 16.5651 9.66391C16.6105 9.77355 16.6771 9.87317 16.761 9.95708L17.922 11.1001H12.9V6.0691L14.061 7.23909C14.1451 7.32246 14.2448 7.38843 14.3545 7.43322C14.4641 7.478 14.5815 7.50073 14.7 7.50009C14.8787 7.50113 15.0538 7.44891 15.2027 7.35009C15.3517 7.25127 15.4679 7.11032 15.5364 6.94523C15.605 6.78013 15.6228 6.59835 15.5876 6.42308C15.5525 6.24781 15.4659 6.08698 15.339 5.9611L12.639 3.26111C12.4705 3.09326 12.2423 2.99902 12.0045 2.99902C11.7666 2.99902 11.5385 3.09326 11.37 3.26111L8.66999 5.9611C8.58608 6.04442 8.5194 6.14346 8.47376 6.25255C8.42812 6.36164 8.40441 6.47866 8.404 6.59691C8.40358 6.71517 8.42646 6.83235 8.47132 6.94176C8.51619 7.05117 8.58217 7.15068 8.66549 7.23459C8.74882 7.31851 8.84785 7.38519 8.95695 7.43083C9.06604 7.47647 9.18306 7.50017 9.30131 7.50059C9.54014 7.50144 9.76952 7.40737 9.93899 7.23909L11.1 6.0781V11.1001H6.069L7.239 9.93908C7.40847 9.76961 7.50368 9.53975 7.50368 9.30008C7.50368 9.06041 7.40847 8.83056 7.239 8.66109C7.06953 8.49161 6.83967 8.39641 6.6 8.39641C6.36033 8.39641 6.13048 8.49161 5.961 8.66109L3.26101 11.3611C3.17764 11.4452 3.11167 11.5449 3.06689 11.6546C3.0221 11.7642 2.99938 11.8816 3.00002 12.0001C2.99933 12.1185 3.02203 12.2359 3.06682 12.3456C3.11161 12.4552 3.1776 12.555 3.26101 12.6391L5.961 15.3391C6.0451 15.4225 6.14483 15.4885 6.25449 15.5333C6.36414 15.578 6.48156 15.6007 6.6 15.6001C6.77896 15.6015 6.95429 15.5496 7.10354 15.4508C7.25279 15.3521 7.36918 15.211 7.43781 15.0458C7.50643 14.8805 7.52417 14.6985 7.48876 14.5231C7.45334 14.3476 7.36638 14.1868 7.239 14.0611L6.078 12.9001H11.1V17.9311L9.93899 16.7611C9.76952 16.5916 9.53966 16.4964 9.29999 16.4964C9.06032 16.4964 8.83047 16.5916 8.661 16.7611C8.49152 16.9305 8.39631 17.1604 8.39631 17.4001C8.39631 17.6397 8.49152 17.8696 8.661 18.0391L11.361 20.739C11.5297 20.9065 11.7578 21.0004 11.9955 21.0004C12.2332 21.0004 12.4612 20.9065 12.63 20.739L15.33 18.0391C15.4139 17.9551 15.4805 17.8555 15.5259 17.7459C15.5713 17.6362 15.5947 17.5187 15.5947 17.4001C15.5947 17.2814 15.5713 17.1639 15.5259 17.0542C15.4805 16.9446 15.4139 16.845 15.33 16.7611C15.2461 16.6771 15.1464 16.6106 15.0368 16.5652C14.9272 16.5198 14.8096 16.4964 14.691 16.4964C14.5723 16.4964 14.4548 16.5198 14.3452 16.5652C14.2355 16.6106 14.1359 16.6771 14.052 16.7611L12.9 17.9221V12.9001H17.931L16.761 14.0611C16.6558 14.166 16.5781 14.2952 16.5349 14.4374C16.4917 14.5795 16.4843 14.7301 16.5134 14.8758C16.5424 15.0215 16.607 15.1578 16.7013 15.2725C16.7957 15.3873 16.917 15.4769 17.0544 15.5335C17.164 15.5784 17.2815 15.6011 17.4 15.6001C17.5184 15.6008 17.6359 15.5782 17.7455 15.5334C17.8552 15.4886 17.9549 15.4226 18.039 15.3391L20.739 12.6391C20.8224 12.555 20.8884 12.4552 20.9331 12.3456C20.9779 12.2359 21.0006 12.1185 21 12.0001C20.9966 11.7671 20.9031 11.5445 20.739 11.3791Z",
+                    fill: "currentColor"
+                })
+            }),
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("clipPath", {
+                    id: "clip0_3784_10281",
+                    children: /*#__PURE__*/ jsx("rect", {
+                        width: "24",
+                        height: "24",
+                        fill: "currentColor"
+                    })
+                })
+            })
+        ]
+    });
+}
+function Paint(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M19.5398 5.08113C18.5372 4.08551 17.3458 3.30019 16.0356 2.77129C14.7253 2.24238 13.3226 1.98054 11.9098 2.00113C9.25763 1.9945 6.71146 3.04171 4.83141 4.91238C2.95135 6.78306 1.89143 9.32396 1.8848 11.9761C1.87817 14.6283 2.92538 17.1745 4.79605 19.0545C6.66673 20.9346 9.20763 21.9945 11.8598 22.0011C12.4313 22.0108 12.9898 21.8305 13.4477 21.4884C13.9057 21.1464 14.237 20.6619 14.3898 20.1111C14.4872 19.7134 14.4862 19.2979 14.3869 18.9006C14.2875 18.5033 14.0929 18.1362 13.8198 17.8311C13.7562 17.7594 13.7146 17.6709 13.7 17.5761C13.6854 17.4814 13.6984 17.3845 13.7374 17.2969C13.7765 17.2094 13.8399 17.1349 13.9201 17.0825C14.0003 17.03 14.0939 17.0018 14.1898 17.0011H15.8398C17.3927 17.0084 18.8909 16.4279 20.0336 15.3761C21.1762 14.3244 21.8786 12.8794 21.9998 11.3311C22.037 10.1767 21.838 9.02692 21.415 7.95218C20.992 6.87745 20.3539 5.90046 19.5398 5.08113ZM15.8798 15.0011H14.2298C13.7479 14.9984 13.2756 15.1355 12.8701 15.3959C12.4647 15.6563 12.1435 16.0288 11.9455 16.4681C11.7476 16.9075 11.6813 17.3948 11.7549 17.8711C11.8284 18.3473 12.0385 18.792 12.3598 19.1511C12.4224 19.2142 12.4666 19.2932 12.4877 19.3795C12.5088 19.4658 12.5061 19.5562 12.4798 19.6411C12.4298 19.8511 12.1998 19.9811 11.8898 20.0011C10.754 19.9869 9.63429 19.7309 8.60516 19.2502C7.57603 18.7695 6.66109 18.0751 5.92126 17.2132C5.18142 16.3513 4.63365 15.3417 4.31441 14.2516C3.99517 13.1615 3.91178 12.016 4.0698 10.8911C4.35496 9.00107 5.29935 7.27276 6.73593 6.01186C8.17251 4.75096 10.0087 4.03873 11.9198 4.00113H11.9998C13.1306 3.98632 14.253 4.19813 15.3007 4.62407C16.3483 5.05001 17.3001 5.68144 18.0998 6.48113C18.7238 7.10552 19.2141 7.85048 19.5407 8.67057C19.8674 9.49066 20.0236 10.3687 19.9998 11.2511C19.8963 12.2742 19.4184 13.2229 18.6579 13.9151C17.8974 14.6072 16.9081 14.994 15.8798 15.0011Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M11.9996 8.00025C12.3974 8.00025 12.7789 7.84222 13.0602 7.56091C13.3415 7.27961 13.4996 6.89808 13.4996 6.50025C13.4996 6.10243 13.3415 5.7209 13.0602 5.43959C12.7789 5.15829 12.3974 5.00025 11.9996 5.00025C11.6018 5.00025 11.2202 5.15829 10.9389 5.43959C10.6576 5.7209 10.4996 6.10243 10.4996 6.50025C10.4996 6.89808 10.6576 7.27961 10.9389 7.56091C11.2202 7.84222 11.6018 8.00025 11.9996 8.00025Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M15.2496 7.20116C15.079 7.29965 14.9294 7.43079 14.8094 7.58709C14.6895 7.74339 14.6014 7.92179 14.5504 8.1121C14.4994 8.30242 14.4864 8.50092 14.512 8.69627C14.5377 8.89162 14.6016 9.08 14.7001 9.25066C14.7986 9.42131 14.9298 9.57089 15.0861 9.69086C15.2424 9.81084 15.4208 9.89885 15.6111 9.94987C15.8014 10.0009 15.9999 10.0139 16.1952 9.98825C16.3906 9.96256 16.579 9.89865 16.7496 9.80016C17.0944 9.60125 17.3461 9.27352 17.4492 8.88907C17.5524 8.50462 17.4985 8.09494 17.2996 7.75016C17.1007 7.40538 16.773 7.15373 16.3885 7.05059C16.0041 6.94744 15.5944 7.00125 15.2496 7.20016V7.20116Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8.74976 7.20016C8.57904 7.1018 8.39062 7.03803 8.19526 7.01249C7.99989 6.98695 7.80141 7.00014 7.61114 7.0513C7.42088 7.10247 7.24255 7.19061 7.08634 7.31069C6.93014 7.43077 6.79912 7.58045 6.70076 7.75116C6.6024 7.92188 6.53863 8.1103 6.51308 8.30567C6.48754 8.50103 6.50073 8.69951 6.5519 8.88978C6.60306 9.08005 6.6912 9.25837 6.81128 9.41458C6.93137 9.57078 7.08104 9.7018 7.25176 9.80016C7.59654 9.99881 8.00611 10.0524 8.39037 9.94903C8.77464 9.84569 9.10211 9.59394 9.30076 9.24916C9.4994 8.90438 9.55295 8.49481 9.44962 8.11055C9.34629 7.72629 9.09454 7.39881 8.74976 7.20016Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M6.15933 11.2603C5.9133 11.4264 5.7221 11.6618 5.60993 11.9366C5.49776 12.2115 5.46967 12.5135 5.52921 12.8043C5.58876 13.0951 5.73326 13.3617 5.94443 13.5704C6.1556 13.779 6.42393 13.9204 6.71546 13.9764C7.00698 14.0325 7.30858 14.0008 7.58208 13.8853C7.85557 13.7699 8.08866 13.5759 8.25183 13.3279C8.415 13.0799 8.50091 12.789 8.49868 12.4922C8.49646 12.1953 8.4062 11.9058 8.23933 11.6603C8.12971 11.4966 7.98873 11.3563 7.82454 11.2475C7.66035 11.1387 7.47622 11.0635 7.28279 11.0263C7.08936 10.9891 6.89047 10.9906 6.69763 11.0308C6.5048 11.0709 6.32183 11.1489 6.15933 11.2603Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+}
+function Share(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 15.9998C20.5522 15.9998 20.9999 16.4476 21 16.9998V18.9998C20.9999 19.7952 20.6835 20.5584 20.1211 21.1209C19.5585 21.6833 18.7955 21.9998 18 21.9998H6C5.20446 21.9998 4.44149 21.6833 3.87891 21.1209C3.31646 20.5584 3.00012 19.7952 3 18.9998V16.9998C3.00009 16.4476 3.44777 15.9998 4 15.9998C4.55223 15.9998 4.99991 16.4476 5 16.9998V18.9998C5.00012 19.2648 5.1056 19.5194 5.29297 19.7068C5.48048 19.8942 5.7349 19.9998 6 19.9998H18C18.2651 19.9998 18.5195 19.8942 18.707 19.7068C18.8944 19.5194 18.9999 19.2648 19 18.9998V16.9998C19.0001 16.4476 19.4478 15.9998 20 15.9998Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M11.3691 3.22437C11.7619 2.90402 12.3409 2.92662 12.707 3.29273L17.707 8.29273C18.0973 8.68328 18.0975 9.31635 17.707 9.7068C17.3166 10.097 16.6834 10.097 16.293 9.7068L13 6.41383V15.9998C12.9997 16.5518 12.552 16.9997 12 16.9998C11.4479 16.9998 11.0003 16.5518 11 15.9998V6.41383L7.70703 9.7068C7.31657 10.097 6.68343 10.097 6.29297 9.7068C5.90252 9.31635 5.90268 8.68328 6.29297 8.29273L11.293 3.29273L11.3691 3.22437Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+}
+function Vizbl({ className, ...props }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className: utils_cn('size-6', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12.0625 1.70412C12.1393 1.70359 12.2136 1.7151 12.2842 1.73439C12.6576 1.76978 13.0261 1.88527 13.3604 2.08303L19.7012 5.84084L19.7031 5.84181C20.1036 6.08032 20.4348 6.42322 20.665 6.83498C20.8952 7.24671 21.0168 7.71415 21.0166 8.19142V8.19338L20.998 15.7403C20.9979 16.1352 20.9124 16.526 20.751 16.8848C20.7319 16.9557 20.7049 17.026 20.667 17.0928C20.6355 17.1482 20.5983 17.1987 20.5576 17.2442C20.3296 17.6 20.023 17.8979 19.6631 18.1133L13.2998 21.9072C12.4738 22.3996 11.4611 22.4004 10.6436 21.917L10.6416 21.916L4.30078 18.1582L4.29883 18.1572C3.91023 17.9258 3.58764 17.5957 3.3584 17.2002C3.35105 17.1885 3.34181 17.1773 3.33496 17.1651C3.32803 17.1526 3.32268 17.1387 3.31641 17.126C3.09976 16.7236 2.98517 16.2703 2.98535 15.8076V15.8057L3.00391 8.25588C3.00603 7.28279 3.51293 6.37777 4.33984 5.88478L10.7021 2.09181C11.0682 1.87369 11.4708 1.75231 11.877 1.72658C11.9365 1.71245 11.999 1.70462 12.0625 1.70412ZM5.16895 7.36818C4.87108 7.54583 4.6844 7.87497 4.68359 8.23635L4.66602 15.3838L9.45801 12.5254C9.51085 12.7718 9.60256 13.0142 9.73535 13.2442C9.90127 13.5315 10.1161 13.7727 10.3633 13.9639L5.49512 16.8662L11.499 20.4248C11.8036 20.6044 12.1738 20.6008 12.4707 20.4238L18.5107 16.8233L13.4971 13.877C13.9543 13.482 14.2391 12.9423 14.3242 12.3672L19.3193 15.3037L19.3379 8.21291L19.3369 8.21388C19.3369 8.03517 19.2923 7.85955 19.2061 7.7051C19.1196 7.55056 18.9947 7.42151 18.8447 7.33205L12.8887 3.80275L12.8535 9.73439C12.3304 9.51037 11.7366 9.46806 11.1738 9.63576L11.21 3.76662L5.16895 7.36818Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M9.91641 8.60885C11.7928 7.52595 14.1912 8.16845 15.2748 10.0444C16.3582 11.9209 15.7156 14.3211 13.8393 15.4047C11.9627 16.4879 9.56339 15.8446 8.47989 13.9682C7.39671 12.0916 8.03987 9.69227 9.91641 8.60885ZM13.8031 10.894C13.189 9.83118 11.8293 9.46704 10.766 10.0805C9.7026 10.6945 9.33693 12.0551 9.95059 13.1186C10.5646 14.1821 11.9261 14.5469 12.9897 13.9331C14.0529 13.3189 14.4171 11.9575 13.8031 10.894Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+}
+const SPINNER_LOGO_PATH = 'M15.7495 62.7798L46.4936 45.0297M46.4936 45.0297L77.2661 62.5451M46.4936 45.0297L46.7111 9.62225M49.9213 79.4237L74.5719 65.1917C75.6436 64.5705 76.5344 63.6811 77.1541 62.6137C77.7738 61.5462 78.1003 60.3385 78.1007 59.1129L78.1729 30.7811C78.1734 29.5494 77.851 28.3427 77.2373 27.2798C76.6236 26.2169 75.7398 25.3343 74.6729 24.7189L50.1007 10.6155C47.926 9.3694 45.2455 9.37719 43.0689 10.6339L18.4183 24.8659C16.2385 26.1244 14.8946 28.4401 14.8895 30.9447L14.8173 59.2766C14.8168 60.5082 15.1392 61.7149 15.7529 62.7778C16.3666 63.8408 17.2504 64.7233 18.3173 65.3387L42.8895 79.4421C45.0642 80.6882 47.7447 80.6805 49.9213 79.4237Z';
+const SPINNER_SUCCESS_PATH = 'M13.6758 28.1023C13.3559 28.101 13.0397 28.0341 12.7467 27.9057C12.4537 27.7772 12.1902 27.59 11.9725 27.3557L0.632479 15.2923C0.208575 14.8406 -0.0185097 14.2389 0.00118164 13.6198C0.020873 13.0006 0.285727 12.4146 0.737479 11.9907C1.18923 11.5668 1.79088 11.3397 2.41006 11.3594C3.02924 11.3791 3.61524 11.6439 4.03915 12.0957L13.6525 22.339L33.2758 0.87233C33.475 0.624349 33.7227 0.419696 34.0038 0.270944C34.2849 0.122191 34.5935 0.0324784 34.9105 0.00731496C35.2276 -0.0178485 35.5464 0.0220682 35.8475 0.124615C36.1485 0.227162 36.4254 0.390174 36.6612 0.603637C36.897 0.8171 37.0866 1.07651 37.2185 1.36593C37.3503 1.65535 37.4216 1.96867 37.428 2.28665C37.4344 2.60463 37.3756 2.92056 37.2555 3.21502C37.1353 3.50949 36.9562 3.77627 36.7291 3.999L15.4025 27.3323C15.1868 27.5709 14.9242 27.7625 14.6311 27.895C14.338 28.0275 14.0208 28.0981 13.6991 28.1023H13.6758Z';
+const SPINNER_ERROR_PATH = 'M17.3045 14.0095L27.3378 3.99955C27.5554 3.78199 27.728 3.52371 27.8457 3.23946C27.9635 2.95521 28.0241 2.65055 28.0241 2.34288C28.0241 2.03521 27.9635 1.73055 27.8457 1.4463C27.728 1.16205 27.5554 0.903769 27.3378 0.686213C27.1203 0.468656 26.862 0.296082 26.5778 0.178341C26.2935 0.0606 25.9889 -4.58466e-09 25.6812 0C25.3735 4.58466e-09 25.0689 0.0606 24.7846 0.178341C24.5003 0.296082 24.2421 0.468656 24.0245 0.686213L14.0145 10.7195L4.00451 0.686213C3.56514 0.246838 2.96921 -4.62957e-09 2.34784 0C1.72647 4.62957e-09 1.13055 0.246838 0.691177 0.686213C0.251802 1.12559 0.0049634 1.72151 0.0049634 2.34288C0.00496339 2.96425 0.251802 3.56017 0.691177 3.99955L10.7245 14.0095L0.691177 24.0195C0.472196 24.2363 0.29836 24.4943 0.179723 24.7787C0.0610849 25.063 0 25.3681 0 25.6762C0 25.9843 0.0610849 26.2894 0.179723 26.5737C0.29836 26.8581 0.472196 27.1161 0.691177 27.3329C0.908091 27.5516 1.16616 27.7252 1.4505 27.8436C1.73484 27.9621 2.03982 28.0231 2.34784 28.0231C2.65587 28.0231 2.96085 27.9621 3.24519 27.8436C3.52953 27.7252 3.7876 27.5516 4.00451 27.3329L14.0145 17.2995L24.0245 27.3329C24.296 27.6078 24.6314 27.8111 25.0007 27.9245C25.3701 28.0379 25.7618 28.0579 26.1407 27.9828C26.5197 27.9077 26.8741 27.7397 27.1722 27.4939C27.4703 27.2481 27.7028 26.9322 27.8488 26.5745C28.0272 26.1459 28.0736 25.6738 27.9821 25.2187C27.8907 24.7636 27.6655 24.346 27.3355 24.0195L17.3045 14.0095Z';
+const SPINNER_LOGO_COLOR = 'var(--vizbl-borders-medium)';
+function Spinner({ className, variant: type = 'default', size = 'default', state = 'loading', role, 'aria-live': ariaLive, 'aria-label': ariaLabel, ...props }) {
+    const resolvedAriaLabel = ariaLabel ?? ('success' === state ? 'Success' : 'error' === state ? 'Error' : 'Loading');
+    switch(type){
+        case 'logo':
+            return /*#__PURE__*/ jsxs("svg", {
+                ...props,
+                role: role ?? 'status',
+                "aria-live": ariaLive ?? 'polite',
+                "aria-label": resolvedAriaLabel,
+                width: "93",
+                height: "91",
+                viewBox: "0 0 93 91",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "data-slot": "spinner",
+                "data-size": size,
+                "data-state": state,
+                className: utils_cn('spinner-logo shrink-0', 'sm' === size ? 'size-9' : 'size-22', className),
+                children: [
+                    /*#__PURE__*/ jsx("g", {
+                        className: "spinner-logo__intro-shell",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: SPINNER_LOGO_PATH,
+                            className: "spinner-logo__outline spinner-logo__outline--intro",
+                            vectorEffect: 'sm' === size ? void 0 : 'non-scaling-stroke'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("circle", {
+                        className: "spinner-logo__intro-orb",
+                        cx: "46.27",
+                        cy: "45.8",
+                        r: "11.18",
+                        fill: "white",
+                        stroke: SPINNER_LOGO_COLOR,
+                        strokeWidth: "5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("circle", {
+                        className: "spinner-logo__result-ring",
+                        cx: "46.5",
+                        cy: "45.5",
+                        r: "33.46",
+                        fill: "white",
+                        stroke: SPINNER_LOGO_COLOR,
+                        strokeWidth: "5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("g", {
+                        transform: "translate(27.786 31.4489)",
+                        children: /*#__PURE__*/ jsx("g", {
+                            className: "spinner-logo__result-glyph spinner-logo__result-glyph--success",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: SPINNER_SUCCESS_PATH,
+                                fill: SPINNER_LOGO_COLOR
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("g", {
+                        transform: "translate(32.4879 31.4885)",
+                        children: /*#__PURE__*/ jsx("g", {
+                            className: "spinner-logo__result-glyph spinner-logo__result-glyph--error",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: SPINNER_ERROR_PATH,
+                                fill: SPINNER_LOGO_COLOR
+                            })
+                        })
+                    })
+                ]
+            });
+        case 'default':
+            return /*#__PURE__*/ jsx(Loader, {
+                ...props,
+                role: role ?? 'status',
+                "aria-live": ariaLive ?? 'polite',
+                "aria-label": ariaLabel ?? 'Loading',
+                "data-slot": "spinner",
+                className: utils_cn('size-4 animate-spin', className)
+            });
+        default:
+            {
+                const _exhaustiveCheck = type;
+                return _exhaustiveCheck;
+            }
+    }
+}
+function separator_Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return /*#__PURE__*/ jsx(external_radix_ui_Separator.Root, {
+        "data-slot": "separator",
+        decorative: decorative,
+        orientation: orientation,
+        className: utils_cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className),
+        ...props
+    });
+}
+const IS_SERVER = 'undefined' == typeof window;
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+    const getMatches = (query)=>{
+        if (IS_SERVER) return defaultValue;
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(()=>{
+        if (initializeWithValue) return getMatches(query);
+        return defaultValue;
+    });
+    useEffect(()=>{
+        const matchMedia = window.matchMedia(query);
+        const handleChange = ()=>{
+            setMatches(matchMedia.matches);
+        };
+        handleChange();
+        matchMedia.addEventListener('change', handleChange);
+        return ()=>{
+            matchMedia.removeEventListener('change', handleChange);
+        };
+    }, [
+        query
+    ]);
+    return matches;
+}
+const DEFAULT_API_BASE_URL = 'https://api.vizbl.us';
+const DEFAULT_API_TIMEOUT = 30000;
+function createDefaultClient() {
+    return axios.create({
+        baseURL: DEFAULT_API_BASE_URL,
+        timeout: DEFAULT_API_TIMEOUT
+    });
+}
+let apiClient = createDefaultClient();
+let recoveryClient = createDefaultClient();
+let accessTokenResolver = null;
+let headersResolver = null;
+new Set([
+    'common',
+    'delete',
+    'get',
+    'head',
+    'post',
+    'put',
+    'patch',
+    'options',
+    'purge',
+    'link',
+    'unlink'
+]);
+function hasDefaultCommonHeader(client, headerName) {
+    const commonHeaders = client.defaults.headers.common;
+    if (void 0 === commonHeaders) return false;
+    return external_axios_AxiosHeaders.from(commonHeaders).has(headerName);
+}
+function withResolvedHeaders(config) {
+    const headers = external_axios_AxiosHeaders.from(config.headers);
+    if (null !== accessTokenResolver) {
+        const token = accessTokenResolver()?.trim();
+        if (token && !headers.has('Authorization')) headers.set('Authorization', `Bearer ${token}`);
+    }
+    if (null !== headersResolver) {
+        const customHeaders = headersResolver();
+        for (const [key, value] of Object.entries(customHeaders))if (value && !headers.has(key)) headers.set(key, value);
+    }
+    config.headers = headers;
+    return config;
+}
+function isFormDataPayload(data) {
+    if ('undefined' != typeof FormData && data instanceof FormData) return true;
+    if (null === data || 'object' != typeof data) return false;
+    const maybeFormData = data;
+    return maybeFormData.constructor?.name === 'FormData' || 'function' == typeof maybeFormData.getBoundary;
+}
+function withNormalizedContentType(client, config) {
+    if (void 0 === config.data) return config;
+    if (isFormDataPayload(config.data)) return config;
+    const headers = external_axios_AxiosHeaders.from(config.headers);
+    if (!headers.has('Content-Type') && !hasDefaultCommonHeader(client, 'Content-Type')) headers.set('Content-Type', 'application/json');
+    config.headers = headers;
+    return config;
+}
+function toRuntimeAxiosRequestConfig(config) {
+    const { skipUnauthorizedRecovery: _skipUnauthorizedRecovery, ...requestConfig } = config;
+    return requestConfig;
+}
+async function performRequest(client, config) {
+    const requestConfig = withNormalizedContentType(client, withResolvedHeaders({
+        ...config
+    }));
+    try {
+        return await client.request(requestConfig);
+    } catch (error) {
+        throw error;
+    }
+}
+async function requestRuntime(config) {
+    const client = config.skipUnauthorizedRecovery ? recoveryClient : apiClient;
+    return performRequest(client, toRuntimeAxiosRequestConfig(config));
+}
+async function client_client(config) {
+    return requestRuntime(config);
+}
+const objFetchQueryKey = (data = {})=>[
+        {
+            url: '/obj/Fetch'
+        },
+        ...data ? [
+            data
+        ] : []
+    ];
+async function objFetch(data, config = {}) {
+    const { client: request = client_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/obj/Fetch",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
+async function objGetPublic(data, config = {}) {
+    const { client: request = client_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/obj/GetPublic",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
+var room_example_1_namespaceObject = JSON.parse('{"camera":{"fov":45},"floor":{"z":185.0,"pitchDeg":-87.0,"rollDeg":0},"walls":[{"id":"backWall","z":580.0,"pitchDeg":0,"rollDeg":0},{"id":"rightWall","z":315.0,"pitchDeg":0,"rollDeg":-90.0},{"id":"leftWall","z":560.0,"pitchDeg":0,"rollDeg":55.0},{"id":"ceiling","z":1000.0,"pitchDeg":90.0,"rollDeg":0}]}');
+var room_example_2_namespaceObject = JSON.parse('{"camera":{"fov":45},"floor":{"z":205.0,"pitchDeg":-87.0,"rollDeg":0},"walls":[{"id":"backWall","z":570.0,"pitchDeg":0,"rollDeg":0},{"id":"rightWall","z":315.0,"pitchDeg":0,"rollDeg":-90.0},{"id":"leftWall","z":1000.0,"pitchDeg":0,"rollDeg":90.0},{"id":"ceiling","z":1000.0,"pitchDeg":90.0,"rollDeg":0}]}');
+var room_example_3_namespaceObject = JSON.parse('{"camera":{"fov":45},"floor":{"z":185.0,"pitchDeg":-90.0,"rollDeg":0},"walls":[{"id":"backWall","z":550.0,"pitchDeg":0,"rollDeg":0},{"id":"rightWall","z":220.0,"pitchDeg":0,"rollDeg":-90.0},{"id":"leftWall","z":218.0,"pitchDeg":0,"rollDeg":90.0},{"id":"ceiling","z":185.0,"pitchDeg":90.0,"rollDeg":0}]}');
+var room_example_4_namespaceObject = JSON.parse('{"camera":{"fov":45},"maskUrl":"https://vizbl-2.s3.us-west-1.amazonaws.com/public/room-example/room-example-4-mask.png","floor":{"z":76.41371488571167,"pitchDeg":-88.08860421180725,"rollDeg":-1.1962583474814892},"walls":[]}');
+var room_example_5_namespaceObject = JSON.parse('{"camera":{"fov":45},"maskUrl":"https://vizbl-2.s3.us-west-1.amazonaws.com/public/room-example/room-example-5-mask.png","floor":{"z":86.81210279464722,"pitchDeg":-84.67234969139099,"rollDeg":-4.7433755826205015e-2},"walls":[]}');
+var room_example_6_namespaceObject = JSON.parse('{"camera":{"fov":45},"maskUrl":"https://vizbl-2.s3.us-west-1.amazonaws.com/public/room-example/room-example-6-mask.png","floor":{"z":124.4072675704956,"pitchDeg":-70.20531892776489,"rollDeg":-0.7209355384111404},"walls":[]}');
+const axisX = new Vector3(1, 0, 0);
+const axisY = new Vector3(0, 1, 0);
+const axisZ = new Vector3(0, 0, 1);
+function calculatePlanePose(z, pitchDeg, rollDeg, camera) {
+    const direction = axisZ.clone().applyAxisAngle(axisX, MathUtils.degToRad(pitchDeg)).applyAxisAngle(axisY, MathUtils.degToRad(rollDeg)).applyQuaternion(camera.quaternion).normalize();
+    const quaternion = new Quaternion().setFromUnitVectors(axisZ, direction);
+    const position = camera.position.clone().addScaledVector(direction, -(z * ZSCALE));
+    return {
+        position: position.toArray(),
+        quaternion: quaternion.toArray()
+    };
+}
+function normalizeRoomConfig(config) {
+    return {
+        camera: config.camera,
+        maskUrl: config.maskUrl,
+        surfaces: [
+            {
+                ...config.floor,
+                id: FLOOR_SURFACE_ID
+            },
+            ...config.walls
+        ]
+    };
+}
+let globalIncrementalId = 0;
+function getNextGlobalId(prefix) {
+    globalIncrementalId += 1;
+    return `${prefix}-${globalIncrementalId}`;
+}
+const ROOM_EXAMPLE_ASSET_PREFIX = 'https://vizbl-2.s3.us-west-1.amazonaws.com/public/room-example/';
+const HDR_URL = 'https://vizbl.com/hdr/neutral.hdr';
+const CARPET_INFERENCE_EXPORT_ENABLED = false;
+const CARPET_INFERENCE_RAW_URL = 'https://api.vizbl.com/inference/carpet/run-raw';
+const POSTER_VIEWER_URL = "https://viewer.vizbl.com/poster/app/index.html";
+const ROOM_VIEWER_URL = "https://integrations.vizbl.com/room-viewer";
+const APP_CLIP_BUNDLE_ID = "com.us.vizbl.Clip";
+const ZSCALE = 0.01;
+const FLOOR_SURFACE_ID = 'floor';
+const SURFACE_OFFSET = 0.05;
+const POSTER_ROOM_EXAMPLES = [
+    {
+        id: 'room-example-1',
+        name: 'Living room',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-1.jpg`,
+        config: normalizeRoomConfig(room_example_1_namespaceObject)
+    },
+    {
+        id: 'room-example-2',
+        name: 'Bedroom',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-2.jpg`,
+        config: normalizeRoomConfig(room_example_2_namespaceObject)
+    },
+    {
+        id: 'room-example-3',
+        name: 'Kitchen',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-3.jpg`,
+        config: normalizeRoomConfig(room_example_3_namespaceObject)
+    }
+];
+const CARPET_ROOM_EXAMPLES = [
+    {
+        id: 'room-example-4',
+        name: 'Hallway',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-4.png`,
+        config: normalizeRoomConfig(room_example_4_namespaceObject)
+    },
+    {
+        id: 'room-example-5',
+        name: 'Dining room',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-5.png`,
+        config: normalizeRoomConfig(room_example_5_namespaceObject)
+    },
+    {
+        id: 'room-example-6',
+        name: 'Office',
+        image: `${ROOM_EXAMPLE_ASSET_PREFIX}room-example-6.png`,
+        config: normalizeRoomConfig(room_example_6_namespaceObject)
+    }
+];
+const RAM_TINUUIDS = [
+    'RcSd3KphTyq_JQEjNCqKQA',
+    'gu0109ftQmS-UQkwcW010Q',
+    'nOfGLIZcRVeU93wOkHWSbg',
+    'ozzH5I2kQMW20ao-33C86A',
+    'DBA4wR-zT92vjtuOk9varg'
+];
+const CARPET_MATERIAL_OWNER_ID = '97f6e38a-d092-41b4-ba62-1a870b54e964';
+function useFrameWidthOptions() {
+    const { t } = useTranslation();
+    return external_react_useMemo(()=>[
+            {
+                value: 0.025,
+                label: `2.5 ${t('units.cm')}`
+            },
+            {
+                value: 0.05,
+                label: `5 ${t('units.cm')}`
+            }
+        ], [
+        t
+    ]);
+}
+function useMattingOptions() {
+    const { t } = useTranslation();
+    return external_react_useMemo(()=>[
+            {
+                value: 0,
+                label: t('mattingOptions.none')
+            },
+            {
+                value: 0.05,
+                label: `5 ${t('units.cm')}`
+            }
+        ], [
+        t
+    ]);
+}
+function getInitialSceneLoadState(type) {
+    return {
+        layoutReady: false,
+        placementReady: false,
+        materialReady: false,
+        artifactsReady: 'poster' === type,
+        assetsReady: false,
+        prepareReady: 'poster' === type
+    };
+}
+const RoomViewerContext = /*#__PURE__*/ createContext(null);
+function RoomViewerProvider({ children, src, tinuuid: initialTinuuid, type, width, height, name }) {
+    const frameWidthOptions = useFrameWidthOptions();
+    const mattingOptions = useMattingOptions();
+    const initialRooms = 'carpet' === type ? CARPET_ROOM_EXAMPLES : POSTER_ROOM_EXAMPLES;
+    const [rooms, setRooms] = useState(initialRooms);
+    const [roomId, setRoomId] = useState(initialRooms[0].id);
+    const room = external_react_useMemo(()=>rooms.find((r)=>r.id === roomId) ?? rooms[0], [
+        rooms,
+        roomId
+    ]);
+    const [tinuuid, setTinuuid] = useState(initialTinuuid);
+    const [material, setMaterial] = useState(null);
+    const [frameWidth, setFrameWidth] = useState(frameWidthOptions[0].value);
+    const [matting, setMatting] = useState(mattingOptions[0].value);
+    const [angle, setAngle] = useState(0);
+    const [rotation, setRotation] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [containerRef, setContainerRef] = useState(null);
+    const [sceneLoad, setSceneLoad] = useState(()=>getInitialSceneLoadState(type));
+    const resourceRef = useRef(null);
+    const usesTinuuid = 'poster' !== type;
+    const objectQuery = react_query_useQuery({
+        queryKey: objFetchQueryKey({
+            tinuuid: tinuuid ?? void 0
+        }),
+        enabled: usesTinuuid && null === material && Boolean(tinuuid),
+        retry: false,
+        queryFn: async ()=>{
+            if (!tinuuid) throw new Error('Tinuuid is required.');
+            return objFetch({
+                tinuuid
+            });
+        }
+    });
+    const objectData = objectQuery.data ?? null;
+    const glbUrl = material?.native?.glbUrl ?? null;
+    const patchSceneLoad = useCallback((patch)=>{
+        setSceneLoad((current)=>Object.assign({}, current, patch));
+    }, []);
+    useEffect(()=>{
+        if (!usesTinuuid) return;
+        setTinuuid(initialTinuuid);
+        setMaterial(null);
+    }, [
+        initialTinuuid,
+        usesTinuuid
+    ]);
+    useEffect(()=>{
+        if (!usesTinuuid || !objectData) return;
+        if (null !== material) return;
+        setMaterial(objectData.materials?.[0] ?? null);
+    }, [
+        material,
+        objectData,
+        usesTinuuid
+    ]);
+    const contextValue = external_react_useMemo(()=>({
+            src,
+            glbUrl,
+            tinuuid,
+            type,
+            name,
+            rooms,
+            setRooms,
+            room,
+            setRoomId,
+            material,
+            setTinuuid,
+            width,
+            height,
+            frameWidth,
+            matting,
+            angle,
+            rotation,
+            isDragging,
+            containerRef,
+            setMaterial,
+            setFrameWidth,
+            setMatting,
+            setAngle,
+            setRotation,
+            setIsDragging,
+            setContainerRef,
+            resourceRef,
+            sceneLoad,
+            patchSceneLoad
+        }), [
+        src,
+        glbUrl,
+        tinuuid,
+        type,
+        name,
+        rooms,
+        room,
+        material,
+        width,
+        height,
+        frameWidth,
+        matting,
+        angle,
+        rotation,
+        containerRef,
+        isDragging,
+        sceneLoad,
+        patchSceneLoad
+    ]);
+    return /*#__PURE__*/ jsx(RoomViewerContext, {
+        value: contextValue,
+        children: children
+    });
+}
+function useRoomViewer() {
+    const context = external_react_use(RoomViewerContext);
+    if (!context) throw new Error('useRoomViewer must be used within a RoomViewerProvider');
+    return context;
+}
+function label_Label({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Label.Root, {
+        "data-slot": "label",
+        className: utils_cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className),
+        ...props
+    });
+}
+function FieldGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "field-group",
+        className: utils_cn('group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className),
+        ...props
+    });
+}
+const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+    variants: {
+        orientation: {
+            vertical: [
+                'flex-col [&>*]:w-full [&>.sr-only]:w-auto'
+            ],
+            horizontal: [
+                'flex-row items-center',
+                '[&>[data-slot=field-label]]:flex-auto',
+                'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+            ],
+            responsive: [
+                'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+                '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+            ]
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});
+function Field({ className, orientation = 'vertical', ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        role: "group",
+        "data-slot": "field",
+        "data-orientation": orientation,
+        className: utils_cn(fieldVariants({
+            orientation
+        }), className),
+        ...props
+    });
+}
+function FieldLabel({ className, ...props }) {
+    return /*#__PURE__*/ jsx(label_Label, {
+        "data-slot": "field-label",
+        className: utils_cn('group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4', 'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10', className),
+        ...props
+    });
+}
+function FieldTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "field-label",
+        className: utils_cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className),
+        ...props
+    });
+}
+function select_Select({ ...props }) {
+    return /*#__PURE__*/ jsx(Select.Root, {
+        "data-slot": "select",
+        ...props
+    });
+}
+function SelectValue({ ...props }) {
+    return /*#__PURE__*/ jsx(Select.Value, {
+        "data-slot": "select-value",
+        ...props
+    });
+}
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+    return /*#__PURE__*/ jsxs(Select.Trigger, {
+        "data-slot": "select-trigger",
+        "data-size": size,
+        className: utils_cn('flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-background-white shadow-sm outline-none transition-colors', 'border-border-medium', 'text-text-dark', 'hover:border-border-dark', 'focus-visible:border-border-dark', 'aria-invalid:border-border-red', 'disabled:cursor-not-allowed disabled:border-border-medium disabled:bg-background-base disabled:opacity-40', 'data-[size=default]:h-11 data-[size=default]:px-2 data-[size=default]:py-2.5 data-[size=default]:typo-base-16', 'data-[size=md]:h-9 data-[size=md]:px-2 data-[size=md]:py-2 data-[size=md]:typo-base-14', 'data-[size=sm]:h-[1.875rem] data-[size=sm]:px-2 data-[size=sm]:typo-base-12', '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2', '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-6 [&_svg:not([class*=\'text-\'])]:text-text-dark', className),
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Select.Icon, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(DropDownArrow, {
+                    className: "size-6"
+                })
+            })
+        ]
+    });
+}
+function SelectContent({ className, children, position = 'item-aligned', align = 'center', portalContainer, ...props }) {
+    return /*#__PURE__*/ jsx(Select.Portal, {
+        container: portalContainer,
+        children: /*#__PURE__*/ jsxs(Select.Content, {
+            "data-slot": "select-content",
+            className: utils_cn('relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border bg-background-white text-text-dark shadow-md', 'border-border-medium', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+            position: position,
+            align: align,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
+                /*#__PURE__*/ jsx(Select.Viewport, {
+                    className: utils_cn('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'),
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(SelectScrollDownButton, {})
+            ]
+        })
+    });
+}
+function SelectItem({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Select.Item, {
+        "data-slot": "select-item",
+        className: utils_cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-2.5 pr-8 pl-3 outline-hidden', 'typo-base-16 text-text-sub', 'focus:bg-background-base focus:text-text-dark', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-6 [&_svg:not([class*=\'text-\'])]:text-text-dark', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "select-item-indicator",
+                className: "absolute right-2 flex size-6 items-center justify-center",
+                children: /*#__PURE__*/ jsx(Select.ItemIndicator, {
+                    children: /*#__PURE__*/ jsx(CheckDone, {
+                        className: "size-5"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Select.ItemText, {
+                children: children
+            })
+        ]
+    });
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.ScrollUpButton, {
+        "data-slot": "select-scroll-up-button",
+        className: utils_cn('flex cursor-default items-center justify-center py-1', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ChevronUpIcon, {
+            className: "size-4"
+        })
+    });
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.ScrollDownButton, {
+        "data-slot": "select-scroll-down-button",
+        className: utils_cn('flex cursor-default items-center justify-center py-1', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ChevronDownIcon, {
+            className: "size-4"
+        })
+    });
+}
+function MaterialSelectField({ className, ...props }) {
+    const { containerRef, material, setMaterial, setTinuuid } = useRoomViewer();
+    const { t } = useTranslation();
+    const objs = useQueries({
+        queries: RAM_TINUUIDS.map((tinuuid)=>({
+                queryKey: objFetchQueryKey({
+                    tinuuid
+                }),
+                queryFn: ()=>objFetch({
+                        tinuuid
+                    })
+            }))
+    });
+    useEffect(()=>{
+        const firstObject = objs[0]?.data;
+        const initialMaterial = firstObject?.materials?.[0];
+        const initialTinuuid = firstObject?.tinuuid;
+        if (null === material && initialMaterial && initialTinuuid) {
+            setMaterial(initialMaterial);
+            setTinuuid(initialTinuuid);
+        }
+    }, [
+        material,
+        objs,
+        setMaterial,
+        setTinuuid
+    ]);
+    return /*#__PURE__*/ jsxs(Field, {
+        className: utils_cn('w-fit', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(FieldLabel, {
+                className: "text-xs text-text-sub font-medium",
+                children: t('material')
+            }),
+            /*#__PURE__*/ jsxs(select_Select, {
+                value: material?.hid ?? void 0,
+                onValueChange: (hid)=>{
+                    const selected = objs.find((item)=>item.data?.materials?.[0]?.hid === hid)?.data;
+                    if (!selected?.materials?.[0] || !selected.tinuuid) return;
+                    const selectedMaterial = selected.materials[0];
+                    const selectedTinuuid = selected.tinuuid;
+                    setMaterial(selectedMaterial);
+                    setTinuuid(selectedTinuuid);
+                },
+                children: [
+                    /*#__PURE__*/ jsx(SelectTrigger, {
+                        className: "w-[145px]",
+                        size: "md",
+                        children: /*#__PURE__*/ jsxs(SelectValue, {
+                            placeholder: t('chooseMaterial'),
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "size-5 rounded-full border border-border-light",
+                                    style: {
+                                        backgroundColor: `#${material?.miniature?.color?.hex}`
+                                    }
+                                }),
+                                material?.miniature?.color?.name
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(SelectContent, {
+                        portalContainer: containerRef,
+                        children: objs.map((item)=>{
+                            const object = item.data;
+                            if (!object?.materials?.[0] || !object.tinuuid) return null;
+                            const material = object.materials[0];
+                            return /*#__PURE__*/ jsxs(SelectItem, {
+                                value: material.hid,
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "size-5 rounded-full border border-border-light",
+                                        style: {
+                                            backgroundColor: `#${material?.miniature?.color?.hex}`
+                                        }
+                                    }),
+                                    material.miniature?.color?.name
+                                ]
+                            }, `${object.tinuuid}-${material.hid}`);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RadioGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Root, {
+        "data-slot": "radio-group",
+        className: utils_cn('grid gap-3', className),
+        ...props
+    });
+}
+function RadioCheckIndicator({ checked, className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: utils_cn('absolute top-1/2 left-1/2 size-6 -translate-x-1/2 -translate-y-1/2', 'flex items-center justify-center rounded-full', checked ? 'bg-lime-400' : 'bg-background-base-2', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(Check, {
+            className: "text-constant-white size-3.5",
+            strokeWidth: 4
+        })
+    });
+}
+function RadioGroupItem({ className, variant = 'default', ...props }) {
+    return /*#__PURE__*/ jsxs(Item, {
+        "data-slot": "radio-group-item",
+        className: utils_cn('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', 'check' === variant && 'size-6', 'inverted' === variant && 'size-5 border-button-outline data-[state=checked]:border-border-red data-[state=checked]:border-4 data-[state=checked]:bg-constant-white cursor-pointer transition-all', className),
+        ...props,
+        children: [
+            'check' === variant && /*#__PURE__*/ jsx("div", {
+                className: "relative",
+                children: /*#__PURE__*/ jsx(RadioCheckIndicator, {})
+            }),
+            'inverted' !== variant && /*#__PURE__*/ jsx(Indicator, {
+                "data-slot": "radio-group-indicator",
+                className: "relative flex items-center justify-center",
+                children: 'check' === variant ? /*#__PURE__*/ jsx(RadioCheckIndicator, {
+                    checked: true
+                }) : /*#__PURE__*/ jsx(CircleIcon, {
+                    className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+                })
+            })
+        ]
+    });
+}
+const buttonVariants = cva('cursor-pointer inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-xl transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary--hover active:bg-primary--pressed disabled:bg-primary--disabled disabled:opacity-20',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary--hover active:bg-secondary--pressed disabled:bg-secondary--disabled disabled:opacity-20',
+            outline: 'border border-button-outline bg-transparent text-foreground hover:border-button-outline-hover active:bg-button-outline-pressed disabled:border-border-dark disabled:opacity-20',
+            ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent--pressed',
+            contrast: 'bg-contrast text-contrast-foreground hover:bg-contrast--hover active:bg-contrast--pressed disabled:bg-contrast--disabled disabled:opacity-30'
+        },
+        size: {
+            default: 'h-9 px-3.5 typo-button-normal [&_svg]:size-5',
+            sm: 'h-8 px-3 typo-button-small [&_svg]:size-4',
+            lg: 'h-11 px-4 typo-button-big [&_svg]:size-6',
+            icon: 'size-9 rounded-full [&_svg]:size-5',
+            'icon-sm': 'size-8 rounded-full [&_svg]:size-4',
+            'icon-lg': 'size-11 rounded-full [&_svg]:size-6'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+function button_Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ jsx(Comp, {
+        "data-slot": "button",
+        className: utils_cn(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ...props
+    });
+}
+function Swiper_Swiper({ className, children, ...props }) {
+    const { className: swiperClassName, onReachEnd, ...swiperOptions } = props.swiperOptions ?? {};
+    const { t } = useTranslation();
+    const [swiper, setSwiper] = useState(null);
+    const [isBeginning, setIsBeginning] = useState(true);
+    const [isEnd, setIsEnd] = useState(false);
+    const [isLocked, setIsLocked] = useState(false);
+    const updateNavState = useCallback((value)=>{
+        setIsBeginning(value.isBeginning);
+        setIsEnd(value.isEnd);
+        setIsLocked(value.isLocked);
+    }, []);
+    const handleSwiper = useCallback((value)=>{
+        setSwiper(value);
+        updateNavState(value);
+    }, [
+        updateNavState
+    ]);
+    const handleReachEnd = useCallback((value)=>{
+        setIsEnd(true);
+        onReachEnd?.(value);
+    }, [
+        onReachEnd
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn('relative w-full overflow-hidden', className),
+        children: [
+            /*#__PURE__*/ jsx(Swiper, {
+                className: utils_cn('w-full py-5', swiperClassName),
+                slidesPerView: "auto",
+                slidesPerGroup: 2,
+                onSwiper: handleSwiper,
+                onReachBeginning: ()=>setIsBeginning(true),
+                onReachEnd: handleReachEnd,
+                onFromEdge: updateNavState,
+                onLock: ()=>setIsLocked(true),
+                onUnlock: ()=>setIsLocked(false),
+                onResize: updateNavState,
+                slidesOffsetBefore: 24,
+                slidesOffsetAfter: 24,
+                spaceBetween: 12,
+                ...swiperOptions,
+                children: children
+            }),
+            /*#__PURE__*/ jsxs(button_Button, {
+                className: utils_cn('absolute top-1/2 left-8 -translate-y-1/2 z-1', {
+                    hidden: isBeginning || isLocked
+                }),
+                variant: "contrast",
+                size: "icon",
+                onClick: ()=>swiper?.slidePrev(),
+                children: [
+                    /*#__PURE__*/ jsx(ArrowLeft, {}),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        children: t('previousSlide')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(button_Button, {
+                className: utils_cn('absolute top-1/2 right-8 -translate-y-1/2 z-1', {
+                    hidden: isEnd || isLocked
+                }),
+                variant: "contrast",
+                size: "icon",
+                onClick: ()=>swiper?.slideNext(),
+                children: [
+                    /*#__PURE__*/ jsx(ArrowRight, {}),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        children: t('nextSlide')
+                    })
+                ]
+            })
+        ]
+    });
+}
+function getMaterialId(material) {
+    return material.hid ?? '';
+}
+function getObjectMaterialById(object, id) {
+    return object?.materials?.find((material)=>getMaterialId(material) === id);
+}
+function MaterialSwiper({ className, ...props }) {
+    const { material, tinuuid, setMaterial, setTinuuid } = useRoomViewer();
+    const selectedMaterialId = material ? getMaterialId(material) : '';
+    const isMobile = useMediaQuery('(max-width: 640px)');
+    const { data, isFetchingNextPage, fetchNextPage, hasNextPage } = useInfiniteQuery({
+        queryKey: [
+            'room-viewer',
+            'carpet-materials',
+            CARPET_MATERIAL_OWNER_ID
+        ],
+        queryFn: ({ pageParam })=>objGetPublic({
+                page: pageParam,
+                owners: [
+                    CARPET_MATERIAL_OWNER_ID
+                ]
+            }),
+        initialPageParam: 1,
+        getNextPageParam: (lastPage, _, lastPageParam)=>{
+            if (!lastPage.objs?.length) return;
+            return lastPageParam + 1;
+        },
+        getPreviousPageParam: (_, __, firstPageParam)=>{
+            if (firstPageParam <= 1) return;
+            return firstPageParam - 1;
+        }
+    });
+    const objects = external_react_useMemo(()=>data?.pages.flatMap((page)=>page.objs ?? []) ?? [], [
+        data
+    ]);
+    const initialObject = objects.find((obj)=>obj.tinuuid === tinuuid);
+    const fallbackObject = objects.find((obj)=>obj.tinuuid && obj.materials?.[0]);
+    useEffect(()=>{
+        if (null !== material) return;
+        const selectedObject = initialObject ?? fallbackObject;
+        const initialMaterial = selectedObject?.materials?.[0];
+        if (selectedObject && initialMaterial && selectedObject.tinuuid) {
+            setMaterial(initialMaterial);
+            setTinuuid(selectedObject.tinuuid);
+        }
+    }, [
+        fallbackObject,
+        initialObject,
+        material,
+        setMaterial,
+        setTinuuid
+    ]);
+    const handleReachEnd = useCallback(()=>{
+        if (hasNextPage && !isFetchingNextPage) fetchNextPage();
+    }, [
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: utils_cn(className),
+        ...props,
+        children: /*#__PURE__*/ jsx(RadioGroup, {
+            value: selectedMaterialId || void 0,
+            onValueChange: (id)=>{
+                const selected = objects.find((obj)=>obj.materials?.some((material)=>getMaterialId(material) === id));
+                const selectedMaterial = getObjectMaterialById(selected, id);
+                if (!selected || !selectedMaterial || !selected.tinuuid) return;
+                setMaterial(selectedMaterial);
+                setTinuuid(selected.tinuuid);
+            },
+            children: /*#__PURE__*/ jsx(Swiper_Swiper, {
+                swiperOptions: {
+                    onReachEnd: handleReachEnd,
+                    className: 'py-2 sm:py-5'
+                },
+                children: objects.flatMap((obj)=>obj.materials?.map((material)=>{
+                        const id = getMaterialId(material);
+                        if (!obj.tinuuid) return null;
+                        return /*#__PURE__*/ jsx(SwiperSlide, {
+                            className: utils_cn('sm:w-25! w-18! transition-transform duration-200', id !== selectedMaterialId && 'hover:scale-110'),
+                            children: /*#__PURE__*/ jsxs(FieldLabel, {
+                                htmlFor: `material-${id}`,
+                                className: "size-full flex flex-col gap-1 has-data-[state=checked]:bg-transparent",
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "size-full relative sm:h-19 h-13 rounded-[0.75rem] overflow-hidden grid place-items-center sm:block",
+                                        children: [
+                                            /*#__PURE__*/ jsx("img", {
+                                                src: material.previews?.[0]?.subRes?.small ?? material.previews?.[0]?.url,
+                                                alt: material.name ?? '',
+                                                className: "size-full object-cover"
+                                            }),
+                                            /*#__PURE__*/ jsx(RadioGroupItem, {
+                                                value: id,
+                                                id: `material-${id}`,
+                                                variant: "check",
+                                                className: utils_cn('absolute sm:top-1.75 sm:right-1.75', {
+                                                    'sr-only': id !== selectedMaterialId
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    !isMobile && /*#__PURE__*/ jsx("span", {
+                                        className: utils_cn('block w-full text-xs text-left text-text-light truncate', {
+                                            'text-text-dark': id === selectedMaterialId
+                                        }),
+                                        children: material.name
+                                    })
+                                ]
+                            })
+                        }, `${obj.tinuuid}-${id}`);
+                    }) ?? [])
+            })
+        })
+    });
+}
+const TabsValueContext = /*#__PURE__*/ createContext(null);
+const TabsListContext = /*#__PURE__*/ createContext(null);
+function Tabs({ value: valueProp, defaultValue, onValueChange, ...props }) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = valueProp ?? uncontrolledValue;
+    const contextValue = external_react_useMemo(()=>({
+            value
+        }), [
+        value
+    ]);
+    const handleValueChange = useCallback((nextValue)=>{
+        onValueChange?.(nextValue);
+        if (void 0 === valueProp) setUncontrolledValue(nextValue);
+    }, [
+        onValueChange,
+        valueProp
+    ]);
+    return /*#__PURE__*/ jsx(TabsValueContext, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(react_tabs_Root, {
+            "data-slot": "tabs",
+            value: value,
+            onValueChange: handleValueChange,
+            ...props
+        })
+    });
+}
+const tabsTriggerVariants = cva("cursor-pointer group inline-flex items-center justify-center shrink-0 whitespace-nowrap outline-none transition-colors relative z-10 text-text-base [&_svg]:text-icons-normal [&_svg]:transition-colors hover:text-text-dark hover:[&_svg]:text-icons-dark active:bg-background-base-3 active:text-text-dark active:[&_svg]:text-icons-dark data-[state=active]:bg-background-white data-[state=active]:text-text-dark data-[state=active]:[&_svg]:text-icons-dark disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", {
+    variants: {
+        size: {
+            default: 'h-7 rounded-lg px-2 typo-button-normal active:rounded-lg data-[state=active]:rounded-lg [&_svg]:size-4',
+            sm: 'h-6 rounded-[4px] px-2 typo-button-small active:rounded-lg data-[state=active]:rounded-lg [&_svg]:size-4',
+            lg: 'h-9 rounded-lg px-3 typo-button-big active:rounded-lg data-[state=active]:rounded-lg [&_svg]:size-6'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const tabsListVariants = cva('relative inline-flex items-center rounded-xl bg-background-base-2', {
+    variants: {
+        size: {
+            default: 'p-1',
+            sm: 'p-[3px]',
+            lg: 'p-1'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+function TabsList({ className, children, size = 'default', ...props }) {
+    const tabsValue = external_react_use(TabsValueContext);
+    const listRef = useRef(null);
+    const triggerRefs = useRef(new Map());
+    const indicatorRef = useRef(null);
+    const activeValueRef = useRef(tabsValue?.value);
+    const animationFrameRef = useRef(null);
+    const updateIndicator = useCallback(()=>{
+        animationFrameRef.current = null;
+        const indicatorElement = indicatorRef.current;
+        if (!indicatorElement) return;
+        const activeValue = activeValueRef.current;
+        if (!activeValue) {
+            indicatorElement.style.opacity = '0';
+            return;
+        }
+        const listElement = listRef.current;
+        const triggerElement = triggerRefs.current.get(activeValue);
+        if (!listElement || !triggerElement) {
+            indicatorElement.style.opacity = '0';
+            return;
+        }
+        const left = Math.round(triggerElement.offsetLeft);
+        const top = Math.round(triggerElement.offsetTop);
+        const width = Math.round(triggerElement.offsetWidth);
+        const height = Math.round(triggerElement.offsetHeight);
+        indicatorElement.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+        indicatorElement.style.width = `${width}px`;
+        indicatorElement.style.height = `${height}px`;
+        indicatorElement.style.opacity = '1';
+    }, []);
+    const scheduleIndicatorUpdate = useCallback(()=>{
+        if (null !== animationFrameRef.current) return;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            updateIndicator();
+        });
+    }, [
+        updateIndicator
+    ]);
+    const registerTrigger = useCallback((value, node)=>{
+        if (node) triggerRefs.current.set(value, node);
+        else triggerRefs.current.delete(value);
+        scheduleIndicatorUpdate();
+    }, [
+        scheduleIndicatorUpdate
+    ]);
+    useLayoutEffect(()=>{
+        activeValueRef.current = tabsValue?.value;
+        if (null !== animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        updateIndicator();
+    }, [
+        tabsValue?.value,
+        updateIndicator
+    ]);
+    useEffect(()=>{
+        const listElement = listRef.current;
+        if (!listElement || 'undefined' == typeof ResizeObserver) return;
+        const observer = new ResizeObserver(()=>scheduleIndicatorUpdate());
+        observer.observe(listElement);
+        const activeValue = tabsValue?.value;
+        if (activeValue) {
+            const triggerElement = triggerRefs.current.get(activeValue);
+            if (triggerElement) observer.observe(triggerElement);
+        }
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        scheduleIndicatorUpdate,
+        tabsValue?.value
+    ]);
+    useEffect(()=>()=>{
+            if (null !== animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+        }, []);
+    const listContextValue = external_react_useMemo(()=>({
+            registerTrigger,
+            size
+        }), [
+        registerTrigger,
+        size
+    ]);
+    return /*#__PURE__*/ jsx(List, {
+        ref: listRef,
+        "data-slot": "tabs-list",
+        className: utils_cn(tabsListVariants({
+            size
+        }), className),
+        ...props,
+        children: /*#__PURE__*/ jsxs(TabsListContext, {
+            value: listContextValue,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    ref: indicatorRef,
+                    "aria-hidden": true,
+                    "data-slot": "tabs-indicator",
+                    className: "pointer-events-none absolute top-0 left-0 z-0 rounded-lg bg-background-white opacity-0 transition-[transform,width,height,opacity] duration-[250ms] ease-out motion-reduce:transition-none"
+                }),
+                children
+            ]
+        })
+    });
+}
+TabsList.displayName = List.displayName;
+function TabsTrigger({ className, size, children, value, ...props }) {
+    const listContext = external_react_use(TabsListContext);
+    const triggerRef = useRef(null);
+    const resolvedSize = size ?? listContext?.size ?? 'default';
+    const contentClassName = utils_cn('relative z-10 inline-flex items-center justify-center', 'lg' === resolvedSize ? 'gap-1.5' : 'gap-1');
+    useLayoutEffect(()=>{
+        if (!listContext || !value) return;
+        listContext.registerTrigger(value, triggerRef.current);
+        return ()=>{
+            listContext.registerTrigger(value, null);
+        };
+    }, [
+        listContext,
+        value
+    ]);
+    return /*#__PURE__*/ jsx(Trigger, {
+        ref: triggerRef,
+        "data-slot": "tabs-trigger",
+        className: utils_cn(tabsTriggerVariants({
+            size: resolvedSize
+        }), 'data-[state=active]:bg-transparent', className),
+        value: value,
+        ...props,
+        children: /*#__PURE__*/ jsx("span", {
+            "data-slot": "tabs-trigger-content",
+            className: contentClassName,
+            children: children
+        })
+    });
+}
+TabsTrigger.displayName = Trigger.displayName;
+function TabsContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Content, {
+        "data-slot": "tabs-content",
+        className: utils_cn('outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', className),
+        ...props
+    });
+}
+TabsContent.displayName = Content.displayName;
+function MattingField({ className, ...props }) {
+    const { matting, setMatting } = useRoomViewer();
+    const { t } = useTranslation();
+    const mattingOptions = useMattingOptions();
+    return /*#__PURE__*/ jsxs(Field, {
+        className: utils_cn('w-fit', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(FieldLabel, {
+                className: "text-xs text-text-sub font-medium",
+                children: t('matting')
+            }),
+            /*#__PURE__*/ jsx(Tabs, {
+                value: matting.toString(),
+                onValueChange: (value)=>setMatting(Number(value)),
+                children: /*#__PURE__*/ jsx(TabsList, {
+                    children: mattingOptions.map((option)=>/*#__PURE__*/ jsx(TabsTrigger, {
+                            value: option.value.toString(),
+                            children: option.label
+                        }, option.value))
+                })
+            })
+        ]
+    });
+}
+function RoomSwiper({ className, ...props }) {
+    const { t } = useTranslation();
+    const { rooms, room, setRoomId, setRooms, type } = useRoomViewer();
+    const isMobile = useMediaQuery('(max-width: 640px)');
+    const inputId = useId();
+    const getRoomName = useCallback((roomName, roomId)=>t(`rooms.${roomId}`, {
+            defaultValue: roomName
+        }), [
+        t
+    ]);
+    const handleFileChange = useCallback((event)=>{
+        const file = event.target.files?.[0];
+        event.target.value = '';
+        if (!file) return;
+        const imageUrl = URL.createObjectURL(file);
+        const customRoom = {
+            id: getNextGlobalId('room-custom'),
+            name: file.name,
+            image: imageUrl,
+            config: {
+                camera: {
+                    fov: 45
+                },
+                surfaces: [
+                    {
+                        id: FLOOR_SURFACE_ID,
+                        z: 0,
+                        pitchDeg: -90,
+                        rollDeg: 0
+                    }
+                ]
+            }
+        };
+        setRooms((currentRooms)=>[
+                customRoom,
+                ...currentRooms
+            ]);
+        setRoomId(customRoom.id);
+    }, [
+        setRoomId,
+        setRooms
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: utils_cn(className),
+        ...props,
+        children: /*#__PURE__*/ jsx(RadioGroup, {
+            value: room.id,
+            onValueChange: setRoomId,
+            children: /*#__PURE__*/ jsxs(Swiper_Swiper, {
+                swiperOptions: {
+                    className: 'py-2 sm:py-5 pb-3 sm:pb-5'
+                },
+                children: [
+                    'carpet' === type && /*#__PURE__*/ jsx(SwiperSlide, {
+                        className: "sm:w-25! w-21! h-auto",
+                        children: /*#__PURE__*/ jsxs(FieldLabel, {
+                            htmlFor: inputId,
+                            className: utils_cn('flex size-full cursor-pointer items-center justify-center rounded-[0.75rem] border border-dashed border-muted-foreground/40 bg-transparent px-2 text-center text-xs leading-tight text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground'),
+                            children: [
+                                t('uploadOwnPhoto'),
+                                /*#__PURE__*/ jsx("input", {
+                                    id: inputId,
+                                    type: "file",
+                                    accept: "image/*",
+                                    className: "sr-only",
+                                    onChange: handleFileChange
+                                })
+                            ]
+                        })
+                    }),
+                    rooms.map((r)=>/*#__PURE__*/ jsx(SwiperSlide, {
+                            className: utils_cn('sm:w-25! w-21! transition-transform duration-200', r.id !== room.id && 'hover:scale-110'),
+                            children: /*#__PURE__*/ jsxs(FieldLabel, {
+                                htmlFor: `room-${r.id}`,
+                                className: "size-full flex flex-col gap-1 has-data-[state=checked]:bg-transparent",
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "size-full relative h-17 sm:h-19 rounded-[0.75rem] overflow-hidden",
+                                        children: [
+                                            /*#__PURE__*/ jsx("img", {
+                                                src: r.image,
+                                                alt: getRoomName(r.name, r.id),
+                                                className: "size-full object-cover",
+                                                crossOrigin: "anonymous"
+                                            }),
+                                            /*#__PURE__*/ jsx(RadioGroupItem, {
+                                                value: r.id,
+                                                id: `room-${r.id}`,
+                                                variant: "check",
+                                                className: utils_cn('absolute top-1.75 right-1.75', {
+                                                    'sr-only': r.id !== room.id
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    !isMobile && /*#__PURE__*/ jsx("span", {
+                                        className: utils_cn('block w-full text-xs text-left text-text-light truncate', {
+                                            'text-text-dark': r.id === room.id
+                                        }),
+                                        children: getRoomName(r.name, r.id)
+                                    })
+                                ]
+                            })
+                        }, r.id))
+                ]
+            })
+        })
+    });
+}
+function Footer({ className, ...props }) {
+    const { type } = useRoomViewer();
+    const isMobile = useMediaQuery('(max-width: 640px)');
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn('flex sm:items-end pl-0 overflow-hidden sm:flex-row flex-col py-3 sm:py-0', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(RoomSwiper, {
+                className: utils_cn('shrink-0', {
+                    'sm:min-w-120.5 min-w-full': 'carpet' === type,
+                    grow: 'poster' === type
+                })
+            }),
+            'poster' === type && /*#__PURE__*/ jsxs("div", {
+                className: "hidden gap-5 pr-6 pb-5 md:flex",
+                children: [
+                    /*#__PURE__*/ jsx(MaterialSelectField, {}),
+                    /*#__PURE__*/ jsx(MattingField, {})
+                ]
+            }),
+            'carpet' === type && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    !isMobile && /*#__PURE__*/ jsx(separator_Separator, {
+                        orientation: "vertical"
+                    }),
+                    /*#__PURE__*/ jsx(MaterialSwiper, {})
+                ]
+            })
+        ]
+    });
+}
+function LogoSign({ className, ...props }) {
+    const { t } = useTranslation();
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn('group inline-flex gap-2 text-sm text-muted-foreground', 'hover:text-text-dark', 'transition-colors duration-200 ease-in-out', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "size-5 flex items-center justify-center rounded-full bg-icons-light group-hover:bg-icons-red transition-colors duration-200 ease-in-out",
+                children: /*#__PURE__*/ jsx(Vizbl, {
+                    className: "size-4.25 text-icons-white"
+                })
+            }),
+            t('poweredBy')
+        ]
+    });
+}
+function Header({ className, ...props }) {
+    const { name } = useRoomViewer();
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn('h-16 grid gap-5 items-center px-6 sm:grid-cols-3', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "truncate",
+                children: name
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "hidden justify-center sm:flex",
+                children: /*#__PURE__*/ jsx(LogoSign, {})
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "hidden sm:block"
+            })
+        ]
+    });
+}
+function popover_Popover({ ...props }) {
+    return /*#__PURE__*/ jsx(Popover.Root, {
+        "data-slot": "popover",
+        ...props
+    });
+}
+function PopoverTrigger({ ...props }) {
+    return /*#__PURE__*/ jsx(Popover.Trigger, {
+        "data-slot": "popover-trigger",
+        ...props
+    });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, portalContainer, ...props }) {
+    return /*#__PURE__*/ jsx(Popover.Portal, {
+        container: portalContainer,
+        children: /*#__PURE__*/ jsx(Popover.Content, {
+            "data-slot": "popover-content",
+            align: align,
+            sideOffset: sideOffset,
+            className: utils_cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className),
+            ...props
+        })
+    });
+}
+function slider_Slider({ className, defaultValue, value, min = 0, max = 100, variant = 'default', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const _values = external_react_useMemo(()=>Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
+            min
+        ], [
+        value,
+        defaultValue,
+        min
+    ]);
+    return /*#__PURE__*/ jsxs(Slider.Root, {
+        "data-slot": "slider",
+        defaultValue: defaultValue,
+        value: value,
+        min: min,
+        max: max,
+        "data-variant": variant,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        className: utils_cn('relative flex w-full touch-none cursor-pointer items-center select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Slider.Track, {
+                "data-slot": "slider-track",
+                className: utils_cn('relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5', 'editor' === variant ? 'bg-border-light data-[orientation=horizontal]:h-0.5' : 'bg-muted data-[orientation=horizontal]:h-1.5'),
+                children: /*#__PURE__*/ jsx(Slider.Range, {
+                    "data-slot": "slider-range",
+                    className: utils_cn('absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full', 'editor' === variant ? 'bg-background-blue' : 'bg-primary')
+                })
+            }),
+            Array.from({
+                length: _values.length
+            }, (_, index)=>/*#__PURE__*/ jsx(Slider.Thumb, {
+                    "data-slot": "slider-thumb",
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    className: utils_cn('ring-ring/50 block shrink-0 rounded-full border bg-white transition-[color,box-shadow] focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50', 'editor' === variant ? 'size-3 border-background-blue shadow-none hover:ring-2 focus-visible:ring-2' : 'size-4 border-primary shadow-sm hover:ring-4 focus-visible:ring-4')
+                }, index))
+        ]
+    });
+}
+function Dialog({ ...props }) {
+    return /*#__PURE__*/ jsx(react_dialog_Root, {
+        "data-slot": "dialog",
+        ...props
+    });
+}
+function DialogPortal({ ...props }) {
+    return /*#__PURE__*/ jsx(Portal, {
+        "data-slot": "dialog-portal",
+        ...props
+    });
+}
+function DialogClose({ ...props }) {
+    return /*#__PURE__*/ jsx(Close, {
+        "data-slot": "dialog-close",
+        ...props
+    });
+}
+function DialogOverlay({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Overlay, {
+        "data-slot": "dialog-overlay",
+        className: utils_cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className),
+        ...props
+    });
+}
+function DialogContent({ className, children, showCloseButton = true, portalContainer, ...props }) {
+    return /*#__PURE__*/ jsxs(DialogPortal, {
+        "data-slot": "dialog-portal",
+        container: portalContainer,
+        children: [
+            /*#__PURE__*/ jsx(DialogOverlay, {}),
+            /*#__PURE__*/ jsxs(react_dialog_Content, {
+                "data-slot": "dialog-content",
+                className: utils_cn('bg-background-containers data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-3xl border-0 p-6 shadow-[var(--shadow-login)] duration-200 outline-none sm:max-w-120 sm:p-10', className),
+                ...props,
+                children: [
+                    children,
+                    showCloseButton && /*#__PURE__*/ jsxs(Close, {
+                        "data-slot": "dialog-close",
+                        className: "focus-visible:ring-ring/30 absolute top-4 right-4 inline-flex size-6 items-center justify-center rounded-full text-icons-light transition-colors hover:text-icons-normal focus-visible:text-icons-dark focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                        children: [
+                            /*#__PURE__*/ jsx(XIcon, {
+                                className: "size-6"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "sr-only",
+                                children: "Close"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function DialogHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "dialog-header",
+        className: utils_cn('flex flex-col gap-2 text-left', className),
+        ...props
+    });
+}
+function DialogTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Title, {
+        "data-slot": "dialog-title",
+        className: utils_cn('typo-base-18 text-text-dark', className),
+        ...props
+    });
+}
+function DialogDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Description, {
+        "data-slot": "dialog-description",
+        className: utils_cn('typo-base-16 text-text-light', className),
+        ...props
+    });
+}
+const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;
+function getOklch(color, fallback) {
+    const oklchMatch = color.match(oklchRegex);
+    if (!oklchMatch) return {
+        l: fallback[0],
+        c: fallback[1],
+        h: fallback[2]
+    };
+    return {
+        l: Number.parseFloat(oklchMatch[1]),
+        c: Number.parseFloat(oklchMatch[2]),
+        h: Number.parseFloat(oklchMatch[3])
+    };
+}
+function QRCode({ data, foreground, background, robustness = 'M', className, ...props }) {
+    const [svg, setSVG] = useState(null);
+    useEffect(()=>{
+        const generateQR = async ()=>{
+            try {
+                const styles = getComputedStyle(document.documentElement);
+                const foregroundColor = foreground ?? styles.getPropertyValue('--foreground');
+                const backgroundColor = background ?? styles.getPropertyValue('--background');
+                const foregroundOklch = getOklch(foregroundColor, [
+                    0.21,
+                    0.006,
+                    285.885
+                ]);
+                const backgroundOklch = getOklch(backgroundColor, [
+                    0.985,
+                    0,
+                    0
+                ]);
+                const newSvg = await qrcode.toString(data, {
+                    type: 'svg',
+                    color: {
+                        dark: formatHex(oklch({
+                            mode: 'oklch',
+                            ...foregroundOklch
+                        })),
+                        light: formatHex(oklch({
+                            mode: 'oklch',
+                            ...backgroundOklch
+                        }))
+                    },
+                    width: 200,
+                    errorCorrectionLevel: robustness,
+                    margin: 0
+                });
+                setSVG(newSvg);
+            } catch (err) {
+                console.error(err);
+            }
+        };
+        generateQR();
+    }, [
+        data,
+        foreground,
+        background,
+        robustness
+    ]);
+    if (!svg) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: utils_cn('size-full', '[&_svg]:size-full', className),
+        dangerouslySetInnerHTML: {
+            __html: svg
+        },
+        ...props
+    });
+}
+const parser = new UAParser();
+const device = parser.getDevice();
+const os = parser.getOS();
+const isIOS = 'iOS' === os.name;
+const isAndroid = 'Android' === os.name;
+const device_isMobile = 'mobile' === device.type;
+function AR({ className, ...props }) {
+    const { src, tinuuid, type, width, height, name, containerRef, resourceRef } = useRoomViewer();
+    const { t, i18n } = useTranslation();
+    const [usdzUrl, setUsdzUrl] = useState('');
+    const [glbUrl, setGlbUrl] = useState('');
+    const [open, setOpen] = useState(false);
+    const [isSceneExporting, setIsSceneExporting] = useState(false);
+    const modelViewerRef = useRef(null);
+    const isLoading = isSceneExporting;
+    const language = i18n.resolvedLanguage ?? i18n.language;
+    const url = external_react_useMemo(()=>{
+        if ('carpet' === type && tinuuid) {
+            const url = new URL(ROOM_VIEWER_URL);
+            url.searchParams.set('type', type);
+            url.searchParams.set('tinuuid', tinuuid);
+            url.searchParams.set('name', name);
+            url.searchParams.set('language', language);
+            return url.toString();
+        }
+        const url = new URL(POSTER_VIEWER_URL);
+        url.searchParams.set('texture', src);
+        url.searchParams.set('texture_width', (100 * width).toString());
+        url.searchParams.set('texture_height', (100 * height).toString());
+        return decodeURIComponent(url.toString());
+    }, [
+        src,
+        tinuuid,
+        type,
+        width,
+        height,
+        name,
+        language
+    ]);
+    const appClipUrl = external_react_useMemo(()=>{
+        if (!tinuuid) return null;
+        const url = new URL('https://appclip.apple.com/id');
+        url.searchParams.set('p', APP_CLIP_BUNDLE_ID);
+        url.searchParams.set('tinuuid', tinuuid);
+        return url.toString();
+    }, [
+        tinuuid
+    ]);
+    const handleClick = async ()=>{
+        if ('carpet' === type) {
+            if (!tinuuid) return;
+            if (isIOS && appClipUrl) return void window.location.assign(appClipUrl);
+            setOpen(true);
+            return;
+        }
+        const modelViewer = modelViewerRef.current;
+        const sceneResource = resourceRef.current;
+        if (!modelViewer || !sceneResource) return;
+        if (modelViewer.canActivateAR) try {
+            setIsSceneExporting(true);
+            const clone = sceneResource.clone(true);
+            clone.position.set(0, 0, 0);
+            if (isIOS) {
+                const usdzExporter = new USDZExporter();
+                const usdzBuffer = await usdzExporter.parseAsync(clone);
+                const usdzFile = new File([
+                    usdzBuffer
+                ], 'scene.usdz', {
+                    type: 'model/vnd.usdz+zip'
+                });
+                setUsdzUrl(URL.createObjectURL(usdzFile));
+            } else {
+                const glbExporter = new GLTFExporter();
+                const glbBuffer = await glbExporter.parseAsync(clone, {
+                    binary: true
+                });
+                const glbFile = new File([
+                    glbBuffer
+                ], 'scene.glb', {
+                    type: 'model/gltf-binary'
+                });
+                setGlbUrl(URL.createObjectURL(glbFile));
+            }
+        } finally{
+            setIsSceneExporting(false);
+        }
+        else setOpen(true);
+    };
+    useEffect(()=>{
+        if ('' !== usdzUrl || '' !== glbUrl) modelViewerRef.current?.activateAR();
+        return ()=>{
+            if ('' !== usdzUrl) URL.revokeObjectURL(usdzUrl);
+            if ('' !== glbUrl) URL.revokeObjectURL(glbUrl);
+        };
+    }, [
+        usdzUrl,
+        glbUrl
+    ]);
+    if (isAndroid && device_isMobile || 'carpet' === type && !tinuuid) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn(className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(button_Button, {
+                variant: "contrast",
+                disabled: isLoading,
+                onClick: handleClick,
+                children: t('ar.viewInPlace')
+            }),
+            /*#__PURE__*/ jsx(Dialog, {
+                open: open,
+                onOpenChange: setOpen,
+                children: /*#__PURE__*/ jsxs(DialogContent, {
+                    className: "gap-6 sm:max-w-120",
+                    showCloseButton: false,
+                    portalContainer: containerRef,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex items-center justify-center p-10 bg-constant-white rounded-2xl",
+                            children: /*#__PURE__*/ jsx(QRCode, {
+                                className: "size-48",
+                                robustness: "H",
+                                data: url
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-lg text-center text-text-sub font-medium",
+                            children: t('ar.scanQrCode')
+                        }),
+                        /*#__PURE__*/ jsx(DialogClose, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsx(button_Button, {
+                                variant: "contrast",
+                                size: "lg",
+                                children: t('close')
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("model-viewer", {
+                ref: modelViewerRef,
+                className: "fixed w-px h-px opacity-0 pointer-events-none",
+                src: glbUrl,
+                iosSrc: usdzUrl,
+                reveal: "manual",
+                ar: true,
+                cameraControls: true,
+                arPlacement: "wall",
+                arModes: "webxr",
+                arScale: "fixed",
+                shadowIntensity: 1,
+                interactionPromptThreshold: 100
+            })
+        ]
+    });
+}
+const initialSize = {
+    width: void 0,
+    height: void 0
+};
+function useIsMounted() {
+    const isMounted = useRef(false);
+    useEffect(()=>{
+        isMounted.current = true;
+        return ()=>{
+            isMounted.current = false;
+        };
+    }, []);
+    return useCallback(()=>isMounted.current, []);
+}
+function useResizeObserver(options) {
+    const { ref, box = 'content-box' } = options;
+    const [{ width, height }, setSize] = useState(initialSize);
+    const isMounted = useIsMounted();
+    const previousSize = useRef({
+        ...initialSize
+    });
+    const onResize = useRef(void 0);
+    onResize.current = options.onResize;
+    useEffect(()=>{
+        if (!ref.current) return;
+        if ('undefined' == typeof window || !('ResizeObserver' in window)) return;
+        const observer = new ResizeObserver(([entry])=>{
+            const boxProp = 'border-box' === box ? 'borderBoxSize' : 'device-pixel-content-box' === box ? 'devicePixelContentBoxSize' : 'contentBoxSize';
+            const newWidth = extractSize(entry, boxProp, 'inlineSize');
+            const newHeight = extractSize(entry, boxProp, 'blockSize');
+            const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
+            if (hasChanged) {
+                const newSize = {
+                    width: newWidth,
+                    height: newHeight
+                };
+                previousSize.current.width = newWidth;
+                previousSize.current.height = newHeight;
+                if (onResize.current) onResize.current(newSize);
+                else if (isMounted()) setSize(newSize);
+            }
+        });
+        observer.observe(ref.current, {
+            box
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        box,
+        ref,
+        isMounted
+    ]);
+    return {
+        width,
+        height
+    };
+}
+function extractSize(entry, box, sizeType) {
+    if (!entry[box]) {
+        if ('contentBoxSize' === box) return entry.contentRect['inlineSize' === sizeType ? 'width' : 'height'];
+        return;
+    }
+    return Array.isArray(entry[box]) ? entry[box][0][sizeType] : entry[box][sizeType];
+}
+function useRoomImageAspectRatio(src) {
+    const [aspectRatio, setAspectRatio] = useState(null);
+    useEffect(()=>{
+        let isCancelled = false;
+        const image = new Image();
+        setAspectRatio(null);
+        image.crossOrigin = 'anonymous';
+        image.decoding = 'async';
+        image.onload = ()=>{
+            if (!isCancelled && image.height > 0) setAspectRatio(image.width / image.height);
+        };
+        image.onerror = ()=>{
+            if (!isCancelled) setAspectRatio(null);
+        };
+        image.src = src;
+        return ()=>{
+            isCancelled = true;
+        };
+    }, [
+        src
+    ]);
+    return aspectRatio;
+}
+async function canvasToPngBlob(canvas, errorMessage) {
+    return new Promise((resolve, reject)=>{
+        canvas.toBlob((blob)=>{
+            if (!blob) return void reject(new Error(errorMessage));
+            resolve(blob);
+        }, 'image/png');
+    });
+}
+function CanvasCaptureBridge({ ref }) {
+    const { camera, gl, invalidate, scene } = useThree();
+    useImperativeHandle(ref, ()=>({
+            capture: async ()=>{
+                invalidate();
+                await new Promise((resolve)=>requestAnimationFrame(()=>resolve()));
+                gl.render(scene, camera);
+                return canvasToPngBlob(gl.domElement, 'Failed to create scene share image');
+            }
+        }), [
+        camera,
+        gl,
+        invalidate,
+        scene
+    ]);
+    return null;
+}
+function buildResourcePoseFromHit(hit) {
+    const position = hit.point.clone();
+    const normal = new Vector3(0, 0, 1).applyQuaternion(hit.object.quaternion);
+    position.addScaledVector(normal, SURFACE_OFFSET);
+    return {
+        position: position.toArray(),
+        quaternion: hit.object.quaternion.toArray()
+    };
+}
+const FLOOR_SEGMENTATION_CLASS = 2;
+const CARPET_SEGMENTATION_CLASS = 3;
+function isFloorOrCarpetSegmentationClass(classId) {
+    return classId === FLOOR_SEGMENTATION_CLASS || classId === CARPET_SEGMENTATION_CLASS;
+}
+function getFloorOrCarpetMaskCentroid(mask) {
+    let sumX = 0;
+    let sumY = 0;
+    let count = 0;
+    for(let y = 0; y < mask.height; y++)for(let x = 0; x < mask.width; x++){
+        const classId = mask.classes[y * mask.width + x];
+        const isFloorArea = isFloorOrCarpetSegmentationClass(classId);
+        if (isFloorArea) {
+            sumX += x + 0.5;
+            sumY += y + 0.5;
+            count += 1;
+        }
+    }
+    if (0 === count) return null;
+    return {
+        x: sumX / count,
+        y: sumY / count
+    };
+}
+function getInitialCarpetPose(surface, mask, camera) {
+    const planePose = calculatePlanePose(surface.z, surface.pitchDeg, surface.rollDeg, camera);
+    const maskCentroid = getFloorOrCarpetMaskCentroid(mask);
+    if (!maskCentroid) return null;
+    const quaternion = new Quaternion(...planePose.quaternion);
+    const normal = new Vector3(0, 0, 1).applyQuaternion(quaternion).normalize();
+    const planePosition = new Vector3(...planePose.position);
+    const ndcX = maskCentroid.x / mask.width * 2 - 1;
+    const ndcY = 1 - maskCentroid.y / mask.height * 2;
+    const raycaster = new Raycaster();
+    raycaster.setFromCamera(new Vector2(ndcX, ndcY), camera);
+    const plane = new Plane().setFromNormalAndCoplanarPoint(normal, planePosition);
+    const hitPoint = raycaster.ray.intersectPlane(plane, new Vector3());
+    if (!hitPoint) return null;
+    hitPoint.addScaledVector(normal, SURFACE_OFFSET);
+    return {
+        position: hitPoint.toArray(),
+        quaternion: planePose.quaternion
+    };
+}
+function loadImage(url) {
+    return new Promise((resolve, reject)=>{
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        image.onload = ()=>resolve(image);
+        image.onerror = ()=>reject(new Error(`Failed to load image from ${url}`));
+        image.src = url;
+    });
+}
+function buildSegmentationMaskCanvas(classes, width, height) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to get 2D context for segmentation mask.');
+    const imageData = context.createImageData(width, height);
+    const pixelCount = width * height;
+    for(let index = 0; index < pixelCount; index++){
+        const classId = classes[index];
+        const visible = isFloorOrCarpetSegmentationClass(classId);
+        imageData.data[4 * index] = 255;
+        imageData.data[4 * index + 1] = 255;
+        imageData.data[4 * index + 2] = 255;
+        imageData.data[4 * index + 3] = visible ? 255 : 0;
+    }
+    context.putImageData(imageData, 0, 0);
+    return canvas;
+}
+function createRenderMaskCanvas(segmentationClasses, scaleFactor) {
+    const sourceCanvas = buildSegmentationMaskCanvas(segmentationClasses.classes, segmentationClasses.width, segmentationClasses.height);
+    const width = Math.max(1, segmentationClasses.width * scaleFactor);
+    const height = Math.max(1, segmentationClasses.height * scaleFactor);
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to get 2D context for upscaled segmentation mask.');
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = 'high';
+    context.drawImage(sourceCanvas, 0, 0, width, height);
+    return canvas;
+}
+async function loadCarpetSegmentationFromMask(maskUrl) {
+    const maskImage = await loadImage(maskUrl);
+    const canvas = document.createElement('canvas');
+    canvas.width = maskImage.naturalWidth || maskImage.width;
+    canvas.height = maskImage.naturalHeight || maskImage.height;
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to get 2D context for segmentation mask.');
+    context.drawImage(maskImage, 0, 0);
+    const { width, height } = canvas;
+    const imageData = context.getImageData(0, 0, width, height);
+    const classes = new Uint8Array(width * height);
+    for(let index = 0; index < classes.length; index++){
+        const alpha = imageData.data[4 * index + 3];
+        classes[index] = alpha > 127 ? 2 : 0;
+    }
+    return {
+        segmentationClasses: {
+            classes,
+            width,
+            height
+        }
+    };
+}
+async function createMaskUrl(segmentationClasses) {
+    const maskCanvas = buildSegmentationMaskCanvas(segmentationClasses.classes, segmentationClasses.width, segmentationClasses.height);
+    const maskBlob = await canvasToPngBlob(maskCanvas, 'Failed to serialize segmentation mask PNG.');
+    return URL.createObjectURL(maskBlob);
+}
+function sanitizeExportFileBase(imageUrl) {
+    return imageUrl.replace(/[^a-z0-9]+/gi, '-').replace(/^-+|-+$/g, '').toLowerCase();
+}
+function downloadBlob(blob, filename) {
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = objectUrl;
+    anchor.download = filename;
+    anchor.click();
+    URL.revokeObjectURL(objectUrl);
+}
+async function exportCarpetInferenceSnapshot(imageUrl, floor, segmentationClasses) {
+    const fileBase = sanitizeExportFileBase(imageUrl);
+    const maskFile = `${fileBase}-mask.png`;
+    const metaFile = `${fileBase}.json`;
+    const maskCanvas = buildSegmentationMaskCanvas(segmentationClasses.classes, segmentationClasses.width, segmentationClasses.height);
+    const maskBlob = await canvasToPngBlob(maskCanvas, 'Failed to export segmentation mask PNG.');
+    const snapshot = {
+        imageUrl,
+        floor,
+        segmentation: {
+            width: segmentationClasses.width,
+            height: segmentationClasses.height,
+            maskFile
+        }
+    };
+    const snapshotBlob = new Blob([
+        JSON.stringify(snapshot, null, 2)
+    ], {
+        type: 'application/json'
+    });
+    downloadBlob(maskBlob, maskFile);
+    downloadBlob(snapshotBlob, metaFile);
+}
+const MODEL_INPUT_SIZE = 512;
+const MODEL_INPUT_PIXELS = MODEL_INPUT_SIZE * MODEL_INPUT_SIZE;
+const Z_SCALE_CM = 400;
+const ROLL_SCALE_DEG = 45;
+const PITCH_SCALE_DEG = 90;
+const MODEL_INPUT_CHANNEL_ORDER = 'GBR';
+function getModelChannelOffsets(channelOrder) {
+    const offsets = {
+        R: 0,
+        G: 1,
+        B: 2
+    };
+    const channels = channelOrder.toUpperCase().split('');
+    if (3 !== channels.length || channels.some((channel)=>!(channel in offsets))) throw new Error(`Unsupported carpet inference input channel order: ${channelOrder}`);
+    return channels.map((channel)=>offsets[channel]);
+}
+function bytesToBase64(bytes) {
+    return new Promise((resolve, reject)=>{
+        const reader = new FileReader();
+        const arrayBuffer = new ArrayBuffer(bytes.byteLength);
+        new Uint8Array(arrayBuffer).set(bytes);
+        reader.onerror = ()=>{
+            reject(new Error('Failed to encode carpet inference payload.'));
+        };
+        reader.onload = ()=>{
+            if ('string' != typeof reader.result) return void reject(new Error('Failed to encode carpet inference payload.'));
+            const separatorIndex = reader.result.indexOf(',');
+            resolve(separatorIndex >= 0 ? reader.result.slice(separatorIndex + 1) : reader.result);
+        };
+        reader.readAsDataURL(new Blob([
+            arrayBuffer
+        ]));
+    });
+}
+function base64ToBytes(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for(let index = 0; index < binary.length; index++)bytes[index] = binary.charCodeAt(index);
+    return bytes;
+}
+function encodeUint8ArrayToBase64(data) {
+    return bytesToBase64(data);
+}
+function decodeSegmentationClasses(base64) {
+    const classes = base64ToBytes(base64);
+    if (classes.length !== MODEL_INPUT_PIXELS) throw new Error(`Unsupported segmentation classes length: ${classes.length}`);
+    return {
+        classes,
+        width: MODEL_INPUT_SIZE,
+        height: MODEL_INPUT_SIZE
+    };
+}
+function createInputData(image) {
+    const canvas = document.createElement('canvas');
+    canvas.width = MODEL_INPUT_SIZE;
+    canvas.height = MODEL_INPUT_SIZE;
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to get 2D context for carpet inference input.');
+    context.drawImage(image, 0, 0, MODEL_INPUT_SIZE, MODEL_INPUT_SIZE);
+    const imageData = context.getImageData(0, 0, MODEL_INPUT_SIZE, MODEL_INPUT_SIZE);
+    const channelOffsets = getModelChannelOffsets(MODEL_INPUT_CHANNEL_ORDER);
+    const uint8Data = new Uint8Array(3 * MODEL_INPUT_PIXELS);
+    for(let source = 0, target = 0; source < 4 * MODEL_INPUT_PIXELS; source += 4, target += 3){
+        uint8Data[target] = imageData.data[source + channelOffsets[0]];
+        uint8Data[target + 1] = imageData.data[source + channelOffsets[1]];
+        uint8Data[target + 2] = imageData.data[source + channelOffsets[2]];
+    }
+    return uint8Data;
+}
+function toFloorPose(result) {
+    return {
+        z: Number(result.deltaZ ?? 0) * Z_SCALE_CM,
+        pitchDeg: -(Number(result.pitch ?? 0) * PITCH_SCALE_DEG),
+        rollDeg: Number(result.roll ?? 0) * ROLL_SCALE_DEG
+    };
+}
+async function runCarpetInferenceRaw(data) {
+    const encodedData = await encodeUint8ArrayToBase64(data);
+    const response = await fetch(CARPET_INFERENCE_RAW_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            data: encodedData
+        })
+    });
+    if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Carpet inference request failed: ${response.status} ${response.statusText}${errorText ? ` - ${errorText}` : ''}`);
+    }
+    return response.json();
+}
+async function inferCarpetFromRoomImage(imageUrl) {
+    const image = await loadImage(imageUrl);
+    const inputData = createInputData(image);
+    const result = await runCarpetInferenceRaw(inputData);
+    const segmentationClasses = decodeSegmentationClasses(result.segmentationClasses);
+    const floor = toFloorPose(result);
+    if (CARPET_INFERENCE_EXPORT_ENABLED) await exportCarpetInferenceSnapshot(imageUrl, floor, {
+        classes: segmentationClasses.classes,
+        width: segmentationClasses.width,
+        height: segmentationClasses.height
+    });
+    return {
+        segmentationClasses,
+        floor
+    };
+}
+const DEFAULT_SCALE_DIV = 8;
+const DEFAULT_FILTER_DIAMETER = 4;
+const DEFAULT_SIGMA_COLOR = 70;
+const DEFAULT_SIGMA_SPACE = 70;
+const NEUTRAL_LIGHTING_VALUE = 128;
+const HIGHLIGHT_LIGHTING_CONTRAST = 0.8;
+const SHADOW_LIGHTING_CONTRAST = 1.15;
+function getCanvasContext(canvas) {
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to get 2D context for carpet lighting map.');
+    return context;
+}
+function createCanvas(width, height) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+}
+function createNeutralLightingCanvas(width, height) {
+    const canvas = createCanvas(width, height);
+    const context = getCanvasContext(canvas);
+    const imageData = context.createImageData(width, height);
+    for(let index = 0; index < width * height; index++){
+        const offset = 4 * index;
+        imageData.data[offset] = NEUTRAL_LIGHTING_VALUE;
+        imageData.data[offset + 1] = NEUTRAL_LIGHTING_VALUE;
+        imageData.data[offset + 2] = NEUTRAL_LIGHTING_VALUE;
+        imageData.data[offset + 3] = 255;
+    }
+    context.putImageData(imageData, 0, 0);
+    return canvas;
+}
+function extractGrayscale(imageData) {
+    const grayscale = new Uint8ClampedArray(imageData.width * imageData.height);
+    for(let index = 0; index < grayscale.length; index++){
+        const offset = 4 * index;
+        const r = imageData.data[offset];
+        const g = imageData.data[offset + 1];
+        const b = imageData.data[offset + 2];
+        grayscale[index] = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+    }
+    return grayscale;
+}
+function grayscaleToCanvas(grayscale, width, height) {
+    const canvas = createCanvas(width, height);
+    const context = getCanvasContext(canvas);
+    const imageData = context.createImageData(width, height);
+    for(let index = 0; index < width * height; index++){
+        const value = Math.max(0, Math.min(255, Math.round(Number(grayscale[index] ?? 0))));
+        const offset = 4 * index;
+        imageData.data[offset] = value;
+        imageData.data[offset + 1] = value;
+        imageData.data[offset + 2] = value;
+        imageData.data[offset + 3] = 255;
+    }
+    context.putImageData(imageData, 0, 0);
+    return canvas;
+}
+function resizeGrayscale(grayscale, sourceWidth, sourceHeight, targetWidth, targetHeight) {
+    const sourceCanvas = grayscaleToCanvas(grayscale, sourceWidth, sourceHeight);
+    const targetCanvas = createCanvas(targetWidth, targetHeight);
+    const context = getCanvasContext(targetCanvas);
+    context.imageSmoothingEnabled = true;
+    context.drawImage(sourceCanvas, 0, 0, targetWidth, targetHeight);
+    return extractGrayscale(context.getImageData(0, 0, targetWidth, targetHeight));
+}
+function multiplyGrayscaleByWeights(grayscale, weights) {
+    const result = new Float32Array(grayscale.length);
+    for(let index = 0; index < grayscale.length; index++)result[index] = Number(grayscale[index] ?? 0) * (Number(weights[index] ?? 0) / 255);
+    return result;
+}
+function restoreGrayscaleFromWeights(grayscale, weights) {
+    const result = new Uint8ClampedArray(grayscale.length);
+    for(let index = 0; index < grayscale.length; index++){
+        const coverage = Number(weights[index] ?? 0) / 255;
+        if (coverage <= 0.0001) {
+            result[index] = 0;
+            continue;
+        }
+        const value = Number(grayscale[index] ?? 0) / coverage;
+        result[index] = Math.max(0, Math.min(255, Math.round(value)));
+    }
+    return result;
+}
+function bilateralFilter(grayscale, width, height, filterDiameter, sigmaColor, sigmaSpace, sampleWeights) {
+    const result = new Uint8ClampedArray(grayscale.length);
+    const radius = Math.max(1, Math.floor(filterDiameter / 2));
+    const safeSigmaColor = Math.max(1, sigmaColor);
+    const safeSigmaSpace = Math.max(1, sigmaSpace);
+    const colorDenominator = 2 * safeSigmaColor * safeSigmaColor;
+    const spatialDenominator = 2 * safeSigmaSpace * safeSigmaSpace;
+    const spatialWeights = new Float32Array((2 * radius + 1) * (2 * radius + 1));
+    let spatialWeightIndex = 0;
+    for(let offsetY = -radius; offsetY <= radius; offsetY++)for(let offsetX = -radius; offsetX <= radius; offsetX++){
+        const distanceSquared = offsetX * offsetX + offsetY * offsetY;
+        spatialWeights[spatialWeightIndex] = Math.exp(-distanceSquared / spatialDenominator);
+        spatialWeightIndex += 1;
+    }
+    for(let y = 0; y < height; y++)for(let x = 0; x < width; x++){
+        const centerIndex = y * width + x;
+        const centerSampleWeight = Number(sampleWeights?.[centerIndex] ?? 255) / 255;
+        if (centerSampleWeight <= 0.0001) {
+            result[centerIndex] = 0;
+            continue;
+        }
+        const centerValue = grayscale[centerIndex];
+        let weightSum = 0;
+        let valueSum = 0;
+        let kernelIndex = 0;
+        for(let offsetY = -radius; offsetY <= radius; offsetY++){
+            const sampleY = Math.max(0, Math.min(height - 1, y + offsetY));
+            for(let offsetX = -radius; offsetX <= radius; offsetX++){
+                const sampleX = Math.max(0, Math.min(width - 1, x + offsetX));
+                const sampleIndex = sampleY * width + sampleX;
+                const sampleWeight = Number(sampleWeights?.[sampleIndex] ?? 255) / 255;
+                if (sampleWeight <= 0.0001) {
+                    kernelIndex += 1;
+                    continue;
+                }
+                const sampleValue = grayscale[sampleIndex];
+                const delta = sampleValue - centerValue;
+                const rangeWeight = Math.exp(-(delta * delta) / colorDenominator);
+                const weight = spatialWeights[kernelIndex] * rangeWeight * sampleWeight;
+                weightSum += weight;
+                valueSum += sampleValue * weight;
+                kernelIndex += 1;
+            }
+        }
+        result[centerIndex] = weightSum > 0 ? Math.round(valueSum / weightSum) : centerValue;
+    }
+    return result;
+}
+function isLightingClass(classId) {
+    return 2 === classId || 3 === classId;
+}
+function createLightingWeights(classes) {
+    const weights = new Uint8ClampedArray(classes.length);
+    for(let index = 0; index < classes.length; index++)weights[index] = isLightingClass(classes[index]) ? 255 : 0;
+    return weights;
+}
+function getLightingExtremes(grayscale, classes, mean) {
+    let min = 1 / 0;
+    let max = -1 / 0;
+    for(let index = 0; index < classes.length; index++){
+        if (!isLightingClass(classes[index])) continue;
+        const value = grayscale[index];
+        min = Math.min(min, value);
+        max = Math.max(max, value);
+    }
+    if (!Number.isFinite(min) || !Number.isFinite(max)) return {
+        maxBrightnessDelta: 0,
+        maxShadowDelta: 0
+    };
+    return {
+        maxBrightnessDelta: Math.max(0, max - mean),
+        maxShadowDelta: Math.max(0, mean - min)
+    };
+}
+function encodeLightingValue(delta, extremes) {
+    if (0 === delta) return NEUTRAL_LIGHTING_VALUE;
+    const isShadow = delta < 0;
+    const maxDelta = isShadow ? extremes.maxShadowDelta : extremes.maxBrightnessDelta;
+    if (maxDelta <= 0) return NEUTRAL_LIGHTING_VALUE;
+    const contrast = isShadow ? SHADOW_LIGHTING_CONTRAST : HIGHLIGHT_LIGHTING_CONTRAST;
+    const normalized = 0.5 + delta / maxDelta * 0.5 * contrast;
+    return Math.max(0, Math.min(255, Math.round(255 * normalized)));
+}
+async function createLightingCanvas(imageUrl, segmentationClasses, options = {}) {
+    const { width, height, classes } = segmentationClasses;
+    if (width <= 0 || height <= 0 || 0 === classes.length) return createNeutralLightingCanvas(width, height);
+    const image = await loadImage(imageUrl);
+    const sourceCanvas = createCanvas(width, height);
+    const sourceContext = getCanvasContext(sourceCanvas);
+    sourceContext.drawImage(image, 0, 0, width, height);
+    const grayscale = extractGrayscale(sourceContext.getImageData(0, 0, width, height));
+    const lightingWeights = createLightingWeights(classes);
+    const scaleDiv = Math.max(1, Math.round(options.scaleDiv ?? DEFAULT_SCALE_DIV));
+    const filterDiameter = Math.max(1, Math.round(options.filterDiameter ?? DEFAULT_FILTER_DIAMETER));
+    const sigmaColor = options.sigmaColor ?? DEFAULT_SIGMA_COLOR;
+    const sigmaSpace = options.sigmaSpace ?? DEFAULT_SIGMA_SPACE;
+    const smallWidth = Math.max(1, Math.round(width / scaleDiv));
+    const smallHeight = Math.max(1, Math.round(height / scaleDiv));
+    const maskedGrayscale = multiplyGrayscaleByWeights(grayscale, lightingWeights);
+    const downscaledMasked = resizeGrayscale(maskedGrayscale, width, height, smallWidth, smallHeight);
+    const downscaledWeights = resizeGrayscale(lightingWeights, width, height, smallWidth, smallHeight);
+    const downscaled = restoreGrayscaleFromWeights(downscaledMasked, downscaledWeights);
+    const blurred = bilateralFilter(downscaled, smallWidth, smallHeight, filterDiameter, sigmaColor, sigmaSpace, downscaledWeights);
+    const blurredMasked = multiplyGrayscaleByWeights(blurred, downscaledWeights);
+    const smoothedMasked = resizeGrayscale(blurredMasked, smallWidth, smallHeight, width, height);
+    const smoothedWeights = resizeGrayscale(downscaledWeights, smallWidth, smallHeight, width, height);
+    const smoothed = restoreGrayscaleFromWeights(smoothedMasked, smoothedWeights);
+    let maskCount = 0;
+    let meanSum = 0;
+    for(let index = 0; index < classes.length; index++)if (isLightingClass(classes[index])) {
+        meanSum += smoothed[index];
+        maskCount += 1;
+    }
+    if (0 === maskCount) return createNeutralLightingCanvas(width, height);
+    const mean = meanSum / maskCount;
+    const extremes = getLightingExtremes(smoothed, classes, mean);
+    if (extremes.maxBrightnessDelta <= 0 && extremes.maxShadowDelta <= 0) return createNeutralLightingCanvas(width, height);
+    const canvas = createCanvas(width, height);
+    const context = getCanvasContext(canvas);
+    const imageData = context.createImageData(width, height);
+    for(let index = 0; index < classes.length; index++){
+        const offset = 4 * index;
+        let value = NEUTRAL_LIGHTING_VALUE;
+        if (isLightingClass(classes[index])) {
+            const delta = smoothed[index] - mean;
+            value = encodeLightingValue(delta, extremes);
+        }
+        imageData.data[offset] = value;
+        imageData.data[offset + 1] = value;
+        imageData.data[offset + 2] = value;
+        imageData.data[offset + 3] = 255;
+    }
+    context.putImageData(imageData, 0, 0);
+    return canvas;
+}
+function getCarpetSurface(surfaces) {
+    return surfaces.find((surface)=>surface.id === FLOOR_SURFACE_ID) ?? null;
+}
+function useCarpetInference(enabled) {
+    const { room, setRooms } = useRoomViewer();
+    const get = useThree((state)=>state.get);
+    const floor = getCarpetSurface(room.config.surfaces);
+    const query = react_query_useQuery({
+        queryKey: [
+            'room-viewer',
+            'carpet-inference',
+            room.id,
+            room.image
+        ],
+        enabled,
+        retry: 1,
+        staleTime: 0,
+        gcTime: 0,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        queryFn: async ()=>{
+            if (!floor) throw new Error('Floor surface is missing for carpet inference.');
+            const { camera } = get();
+            if (room.config.maskUrl) {
+                const data = await loadCarpetSegmentationFromMask(room.config.maskUrl);
+                return {
+                    ...data,
+                    initialPose: getInitialCarpetPose(floor, data.segmentationClasses, camera)
+                };
+            }
+            const inference = await inferCarpetFromRoomImage(room.image);
+            const segmentationClasses = inference.segmentationClasses;
+            const inferredFloor = {
+                id: FLOOR_SURFACE_ID,
+                ...inference.floor
+            };
+            const maskUrl = await createMaskUrl(segmentationClasses);
+            return {
+                segmentationClasses,
+                floor: inferredFloor,
+                initialPose: getInitialCarpetPose(inferredFloor, segmentationClasses, camera),
+                maskUrl
+            };
+        }
+    });
+    useEffect(()=>{
+        if (!query.data?.maskUrl || !query.data.floor || room.config.maskUrl === query.data.maskUrl) return;
+        const { floor, maskUrl } = query.data;
+        setRooms((currentRooms)=>currentRooms.map((currentRoom)=>{
+                if (currentRoom.id !== room.id) return currentRoom;
+                return {
+                    ...currentRoom,
+                    config: {
+                        ...currentRoom.config,
+                        maskUrl,
+                        surfaces: currentRoom.config.surfaces.map((surface)=>surface.id === FLOOR_SURFACE_ID ? floor : surface)
+                    }
+                };
+            }));
+    }, [
+        query.data,
+        room.config.maskUrl,
+        room.id,
+        setRooms
+    ]);
+    return query;
+}
+function useSceneHelpers() {
+    const { type } = useRoomViewer();
+    const get = useThree((state)=>state.get);
+    const findPlacementHit = useCallback((pointer, surfaceMeshes)=>{
+        const { camera, raycaster } = get();
+        raycaster.setFromCamera(pointer, camera);
+        return raycaster.intersectObjects(surfaceMeshes, false).find((intersection)=>{
+            const surfaceId = intersection.object.userData.surfaceId;
+            if (!surfaceId) return false;
+            if ('carpet' === type) return surfaceId === FLOOR_SURFACE_ID;
+            return surfaceId !== FLOOR_SURFACE_ID;
+        });
+    }, [
+        get,
+        type
+    ]);
+    return {
+        findPlacementHit
+    };
+}
+const MASK_MAP_UPSCALE_FACTOR = 4;
+function useCarpetCanvases(segmentationClasses) {
+    const { room, patchSceneLoad } = useRoomViewer();
+    const enabled = null != segmentationClasses;
+    const query = react_query_useQuery({
+        queryKey: [
+            'room-viewer',
+            'carpet-canvases',
+            room.id,
+            room.image
+        ],
+        enabled,
+        retry: 1,
+        staleTime: 0,
+        gcTime: 0,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        queryFn: async ()=>{
+            if (!segmentationClasses) throw new Error('Segmentation classes are required to create carpet canvases.');
+            const maskCanvas = createRenderMaskCanvas(segmentationClasses, MASK_MAP_UPSCALE_FACTOR);
+            const lightingCanvas = await createLightingCanvas(room.image, segmentationClasses);
+            return {
+                lightingCanvas,
+                maskCanvas
+            };
+        }
+    });
+    useEffect(()=>{
+        patchSceneLoad({
+            artifactsReady: Boolean(enabled && query.data)
+        });
+    }, [
+        enabled,
+        patchSceneLoad,
+        query.data,
+        room.id,
+        room.image
+    ]);
+    return query;
+}
+const MASK_UNIFORM = 'uRoomMask';
+const LIGHTING_MAP_UNIFORM = 'uRoomLightingMap';
+const LIGHTING_STRENGTH_UNIFORM = 'uRoomLightingStrength';
+const RESOLUTION_UNIFORM = 'uRoomMaskResolution';
+const MASK_TEXTURE_SIZE_UNIFORM = 'uRoomMaskTextureSize';
+const MASK_THRESHOLD = 0.42;
+const LIGHTING_STRENGTH = 0.18;
+const MIN_LIGHTING_FACTOR = 0.76;
+const MAX_LIGHTING_FACTOR = 1.1;
+const MASK_BILATERAL_SAMPLE_STEP = 5.0;
+const MASK_BILATERAL_SIGMA_SPATIAL = 4.0;
+const MASK_BILATERAL_SIGMA_RANGE = 0.7;
+const MASK_BILATERAL_KERNEL_RADIUS = 2;
+function collectCarpetMaterials(sourceScene) {
+    const materials = new Set();
+    sourceScene.traverse((object)=>{
+        if (!object.isMesh) return;
+        const mesh = object;
+        if (!mesh.material) return;
+        if (Array.isArray(mesh.material)) {
+            const clonedMaterials = mesh.material.map((material)=>{
+                const clonedMaterial = material.clone();
+                materials.add(clonedMaterial);
+                return clonedMaterial;
+            });
+            mesh.material = clonedMaterials;
+            return;
+        }
+        const clonedMaterial = mesh.material.clone();
+        materials.add(clonedMaterial);
+        mesh.material = clonedMaterial;
+    });
+    return Array.from(materials);
+}
+function createCanvasTexture(canvas, minFilter = LinearFilter, magFilter = LinearFilter) {
+    const texture = new CanvasTexture(canvas);
+    texture.needsUpdate = true;
+    texture.minFilter = minFilter;
+    texture.magFilter = magFilter;
+    texture.generateMipmaps = false;
+    return texture;
+}
+function patchMaterialWithMask(material, maskTexture, lightingTexture, resolution, maskTextureSize) {
+    const previousOnBeforeCompile = material.onBeforeCompile;
+    const previousCustomProgramCacheKey = material.customProgramCacheKey.bind(material);
+    const previousTransparent = material.transparent;
+    material.onBeforeCompile = (shader, renderer)=>{
+        previousOnBeforeCompile?.call(material, shader, renderer);
+        shader.uniforms[MASK_UNIFORM] = {
+            value: maskTexture
+        };
+        shader.uniforms[LIGHTING_MAP_UNIFORM] = {
+            value: lightingTexture
+        };
+        shader.uniforms[LIGHTING_STRENGTH_UNIFORM] = {
+            value: LIGHTING_STRENGTH
+        };
+        shader.uniforms[RESOLUTION_UNIFORM] = {
+            value: resolution
+        };
+        shader.uniforms[MASK_TEXTURE_SIZE_UNIFORM] = {
+            value: maskTextureSize
+        };
+        shader.fragmentShader = shader.fragmentShader.replace('#include <common>', `
+        #include <common>
+        uniform sampler2D ${MASK_UNIFORM};
+        uniform sampler2D ${LIGHTING_MAP_UNIFORM};
+        uniform float ${LIGHTING_STRENGTH_UNIFORM};
+        uniform vec2 ${RESOLUTION_UNIFORM};
+        uniform vec2 ${MASK_TEXTURE_SIZE_UNIFORM};
+
+        float sampleRoomMaskAlpha(vec2 uv) {
+          vec2 texel = vec2(${MASK_BILATERAL_SAMPLE_STEP.toFixed(1)}) / ${MASK_TEXTURE_SIZE_UNIFORM};
+          float centerAlpha = texture2D(${MASK_UNIFORM}, uv).a;
+          float spatialDenominator = 2.0 * ${MASK_BILATERAL_SIGMA_SPATIAL.toFixed(1)} * ${MASK_BILATERAL_SIGMA_SPATIAL.toFixed(1)};
+          float rangeDenominator = 2.0 * ${MASK_BILATERAL_SIGMA_RANGE.toFixed(1)} * ${MASK_BILATERAL_SIGMA_RANGE.toFixed(1)};
+          float weightSum = 0.0;
+          float alphaSum = 0.0;
+
+          for (int offsetY = -${MASK_BILATERAL_KERNEL_RADIUS}; offsetY <= ${MASK_BILATERAL_KERNEL_RADIUS}; offsetY++) {
+            for (int offsetX = -${MASK_BILATERAL_KERNEL_RADIUS}; offsetX <= ${MASK_BILATERAL_KERNEL_RADIUS}; offsetX++) {
+              vec2 offset = vec2(float(offsetX), float(offsetY));
+              float sampleAlpha = texture2D(${MASK_UNIFORM}, uv + offset * texel).a;
+              float spatialWeight = exp(-dot(offset, offset) / spatialDenominator);
+              float rangeDelta = sampleAlpha - centerAlpha;
+              float rangeWeight = exp(-(rangeDelta * rangeDelta) / rangeDenominator);
+              float weight = spatialWeight * rangeWeight;
+
+              weightSum += weight;
+              alphaSum += sampleAlpha * weight;
+            }
+          }
+
+          return weightSum > 0.0 ? alphaSum / weightSum : centerAlpha;
+        }
+      `);
+        shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', `
+        vec2 roomMaskUv = gl_FragCoord.xy / ${RESOLUTION_UNIFORM};
+        float roomMaskAlpha = sampleRoomMaskAlpha(roomMaskUv);
+        if (roomMaskAlpha < 0.01) discard;
+        float roomLightingEncoded = texture2D(${LIGHTING_MAP_UNIFORM}, roomMaskUv).r;
+        float roomLightingSigned = roomLightingEncoded * 2.0 - 1.0;
+        float roomLightingFactor = clamp(
+          1.0 + roomLightingSigned * ${LIGHTING_STRENGTH_UNIFORM},
+          ${MIN_LIGHTING_FACTOR.toFixed(2)},
+          ${MAX_LIGHTING_FACTOR.toFixed(2)}
+        );
+        gl_FragColor.rgb *= roomLightingFactor;
+        gl_FragColor.a *= smoothstep(0.0, ${MASK_THRESHOLD}, roomMaskAlpha);
+        #include <dithering_fragment>
+      `);
+    };
+    material.customProgramCacheKey = ()=>`${previousCustomProgramCacheKey()}|vizbl-carpet-mask-v2`;
+    material.transparent = true;
+    material.needsUpdate = true;
+    return ()=>{
+        material.onBeforeCompile = previousOnBeforeCompile;
+        material.customProgramCacheKey = previousCustomProgramCacheKey;
+        material.transparent = previousTransparent;
+        material.needsUpdate = true;
+    };
+}
+async function warmUpCarpetScene(renderer, object, camera, scene) {
+    if ('function' == typeof renderer.compileAsync) return void await renderer.compileAsync(object, camera, scene);
+    renderer.compile(object, camera, scene);
+}
+const CARPET_ROTATION_X = Math.PI / 2;
+function CarpetMesh({ glbUrl, position, quaternion, maskCanvas, lightingCanvas }) {
+    const { resourceRef, rotation, setIsDragging, patchSceneLoad } = useRoomViewer();
+    const { gl, size, camera, scene: rootScene, invalidate } = useThree();
+    const gltf = useGLTF(glbUrl);
+    const resolutionRef = useRef(null);
+    const maskTextureSizeRef = useRef(null);
+    const maskTextureRef = useRef(null);
+    const lightingTextureRef = useRef(null);
+    const materialsRef = useRef(null);
+    if (null === resolutionRef.current) resolutionRef.current = new Vector2(1, 1);
+    if (null === maskTextureSizeRef.current) maskTextureSizeRef.current = new Vector2(1, 1);
+    const resolution = resolutionRef.current;
+    const maskTextureSize = maskTextureSizeRef.current;
+    const sceneInstance = external_react_useMemo(()=>gltf.scene.clone(true), [
+        gltf
+    ]);
+    const rotationRadians = external_react_useMemo(()=>MathUtils.degToRad(rotation), [
+        rotation
+    ]);
+    const handlePointerDown = useCallback(()=>{
+        setIsDragging(true);
+    }, [
+        setIsDragging
+    ]);
+    const handlePointerUp = useCallback(()=>{
+        setIsDragging(false);
+    }, [
+        setIsDragging
+    ]);
+    useLayoutEffect(()=>{
+        const maskTexture = createCanvasTexture(maskCanvas, NearestFilter, NearestFilter);
+        maskTextureRef.current = maskTexture;
+        maskTextureSize.set(Math.max(1, maskCanvas.width), Math.max(1, maskCanvas.height));
+        return ()=>{
+            if (maskTextureRef.current === maskTexture) maskTextureRef.current = null;
+            maskTexture.dispose();
+        };
+    }, [
+        maskCanvas,
+        maskTextureSize
+    ]);
+    useLayoutEffect(()=>{
+        const lightingTexture = createCanvasTexture(lightingCanvas);
+        lightingTextureRef.current = lightingTexture;
+        return ()=>{
+            if (lightingTextureRef.current === lightingTexture) lightingTextureRef.current = null;
+            lightingTexture.dispose();
+        };
+    }, [
+        lightingCanvas
+    ]);
+    useLayoutEffect(()=>{
+        const materials = collectCarpetMaterials(sceneInstance);
+        materialsRef.current = materials;
+        return ()=>{
+            if (materialsRef.current === materials) materialsRef.current = null;
+            materials.forEach((material)=>material.dispose());
+        };
+    }, [
+        sceneInstance
+    ]);
+    useLayoutEffect(()=>{
+        gl.getDrawingBufferSize(resolution);
+        resolution.set(Math.max(1, resolution.x), Math.max(1, resolution.y));
+    }, [
+        gl,
+        resolution,
+        size.width,
+        size.height
+    ]);
+    useLayoutEffect(()=>{
+        const maskTexture = maskTextureRef.current;
+        const lightingTexture = lightingTextureRef.current;
+        const materials = materialsRef.current;
+        if (!maskTexture || !lightingTexture || !materials) return;
+        const cleanupCallbacks = materials.map((material)=>patchMaterialWithMask(material, maskTexture, lightingTexture, resolution, maskTextureSize));
+        invalidate();
+        return ()=>{
+            cleanupCallbacks.forEach((cleanup)=>cleanup());
+        };
+    }, [
+        invalidate,
+        lightingCanvas,
+        maskCanvas,
+        maskTextureSize,
+        resolution,
+        sceneInstance
+    ]);
+    useLayoutEffect(()=>{
+        let isCancelled = false;
+        const warmUp = async ()=>{
+            try {
+                await warmUpCarpetScene(gl, sceneInstance, camera, rootScene);
+            } catch  {} finally{
+                if (!isCancelled) {
+                    patchSceneLoad({
+                        prepareReady: true
+                    });
+                    invalidate();
+                }
+            }
+        };
+        warmUp();
+        return ()=>{
+            isCancelled = true;
+        };
+    }, [
+        camera,
+        gl,
+        invalidate,
+        patchSceneLoad,
+        rootScene,
+        sceneInstance
+    ]);
+    return /*#__PURE__*/ jsx("group", {
+        ref: resourceRef,
+        position: position,
+        quaternion: quaternion,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerUp,
+        children: /*#__PURE__*/ jsx("group", {
+            "rotation-z": rotationRadians,
+            children: /*#__PURE__*/ jsx("group", {
+                "rotation-x": CARPET_ROTATION_X,
+                children: /*#__PURE__*/ jsx("primitive", {
+                    object: sceneInstance
+                })
+            })
+        })
+    });
+}
+function Carpet({ glbUrl, position, quaternion, segmentationClasses }) {
+    const { data } = useCarpetCanvases(segmentationClasses);
+    if (!data) return null;
+    return /*#__PURE__*/ jsx(CarpetMesh, {
+        glbUrl: glbUrl,
+        position: position,
+        quaternion: quaternion,
+        maskCanvas: data.maskCanvas,
+        lightingCanvas: data.lightingCanvas
+    });
+}
+function usePlanePose(options) {
+    const { z, pitchDeg, rollDeg } = options;
+    const camera = useThree((state)=>state.camera);
+    return external_react_useMemo(()=>calculatePlanePose(z, pitchDeg, rollDeg, camera), [
+        camera,
+        z,
+        pitchDeg,
+        rollDeg
+    ]);
+}
+function Plane_Plane({ ref, z, pitchDeg, rollDeg, userData }) {
+    const { position, quaternion } = usePlanePose({
+        z,
+        pitchDeg,
+        rollDeg
+    });
+    return /*#__PURE__*/ jsxs("mesh", {
+        ref: ref,
+        position: position,
+        quaternion: quaternion,
+        userData: userData,
+        children: [
+            /*#__PURE__*/ jsx("planeGeometry", {
+                args: [
+                    64,
+                    64
+                ]
+            }),
+            /*#__PURE__*/ jsx("meshStandardMaterial", {
+                transparent: true,
+                opacity: 0
+            })
+        ]
+    });
+}
+function FramePart({ node, position, scale = [
+    1,
+    1,
+    1
+], uvScale }) {
+    const meshRef = useRef(null);
+    useEffect(()=>{
+        if (!meshRef.current || void 0 === uvScale) return;
+        const attr = meshRef.current.geometry.attributes.uv;
+        const baseUVs = node.geometry.attributes.uv.array;
+        for(let i = 0; i < attr.count; i++){
+            const u = baseUVs[2 * i];
+            const v = baseUVs[2 * i + 1];
+            attr.setXY(i, u * uvScale, v);
+        }
+        attr.needsUpdate = true;
+    }, [
+        uvScale,
+        node.geometry
+    ]);
+    return /*#__PURE__*/ jsx(Clone, {
+        ref: meshRef,
+        object: node,
+        position: position,
+        scale: scale
+    });
+}
+const FRAME_OFFSET = 0.001;
+function Frame({ width, height }) {
+    const { material } = useRoomViewer();
+    const frameUrl = material?.native?.glbUrl;
+    const { nodes } = useGLTF(frameUrl);
+    const geometry = external_react_useMemo(()=>{
+        const meshKeys = [
+            'vizbl0',
+            'vizbl1',
+            'vizbl2',
+            'vizbl3',
+            'vizbl4',
+            'vizbl5',
+            'vizbl6',
+            'vizbl7'
+        ];
+        const center = new Vector3();
+        const normalizedNodes = {};
+        meshKeys.forEach((key)=>{
+            const originalMesh = nodes[key];
+            if (!originalMesh?.geometry) return;
+            const mesh = originalMesh.clone();
+            mesh.updateMatrixWorld(true);
+            mesh.geometry.applyMatrix4(mesh.matrixWorld);
+            mesh.position.set(0, 0, 0);
+            mesh.rotation.set(0, 0, 0);
+            mesh.scale.set(1, 1, 1);
+            mesh.updateMatrixWorld(true);
+            mesh.geometry.computeBoundingBox();
+            if (mesh.geometry.boundingBox) {
+                mesh.geometry.boundingBox.getCenter(center);
+                mesh.geometry.translate(-center.x, -center.y, -center.z);
+            }
+            mesh.geometry.computeBoundingBox();
+            normalizedNodes[key] = mesh;
+        });
+        const cornerMesh = normalizedNodes.vizbl0;
+        if (!cornerMesh?.geometry) throw new Error('Corner mesh not found');
+        const cornerBox = cornerMesh.geometry.boundingBox;
+        const cornerWidth = cornerBox.max.x - cornerBox.min.x;
+        const cornerHeight = cornerBox.max.y - cornerBox.min.y;
+        const barLengths = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
+        };
+        const barThickness = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
+        };
+        const vizbl1 = normalizedNodes.vizbl1;
+        if (vizbl1?.geometry) {
+            const box = vizbl1.geometry.boundingBox;
+            barLengths.top = box.max.x - box.min.x;
+            barThickness.top = box.max.y - box.min.y;
+        }
+        const vizbl3 = normalizedNodes.vizbl3;
+        if (vizbl3?.geometry) {
+            const box = vizbl3.geometry.boundingBox;
+            barLengths.right = box.max.y - box.min.y;
+            barThickness.right = box.max.x - box.min.x;
+        }
+        const vizbl5 = normalizedNodes.vizbl5;
+        if (vizbl5?.geometry) {
+            const box = vizbl5.geometry.boundingBox;
+            barLengths.bottom = box.max.x - box.min.x;
+            barThickness.bottom = box.max.y - box.min.y;
+        }
+        const vizbl7 = normalizedNodes.vizbl7;
+        if (vizbl7?.geometry) {
+            const box = vizbl7.geometry.boundingBox;
+            barLengths.left = box.max.y - box.min.y;
+            barThickness.left = box.max.x - box.min.x;
+        }
+        return {
+            cornerSize: {
+                width: cornerWidth,
+                height: cornerHeight
+            },
+            barLengths,
+            barThickness,
+            normalizedNodes
+        };
+    }, [
+        nodes
+    ]);
+    const innerW = width - 2 * geometry.cornerSize.width + 2 * FRAME_OFFSET;
+    const innerH = height - 2 * geometry.cornerSize.height + 2 * FRAME_OFFSET;
+    const topScale = innerW / geometry.barLengths.top;
+    const bottomScale = innerW / geometry.barLengths.bottom;
+    const leftScale = innerH / geometry.barLengths.left;
+    const rightScale = innerH / geometry.barLengths.right;
+    return /*#__PURE__*/ jsxs("group", {
+        children: [
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl0,
+                position: [
+                    -width / 2 + geometry.cornerSize.width / 2 - FRAME_OFFSET,
+                    height / 2 - geometry.cornerSize.height / 2 + FRAME_OFFSET,
+                    0
+                ]
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl1,
+                position: [
+                    0,
+                    height / 2 - geometry.barThickness.top / 2 + FRAME_OFFSET,
+                    0
+                ],
+                scale: [
+                    topScale,
+                    1,
+                    1
+                ],
+                uvScale: topScale
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl2,
+                position: [
+                    width / 2 - geometry.cornerSize.width / 2 + FRAME_OFFSET,
+                    height / 2 - geometry.cornerSize.height / 2 + FRAME_OFFSET,
+                    0
+                ]
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl3,
+                position: [
+                    width / 2 - geometry.barThickness.right / 2 + FRAME_OFFSET,
+                    0,
+                    0
+                ],
+                scale: [
+                    1,
+                    rightScale,
+                    1
+                ],
+                uvScale: rightScale
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl4,
+                position: [
+                    width / 2 - geometry.cornerSize.width / 2 + FRAME_OFFSET,
+                    -height / 2 + geometry.cornerSize.height / 2 - FRAME_OFFSET,
+                    0
+                ]
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl5,
+                position: [
+                    0,
+                    -height / 2 + geometry.barThickness.bottom / 2 - FRAME_OFFSET,
+                    0
+                ],
+                scale: [
+                    bottomScale,
+                    1,
+                    1
+                ],
+                uvScale: bottomScale
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl6,
+                position: [
+                    -width / 2 + geometry.cornerSize.width / 2 - FRAME_OFFSET,
+                    -height / 2 + geometry.cornerSize.height / 2 - FRAME_OFFSET,
+                    0
+                ]
+            }),
+            /*#__PURE__*/ jsx(FramePart, {
+                node: geometry.normalizedNodes.vizbl7,
+                position: [
+                    -width / 2 + geometry.barThickness.left / 2 - FRAME_OFFSET,
+                    0,
+                    0
+                ],
+                scale: [
+                    1,
+                    leftScale,
+                    1
+                ],
+                uvScale: leftScale
+            })
+        ]
+    });
+}
+function Matting({ width, height, position, quaternion }) {
+    return /*#__PURE__*/ jsxs("mesh", {
+        position: position,
+        quaternion: quaternion,
+        children: [
+            /*#__PURE__*/ jsx("planeGeometry", {
+                args: [
+                    width,
+                    height
+                ]
+            }),
+            /*#__PURE__*/ jsx("meshStandardMaterial", {
+                color: "white"
+            })
+        ]
+    });
+}
+function Poster({ src, position, quaternion }) {
+    const { width, height, angle, material, frameWidth, rotation, resourceRef, matting, setIsDragging } = useRoomViewer();
+    const texture = useLoader(TextureLoader, src);
+    const angleRadians = external_react_useMemo(()=>MathUtils.degToRad(angle), [
+        angle
+    ]);
+    const rotationRadians = external_react_useMemo(()=>MathUtils.degToRad(rotation), [
+        rotation
+    ]);
+    const mattingWidth = width + 2 * matting;
+    const mattingHeight = height + 2 * matting;
+    const mattingFrameWidth = matting > 0 ? mattingWidth : width;
+    const mattingFrameHeight = matting > 0 ? mattingHeight : height;
+    return /*#__PURE__*/ jsx("group", {
+        ref: resourceRef,
+        position: position,
+        quaternion: quaternion,
+        onPointerDown: ()=>setIsDragging(true),
+        onPointerUp: ()=>setIsDragging(false),
+        onPointerLeave: ()=>setIsDragging(false),
+        children: /*#__PURE__*/ jsxs("group", {
+            rotation: [
+                0,
+                rotationRadians,
+                angleRadians
+            ],
+            children: [
+                material?.native?.glbUrl && frameWidth > 0 && /*#__PURE__*/ jsx(Frame, {
+                    width: mattingFrameWidth,
+                    height: mattingFrameHeight
+                }),
+                matting > 0 && /*#__PURE__*/ jsx(Matting, {
+                    width: mattingWidth,
+                    height: mattingHeight,
+                    position: [
+                        0,
+                        0,
+                        0.01
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("mesh", {
+                    position: [
+                        0,
+                        0,
+                        0.02
+                    ],
+                    children: [
+                        /*#__PURE__*/ jsx("planeGeometry", {
+                            args: [
+                                width,
+                                height
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("meshStandardMaterial", {
+                            map: texture
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function RoomBackground() {
+    const { room } = useRoomViewer();
+    const scene = useThree((state)=>state.scene);
+    const texture = useLoader(TextureLoader, room.image);
+    useLayoutEffect(()=>{
+        texture.colorSpace = SRGBColorSpace;
+        scene.background = texture;
+        return ()=>{
+            if (scene.background === texture) scene.background = null;
+        };
+    }, [
+        scene,
+        texture
+    ]);
+    return null;
+}
+const CENTER_POINTER = new Vector2(0, 0);
+function Room() {
+    const { src, glbUrl, type, room, patchSceneLoad } = useRoomViewer();
+    const isCarpet = 'carpet' === type;
+    const get = useThree((state)=>state.get);
+    const [resourcePose, setResourcePose] = useState(null);
+    const surfaceMapRef = useRef(new Map());
+    const surfaceMeshesRef = useRef([]);
+    const { data } = useCarpetInference(isCarpet);
+    const { findPlacementHit } = useSceneHelpers();
+    const surfaces = external_react_useMemo(()=>isCarpet ? room.config.surfaces.filter((surface)=>surface.id === FLOOR_SURFACE_ID) : room.config.surfaces, [
+        isCarpet,
+        room.config.surfaces
+    ]);
+    const updatePoseFromHit = useCallback((hit, clearOnMiss)=>{
+        if (!hit) {
+            if (clearOnMiss) setResourcePose(null);
+            return;
+        }
+        setResourcePose(buildResourcePoseFromHit(hit));
+    }, []);
+    const setSurfaceRef = useCallback((surfaceId, node)=>{
+        const surfaceMap = surfaceMapRef.current;
+        if (!node) {
+            surfaceMap.delete(surfaceId);
+            surfaceMeshesRef.current = Array.from(surfaceMap.values());
+            return;
+        }
+        surfaceMap.set(surfaceId, node);
+        surfaceMeshesRef.current = Array.from(surfaceMap.values());
+        return ()=>{
+            surfaceMap.delete(surfaceId);
+            surfaceMeshesRef.current = Array.from(surfaceMap.values());
+        };
+    }, []);
+    useEffect(()=>{
+        setResourcePose(null);
+        patchSceneLoad({
+            placementReady: false
+        });
+    }, [
+        patchSceneLoad,
+        room.id,
+        type
+    ]);
+    useEffect(()=>{
+        if (isCarpet) return void setResourcePose(data?.initialPose ?? null);
+        updatePoseFromHit(findPlacementHit(CENTER_POINTER, surfaceMeshesRef.current), true);
+    }, [
+        isCarpet,
+        room.id,
+        surfaces,
+        data?.initialPose,
+        findPlacementHit,
+        updatePoseFromHit
+    ]);
+    const isPlacementReady = null !== resourcePose;
+    useEffect(()=>{
+        patchSceneLoad({
+            placementReady: isPlacementReady
+        });
+    }, [
+        isPlacementReady,
+        patchSceneLoad
+    ]);
+    const handleDrag = useCallback(()=>{
+        const { pointer } = get();
+        updatePoseFromHit(findPlacementHit(pointer, surfaceMeshesRef.current), false);
+    }, [
+        get,
+        findPlacementHit,
+        updatePoseFromHit
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isCarpet ? resourcePose && glbUrl && data?.segmentationClasses && /*#__PURE__*/ jsx(DragControls, {
+                autoTransform: false,
+                onDrag: handleDrag,
+                children: /*#__PURE__*/ jsx(Carpet, {
+                    glbUrl: glbUrl,
+                    position: resourcePose.position,
+                    quaternion: resourcePose.quaternion,
+                    segmentationClasses: data.segmentationClasses
+                })
+            }) : resourcePose && src && /*#__PURE__*/ jsx(DragControls, {
+                autoTransform: false,
+                onDrag: handleDrag,
+                children: /*#__PURE__*/ jsx(Poster, {
+                    src: src,
+                    position: resourcePose.position,
+                    quaternion: resourcePose.quaternion
+                })
+            }),
+            surfaces.map((surface)=>/*#__PURE__*/ jsx(Plane_Plane, {
+                    ref: (node)=>setSurfaceRef(surface.id, node),
+                    userData: {
+                        surfaceId: surface.id
+                    },
+                    z: surface.z,
+                    pitchDeg: surface.pitchDeg,
+                    rollDeg: surface.rollDeg
+                }, surface.id)),
+            /*#__PURE__*/ jsx(RoomBackground, {})
+        ]
+    });
+}
+function CanvasWrapper({ className, ref, captureRef, onSizeChange, ...props }) {
+    const { room, src, glbUrl, type, patchSceneLoad } = useRoomViewer();
+    const { active: isProgressLoading } = useProgress();
+    const sceneResource = 'carpet' === type ? glbUrl : src;
+    const aspectRatio = useRoomImageAspectRatio(room.image);
+    const canvasContainerRef = useRef(null);
+    const hasDispatchedResizeRef = useRef(false);
+    const handleContainerRef = useCallback((node)=>{
+        canvasContainerRef.current = node;
+        if ('function' == typeof ref) return void ref(node);
+        if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
+    const isMobile = useMediaQuery('(max-width: 639px)');
+    const { width: canvasContainerWidth, height: canvasContainerHeight } = useResizeObserver({
+        ref: canvasContainerRef
+    });
+    const size = external_react_useMemo(()=>{
+        if (!canvasContainerWidth || !canvasContainerHeight || !aspectRatio) return null;
+        let width = canvasContainerWidth;
+        let height = canvasContainerHeight;
+        if (isMobile) {
+            height = canvasContainerHeight;
+            width = height * aspectRatio;
+        } else if (canvasContainerWidth / canvasContainerHeight > aspectRatio) width = canvasContainerHeight * aspectRatio;
+        else height = canvasContainerWidth / aspectRatio;
+        return {
+            width,
+            height
+        };
+    }, [
+        canvasContainerWidth,
+        canvasContainerHeight,
+        aspectRatio,
+        isMobile
+    ]);
+    useLayoutEffect(()=>{
+        if (!size) return;
+        onSizeChange?.(size.width, size.height);
+    }, [
+        size,
+        onSizeChange
+    ]);
+    useEffect(()=>{
+        if (!size || hasDispatchedResizeRef.current) return;
+        hasDispatchedResizeRef.current = true;
+        const timeout = window.setTimeout(()=>{
+            window.dispatchEvent(new Event('resize'));
+        }, 250);
+        return ()=>{
+            window.clearTimeout(timeout);
+        };
+    }, [
+        size
+    ]);
+    useEffect(()=>{
+        patchSceneLoad({
+            placementReady: false,
+            prepareReady: 'poster' === type
+        });
+    }, [
+        patchSceneLoad,
+        room.id,
+        type
+    ]);
+    useEffect(()=>{
+        if ('carpet' !== type) return;
+        patchSceneLoad({
+            prepareReady: false
+        });
+    }, [
+        patchSceneLoad,
+        sceneResource,
+        type
+    ]);
+    useEffect(()=>{
+        patchSceneLoad({
+            layoutReady: null !== size
+        });
+    }, [
+        patchSceneLoad,
+        size
+    ]);
+    useEffect(()=>{
+        patchSceneLoad({
+            materialReady: 'poster' === type ? Boolean(src) : Boolean(glbUrl)
+        });
+    }, [
+        glbUrl,
+        patchSceneLoad,
+        src,
+        type
+    ]);
+    useEffect(()=>{
+        patchSceneLoad({
+            assetsReady: !isProgressLoading
+        });
+    }, [
+        isProgressLoading,
+        patchSceneLoad
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: handleContainerRef,
+        className: utils_cn('size-full flex items-center justify-center sm:pt-21 sm:pb-12', className),
+        ...props,
+        children: size && /*#__PURE__*/ jsx(Canvas, {
+            className: "bg-transparent",
+            frameloop: "demand",
+            camera: {
+                fov: room.config.camera.fov
+            },
+            gl: {
+                toneMapping: ACESFilmicToneMapping,
+                toneMappingExposure: 1.2,
+                alpha: true,
+                preserveDrawingBuffer: true
+            },
+            style: {
+                width: `${size.width}px`,
+                height: `${size.height}px`
+            },
+            children: /*#__PURE__*/ jsxs(Suspense, {
+                fallback: null,
+                children: [
+                    /*#__PURE__*/ jsx(CanvasCaptureBridge, {
+                        ref: captureRef
+                    }),
+                    /*#__PURE__*/ jsx(Environment, {
+                        files: 'poster' === type ? [
+                            HDR_URL
+                        ] : void 0,
+                        preset: 'carpet' === type ? 'warehouse' : void 0
+                    }),
+                    /*#__PURE__*/ jsx(Room, {})
+                ]
+            })
+        })
+    });
+}
+function Scene({ className, ...props }) {
+    const { containerRef, isDragging, angle, rotation, setAngle, setRotation, type } = useRoomViewer();
+    const { t } = useTranslation();
+    const transformComponentRef = useRef(null);
+    const canvasCaptureRef = useRef(null);
+    const [isSharing, setIsSharing] = useState(false);
+    const isMobile = useMediaQuery('(max-width: 639px)');
+    const isTabletUp = useMediaQuery('(min-width: 768px)');
+    const showPositionPopover = 'poster' === type || 'carpet' === type && !isTabletUp;
+    const canUseNativeShare = external_react_useMemo(()=>'undefined' != typeof navigator && 'function' == typeof navigator.share, []);
+    const handleCanvasSizeChange = useCallback(()=>{
+        if (isMobile) transformComponentRef.current?.centerView();
+    }, [
+        isMobile
+    ]);
+    const handleShare = useCallback(async ()=>{
+        if (!canUseNativeShare) return;
+        const url = window.location.href;
+        const shareMessage = t('poster' === type ? 'shareMessage.poster' : 'shareMessage.carpet');
+        const text = `${shareMessage}\n${url}`;
+        setIsSharing(true);
+        try {
+            const capture = canvasCaptureRef.current;
+            if (capture) try {
+                const blob = await capture.capture();
+                const file = new File([
+                    blob
+                ], 'room-scene.png', {
+                    type: blob.type || 'image/png'
+                });
+                if (navigator.canShare?.({
+                    files: [
+                        file
+                    ]
+                })) return void await navigator.share({
+                    text,
+                    files: [
+                        file
+                    ]
+                });
+            } catch (error) {
+                console.error('Failed to generate scene screenshot for sharing', error);
+            }
+            await navigator.share({
+                text,
+                url
+            });
+        } catch (error) {
+            if (!(error instanceof DOMException && 'AbortError' === error.name)) console.error('Failed to share scene', error);
+        } finally{
+            setIsSharing(false);
+        }
+    }, [
+        canUseNativeShare,
+        t,
+        type
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: utils_cn('relative flex items-center justify-center overflow-hidden', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(TransformWrapper, {
+                ref: transformComponentRef,
+                disabled: isDragging,
+                children: /*#__PURE__*/ jsx(TransformComponent, {
+                    wrapperClass: "size-full!",
+                    contentClass: "h-full! min-w-full sm:max-w-full",
+                    children: /*#__PURE__*/ jsx(CanvasWrapper, {
+                        captureRef: canvasCaptureRef,
+                        onSizeChange: handleCanvasSizeChange
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(AR, {
+                className: "absolute bottom-4 left-4 sm:bottom-6 sm:left-6"
+            }),
+            'carpet' === type && /*#__PURE__*/ jsxs("div", {
+                className: "bg-button-dark typo-button-normal absolute bottom-6 left-1/2 hidden h-9 -translate-x-1/2 items-center gap-1.5 rounded-lg px-3.75 text-text-white md:inline-flex",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "shrink-0",
+                        children: t('scene.position')
+                    }),
+                    /*#__PURE__*/ jsx(slider_Slider, {
+                        value: [
+                            rotation
+                        ],
+                        onValueChange: ([value])=>setRotation(value ?? 0),
+                        min: -180,
+                        max: 180,
+                        step: 1,
+                        className: "w-29.5 **:data-[slot=slider-range]:bg-transparent **:data-[slot=slider-thumb]:border-background-base-3 **:data-[slot=slider-thumb]]:bg-background-base-3 **:data-[slot=slider-track]:bg-icons-normal",
+                        "aria-label": t('scene.position')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "absolute right-4 bottom-4 inline-flex items-center gap-2 sm:right-6 sm:bottom-6",
+                children: [
+                    showPositionPopover && /*#__PURE__*/ jsxs(popover_Popover, {
+                        children: [
+                            /*#__PURE__*/ jsx(PopoverTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(button_Button, {
+                                    variant: "contrast",
+                                    size: isMobile ? 'icon' : 'default',
+                                    children: [
+                                        /*#__PURE__*/ jsx(Move, {
+                                            className: "size-5"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "sr-only sm:not-sr-only",
+                                            children: t('scene.tunePosition')
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(PopoverContent, {
+                                className: "px-3 py-3.5 bg-button-dark border-button-dark text-text-white",
+                                side: "top",
+                                align: "end",
+                                portalContainer: containerRef,
+                                children: /*#__PURE__*/ jsxs(FieldGroup, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(Field, {
+                                            orientation: "horizontal",
+                                            children: [
+                                                /*#__PURE__*/ jsx(FieldTitle, {
+                                                    children: t('scene.rotation')
+                                                }),
+                                                /*#__PURE__*/ jsx(slider_Slider, {
+                                                    value: [
+                                                        rotation
+                                                    ],
+                                                    onValueChange: ([value])=>setRotation(value ?? 0),
+                                                    min: -180,
+                                                    max: 180,
+                                                    step: 1,
+                                                    className: "w-40.5 **:data-[slot=slider-range]:bg-transparent **:data-[slot=slider-thumb]:border-background-base-3 **:data-[slot=slider-thumb]]:bg-background-base-3 **:data-[slot=slider-track]:bg-icons-normal",
+                                                    "aria-label": t('scene.rotation')
+                                                })
+                                            ]
+                                        }),
+                                        'poster' === type && /*#__PURE__*/ jsxs(Field, {
+                                            orientation: "horizontal",
+                                            children: [
+                                                /*#__PURE__*/ jsx(FieldTitle, {
+                                                    children: t('scene.angle')
+                                                }),
+                                                /*#__PURE__*/ jsx(slider_Slider, {
+                                                    value: [
+                                                        angle
+                                                    ],
+                                                    onValueChange: ([value])=>setAngle(value ?? 0),
+                                                    max: 75,
+                                                    min: -75,
+                                                    step: 1,
+                                                    className: "w-40.5 **:data-[slot=slider-range]:bg-transparent **:data-[slot=slider-thumb]:border-background-base-3 **:data-[slot=slider-thumb]]:bg-background-base-3 **:data-[slot=slider-track]:bg-icons-normal",
+                                                    "aria-label": t('scene.angle')
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    'poster' === type && /*#__PURE__*/ jsxs(button_Button, {
+                        variant: "contrast",
+                        size: isMobile ? 'icon' : 'default',
+                        disabled: !canUseNativeShare || isSharing,
+                        onClick: handleShare,
+                        children: [
+                            /*#__PURE__*/ jsx(Share, {
+                                className: "size-5"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "sr-only sm:not-sr-only",
+                                children: t('scene.share')
+                            })
+                        ]
+                    }),
+                    isMobile && 'poster' === type && /*#__PURE__*/ jsxs(popover_Popover, {
+                        children: [
+                            /*#__PURE__*/ jsx(PopoverTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx(button_Button, {
+                                    variant: "contrast",
+                                    size: "icon",
+                                    children: /*#__PURE__*/ jsx(Paint, {})
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(PopoverContent, {
+                                className: "grid gap-5",
+                                portalContainer: containerRef,
+                                children: [
+                                    /*#__PURE__*/ jsx(MaterialSelectField, {}),
+                                    /*#__PURE__*/ jsx(MattingField, {})
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RoomViewerContainer() {
+    const { setContainerRef, sceneLoad } = useRoomViewer();
+    const isSceneLoading = !Object.values(sceneLoad).every(Boolean);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: setContainerRef,
+        className: "relative size-full bg-radial from-background-containers to-background-base-2 text-foreground overflow-hidden",
+        children: [
+            /*#__PURE__*/ jsx(Header, {
+                className: "absolute top-0 right-0 left-0 z-15"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "size-full max-w-full grid grid-rows-[1fr_auto]",
+                children: [
+                    /*#__PURE__*/ jsx(Scene, {
+                        className: "size-full min-h-0"
+                    }),
+                    /*#__PURE__*/ jsx(Footer, {
+                        className: "bg-background"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "aria-hidden": !isSceneLoading,
+                className: utils_cn('absolute inset-0 z-10 flex items-center justify-center bg-radial from-background-containers to-background-base-2 transition-opacity', isSceneLoading ? 'opacity-100 pointer-events-auto duration-0' : 'opacity-0 pointer-events-none duration-250ms'),
+                children: /*#__PURE__*/ jsx(Spinner, {
+                    variant: "logo"
+                })
+            })
+        ]
+    });
+}
+const root_queryClient = new QueryClient();
+function RoomViewerRoot({ type, src, tinuuid, name, height, width, language }) {
+    const { i18n } = useTranslation();
+    useEffect(()=>{
+        if ('string' == typeof language) i18n.changeLanguage(language);
+    }, [
+        i18n,
+        language
+    ]);
+    return /*#__PURE__*/ jsx(QueryClientProvider, {
+        client: root_queryClient,
+        children: /*#__PURE__*/ jsx(RoomViewerProvider, {
+            src: src ?? null,
+            tinuuid: tinuuid ?? null,
+            type: type,
+            name: name,
+            width: 'poster' === type ? width ?? 0 : 0,
+            height: 'poster' === type ? height ?? 0 : 0,
+            children: /*#__PURE__*/ jsx(RoomViewerContainer, {})
+        })
+    });
+}
+const ns1 = {
+    matting: 'Matting',
+    material: 'Material',
+    chooseMaterial: 'Choose material',
+    frameWidth: 'Frame width',
+    close: 'Close',
+    uploadOwnPhoto: 'Upload your photo',
+    previousSlide: 'Previous slide',
+    nextSlide: 'Next slide',
+    mattingOptions: {
+        none: 'None'
+    },
+    units: {
+        cm: 'cm'
+    },
+    poweredBy: 'Powered by Vizbl',
+    ar: {
+        viewInPlace: 'View in place',
+        scanQrCode: 'Scan this QR code with your phone\'s camera to view the object in Augmented Reality'
+    },
+    shareMessage: {
+        poster: 'Preview poster',
+        carpet: 'Preview carpet'
+    },
+    rooms: {
+        'room-example-1': 'Living room',
+        'room-example-2': 'Bedroom',
+        'room-example-3': 'Kitchen',
+        'room-example-4': 'Hallway',
+        'room-example-5': 'Dining room',
+        'room-example-6': 'Office'
+    },
+    scene: {
+        tunePosition: 'Tune position',
+        position: 'Position',
+        share: 'Share',
+        angle: 'Angle',
+        rotation: 'Rotation',
+        reset: 'Reset'
+    }
+};
+const en_ns1 = ns1;
+const ns1_ns1 = {
+    matting: 'Паспарту',
+    material: 'Материал',
+    chooseMaterial: 'Выберите материал',
+    frameWidth: 'Ширина рамки',
+    close: 'Закрыть',
+    uploadOwnPhoto: 'Загрузить свое фото',
+    previousSlide: 'Предыдущий слайд',
+    nextSlide: 'Следующий слайд',
+    mattingOptions: {
+        none: 'Нет'
+    },
+    units: {
+        cm: 'см'
+    },
+    poweredBy: 'Технологии Аризо',
+    ar: {
+        viewInPlace: 'Просмотреть на месте',
+        scanQrCode: 'Отсканируйте этот QR-код камерой телефона, чтобы просмотреть объект в дополненной реальности'
+    },
+    shareMessage: {
+        poster: 'Примерить постер',
+        carpet: 'Примерить ковер'
+    },
+    rooms: {
+        'room-example-1': 'Гостиная',
+        'room-example-2': 'Спальня',
+        'room-example-3': 'Кухня',
+        'room-example-4': 'Прихожая',
+        'room-example-5': 'Столовая',
+        'room-example-6': 'Кабинет'
+    },
+    scene: {
+        tunePosition: 'Настроить положение',
+        position: 'Положение',
+        share: 'Поделиться',
+        angle: 'Угол',
+        rotation: 'Поворот',
+        reset: 'Сбросить'
+    }
+};
+const ru_ns1 = ns1_ns1;
+const resources = {
+    en: {
+        translation: en_ns1
+    },
+    ru: {
+        translation: ru_ns1
+    }
+};
+i18next.use(i18next_browser_languagedetector).use(initReactI18next).init({
+    debug: false,
+    detection: {
+        caches: []
+    },
+    fallbackLng: 'en',
+    resources,
+    interpolation: {
+        escapeValue: false
+    }
+});
+function RoomViewerDialog({ type, src, tinuuid, width, height, name, language, ...props }) {
+    const [container, setContainer] = useState(null);
+    const { t } = useTranslation();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            container && /*#__PURE__*/ jsx(ThemeProvider, {
+                root: container,
+                children: /*#__PURE__*/ jsx(Dialog, {
+                    ...props,
+                    children: /*#__PURE__*/ jsxs(DialogContent, {
+                        className: "min-w-full h-svh p-0 rounded-none sm:p-0",
+                        portalContainer: container,
+                        showCloseButton: false,
+                        onInteractOutside: (e)=>{
+                            e.preventDefault();
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxs(DialogHeader, {
+                                className: "sr-only",
+                                children: [
+                                    /*#__PURE__*/ jsx(DialogTitle, {
+                                        children: name
+                                    }),
+                                    /*#__PURE__*/ jsx(DialogDescription, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DialogClose, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(button_Button, {
+                                    className: "absolute top-3 right-6 z-20",
+                                    variant: "secondary",
+                                    children: [
+                                        t('close'),
+                                        /*#__PURE__*/ jsx(XIcon, {})
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(RoomViewerRoot, {
+                                type: type,
+                                src: src,
+                                tinuuid: tinuuid,
+                                name: name,
+                                height: height,
+                                width: width,
+                                language: language
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+                className: "vizbl-room-viewer",
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: setContainer
+                })
+            }), document.body)
+        ]
+    });
+}
+function RoomViewer({ type, src, tinuuid, name, language, width, height, className, ...props }) {
+    const [container, setContainer] = useState(null);
+    return /*#__PURE__*/ jsx("div", {
+        ref: setContainer,
+        className: utils_cn('vizbl-room-viewer', className),
+        style: {
+            height: '100%',
+            width: '100%'
+        },
+        ...props,
+        children: container && /*#__PURE__*/ jsx(ThemeProvider, {
+            root: container,
+            children: /*#__PURE__*/ jsx(RoomViewerRoot, {
+                type: type,
+                src: src,
+                tinuuid: tinuuid,
+                name: name,
+                language: language,
+                width: width,
+                height: height
+            })
+        })
+    });
+}
+export { RoomViewer, RoomViewerDialog };