@neurodyn/react-model-viewer 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, memo, use as external_react_use, useCallback, useEffect, useMemo as external_react_useMemo, useState } from "react";
+import { createContext, memo, use as external_react_use, useCallback, useEffect, useMemo as external_react_useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import react_shadow from "react-shadow";
 import { QueryClient, QueryClientProvider, useQuery as react_query_useQuery } from "@tanstack/react-query";
@@ -113,6 +113,7 @@ var __webpack_modules__ = {
   --color-white: #fff;
   --spacing: 4px;
   --container-xs: 320px;
+  --container-lg: 512px;
   --text-xs: 12px;
   --text-sm: 14px;
   --text-base: 16px;
@@ -648,6 +649,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-top: calc(var(--spacing) * 1.5);
 }
 
+.mt-4 {
+  margin-top: calc(var(--spacing) * 4);
+}
+
 .mt-6 {
   margin-top: calc(var(--spacing) * 6);
 }
@@ -711,6 +716,22 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   display: inline-flex;
 }
 
+.table {
+  display: table;
+}
+
+.table-caption {
+  display: table-caption;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
+.table-row {
+  display: table-row;
+}
+
 .field-sizing-content {
   field-sizing: content;
 }
@@ -898,6 +919,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: auto;
 }
 
+.h-dvh {
+  height: 100dvh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -906,10 +931,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: 1px;
 }
 
-.h-svh {
-  height: 100svh;
-}
-
 .max-h-\\(--radix-select-content-available-height\\) {
   max-height: var(--radix-select-content-available-height);
 }
@@ -926,6 +947,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   min-height: 1px;
 }
 
+.w-0\\.5 {
+  width: calc(var(--spacing) * .5);
+}
+
 .w-2 {
   width: calc(var(--spacing) * 2);
 }
@@ -938,6 +963,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   width: calc(var(--spacing) * 9);
 }
 
+.w-10 {
+  width: calc(var(--spacing) * 10);
+}
+
 .w-11 {
   width: calc(var(--spacing) * 11);
 }
@@ -1062,6 +1091,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   flex-basis: 100%;
 }
 
+.caption-bottom {
+  caption-side: bottom;
+}
+
 .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
@@ -1136,6 +1169,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   cursor: default;
 }
 
+.cursor-grab {
+  cursor: grab;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1184,6 +1221,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1379,6 +1420,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-width: 2px;
 }
 
+.border-t {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+}
+
+.border-b {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+}
+
 .border-l-0 {
   border-left-style: var(--tw-border-style);
   border-left-width: 0;
@@ -1557,7 +1608,15 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   background-color: var(--color-lime-400);
 }
 
-.bg-muted, .bg-muted\\/50 {
+.bg-muted {
+  background-color: var(--muted);
+}
+
+.bg-muted-foreground {
+  background-color: var(--muted-foreground);
+}
+
+.bg-muted\\/50 {
   background-color: var(--muted);
 }
 
@@ -1680,6 +1739,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-inline: calc(var(--spacing) * 0);
 }
 
+.px-0\\.5 {
+  padding-inline: calc(var(--spacing) * .5);
+}
+
 .px-1\\.5 {
   padding-inline: calc(var(--spacing) * 1.5);
 }
@@ -1812,6 +1875,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   text-align: left;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .font-mono {
   font-family: var(--font-mono);
 }
@@ -1962,6 +2029,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   font-weight: var(--font-weight-normal);
 }
 
+.font-semibold {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+}
+
 .tracking-\\[-0\\.02em\\] {
   --tw-tracking: -.02em;
   letter-spacing: -.02em;
@@ -2730,10 +2802,20 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   position: absolute;
 }
 
+.first\\:rounded-l-md:first-child {
+  border-top-left-radius: calc(var(--radius)  - 2px);
+  border-bottom-left-radius: calc(var(--radius)  - 2px);
+}
+
 .last\\:mt-0:last-child {
   margin-top: calc(var(--spacing) * 0);
 }
 
+.last\\:rounded-r-md:last-child {
+  border-top-right-radius: calc(var(--radius)  - 2px);
+  border-bottom-right-radius: calc(var(--radius)  - 2px);
+}
+
 .focus-within\\:border-border-dark:focus-within {
   border-color: var(--v-borders-dark);
 }
@@ -2794,10 +2876,16 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
     }
   }
 
