@base2datadesign/viewer-react 0.1.1 → 0.1.3

package/dist/AccessAssetsMenu.d.ts

@@ -0,0 +1,14 @@
+export type AccessAssetsItem = {
+    key: string;
+    label: string;
+    onClick: () => void | Promise<void>;
+    disabled?: boolean;
+};
+export type AccessAssetsMenuProps = {
+    label?: string;
+    items: AccessAssetsItem[];
+    disabled?: boolean;
+    className?: string;
+};
+export default function AccessAssetsMenu({ label, items, disabled, className, }: AccessAssetsMenuProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=AccessAssetsMenu.d.ts.map

package/dist/AccessAssetsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessAssetsMenu.d.ts","sourceRoot":"","sources":["../src/AccessAssetsMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAuB,EACvB,KAAK,EACL,QAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,kDAsFvB"}

package/dist/AccessAssetsMenu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+export default function AccessAssetsMenu({ label = "access assets", items, disabled = false, className, }) {
+    const containerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const resolvedItems = useMemo(() => items.filter((item) => item && item.label && typeof item.onClick === "function"), [items]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (event) => {
+            if (!containerRef.current)
+                return;
+            if (!containerRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        window.addEventListener("mousedown", handler);
+        return () => window.removeEventListener("mousedown", handler);
+    }, [open]);
+    if (!resolvedItems.length)
+        return null;
+    return (_jsxs("div", { ref: containerRef, className: className, style: { width: "100%", maxWidth: "220px" }, children: [_jsxs("button", { type: "button", onClick: () => setOpen((prev) => !prev), disabled: disabled, style: {
+                    width: "100%",
+                    borderRadius: "8px",
+                    border: "1px solid #e2e8f0",
+                    background: "#ffffff",
+                    padding: "10px 12px",
+                    fontSize: "12px",
+                    textTransform: "lowercase",
+                    color: "#475569",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    opacity: disabled ? 0.6 : 1,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "8px",
+                }, children: [_jsx("span", { children: label }), _jsx("span", { style: { fontSize: "12px", transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease" }, children: "\u25BE" })] }), open ? (_jsx("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "8px" }, children: resolvedItems.map((item) => (_jsx("button", { type: "button", onClick: async () => {
+                        try {
+                            await item.onClick();
+                        }
+                        finally {
+                            setOpen(false);
+                        }
+                    }, disabled: disabled || item.disabled, style: {
+                        width: "100%",
+                        borderRadius: "8px",
+                        border: "1px dashed #e2e8f0",
+                        padding: "10px 12px",
+                        fontSize: "12px",
+                        textTransform: "lowercase",
+                        color: "#64748b",
+                        background: "transparent",
+                        cursor: disabled || item.disabled ? "not-allowed" : "pointer",
+                        opacity: disabled || item.disabled ? 0.5 : 1,
+                    }, children: item.label }, item.key))) })) : null] }));
+}

package/dist/AssetUploadCard.d.ts

@@ -0,0 +1,17 @@
+import { type UploadResult } from "@base2datadesign/viewer-kit";
+export type AssetUploadCardProps = {
+    disabled?: boolean;
+    apiRoute?: string;
+    rhinoApiRoute?: string;
+    maxBytes?: number;
+    timeoutMs?: number;
+    preview?: Record<string, unknown>;
+    accept?: string;
+    onSolved: (result: UploadResult) => void | Promise<void>;
+    onClear?: () => void;
+    className?: string;
+    title?: string;
+    description?: string;
+};
+export default function AssetUploadCard({ disabled, apiRoute, rhinoApiRoute, maxBytes, timeoutMs, preview, accept, onSolved, onClear, className, title, description, }: AssetUploadCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AssetUploadCard.d.ts.map

package/dist/AssetUploadCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetUploadCard.d.ts","sourceRoot":"","sources":["../src/AssetUploadCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,QAA0B,EAC1B,aAAgC,EAChC,QAAyC,EACzC,SAA2C,EAC3C,OAAO,EACP,MAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAsB,EACtB,WAAsF,GACvF,EAAE,oBAAoB,2CAqKtB"}

package/dist/AssetUploadCard.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { DEFAULT_UPLOAD_LIMITS, detectUploadKind, loadMeshFile, solveGrasshopperFile, solveRhino3dmFile, } from "@base2datadesign/viewer-kit";
+const DEFAULT_ACCEPT = ".gh,.ghx,.3dm,.obj,.fbx,.gltf,.glb,.stl,.ply";
+const formatBytes = (bytes) => {
+    if (!Number.isFinite(bytes))
+        return "";
+    const mb = bytes / (1024 * 1024);
+    return `${mb.toFixed(0)}MB`;
+};
+export default function AssetUploadCard({ disabled, apiRoute = "/api/gh-solve", rhinoApiRoute = "/api/rhino-3dm", maxBytes = DEFAULT_UPLOAD_LIMITS.maxBytes, timeoutMs = DEFAULT_UPLOAD_LIMITS.timeoutMs, preview, accept = DEFAULT_ACCEPT, onSolved, onClear, className, title = "Asset Upload", description = "Upload .gh/.ghx/.3dm or mesh assets (OBJ/FBX/GLTF/STL/PLY) to preview.", }) {
+    const [busy, setBusy] = useState(false);
+    const [lastFileName, setLastFileName] = useState(null);
+    const [error, setError] = useState(null);
+    const [dragActive, setDragActive] = useState(false);
+    const [statusLine, setStatusLine] = useState("ready");
+    const [statusTone, setStatusTone] = useState("muted");
+    const statusText = useMemo(() => (busy ? "processing..." : statusLine), [busy, statusLine]);
+    const maxLabel = formatBytes(maxBytes);
+    const updateStatus = (fileName, detail, tone = "muted") => {
+        setStatusLine(`${fileName} · ${detail}`);
+        setStatusTone(tone);
+    };
+    const uploadAndSolve = async (file) => {
+        if (disabled || busy)
+            return;
+        const kind = detectUploadKind(file);
+        if (kind === "unknown") {
+            setError("unsupported file type");
+            return;
+        }
+        if (typeof maxBytes === "number" && maxBytes > 0 && file.size > maxBytes) {
+            setError(`file exceeds ${formatBytes(maxBytes)} limit`);
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        setLastFileName(file.name);
+        updateStatus(file.name, "starting");
+        try {
+            let result;
+            if (kind === "gh" || kind === "ghx") {
+                const solved = await solveGrasshopperFile(file, {
+                    apiRoute,
+                    preview,
+                    onStatus: (detail) => updateStatus(file.name, detail),
+                });
+                result = { ...solved, file };
+            }
+            else if (kind === "3dm") {
+                const solved = await solveRhino3dmFile(file, {
+                    apiRoute: rhinoApiRoute,
+                    onStatus: (detail) => updateStatus(file.name, detail),
+                });
+                result = { ...solved, file };
+            }
+            else {
+                const solved = await loadMeshFile(file, {
+                    maxBytes,
+                    timeoutMs,
+                    onStatus: (detail) => updateStatus(file.name, detail),
+                });
+                result = { ...solved, file };
+            }
+            await onSolved(result);
+            updateStatus(file.name, "completed", "success");
+        }
+        catch (e) {
+            const message = e?.message ?? "failed to process upload";
+            setError(message);
+            updateStatus(file.name, `error: ${message}`, "error");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const inputId = "asset-upload-input";
+    return (_jsxs("section", { className: className, style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: "12px" }, children: [_jsxs("div", { children: [_jsx("h3", { style: { fontSize: "12px", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }, children: title }), _jsx("p", { style: { marginTop: "6px", fontSize: "12px", lineHeight: 1.5 }, children: description }), _jsxs("p", { style: { marginTop: "4px", fontSize: "11px", opacity: 0.7 }, children: ["limits: ", maxLabel, ", timeout ", timeoutMs, "ms"] })] }), onClear ? (_jsx("button", { type: "button", onClick: onClear, disabled: disabled || busy, style: { height: "32px" }, children: "clear" })) : null] }), _jsxs("div", { role: "button", tabIndex: 0, onDragEnter: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (disabled || busy)
+                        return;
+                    setDragActive(true);
+                }, onDragOver: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (disabled || busy)
+                        return;
+                    setDragActive(true);
+                }, onDragLeave: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setDragActive(false);
+                }, onDrop: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setDragActive(false);
+                    const dropped = event.dataTransfer.files?.[0];
+                    if (!dropped)
+                        return;
+                    void uploadAndSolve(dropped);
+                }, onClick: () => {
+                    if (disabled || busy)
+                        return;
+                    const input = document.getElementById(inputId);
+                    input?.click();
+                }, style: {
+                    borderRadius: "12px",
+                    border: "1px dashed #94a3b8",
+                    padding: "14px",
+                    background: dragActive ? "rgba(16, 185, 129, 0.08)" : "rgba(255,255,255,0.85)",
+                    cursor: disabled || busy ? "not-allowed" : "pointer",
+                    opacity: disabled || busy ? 0.6 : 1,
+                }, children: [_jsx("div", { style: { fontSize: "12px", textTransform: "lowercase" }, children: lastFileName ? `loaded ${lastFileName}` : "drop asset file" }), _jsx("div", { style: { marginTop: "6px", fontSize: "11px", opacity: 0.7 }, children: statusText }), error ? (_jsx("div", { style: { marginTop: "6px", fontSize: "11px", color: "#b91c1c" }, children: error })) : null] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }, children: [_jsx("button", { type: "button", onClick: () => {
+                            if (disabled || busy)
+                                return;
+                            const input = document.getElementById(inputId);
+                            input?.click();
+                        }, children: "select file" }), _jsx("span", { style: { fontSize: "11px", opacity: 0.7 }, children: accept.replace(/\./g, "").toUpperCase() })] }), _jsx("input", { id: inputId, type: "file", accept: accept, style: { display: "none" }, onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    if (!file)
+                        return;
+                    void uploadAndSolve(file);
+                    event.currentTarget.value = "";
+                } })] }));
+}

