3D Viewer

const response = await fetch(BASE_URL + '/projects/proj_123/viewer/embed-config', {
  headers: { 'Authorization': 'Bearer ' + accessToken }
});

const data = await response.json();
// {
//   "success": true,
//   "config": {
//     "projectId": "proj_123",
//     "cameraPosition": [0, 2, 5],
//     "cameraTarget": [0, 0, 0],
//     "cameraFOV": 50,
//     "enableZoom": true,
//     "enablePan": true,
//     "enableAutoRotate": false,
//     "environmentPreset": "studio",
//     "lightIntensity": 1.0,
//     "ambientLightIntensity": 0.5,
//     "enableShadows": true,
//     "backgroundColor": "#f5f5f5",
//     "enableAR": false,
//     "loadingAnimation": "spinner",
//     "loadingMessage": "Loading 3D model..."
//   }
// }

<!-- The share view is a page on YOUR APP DOMAIN.
     It is not the Supabase Functions host used for API calls — that host
     returns JSON, so pointing an iframe at it renders a broken embed. -->
<iframe
  src="https://YOUR_APP_DOMAIN/share/proj_123/SHARE_TOKEN"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="accelerometer; autoplay; camera; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
></iframe>

<!-- Transparent embeds: color-scheme is load-bearing.
     If the host page declares color-scheme light or dark, Chromium paints an
     opaque backdrop behind the iframe and the embed looks like a solid box.
     Setting background:transparent alone does NOT fix it. -->
<iframe
  src="https://YOUR_APP_DOMAIN/share/proj_123/SHARE_TOKEN"
  width="100%"
  height="600"
  frameborder="0"
  allowtransparency="true"
  style="background: transparent; color-scheme: normal;"
  allowfullscreen
  allow="accelerometer; autoplay; camera; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
></iframe>

// 1. Load project data with all option blocks and settings
const projectRes = await fetch(BASE_URL + '/projects/proj_123', {
  headers: { 'Authorization': 'Bearer ' + accessToken }
});
const { project } = await projectRes.json();

// The scene always lives under project.data — feature-detect the two variants.
// gunzipBase64 is the small DecompressionStream helper defined in the
// "Get Project" example above (use pako on React Native / Hermes).
const payload = project.data;
const sceneData = payload.sceneDataCompressed
  ? JSON.parse(await gunzipBase64(payload.sceneDataCompressed))   // 'gzip-base64'
  : payload.sceneData;

// 2. Load option blocks for the configurator UI
const blocksRes = await fetch(BASE_URL + '/projects/proj_123/option-blocks', {
  headers: { 'Authorization': 'Bearer ' + accessToken }
});
const { blocks } = await blocksRes.json();

// 3. Load pricing blocks for CPQ
const pricingRes = await fetch(BASE_URL + '/projects/proj_123/pricing-blocks', {
  headers: { 'Authorization': 'Bearer ' + accessToken }
});
const { blocks: pricingBlocks } = await pricingRes.json();

// 4. Build your custom UI with any framework
// - models/camera are NOT reliably top-level: in the COMPRESSED variant
//   project.data holds ONLY sceneDataCompressed + sceneDataEncoding, so read
//   them from the decompressed scene first:
//     const models = sceneData?.models ?? payload.models ?? [];
//     const camera = sceneData?.camera ?? payload.camera;
// - Each model entry has id + fileName; this endpoint does NOT return a
//   download URL — fetch the binary from GET /assets/:assetId/download, or use
//   the share endpoint, which hands you a pre-signed url per model
// - Frame the camera from the resolved camera value above, if present
// - Render sceneData.optionBlocks as custom components
// - Apply material/visibility changes based on selections
// - Calculate prices in real-time via /pricing-blocks/calculate

// Store whatever shape suits your integration.
await fetch(BASE_URL + '/projects/proj_123/viewer/state', {
  method: 'PUT',
  headers: {
    'Authorization': 'Bearer ' + accessToken,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    selections: { blk_frame: 'black', blk_fabric: 'linen' },
    cameraPosition: [0, 2, 5]
  })
});

// Read it back.
const response = await fetch(BASE_URL + '/projects/proj_123/viewer/state', {
  headers: { 'Authorization': 'Bearer ' + accessToken }
});
const data = await response.json();
// { "success": true, "state": { ...exactly what you PUT... } }
//
// Never written to? You get the default:
// { "success": true, "state": { "loaded": false, "selections": {},
//   "visibleBlocks": [], "cameraPosition": [0,2,5], "cameraTarget": [0,0,0] } }

// Runs INSIDE the configurator document (see the scope note below).

window.addEventListener('simplio3d:option.changed', (e) => {
  const { blockId, blockName, value, label, type } = e.detail;
  // type is one of: dropdown | carousel | checkbox | toggle-switch |
  //                 thumbnail-selector | select-material | number-input
  //
  // `value` shape depends on `type`:
  //   checkbox      -> string[]                 (selected values)
  //   number-input  -> Record<string, number>   (named numeric values)
  //   everything else -> a single value
  //
  // `label` is a customer-facing name only for select-material;
  // for the other types it mirrors `value`.
});

// Both fire together on the same successful submission — subscribe to ONE.
window.addEventListener('simplio3d:quote.submitted', (e) => {
  const { requestId, formData } = e.detail;
});
window.addEventListener('simplio3d:form.submitted', (e) => {
  const { requestId, formData } = e.detail;
});