{error}

}\n {!error && (\n \n )}\n {visualStyle === \"teletubby\" && !isFullScreen && !isTopBottom && !error && (\n (e.currentTarget.style.display = \"none\")}\n />\n )}\n {\" \"}\n {showSource && visualStyle === \"default\" && !isFullScreen && !isTopBottom && (\n SDK\n )}\n \n \n );\n};\n\n// --- Global state & initCamera Function ---\nlet activeCameraRoot: Root | null = null;\nlet activeCameraContainer: HTMLDivElement | null = null;\nlet shouldRemoveActiveContainer = false;\n\nexport function initCamera({\n size = 100,\n defaultCorner = \"bottom-right\",\n zoom = 1,\n bottomHalfZoom = 1.1,\n margin = 20,\n showSource = false,\n mirrored = true,\n ringColor = \"rgba(216, 191, 216, 0.8)\",\n mode = \"corner-cycle\",\n visualStyle = \"default\",\n clipPathX = 58.7, // UPDATED default\n clipPathY = 52.4, // Default\n target = null,\n}: {\n size?: number;\n defaultCorner?: Corner;\n zoom?: number;\n bottomHalfZoom?: number;\n margin?: number;\n showSource?: boolean;\n mirrored?: boolean;\n ringColor?: string;\n mode?: ClickMode;\n visualStyle?: VisualStyle;\n clipPathX?: number;\n clipPathY?: number;\n target?: string | HTMLElement | null;\n} = {}): () => void {\n // (Environment check and cleanup logic remain the same)\n if (typeof document === \"undefined\" || typeof window === \"undefined\") {\n console.warn(\"initCamera requires a browser environment.\"); return () => {};\n }\n const cleanupPrevious = () => {\n if (activeCameraRoot) { activeCameraRoot.unmount(); activeCameraRoot = null; }\n if (activeCameraContainer && shouldRemoveActiveContainer && activeCameraContainer.parentNode) {\n activeCameraContainer.parentNode.removeChild(activeCameraContainer);\n }\n activeCameraContainer = null; shouldRemoveActiveContainer = false;\n document.querySelectorAll(\".dcm31-camera-instance-root\").forEach(el => el.remove());\n };\n cleanupPrevious();\n\n // (Container determination logic remains the same)\n let container: HTMLElement | null = null; let usedTarget = false;\n if (target) {\n if (typeof target === \"string\") { container = document.querySelector(target); if (!container) { console.error(`Target \"${target}\" not found.`); return () => {}; } usedTarget = true; }\n else if (target instanceof HTMLElement) { container = target; usedTarget = true; }\n else { console.error(\"Invalid target.\"); return () => {}; }\n } else {\n container = document.createElement(\"div\"); container.className = \"dcm31-camera-instance-root\"; document.body.appendChild(container); shouldRemoveActiveContainer = true;\n }\n if (!container) { console.error(\"Container error.\"); return () => {}; }\n\n\n // Create React root and render the CameraView with updated default props\n const root = createRoot(container);\n const cameraProps = {\n size, defaultCorner, zoom, bottomHalfZoom, margin, showSource, mirrored, ringColor, mode, visualStyle,\n clipPathX, // Pass through (uses updated default if not provided)\n clipPathY, // Pass through\n };\n root.render();\n\n activeCameraRoot = root; activeCameraContainer = container as HTMLDivElement;\n\n // (Destroy function logic remains the same)\n const destroyFunc = () => {\n if (root === activeCameraRoot) {\n root.unmount();\n if (shouldRemoveActiveContainer && activeCameraContainer?.parentNode) {\n activeCameraContainer.parentNode.removeChild(activeCameraContainer);\n }\n activeCameraRoot = null; activeCameraContainer = null; shouldRemoveActiveContainer = false;\n } else {\n root.unmount();\n const orphanContainer = document.querySelector(\".dcm31-camera-instance-root\");\n if (orphanContainer && !usedTarget && orphanContainer === container) { orphanContainer.remove(); }\n }\n };\n return destroyFunc;\n}\n\n// ======================================================================\n// Demo Specific Components and Logic\n// ======================================================================\nconst IframeDemo = ({ valUrl, config }) => {\n // (IframeDemo component remains the same)\n const iframeRef = useRef(null);\n useEffect(() => {\n if (iframeRef.current) {\n const iframe = iframeRef.current;\n const handleLoad = () => {\n console.log(\"Iframe loaded, sending initCamera message to:\", valUrl);\n const msg = { type: \"initCamera\", config: config };\n if (iframe.contentWindow) {\n try { iframe.contentWindow.postMessage(JSON.stringify(msg), new URL(valUrl).origin); }\n catch (e) { console.warn(\"postMessage origin error:\", e); iframe.contentWindow.postMessage(JSON.stringify(msg), \"*\"); }\n } else { console.error(\"Iframe contentWindow missing.\"); }\n };\n iframe.addEventListener(\"load\", handleLoad);\n return () => iframe.removeEventListener(\"load\", handleLoad);\n }\n }, [valUrl, config]);\n return (\n