-  .hover\\:bg-muted:hover {
+  .hover\\:bg-muted:hover, .hover\\:bg-muted\\/50:hover {
     background-color: var(--muted);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .hover\\:bg-muted\\/50:hover {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+
   .hover\\:bg-primary--hover:hover {
     background-color: var(--contrast--hover);
   }
@@ -2859,6 +2947,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+.focus\\:z-10:focus {
+  z-index: 10;
+}
+
 .focus\\:border-border-dark:focus {
   border-color: var(--v-borders-dark);
 }
@@ -2978,6 +3070,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   outline-style: none;
 }
 
+.active\\:cursor-grabbing:active {
+  cursor: grabbing;
+}
+
 .active\\:rounded-lg:active {
   border-radius: var(--radius);
 }
@@ -3769,6 +3865,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --tw-enter-scale: .95;
 }
 
+.data-\\[state\\=selected\\]\\:bg-muted[data-state="selected"] {
+  background-color: var(--muted);
+}
+
 .data-\\[state\\=unchecked\\]\\:translate-x-0[data-state="unchecked"] {
   --tw-translate-x: calc(var(--spacing) * 0);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3828,6 +3928,21 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   line-height: var(--tw-leading, 1.5);
 }
 
+.data-\\[variant\\=outline\\]\\:border-l-0[data-variant="outline"] {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 0;
+}
+
+.data-\\[variant\\=outline\\]\\:shadow-xs[data-variant="outline"] {
+  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.data-\\[variant\\=outline\\]\\:first\\:border-l[data-variant="outline"]:first-child {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
+
 .nth-last-2\\:-mt-1:nth-last-child(2) {
   margin-top: calc(var(--spacing) * -1);
 }
@@ -3851,10 +3966,22 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
     max-width: calc(var(--spacing) * 120);
   }
 
+  .sm\\:max-w-lg {
+    max-width: var(--container-lg);
+  }
+
   .sm\\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\\:justify-end {
+    justify-content: flex-end;
+  }
+
   .sm\\:p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -3862,6 +3989,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   .sm\\:p-10 {
     padding: calc(var(--spacing) * 10);
   }
+
+  .sm\\:text-left {
+    text-align: left;
+  }
 }
 
 @media (width >= 768px) {
@@ -4099,34 +4230,44 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
-.\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-4 svg:not([class*="'size-'"]) {
+.\\[\\&_svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-4 svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
 
-.\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-6 svg:not([class*="'size-'"]), .group-data-\\[size\\=default\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-6:is(:where(.group\\/input-group)[data-size="default"] *) svg:not([class*="'size-'"]) {
+.\\[\\&_svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-6 svg:not([class*="size-"]), .group-data-\\[size\\=default\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-6:is(:where(.group\\/input-group)[data-size="default"] *) svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 6);
   height: calc(var(--spacing) * 6);
 }
 
-.group-data-\\[size\\=md\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-4:is(:where(.group\\/input-group)[data-size="md"] *) svg:not([class*="'size-'"]) {
+.group-data-\\[size\\=md\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-4:is(:where(.group\\/input-group)[data-size="md"] *) svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
 
-.group-data-\\[size\\=sm\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-3:is(:where(.group\\/input-group)[data-size="sm"] *) svg:not([class*="'size-'"]) {
+.group-data-\\[size\\=sm\\]\\/input-group\\:\\[\\&_svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-3:is(:where(.group\\/input-group)[data-size="sm"] *) svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 3);
   height: calc(var(--spacing) * 3);
 }
 
-.\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'text-\\\\\\'\\]\\)\\]\\:text-muted-foreground svg:not([class*="'text-'"]) {
+.\\[\\&_svg\\:not\\(\\[class\\*\\=text-\\]\\)\\]\\:text-muted-foreground svg:not([class*="text-"]) {
   color: var(--muted-foreground);
 }
 
-.\\[\\&_svg\\:not\\(\\[class\\*\\=\\\\\\'text-\\\\\\'\\]\\)\\]\\:text-text-dark svg:not([class*="'text-'"]) {
+.\\[\\&_svg\\:not\\(\\[class\\*\\=text-\\]\\)\\]\\:text-text-dark svg:not([class*="text-"]) {
   color: var(--v-text-dark);
 }
 
+.\\[\\&_tr\\]\\:border-b tr {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+}
+
+.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {
+  border-style: var(--tw-border-style);
+  border-width: 0;
+}
+
 .\\[\\&\\+\\[data-slot\\=item-content\\]\\]\\:flex-none + [data-slot="item-content"] {
   flex: none;
 }
@@ -4147,6 +4288,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   appearance: none;
 }
 
+.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role="checkbox"]) {
+  padding-right: calc(var(--spacing) * 0);
+}
+
 .\\[\\.border-b\\]\\:pb-2\\.5.border-b {
   padding-bottom: calc(var(--spacing) * 2.5);
 }
@@ -4225,6 +4370,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   }
 }
 
+.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role="checkbox"] {
+  --tw-translate-y: 2px;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 .has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has( > [data-slot="field-content"]) > [role="checkbox"], .has-\\[\\>\\[data-slot\\=field-content\\]\\]\\:\\[\\&\\>\\[role\\=checkbox\\]\\,\\[role\\=radio\\]\\]\\:mt-px:has( > [data-slot="field-content"]) [role="radio"] {
   margin-top: 1px;
 }
@@ -4263,26 +4413,31 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-left: calc(var(--spacing) * 2);
 }
 
-.\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-3\\.5 > svg:not([class*="'size-'"]) {
+.\\[\\&\\>svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-3\\.5 > svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 3.5);
   height: calc(var(--spacing) * 3.5);
 }
 
-.group-data-\\[size\\=default\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-6:is(:where(.group\\/input-group)[data-size="default"] *) > svg:not([class*="'size-'"]) {
+.group-data-\\[size\\=default\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-6:is(:where(.group\\/input-group)[data-size="default"] *) > svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 6);
   height: calc(var(--spacing) * 6);
 }
 
-.group-data-\\[size\\=md\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-4:is(:where(.group\\/input-group)[data-size="md"] *) > svg:not([class*="'size-'"]) {
+.group-data-\\[size\\=md\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-4:is(:where(.group\\/input-group)[data-size="md"] *) > svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
 
-.group-data-\\[size\\=sm\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\\\\\'size-\\\\\\'\\]\\)\\]\\:size-3:is(:where(.group\\/input-group)[data-size="sm"] *) > svg:not([class*="'size-'"]) {
+.group-data-\\[size\\=sm\\]\\/input-group\\:\\[\\&\\>svg\\:not\\(\\[class\\*\\=size-\\]\\)\\]\\:size-3:is(:where(.group\\/input-group)[data-size="sm"] *) > svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 3);
   height: calc(var(--spacing) * 3);
 }
 
+.\\[\\&\\>tr\\]\\:last\\:border-b-0 > tr:last-child {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 0;
+}
+
 .\\[\\&\\[aria-orientation\\=horizontal\\]\\>div\\]\\:rotate-90[aria-orientation="horizontal"] > div {
   rotate: 90deg;
 }
@@ -4700,9 +4855,13 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --v-backgrounds-base: #f5f5f7;
   --v-backgrounds-base-2: #e9e9f0;
   --v-backgrounds-base-3: #dadae0;
+  --v-backgrounds-gray-transparent: #8c8c9533;
   --v-backgrounds-red: #e2491a;
+  --v-backgrounds-red-transparent: #fb783b33;
   --v-backgrounds-green: #85c13d;
+  --v-backgrounds-green-transparent: #85d52433;
   --v-backgrounds-blue: #3f73ed;
+  --v-backgrounds-blue-transparent: #3291fe33;
   --v-borders-white: #fff;
   --v-borders-black: #212124;
   --v-borders-light: #dadae0;
@@ -4797,6 +4956,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   --v-font-family: "__tw4_shd_inter_7x4q2", sans-serif;
   font-family: var(--v-font-family);
   font-feature-settings: "liga" 1, "calt" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   --radius: 10px;
   --background: var(--v-backgrounds-layout);
   --foreground: var(--v-text-dark);
@@ -5563,25 +5724,35 @@ function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'v-them
 }
 var fontsinline = __webpack_require__("../ui/src/styles/fonts.css?inline");
 const PROPERTY_BLOCK_RE = /@property\s+(--[^{\s]+)\s*\{([^}]*)\}/g;
-const INITIAL_VALUE_RE = /initial-value:([^;\n]+);/i;
+const INITIAL_VALUE_RE = /initial-value:([^;}]+)/i;
+const NON_INHERITING_RE = /inherits:\s*false(?:\s*;|\s*$)/i;
 const ROOT_TO_HOST_SELECTOR_RE = /:root\s*,\s*:host|:root/g;
 function createShadowRootCssText(cssText) {
     const cssForHost = cssText.replace(ROOT_TO_HOST_SELECTOR_RE, ':host');
     const propertyBlocks = Array.from(cssText.matchAll(PROPERTY_BLOCK_RE));
     const propertyDefaults = propertyBlocks.map(([, name, body])=>{
-        const match = body.match(INITIAL_VALUE_RE);
-        if (!match) return null;
-        const initialValue = match[1].trim();
-        return `  ${name}: ${initialValue};`;
+        if (!NON_INHERITING_RE.test(body)) return null;
+        const initialValue = body.match(INITIAL_VALUE_RE)?.[1].trim() ?? 'initial';
+        return `    ${name}: ${initialValue};`;
     }).filter((value)=>null !== value).join('\n');
-    return propertyDefaults ? `:host {\n${propertyDefaults}\n}\n\n${cssForHost}` : cssForHost;
+    if (!propertyDefaults) return cssForHost;
+    return `${cssForHost}\n\n@layer base {
+  :host,
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+${propertyDefaults}
+  }
+}`;
 }
 var styleinline = __webpack_require__("./src/style.css?inline");
 const shadowRootCssText = createShadowRootCssText(styleinline.A);
 function utils_cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-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', {
+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',
@@ -5868,35 +6039,40 @@ function DialogOverlay({ className, ...props }) {
         ...props
     });
 }
