{
  "name": "product-model-3d",
  "title": "ProductModel3D",
  "description": "Interactive 3D product viewer wrapping Google's <model-viewer>. Loads the web component on demand; AR mode lights up on iOS (Quick Look) and Android (Scene Viewer) automatically.",
  "type": "component",
  "registryDependencies": [],
  "files": [
    {
      "path": "product-model-3d.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nexport interface ProductModel3DProps {\n  /** glTF or GLB URL. */\n  src: string;\n  /** Optional USDZ URL for iOS AR Quick Look (Safari/WebKit). */\n  iosSrc?: string;\n  /** Poster image shown while the model loads (and as a fallback). */\n  poster?: string;\n  alt?: string;\n  aspectRatio?: \"square\" | \"4/3\" | \"16/9\" | \"3/4\";\n  /** Enable AR mode. Lights up on iOS (Quick Look) + Android (Scene Viewer). Default `true`. */\n  ar?: boolean;\n  autoRotate?: boolean;\n  cameraControls?: boolean;\n  className?: string;\n}\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/9\": { aspectRatio: \"16/9\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nconst MODEL_VIEWER_CDN =\n  \"https://unpkg.com/@google/model-viewer@4.0.0/dist/model-viewer.min.js\";\n\n// Module-level cache so multiple <ProductModel3D> instances share one script load.\nlet modelViewerLoadPromise: Promise<void> | null = null;\nfunction ensureModelViewer(): Promise<void> {\n  if (typeof window === \"undefined\") return Promise.resolve();\n  if (modelViewerLoadPromise) return modelViewerLoadPromise;\n  if (window.customElements?.get(\"model-viewer\")) {\n    modelViewerLoadPromise = Promise.resolve();\n    return modelViewerLoadPromise;\n  }\n  modelViewerLoadPromise = new Promise<void>((resolve, reject) => {\n    const script = document.createElement(\"script\");\n    script.type = \"module\";\n    script.src = MODEL_VIEWER_CDN;\n    script.onload = () => resolve();\n    script.onerror = () => reject(new Error(\"Failed to load model-viewer\"));\n    document.head.appendChild(script);\n  });\n  return modelViewerLoadPromise;\n}\n\n/**\n * ProductModel3D — interactive 3D product viewer wrapping Google's\n * `<model-viewer>` web component. Script loads on demand (one tag per page,\n * cached). AR mode auto-resolves the right OS surface: USDZ Quick Look on iOS,\n * Scene Viewer on Android, WebXR where available. Poster image shows during\n * load and as a fallback if the script can't load.\n */\nexport function ProductModel3D({\n  src,\n  iosSrc,\n  poster,\n  alt,\n  aspectRatio = \"square\",\n  ar = true,\n  autoRotate = true,\n  cameraControls = true,\n  className,\n}: ProductModel3DProps): React.ReactElement {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureModelViewer().then(\n      () => {\n        if (!cancelled) setReady(true);\n      },\n      () => {\n        // Stay on the poster fallback if the CDN script fails.\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  return (\n    <div\n      data-cimplify-product-model-3d\n      className={className}\n      style={{ position: \"relative\", overflow: \"hidden\", ...ASPECT_STYLES[aspectRatio] }}\n    >\n      {ready\n        ? React.createElement(\"model-viewer\", {\n            src,\n            \"ios-src\": iosSrc,\n            alt,\n            poster,\n            ar: ar || undefined,\n            \"ar-modes\": ar ? \"webxr scene-viewer quick-look\" : undefined,\n            \"camera-controls\": cameraControls || undefined,\n            \"auto-rotate\": autoRotate || undefined,\n            \"shadow-intensity\": \"1\",\n            style: { width: \"100%\", height: \"100%\", backgroundColor: \"transparent\" },\n          })\n        : poster\n          ? React.createElement(\"img\", {\n              src: poster,\n              alt: alt ?? \"\",\n              \"data-cimplify-product-model-3d-loading\": true,\n              style: { width: \"100%\", height: \"100%\", objectFit: \"cover\" },\n            })\n          : React.createElement(\"div\", {\n              \"data-cimplify-product-model-3d-loading\": true,\n              style: { width: \"100%\", height: \"100%\", backgroundColor: \"var(--muted, #f3f4f6)\" },\n            })}\n    </div>\n  );\n}\n"
    }
  ]
}