package/dist/ViewControls.d.ts

@@ -0,0 +1,23 @@
+export type LightingOption = {
+    id: string;
+    label: string;
+    summary?: string;
+};
+export type SkyOption = {
+    id: string;
+    label: string;
+    description?: string;
+};
+export type ViewControlsProps = {
+    activeLightingPreset: string;
+    onLightingChange: (preset: string) => void;
+    onCameraViewChange: (view: string) => void;
+    skyOptions: SkyOption[];
+    activeSkyId: string;
+    onSkyChange: (skyId: string) => void;
+    lightingOptions: LightingOption[];
+    veilsEnabled?: boolean;
+    onToggleVeils?: () => void;
+};
+export default function ViewControls({ activeLightingPreset, onLightingChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled, onToggleVeils, }: ViewControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewControls.d.ts.map

package/dist/ViewControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewControls.d.ts","sourceRoot":"","sources":["../src/ViewControls.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA2CF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAmB,EACnB,aAAa,GACd,EAAE,iBAAiB,2CA6QnB"}

package/dist/ViewControls.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+const cardStyle = {
+    position: "relative",
+    background: "rgba(255,255,255,0.92)",
+    border: "1px solid #e2e8f0",
+    borderRadius: "10px",
+    boxShadow: "0 12px 24px rgba(15,23,42,0.12)",
+    overflow: "visible",
+};
+const labelStyle = {
+    fontSize: "12px",
+    textTransform: "lowercase",
+    color: "#475569",
+};
+const veilStyle = {
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    color: "rgba(100,116,139,0.7)",
+};
+const dropdownStyle = {
+    position: "absolute",
+    bottom: "calc(100% + 8px)",
+    left: 0,
+    background: "rgba(255,255,255,0.98)",
+    border: "1px solid #e2e8f0",
+    borderRadius: "10px",
+    padding: "8px",
+    boxShadow: "0 16px 24px rgba(15,23,42,0.14)",
+    minWidth: "220px",
+    zIndex: 60,
+};
+export default function ViewControls({ activeLightingPreset, onLightingChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled = true, onToggleVeils, }) {
+    const lightingMenuRef = useRef(null);
+    const skyMenuRef = useRef(null);
+    const [lightingExpanded, setLightingExpanded] = useState(false);
+    const [skyExpanded, setSkyExpanded] = useState(false);
+    const [lightingHover, setLightingHover] = useState(false);
+    const [skyHover, setSkyHover] = useState(false);
+    const [viewHover, setViewHover] = useState(false);
+    const activeLighting = useMemo(() => lightingOptions.find((option) => option.id === activeLightingPreset) ?? lightingOptions[0], [lightingOptions, activeLightingPreset]);
+    const activeSky = useMemo(() => skyOptions.find((option) => option.id === activeSkyId) ?? skyOptions[0], [skyOptions, activeSkyId]);
+    useEffect(() => {
+        if (!lightingExpanded && !skyExpanded)
+            return;
+        const onMouseDown = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            if (lightingMenuRef.current?.contains(target))
+                return;
+            if (skyMenuRef.current?.contains(target))
+                return;
+            setLightingExpanded(false);
+            setSkyExpanded(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setLightingExpanded(false);
+            setSkyExpanded(false);
+        };
+        window.addEventListener("mousedown", onMouseDown);
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("mousedown", onMouseDown);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, [lightingExpanded, skyExpanded]);
+    return (_jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "flex-end" }, children: [_jsx("div", { ref: lightingMenuRef, children: _jsxs("div", { style: cardStyle, onMouseEnter: () => setLightingHover(true), onMouseLeave: () => setLightingHover(false), children: [lightingExpanded ? (_jsx("div", { style: dropdownStyle, children: lightingOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onLightingChange(option.id);
+                                    setLightingExpanded(false);
+                                }, style: {
+                                    width: "100%",
+                                    border: "none",
+                                    borderRadius: "8px",
+                                    padding: "8px 10px",
+                                    textAlign: "left",
+                                    background: option.id === activeLightingPreset ? "rgba(49,67,144,0.12)" : "transparent",
+                                    color: option.id === activeLightingPreset ? "#314390" : "#475569",
+                                    cursor: "pointer",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "2px",
+                                    fontSize: "12px",
+                                    textTransform: "lowercase",
+                                }, children: [_jsx("span", { children: option.label }), option.summary ? (_jsx("span", { style: { fontSize: "10px", opacity: 0.7 }, children: option.summary })) : null] }, option.id))) })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                setLightingExpanded((prev) => !prev);
+                                setSkyExpanded(false);
+                            }, style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: "10px",
+                                padding: "8px 12px",
+                                border: "none",
+                                background: "transparent",
+                                width: "100%",
+                                cursor: "pointer",
+                            }, children: [_jsx("span", { style: {
+                                        ...labelStyle,
+                                        opacity: !veilsEnabled || lightingExpanded || lightingHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: activeLighting?.label ?? activeLightingPreset }), _jsx("span", { style: {
+                                        fontSize: "11px",
+                                        color: "#64748b",
+                                        opacity: !veilsEnabled || lightingExpanded || lightingHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: lightingExpanded ? "▼" : "▲" })] }), veilsEnabled && !lightingExpanded && !lightingHover ? _jsx("div", { style: veilStyle, children: "LIGHTING" }) : null] }) }), _jsxs("div", { style: { ...cardStyle, display: "flex" }, onMouseEnter: () => setViewHover(true), onMouseLeave: () => setViewHover(false), children: [_jsx("button", { type: "button", onClick: () => onCameraViewChange("interior"), style: {
+                            padding: "8px 12px",
+                            border: "none",
+                            borderRight: "1px solid #e2e8f0",
+                            background: "transparent",
+                            cursor: "pointer",
+                            minWidth: "84px",
+                            ...labelStyle,
+                            color: !veilsEnabled || viewHover ? "#475569" : "transparent",
+                        }, children: "interior" }), _jsx("button", { type: "button", onClick: () => onCameraViewChange("iso"), style: {
+                            padding: "8px 12px",
+                            border: "none",
+                            background: "transparent",
+                            cursor: "pointer",
+                            minWidth: "84px",
+                            ...labelStyle,
+                            color: !veilsEnabled || viewHover ? "#475569" : "transparent",
+                        }, children: "perspective" }), veilsEnabled && !viewHover ? _jsx("div", { style: veilStyle, children: "VIEW" }) : null] }), skyOptions.length ? (_jsx("div", { ref: skyMenuRef, children: _jsxs("div", { style: cardStyle, onMouseEnter: () => setSkyHover(true), onMouseLeave: () => setSkyHover(false), children: [skyExpanded ? (_jsx("div", { style: dropdownStyle, children: skyOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onSkyChange(option.id);
+                                    setSkyExpanded(false);
+                                }, style: {
+                                    width: "100%",
+                                    border: "none",
+                                    borderRadius: "8px",
+                                    padding: "8px 10px",
+                                    textAlign: "left",
+                                    background: option.id === activeSkyId ? "rgba(49,67,144,0.12)" : "transparent",
+                                    color: option.id === activeSkyId ? "#314390" : "#475569",
+                                    cursor: "pointer",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "2px",
+                                    fontSize: "12px",
+                                    textTransform: "lowercase",
+                                }, children: [_jsx("span", { children: option.label }), option.description ? (_jsx("span", { style: { fontSize: "10px", opacity: 0.7 }, children: option.description })) : null] }, option.id))) })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                setSkyExpanded((prev) => !prev);
+                                setLightingExpanded(false);
+                            }, style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: "10px",
+                                padding: "8px 12px",
+                                border: "none",
+                                background: "transparent",
+                                width: "100%",
+                                cursor: "pointer",
+                            }, children: [_jsx("span", { style: {
+                                        ...labelStyle,
+                                        opacity: !veilsEnabled || skyExpanded || skyHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: activeSky?.label ?? "preset dome" }), _jsx("span", { style: {
+                                        fontSize: "11px",
+                                        color: "#64748b",
+                                        opacity: !veilsEnabled || skyExpanded || skyHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: skyExpanded ? "▼" : "▲" })] }), veilsEnabled && !skyExpanded && !skyHover ? _jsx("div", { style: veilStyle, children: "BACKGROUND" }) : null] }) })) : null, onToggleVeils ? (_jsx("button", { type: "button", onClick: onToggleVeils, "aria-label": "Toggle veils", style: {
+                    alignSelf: "stretch",
+                    border: "none",
+                    background: "transparent",
+                    fontSize: "11px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.14em",
+                    color: "#64748b",
+                    cursor: "pointer",
+                }, children: "VEILS" })) : null] }));
+}