-function DialogContent({ className, children, showCloseButton = true, portalContainer, ...props }) {
-    return /*#__PURE__*/ jsxs(DialogPortal, {
-        "data-slot": "dialog-portal",
-        container: portalContainer,
+function DialogContent({ className, children, contentInsideOverlay = false, showCloseButton = true, portalContainer, ...props }) {
+    const content = /*#__PURE__*/ jsxs(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: [
-            /*#__PURE__*/ jsx(DialogOverlay, {}),
-            /*#__PURE__*/ jsxs(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,
+            showCloseButton && /*#__PURE__*/ jsxs(react_dialog_Close, {
+                "data-slot": "dialog-close",
+                className: "focus-visible:ring-ring/30 absolute top-4 right-4 inline-flex size-6 cursor-pointer 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: [
-                    children,
-                    showCloseButton && /*#__PURE__*/ jsxs(react_dialog_Close, {
-                        "data-slot": "dialog-close",
-                        className: "focus-visible:ring-ring/30 absolute top-4 right-4 inline-flex size-6 cursor-pointer 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"
-                            })
-                        ]
+                    /*#__PURE__*/ jsx(XIcon, {
+                        className: "size-6"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        children: "Close"
                     })
                 ]
             })
         ]
     });
+    return /*#__PURE__*/ jsx(DialogPortal, {
+        "data-slot": "dialog-portal",
+        container: portalContainer,
+        children: contentInsideOverlay ? /*#__PURE__*/ jsx(DialogOverlay, {
+            children: content
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(DialogOverlay, {}),
+                content
+            ]
+        })
+    });
 }
 const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;
 function getOklch(color, fallback) {
@@ -5968,6 +6144,7 @@ function QRCode({ data, foreground, background, robustness = 'M', className, ...
     });
 }
 const MODEL_VIEWER_URL = "https://integrations.vizbl.com/model-viewer";
+const AR_DEVICE_REQUIREMENTS_DISCLAIMER = '*Requires AR-supported device and browser. We recommend iOS 12 or later with Safari, or Android 7.0 or later with Chrome.';
 const DEFAULT_API_TIMEOUT = 30000;
 function createDefaultClient(defaultBaseURL) {
     return axios.create({
@@ -6308,7 +6485,7 @@ const runtime = createApiClientRuntime({
     configureFunctionName: 'configureNodeApiClient',
     defaultBaseURL: "https://api.vizbl.com"
 });
-const configureNodeApiClientRuntime = runtime.configureClientRuntime;
+runtime.configureClientRuntime;
 runtime.configureAccessTokenResolverRuntime;
 runtime.configureHeadersResolverRuntime;
 runtime.configureUnauthorizedHandlerRuntime;
@@ -6318,13 +6495,31 @@ runtime.resetClientForTestsRuntime;
 const requestNodeRuntime = runtime.requestRuntime;
 runtime.requestWithoutUnauthorizedRecovery;
 runtime.addResponseInterceptorRuntime;
-function configureNodeApiClient(config) {
-    configureNodeApiClientRuntime(config);
-}
 async function node_client_node_client(config) {
     return requestNodeRuntime(config);
 }
-async function publicApiControllerGetObjectByTinuuid({ tinuuid }, params, config = {}) {
+async function publicApiControllerActivateCoreAR(params, config = {}) {
+    const { client: request = node_client_node_client, ...requestConfig } = config;
+    const res = await request({
+        method: "POST",
+        url: "/public/widget/activate-core",
+        params,
+        ...requestConfig
+    });
+    return res.data;
+}
+async function publicApiControllerIssueWidgetToken(data, config = {}) {
+    const { client: request = node_client_node_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/public/widget/token",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
+async function publicApiControllerReadObjectByTinuuid({ tinuuid }, params, config = {}) {
     const { client: request = node_client_node_client, ...requestConfig } = config;
     const res = await request({
         method: "GET",
@@ -6334,33 +6529,227 @@ async function publicApiControllerGetObjectByTinuuid({ tinuuid }, params, config
     });
     return res.data;
 }
+const WIDGET_SESSION_TOKEN_HEADER = 'x-widget-session-token';
+const DEFAULT_REFRESH_THRESHOLD_MS = 30000;
+const ALLOWED_PRODUCT_TYPES = new Set([
+    'core-ar',
+    'core-ar-shopify'
+]);
+class ModelViewerWidgetSession {
+    apiBaseUrl;
+    apiKey;
+    issueWidgetToken;
+    mode;
+    now;
+    refreshThresholdMs;
+    refreshPromise = null;
+    session;
+    constructor(activationData, options){
+        this.apiBaseUrl = options.apiBaseUrl;
+        this.apiKey = options.apiKey;
+        this.issueWidgetToken = options.issueWidgetToken ?? publicApiControllerIssueWidgetToken;
+        this.mode = options.mode;
+        this.now = options.now ?? Date.now;
+        this.refreshThresholdMs = options.refreshThresholdMs ?? DEFAULT_REFRESH_THRESHOLD_MS;
+        this.session = this.toSnapshot(activationData);
+    }
+    get token() {
+        return this.session.token;
+    }
+    get sid() {
+        return this.session.sid;
+    }
+    get snapshot() {
+        return {
+            ...this.session
+        };
+    }
+    async getTokenForRequest() {
+        if (this.session.expiresAt - this.now() > this.refreshThresholdMs) return this.session.token;
+        return (await this.refresh()).token;
+    }
+    async getRequestConfig(signal) {
+        return {
+            baseURL: this.apiBaseUrl,
+            headers: {
+                [WIDGET_SESSION_TOKEN_HEADER]: await this.getTokenForRequest()
+            },
+            signal
+        };
+    }
+    refresh() {
+        if (this.refreshPromise) return this.refreshPromise;
+        this.refreshPromise = this.issueWidgetToken({
+            mode: this.mode,
+            token: this.session.token
+        }, {
+            baseURL: this.apiBaseUrl,
+            headers: {
+                'x-api-key': this.apiKey
+            }
+        }).then((data)=>this.toSnapshot(parseWidgetSession(data))).then((session)=>{
+            this.session = session;
+            return this.snapshot;
+        }).finally(()=>{
+            this.refreshPromise = null;
+        });
+        return this.refreshPromise;
+    }
+    toSnapshot(data) {
+        return {
+            ...data,
+            expiresAt: this.now() + 1000 * data.expiresIn
+        };
+    }
+}
+async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidgetSessionToken, mode, signal }) {
+    const requestConfig = {
+        baseURL: apiBaseUrl,
+        headers: {
+            'x-api-key': apiKey
+        },
+        signal
+    };
+    if (initialWidgetSessionToken) try {
+        const refreshed = await publicApiControllerIssueWidgetToken({
+            mode,
+            token: initialWidgetSessionToken
+        }, requestConfig);
+        return new ModelViewerWidgetSession(parseWidgetSession(refreshed), {
+            apiBaseUrl,
+            apiKey,
+            mode
+        });
+    } catch (error) {
+        if (signal?.aborted) throw error;
+    }
+    const activation = await publicApiControllerActivateCoreAR({
+        mode
+    }, requestConfig);
+    if ('string' != typeof activation.productType || !ALLOWED_PRODUCT_TYPES.has(activation.productType)) throw new TypeError('The API key is not enabled for Core AR');
+    return new ModelViewerWidgetSession(parseWidgetSession(activation.widgetSession), {
+        apiBaseUrl,
+        apiKey,
+        mode
+    });
+}
+async function fetchModelViewerObject(tinuuid, variantId, session, signal) {
+    return publicApiControllerReadObjectByTinuuid({
+        tinuuid
+    }, {
+        productType: 'core-ar',
+        variantId: variantId ?? void 0
+    }, await session.getRequestConfig(signal));
+}
+async function sendModelViewerWidgetEvent(session, event, options = {}) {
+    if (!session) return;
+    try {
+        const config = await session.getRequestConfig();
+        const url = new URL('/public/widget/events', config.baseURL ?? window.location.origin);
+        const response = await fetch(url, {
+            body: JSON.stringify({
+                event,
+                objectId: options.objectId ?? void 0,
+                timestamp: new Date().toISOString(),
+                variantId: options.variantId ?? void 0
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+                ...config.headers
+            },
+            keepalive: true,
+            method: 'POST'
+        });
+        if (!response.ok) throw new Error(`Widget event request failed with ${response.status}`);
+    } catch  {}
+}
+function parseWidgetSession(value) {
+    const session = value;
+    if (!session || 'object' != typeof session || 'string' != typeof session.token || !session.token.trim() || 'string' != typeof session.sid || !session.sid.trim() || 'number' != typeof session.expiresIn || !Number.isFinite(session.expiresIn) || session.expiresIn <= 0) throw new TypeError('Invalid widget session response');
+    return session;
+}
+const client_runtime_runtime = createApiClientRuntime({
+    clientName: 'API client',
+    configureFunctionName: 'configureApiClient',
+    defaultBaseURL: "https://api.vizbl.com/v1"
+});
+client_runtime_runtime.configureClientRuntime;
+client_runtime_runtime.configureAccessTokenResolverRuntime;
+client_runtime_runtime.configureHeadersResolverRuntime;
+client_runtime_runtime.configureUnauthorizedHandlerRuntime;
+client_runtime_runtime.isClientConfiguredRuntime;
+client_runtime_runtime.assertClientConfiguredRuntime;
+client_runtime_runtime.resetClientForTestsRuntime;
+const client_runtime_requestRuntime = client_runtime_runtime.requestRuntime;
+client_runtime_runtime.requestWithoutUnauthorizedRecovery;
+client_runtime_runtime.addResponseInterceptorRuntime;
+async function client_client(config) {
+    return client_runtime_requestRuntime(config);
+}
+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;
+}
 function useObjectData(tinuuid, initialHid, options) {
     const [materialHid, setMaterialHid] = useState(initialHid ?? null);
     const { data = null, error, isLoading } = react_query_useQuery({
         queryKey: [
             'modelViewer',
             'object',
-            tinuuid,
-            options.apiKey
-        ],
-        enabled: Boolean(tinuuid) && options.apiKey.length > 0,
-        queryFn: ({ signal })=>publicApiControllerGetObjectByTinuuid({
+            {
+                apiBaseUrl: options.apiBaseUrl ?? null,
+                apiKey: options.apiKey,
+                initialHid: initialHid ?? null,
+                initialWidgetSessionToken: options.initialWidgetSessionToken ?? null,
+                legacyApiBaseUrl: options.legacyApiBaseUrl ?? null,
+                mode: options.mode,
                 tinuuid
-            }, {
-                productType: 'core-ar'
-            }, {
-                headers: {
-                    'x-api-key': options.apiKey
-                },
+            }
+        ],
+        enabled: Boolean(tinuuid),
+        gcTime: 0,
+        refetchOnMount: 'always',
+        queryFn: async ({ signal })=>{
+            if (!options.apiKey) {
+                const object = await objFetch({
+                    tinuuid
+                }, {
+                    baseURL: options.legacyApiBaseUrl,
+                    signal
+                });
+                return {
+                    object,
+                    widgetSession: null
+                };
+            }
+            const widgetSession = await createModelViewerWidgetSession({
+                apiBaseUrl: options.apiBaseUrl,
+                apiKey: options.apiKey,
+                initialWidgetSessionToken: options.initialWidgetSessionToken,
+                mode: options.mode,
                 signal
-            })
+            });
+            const object = await fetchModelViewerObject(tinuuid, initialHid, widgetSession, signal);
+            return {
+                object,
+                widgetSession
+            };
+        }
     });
+    const object = data?.object ?? null;
     const material = external_react_useMemo(()=>{
-        if (!data?.materials?.length) return null;
-        return materialHid ? data.materials.find((m)=>m.hid === materialHid) || data.materials[0] : data.materials?.[0] ?? null;
+        if (!object?.materials?.length) return null;
+        return materialHid ? object.materials.find((m)=>m.hid === materialHid) || object.materials[0] : object.materials?.[0] ?? null;
     }, [
-        data,
-        materialHid
+        materialHid,
+        object
     ]);
     useEffect(()=>{
         setMaterialHid(initialHid ?? null);
@@ -6369,11 +6758,12 @@ function useObjectData(tinuuid, initialHid, options) {
         tinuuid
     ]);
     return {
-        object: data,
+        object,
         material,
         error,
         isLoading,
-        setMaterialHid
+        setMaterialHid,
+        widgetSession: data?.widgetSession ?? null
     };
 }
 function getErrorResponseStatus(error) {
@@ -6384,36 +6774,82 @@ function getModelViewerApiError(error) {
     if (!isAxiosError(error)) return null;
     const status = error.response?.status;
     if (401 === status) return 'unauthorized';
+    if (403 === status) return 'forbidden';
     if (402 === status) return 'payment-required';
     return null;
 }
 const ModelViewerContext = /*#__PURE__*/ createContext(null);
-function ModelViewerProvider({ children, tinuuid, apiKey, hid, layout, background }) {
-    const { object, material, error, isLoading, setMaterialHid } = useObjectData(tinuuid, hid, {
-        apiKey
+function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, hid, launchAr, layout, background, sizeType, viewerSurface }) {
+    const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
+        apiBaseUrl,
+        apiKey,
+        initialWidgetSessionToken,
+        legacyApiBaseUrl,
+        mode
     });
     const [isModelLoading, setIsModelLoading] = useState(true);
     const [containerEl, setContainerEl] = useState(null);
     const [modelViewerEl, setModelViewerEl] = useState(null);
-    const hasNonEmptyApiKey = apiKey.length > 0;
+    const trackedCameraInteractionSidRef = useRef(null);
+    const trackedOpenSidRef = useRef(null);
     const glbUrl = material?.native?.glbUrl ?? null;
     const usdzUrl = material?.native?.usdzUrl ?? null;
     const previewUrl = material?.previews?.[0]?.url ?? null;
     const state = external_react_useMemo(()=>{
-        if (!hasNonEmptyApiKey) return 'unauthorized';
         if (isLoading) return 'loading';
         const accessError = getModelViewerApiError(error);
         if (accessError) return accessError;
+        const instantArExperience = 'ar-view' === mode || 'qr-code' === mode && 'standard' === arExperience;
+        const advancedArExperience = 'advanced-ar-view' === mode || 'qr-code' === mode && 'advanced' === arExperience;
+        if (instantArExperience && object?.policy?.instantArView === false) return 'forbidden';
+        if ((advancedArExperience || 'ar-viewer' === mode) && object?.policy?.appClip === false) return 'forbidden';
         if (null != error || !object || !material || !glbUrl) return 'not-found';
         return 'ready';
     }, [
+        arExperience,
         error,
         glbUrl,
-        hasNonEmptyApiKey,
         isLoading,
         material,
+        mode,
         object
     ]);
+    const trackEvent = useCallback((event)=>sendModelViewerWidgetEvent(widgetSession, event, {
+            objectId: object?.uuid,
+            variantId: material?.hid
+        }), [
+        material?.hid,
+        object?.uuid,
+        widgetSession
+    ]);
+    const setMaterialHid = useCallback((nextHid)=>{
+        if (nextHid === material?.hid) return;
+        setObjectMaterialHid(nextHid);
+        sendModelViewerWidgetEvent(widgetSession, 'interacted', {
+            objectId: object?.uuid,
+            variantId: nextHid
+        });
+    }, [
+        material?.hid,
+        object?.uuid,
+        setObjectMaterialHid,
+        widgetSession
+    ]);
+    useEffect(()=>{
+        if ('inline' === viewerSurface || 'ready' !== state || !widgetSession || trackedOpenSidRef.current === widgetSession.sid) return;
+        trackEvent('widget_opened');
+        trackedOpenSidRef.current = widgetSession.sid;
+    }, [
+        state,
+        trackEvent,
+        viewerSurface,
+        widgetSession
+    ]);
+    useEffect(()=>{
+        trackedCameraInteractionSidRef.current = null;
+    }, [
+        widgetSession?.sid
+    ]);
     useEffect(()=>{
         setIsModelLoading('ready' === state && Boolean(glbUrl));
     }, [
@@ -6433,49 +6869,77 @@ function ModelViewerProvider({ children, tinuuid, apiKey, hid, layout, backgroun
         const handleError = ()=>{
             setIsModelLoading(false);
         };
+        const handleCameraChange = (event)=>{
+            const source = event.detail?.source;
+            if ('user-interaction' !== source || !widgetSession || trackedCameraInteractionSidRef.current === widgetSession.sid) return;
+            trackEvent('interacted');
+            trackedCameraInteractionSidRef.current = widgetSession.sid;
+        };
         modelViewerEl.addEventListener('progress', handleProgress);
         modelViewerEl.addEventListener('load', handleLoad);
         modelViewerEl.addEventListener('error', handleError);
+        modelViewerEl.addEventListener('camera-change', handleCameraChange);
         return ()=>{
             modelViewerEl.removeEventListener('progress', handleProgress);
             modelViewerEl.removeEventListener('load', handleLoad);
             modelViewerEl.removeEventListener('error', handleError);
+            modelViewerEl.removeEventListener('camera-change', handleCameraChange);
         };
     }, [
-        modelViewerEl
+        modelViewerEl,
+        trackEvent,
+        widgetSession
     ]);
     const contextValue = external_react_useMemo(()=>({
+            apiKey,
+            appClipBundleId,
+            arExperience,
             tinuuid,
             object,
             material,
             glbUrl,
             usdzUrl,
             previewUrl,
+            handoffUrl,
+            launchAr,
             layout,
             background,
+            mode,
+            sizeType,
             isLoading,
             isModelLoading,
             state,
             modelViewerEl,
             containerEl,
+            widgetSession,
             setMaterialHid,
             setContainerEl,
-            setModelViewerEl
+            setModelViewerEl,
+            trackEvent
         }), [
+        apiKey,
+        appClipBundleId,
+        arExperience,
         tinuuid,
         object,
         material,
         glbUrl,
         usdzUrl,
         previewUrl,
+        handoffUrl,
+        launchAr,
         layout,
         background,
+        mode,
+        sizeType,
         isLoading,
         isModelLoading,
         state,
         modelViewerEl,
         containerEl,
-        setMaterialHid
+        widgetSession,
+        setMaterialHid,
+        trackEvent
     ]);
     return /*#__PURE__*/ jsx(ModelViewerContext, {
         value: contextValue,
@@ -6487,27 +6951,204 @@ function useModelViewer() {
     if (!context) throw new Error('useModelViewer must be used within a ModelViewerProvider');
     return context;
 }
+function getUserAgent() {
+    if ("u" < typeof navigator) return '';
+    return navigator.userAgent || navigator.vendor || '';
+}
+function isIOSDevice() {
+    if ("u" < typeof window || "u" < typeof navigator) return false;
+    const isIPadOS = 'MacIntel' === navigator.platform && navigator.maxTouchPoints > 1;
+    return (/iPad|iPhone|iPod/.test(getUserAgent()) || isIPadOS) && !('MSStream' in window);
+}
+function isMobileArDevice() {
+    if ("u" < typeof window || "u" < typeof navigator) return false;
+    const mobileUserAgent = /Android|iPhone|iPad|iPod|webOS|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(getUserAgent());
+    const coarsePointer = window.matchMedia?.('(pointer: coarse)').matches ?? false;
+    return navigator.maxTouchPoints > 1 && coarsePointer && (mobileUserAgent || isIOSDevice());
+}
+function isSupportedAppClipDevice() {
+    if (!isIOSDevice()) return false;
+    const versionText = getUserAgent().match(/\bOS (\d+)/)?.[1] ?? getUserAgent().match(/Version\/(\d+)/)?.[1];
+    if (!versionText) return false;
+    return Number.parseInt(versionText, 10) >= 17;
+}
+function buildAppClipUrl(bundleId, tinuuid, hostname, hid) {
+    const url = new URL('https://appclip.apple.com/id');
+    url.searchParams.set('p', bundleId);
+    url.searchParams.set('tinuuid', tinuuid);
+    if (hid) url.searchParams.set('hid', hid);
+    url.searchParams.set('region', hostname.endsWith('arizo.ru') ? 'ru' : 'en');
+    return url.toString();
+}
+function buildNativeArUrl(glbUrl, usdzUrl, objectType, ios = isIOSDevice()) {
+    if (ios) return `${new URL(usdzUrl).toString()}#allowsContentScaling=0`;
+    const verticalPlacement = 'wall' === objectType || 'ceiling' === objectType ? '&enable_vertical_placement=true' : '';
+    return `intent://arvr.google.com/scene-viewer/1.0?file=${encodeURIComponent(new URL(glbUrl).toString())}&resizable=false${verticalPlacement}&mode=ar_preferred#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;`;
+}
+function launchDirectAr(options) {
+    if ('advanced' === options.experience && isSupportedAppClipDevice()) return void window.location.assign(buildAppClipUrl(options.appClipBundleId, options.tinuuid, options.hostname, options.hid));
+    const link = document.createElement('a');
+    const image = document.createElement('img');
+    link.rel = 'ar';
+    link.href = buildNativeArUrl(options.glbUrl, options.usdzUrl, options.objectType);
+    link.hidden = true;
+    image.alt = '';
+    image.hidden = true;
+    link.appendChild(image);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+async function launchArOverride(launchAr, target) {
+    if (!launchAr || !target.tinuuid) return false;
+    try {
+        return await launchAr(target);
+    } catch  {
+        return false;
+    }
+}
+function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode, tinuuid, widgetSessionToken }) {
+    if (!baseUrl || !tinuuid) return null;
+    let url;
+    try {
+        url = new URL(baseUrl);
+    } catch  {
+        return null;
+    }
+    url.searchParams.set('tinuuid', tinuuid);
+    url.searchParams.set('mode', mode);
+    if (arExperience) url.searchParams.set('ar-experience', arExperience);
+    else url.searchParams.delete('ar-experience');
+    if (hid) url.searchParams.set('hid', hid);
+    else url.searchParams.delete('hid');
+    const fragment = new URLSearchParams(url.hash.slice(1));
+    if (apiKey) fragment.set('api-key', apiKey);
+    else fragment.delete('api-key');
+    if (widgetSessionToken) fragment.set('widget-session-token', widgetSessionToken);
+    else fragment.delete('widget-session-token');
+    url.hash = fragment.toString();
+    return url.toString();
+}
+const EVENT_FLUSH_TIMEOUT_MS = 300;
+async function flushWidgetEvent(eventRequest) {
+    await new Promise((resolve)=>{
+        const timeout = window.setTimeout(resolve, EVENT_FLUSH_TIMEOUT_MS);
+        eventRequest.finally(()=>{
+            window.clearTimeout(timeout);
+            resolve();
+        });
+    });
+}
 function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
-    const { containerEl, isLoading, isModelLoading, material, modelViewerEl, object, tinuuid } = useModelViewer();
+    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
+    const [handoffSession, setHandoffSession] = useState(null);
     const [open, setOpen] = useState(false);
+    const autoLaunchKeyRef = useRef(null);
+    const widgetSessionSid = widgetSession?.sid;
+    const widgetSessionToken = widgetSession?.token;
     const isDisabled = isLoading || isModelLoading || null === material;
-    const url = external_react_useMemo(()=>{
-        if (!MODEL_VIEWER_URL) return null;
-        const url = new URL(MODEL_VIEWER_URL);
-        url.searchParams.set('tinuuid', object?.tinuuid ?? tinuuid);
-        if (material?.hid) url.searchParams.set('hid', material.hid);
-        return url.toString();
-    }, [
+    const arTarget = external_react_useMemo(()=>({
+            hid: material?.hid,
+            tinuuid: object?.tinuuid ?? tinuuid
+        }), [
         material?.hid,
         object?.tinuuid,
         tinuuid
     ]);
+    const directArExperience = 'ar-view' === mode ? 'standard' : 'advanced-ar-view' === mode ? 'advanced' : 'qr-code' === mode ? arExperience : void 0;
+    const directArLaunchOptions = external_react_useMemo(()=>{
+        const native = material?.native;
+        if (!directArExperience || !object || !native?.glbUrl || !native.usdzUrl || "u" < typeof window) return null;
+        return {
+            appClipBundleId,
+            experience: directArExperience,
+            glbUrl: native.glbUrl,
+            hid: material?.hid,
+            hostname: window.location.hostname,
+            objectType: object.type,
+            tinuuid: object.tinuuid ?? tinuuid,
+            usdzUrl: native.usdzUrl
+        };
+    }, [
+        appClipBundleId,
+        directArExperience,
+        material?.hid,
+        material?.native,
+        object,
+        tinuuid
+    ]);
+    const url = external_react_useMemo(()=>buildModelViewerHandoffUrl({
+            apiKey,
+            arExperience,
+            baseUrl: handoffUrl || MODEL_VIEWER_URL,
+            hid: material?.hid,
+            mode,
+            tinuuid: object?.tinuuid ?? tinuuid,
+            widgetSessionToken: handoffSession && handoffSession.sid === widgetSessionSid ? handoffSession.token : widgetSessionToken
+        }), [
+        apiKey,
+        arExperience,
+        handoffSession,
+        handoffUrl,
+        material?.hid,
+        mode,
+        object?.tinuuid,
+        tinuuid,
+        widgetSessionSid,
+        widgetSessionToken
+    ]);
+    useEffect(()=>{
+        if (!directArLaunchOptions || isLoading || !isMobileArDevice()) return;
+        const launchKey = [
+            widgetSessionSid ?? 'legacy',
+            directArLaunchOptions.tinuuid,
+            material?.hid,
+            directArLaunchOptions.experience
+        ].join(':');
+        if (autoLaunchKeyRef.current === launchKey) return;
+        autoLaunchKeyRef.current = launchKey;
+        const timer = window.setTimeout(()=>{
+            (async ()=>{
+                if (autoLaunchKeyRef.current !== launchKey) return;
+                if (await launchArOverride(launchAr, arTarget)) return;
+                await flushWidgetEvent(trackEvent('ar_launched'));
+                if (autoLaunchKeyRef.current === launchKey) launchDirectAr(directArLaunchOptions);
+            })();
+        }, 0);
+        return ()=>{
+            window.clearTimeout(timer);
+            if (autoLaunchKeyRef.current === launchKey) autoLaunchKeyRef.current = null;
+        };
+    }, [
+        arTarget,
+        directArLaunchOptions,
+        isLoading,
+        launchAr,
+        material?.hid,
+        trackEvent,
+        widgetSessionSid
+    ]);
     const handleClick = async ()=>{
         if (!modelViewerEl || isDisabled) return;
-        if (modelViewerEl.canActivateAR) {
+        if (await launchArOverride(launchAr, arTarget)) return void onBeforeActivateAr?.();
+        if (directArLaunchOptions && isMobileArDevice()) {
             onBeforeActivateAr?.();
+            await flushWidgetEvent(trackEvent('ar_launched'));
+            launchDirectAr(directArLaunchOptions);
+        } else if (modelViewerEl.canActivateAR) {
+            onBeforeActivateAr?.();
+            await flushWidgetEvent(trackEvent('ar_launched'));
             await modelViewerEl.activateAR();
-        } else if (url) setOpen(true);
+        } else if (url) {
+            const activeSession = widgetSession;
+            const sessionToken = await activeSession?.getTokenForRequest().catch(()=>activeSession.token);
+            setHandoffSession(activeSession && sessionToken ? {
+                sid: activeSession.sid,
+                token: sessionToken
+            } : null);
+            trackEvent('interacted');
+            setOpen(true);
+        }
     };
     const handleButtonClick = async (event)=>{
         onClick?.(event);
@@ -6542,6 +7183,10 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                             className: "text-center text-lg font-medium text-text-sub",
                             children: "Scan the QR code with your phone or tablet to view the object in your interior."
                         }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-center text-xs text-text-light",
+                            children: AR_DEVICE_REQUIREMENTS_DISCLAIMER
+                        }),
                         /*#__PURE__*/ jsx(DialogClose, {
                             asChild: true,
                             children: /*#__PURE__*/ jsx(button_Button, {
@@ -6926,6 +7571,7 @@ function MaterialVariants() {
     });
 }
 const viewerErrorTitle = {
+    forbidden: 'Viewer unavailable for this domain',
     'not-found': 'Object not found',
     unauthorized: 'Invalid API key',
     'payment-required': 'Viewer temporarily unavailable'
@@ -6993,14 +7639,14 @@ function getHotspotConfig(slot) {
     if (!config) throw new Error(`Missing hotspot config for slot "${slot}"`);
     return config;
 }
-function createDimensionLabels(modelViewerEl) {
+function createDimensionLabels(modelViewerEl, sizeType) {
     const info = calculateBoundingBoxInfo(modelViewerEl);
     return DIMENSION_LABEL_CONFIGS.map(({ slot, sizeAxis, offsetMultiplier })=>{
         const hotspotConfig = getHotspotConfig(slot);
         return {
             name: slot,
             position: calculateDimensionLabelPosition(info, hotspotConfig, offsetMultiplier),
-            text: formatSize(info.size[sizeAxis], 'cm')
+            text: formatSize(info.size[sizeAxis], sizeType)
         };
     });
 }
@@ -7013,7 +7659,7 @@ function syncLabelHotspots(modelViewerEl, labels) {
     });
 }
 function useDimensions({ isVisible }) {
-    const { glbUrl, isModelLoading, modelViewerEl } = useModelViewer();
+    const { glbUrl, isModelLoading, modelViewerEl, sizeType } = useModelViewer();
     const [lines, setLines] = useState([]);
     const [labels, setLabels] = useState([]);
     const [hiddenHotspots, setHiddenHotspots] = useState(()=>new Set());
@@ -7030,7 +7676,7 @@ function useDimensions({ isVisible }) {
     ]);
     const calculateLabels = useCallback(()=>{
         if (!modelViewerEl) return [];
-        const dimensionLabels = createDimensionLabels(modelViewerEl);
+        const dimensionLabels = createDimensionLabels(modelViewerEl, sizeType);
         syncLabelHotspots(modelViewerEl, dimensionLabels);
         return dimensionLabels.map((label)=>({
                 slot: label.name,
@@ -7038,7 +7684,8 @@ function useDimensions({ isVisible }) {
                 position: label.position
             }));
     }, [
-        modelViewerEl
+        modelViewerEl,
+        sizeType
     ]);
     const updateLines = useCallback(()=>{
         if (!modelViewerEl) return;
@@ -7111,7 +7758,7 @@ function useDimensions({ isVisible }) {
     };
 }
 function ModelViewerContainer({ showDialogCloseButton = false }) {
-    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background } = useModelViewer();
+    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, trackEvent } = useModelViewer();
     const [isDimensionsVisible, setDimensionsVisible] = useState(false);
     const isModelLayout = 'model' === layout;
     const showViewerLoader = 'loading' === state || 'ready' === state && isModelLoading;
@@ -7122,7 +7769,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
     const { lines, labels, hiddenHotspots } = useDimensions({
         isVisible: isDimensionsActive
     });
-    const errorState = 'not-found' === state || 'unauthorized' === state || 'payment-required' === state ? state : null;
+    const errorState = 'forbidden' === state || 'not-found' === state || 'unauthorized' === state || 'payment-required' === state ? state : null;
     if (errorState) return /*#__PURE__*/ jsx("div", {
         ref: setContainerEl,
         className: utils_cn('relative size-full overflow-hidden text-foreground', 'default' === background && 'bg-background-layout'),
@@ -7195,7 +7842,10 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                                 disabled: !canToggleDimensions,
                                 "aria-label": "Toggle dimensions",
                                 "aria-pressed": isDimensionsVisible,
-                                onClick: ()=>setDimensionsVisible((current)=>!current),
+                                onClick: ()=>{
+                                    setDimensionsVisible((current)=>!current);
+                                    trackEvent('interacted');
+                                },
                                 children: [
                                     isDimensionsVisible ? /*#__PURE__*/ jsx(Eye, {
                                         className: "size-6"
@@ -7220,7 +7870,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
     });
 }
 function normalizeApiKey(apiKey) {
-    return apiKey.trim();
+    return apiKey?.trim() ?? '';
 }
 const root_queryClient = new QueryClient({
     defaultOptions: {
@@ -7237,26 +7887,33 @@ const root_queryClient = new QueryClient({
         }
     }
 });
-function ModelViewerRoot({ tinuuid, apiKey, hid, layout = 'default', background = 'default', showDialogCloseButton = false }) {
+function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
     const normalizedApiKey = normalizeApiKey(apiKey);
     return /*#__PURE__*/ jsx(QueryClientProvider, {
         client: root_queryClient,
         children: /*#__PURE__*/ jsx(ModelViewerProvider, {
             tinuuid: tinuuid,
             apiKey: normalizedApiKey,
+            appClipBundleId: appClipBundleId,
+            arExperience: arExperience,
+            apiBaseUrl: apiBaseUrl,
+            legacyApiBaseUrl: legacyApiBaseUrl,
+            mode: mode,
+            initialWidgetSessionToken: initialWidgetSessionToken,
+            handoffUrl: handoffUrl,
             hid: hid,
+            launchAr: launchAr,
             layout: layout,
             background: background,
+            sizeType: sizeType,
+            viewerSurface: viewerSurface,
             children: /*#__PURE__*/ jsx(ModelViewerContainer, {
                 showDialogCloseButton: showDialogCloseButton
             })
         })
     });
 }
-configureNodeApiClient({
-    baseURL: "https://api.vizbl.com"
-});
-function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
+function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -7269,7 +7926,7 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
                 children: /*#__PURE__*/ jsx(Dialog, {
                     ...props,
                     children: /*#__PURE__*/ jsxs(DialogContent, {
-                        className: "min-w-full h-svh p-0 rounded-none sm:p-0",
+                        className: "min-w-full h-dvh p-0 rounded-none sm:p-0",
                         portalContainer: container,
                         showCloseButton: false,
                         onInteractOutside: (e)=>{
@@ -7290,8 +7947,15 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
                             /*#__PURE__*/ jsx(ModelViewerRoot, {
                                 tinuuid: tinuuid,
                                 apiKey: apiKey,
+                                apiBaseUrl: apiBaseUrl,
+                                legacyApiBaseUrl: legacyApiBaseUrl,
+                                mode: "ar-viewer",
+                                initialWidgetSessionToken: initialWidgetSessionToken,
+                                handoffUrl: handoffUrl,
                                 hid: hid,
-                                showDialogCloseButton: true
+                                sizeType: sizeType,
+                                showDialogCloseButton: true,
+                                viewerSurface: "dialog"
                             })
                         ]
                     })
@@ -7315,7 +7979,7 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
         ]
     });
 }
-function ModelViewer({ tinuuid, apiKey, hid, layout, background, className, ...props }) {
+function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, layout, background, viewerSurface, className, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -7346,9 +8010,19 @@ function ModelViewer({ tinuuid, apiKey, hid, layout, background, className, ...p
                             children: /*#__PURE__*/ jsx(ModelViewerRoot, {
                                 tinuuid: tinuuid,
                                 apiKey: apiKey,
+                                appClipBundleId: appClipBundleId,
+                                arExperience: arExperience,
+                                apiBaseUrl: apiBaseUrl,
+                                legacyApiBaseUrl: legacyApiBaseUrl,
+                                mode: mode,
+                                initialWidgetSessionToken: initialWidgetSessionToken,
+                                handoffUrl: handoffUrl,
                                 hid: hid,
+                                launchAr: launchAr,
+                                sizeType: sizeType,
                                 layout: layout,
-                                background: background
+                                background: background,
+                                viewerSurface: viewerSurface
                             })
                         })
                     })