package/dist/ViewerCanvas.d.ts

@@ -5,8 +5,9 @@ export type ViewerCanvasProps = {
     assetResolver?: ViewerCreateOptions["assetResolver"];
     camera?: ViewerCreateOptions["camera"];
     renderer?: ViewerCreateOptions["renderer"];
+    usePostprocessing?: ViewerCreateOptions["usePostprocessing"];
     className?: string;
     onReady?: (handle: ViewerHandle | null) => void;
 };
-export default function ViewerCanvas({ presetId, presets, assetResolver, camera, renderer, className, onReady, }: ViewerCanvasProps): import("react/jsx-runtime").JSX.Element;
+export default function ViewerCanvas({ presetId, presets, assetResolver, camera, renderer, usePostprocessing, className, onReady, }: ViewerCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ViewerCanvas.d.ts.map

package/dist/ViewerCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerCanvas.d.ts","sourceRoot":"","sources":["../src/ViewerCanvas.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEpG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,2CAwDnB"}
+{"version":3,"file":"ViewerCanvas.d.ts","sourceRoot":"","sources":["../src/ViewerCanvas.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEpG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,2CA8InB"}

package/dist/ViewerCanvas.js

@@ -1,48 +1,136 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createViewer } from "@base2datadesign/viewer-kit";
-export default function ViewerCanvas({ presetId, presets, assetResolver, camera, renderer, className, onReady, }) {
-    const containerRef = useRef(null);
+export default function ViewerCanvas({ presetId, presets, assetResolver, camera, renderer, usePostprocessing, className, onReady, }) {
+    const [container, setContainer] = useState(null);
     const handleRef = useRef(null);
     const presetIdRef = useRef(presetId);
     const initialPresetRef = useRef(presetId);
+    const instanceRef = useRef(0);
     const createOptions = useMemo(() => {
         return {
-            container: containerRef.current,
             presetId: initialPresetRef.current,
             presets,
             assetResolver,
             camera,
             renderer,
-            hooks: {
-                onReady: (handle) => {
-                    handleRef.current = handle;
-                    onReady?.(handle);
-                },
-                onError: (error) => {
-                    console.error("[viewer-react] Failed to initialise viewer", error);
-                    onReady?.(null);
-                },
-            },
+            usePostprocessing,
         };
-    }, [assetResolver, camera, onReady, presets, renderer]);
-    useEffect(() => {
-        const container = containerRef.current;
+    }, [assetResolver, camera, presets, renderer, usePostprocessing]);
+    const handleContainerRef = useCallback((node) => {
+        setContainer(node);
+    }, []);
+    useLayoutEffect(() => {
         if (!container)
             return;
-        const handle = createViewer({ ...createOptions, container });
-        handleRef.current = handle;
-        handle.start();
-        const handleResize = () => handle.resize();
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-            handle.stop();
-            handle.dispose();
+        instanceRef.current += 1;
+        const instanceId = instanceRef.current;
+        let disposed = false;
+        let initialized = false;
+        let resizeObserver = null;
+        let sizeObserver = null;
+        let rafId = null;
+        let handleResize = null;
+        let handle = null;
+        const cleanup = () => {
+            disposed = true;
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            sizeObserver?.disconnect();
+            sizeObserver = null;
+            resizeObserver?.disconnect();
+            resizeObserver = null;
+            if (handleResize) {
+                window.removeEventListener("resize", handleResize);
+                handleResize = null;
+            }
+            if (handle) {
+                handle.stop();
+                handle.dispose();
+            }
             handleRef.current = null;
-            onReady?.(null);
+            if (instanceRef.current === instanceId) {
+                onReady?.(null);
+            }
+        };
+        const initViewer = () => {
+            if (disposed || initialized)
+                return;
+            if (container.clientWidth === 0 || container.clientHeight === 0)
+                return;
+            initialized = true;
+            container.innerHTML = "";
+            handle = createViewer({
+                ...createOptions,
+                container,
+                hooks: {
+                    onReady: (viewer) => {
+                        if (disposed || instanceRef.current !== instanceId)
+                            return;
+                        viewer.__viewerId = instanceId;
+                        handleRef.current = viewer;
+                        console.log("[viewer-react] ready", { viewerId: instanceId });
+                        onReady?.(viewer);
+                    },
+                    onError: (error) => {
+                        if (disposed || instanceRef.current !== instanceId)
+                            return;
+                        console.error("[viewer-react] Failed to initialise viewer", error);
+                        onReady?.(null);
+                    },
+                },
+            });
+            handleRef.current = handle;
+            handle.__viewerId = instanceId;
+            console.log("[viewer-react] create", { viewerId: instanceId });
+            handle.start();
+            const onResize = () => handle?.resize();
+            handleResize = onResize;
+            window.addEventListener("resize", onResize);
+            onResize();
+            if (typeof ResizeObserver !== "undefined") {
+                resizeObserver = new ResizeObserver(() => handle?.resize());
+                resizeObserver.observe(container);
+            }
+            else {
+                requestAnimationFrame(() => handle?.resize());
+            }
+        };
+        const waitForSize = () => {
+            if (disposed || initialized)
+                return;
+            initViewer();
+            if (initialized)
+                return;
+            if (typeof ResizeObserver !== "undefined") {
+                sizeObserver = new ResizeObserver(() => {
+                    if (initialized || disposed)
+                        return;
+                    initViewer();
+                    if (initialized) {
+                        sizeObserver?.disconnect();
+                        sizeObserver = null;
+                    }
+                });
+                sizeObserver.observe(container);
+            }
+            else {
+                const tick = () => {
+                    if (disposed || initialized)
+                        return;
+                    initViewer();
+                    if (!initialized) {
+                        rafId = requestAnimationFrame(tick);
+                    }
+                };
+                rafId = requestAnimationFrame(tick);
+            }
         };
-    }, [createOptions, onReady]);
+        waitForSize();
+        return cleanup;
+    }, [container, createOptions, onReady]);
     useEffect(() => {
         if (!handleRef.current)
             return;
@@ -51,5 +139,5 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
             handleRef.current.setPreset(presetId);
         }
     }, [presetId]);
-    return _jsx("div", { ref: containerRef, className: className });
+    return _jsx("div", { ref: handleContainerRef, className: className });
 }

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { default as ViewerCanvas } from "./ViewerCanvas";
+export { default as AssetUploadCard } from "./AssetUploadCard";
+export { default as AccessAssetsMenu } from "./AccessAssetsMenu";
+export { default as ViewControls } from "./ViewControls";
 export type { ViewerCanvasProps } from "./ViewerCanvas";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1 +1,4 @@
 export { default as ViewerCanvas } from "./ViewerCanvas";
+export { default as AssetUploadCard } from "./AssetUploadCard";
+export { default as AccessAssetsMenu } from "./AccessAssetsMenu";
+export { default as ViewControls } from "./ViewControls";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base2datadesign/viewer-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@base2datadesign/viewer-kit": "^0.1.1"
+    "@base2datadesign/viewer-kit": "^0.2.0"
   },
   "peerDependencies": {
     "react": ">=18"