@treasuryspatial/viewer-react 0.1.11

package/dist/AccessAssetsMenu.d.ts

@@ -0,0 +1,15 @@
+export type AccessAssetsItem = {
+    key: string;
+    label: string;
+    onClick: () => void | Promise<void>;
+    disabled?: boolean;
+};
+export type AccessAssetsMenuProps = {
+    label?: string;
+    items: AccessAssetsItem[];
+    disabled?: boolean;
+    className?: string;
+    fullWidth?: boolean;
+};
+export default function AccessAssetsMenu({ label, items, disabled, className, fullWidth, }: 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;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAuB,EACvB,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,SAAiB,GAClB,EAAE,qBAAqB,kDA0FvB"}

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, fullWidth = false, }) {
+    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: fullWidth ? "none" : "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,19 @@
+import { type UploadResult } from "@treasuryspatial/viewer-kit";
+export type AssetUploadCardProps = {
+    disabled?: boolean;
+    apiRoute?: string;
+    rhinoApiRoute?: string;
+    maxBytes?: number;
+    timeoutMs?: number;
+    preview?: Record<string, unknown>;
+    allowEmptyGeometry?: boolean;
+    accept?: string;
+    onSolved: (result: UploadResult) => void | Promise<void>;
+    onClear?: () => void;
+    className?: string;
+    title?: string;
+    description?: string;
+    minimal?: boolean;
+};
+export default function AssetUploadCard({ disabled, apiRoute, rhinoApiRoute, maxBytes, timeoutMs, preview, allowEmptyGeometry, accept, onSolved, onClear, className, title, description, minimal, }: 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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,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;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,QAA0B,EAC1B,aAAgC,EAChC,QAAyC,EACzC,SAA2C,EAC3C,OAAO,EACP,kBAAkB,EAClB,MAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAsB,EACtB,WAAsF,EACtF,OAAe,GAChB,EAAE,oBAAoB,2CA6NtB"}

package/dist/AssetUploadCard.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { DEFAULT_UPLOAD_LIMITS, detectUploadKind, loadMeshFile, solveGrasshopperFile, solveRhino3dmFile, } from "@treasuryspatial/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, allowEmptyGeometry, accept = DEFAULT_ACCEPT, onSolved, onClear, className, title = "Asset Upload", description = "Upload .gh/.ghx/.3dm or mesh assets (OBJ/FBX/GLTF/STL/PLY) to preview.", minimal = false, }) {
+    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 [hovered, setHovered] = useState(false);
+    const statusText = useMemo(() => (busy ? "processing..." : statusLine), [busy, statusLine]);
+    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,
+                    allowEmptyGeometry,
+                    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";
+    const typesLabel = accept.replace(/\./g, "").toUpperCase().replace(/,/g, ", ");
+    const showStatusLine = minimal && (busy || statusLine !== "ready" || error);
+    return (_jsxs("section", { className: className, style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [!minimal ? (_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 })] }), onClear ? (_jsx("button", { type: "button", onClick: onClear, disabled: disabled || busy, style: { height: "32px" }, children: "clear" })) : null] })) : 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);
+                }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: () => {
+                    if (disabled || busy)
+                        return;
+                    const input = document.getElementById(inputId);
+                    input?.click();
+                }, style: {
+                    borderRadius: "18px",
+                    border: "1px dashed rgba(49, 143, 78, 0.45)",
+                    padding: "18px 18px",
+                    minHeight: "92px",
+                    background: dragActive ? "rgba(49, 143, 78, 0.08)" : "rgba(255,255,255,0.9)",
+                    cursor: disabled || busy ? "not-allowed" : "pointer",
+                    opacity: disabled || busy ? 0.6 : 1,
+                    boxShadow: "0 10px 24px rgba(15, 23, 42, 0.06)",
+                }, children: [minimal ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [_jsx("div", { style: {
+                                    fontSize: "11px",
+                                    fontWeight: 500,
+                                    letterSpacing: "0.04em",
+                                    color: hovered ? "rgb(49, 143, 78)" : "#7b8794",
+                                    opacity: hovered ? 0.95 : 0.65,
+                                }, children: typesLabel }), showStatusLine ? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "11px", opacity: 0.7 }, children: [_jsxs("span", { style: { display: "inline-flex", gap: "4px" }, children: [_jsx("span", { className: "upload-dot" }), _jsx("span", { className: "upload-dot" }), _jsx("span", { className: "upload-dot" })] }), _jsx("span", { style: { textTransform: "lowercase" }, children: error ? `error: ${error}` : statusText })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: "13px", fontWeight: 600, color: "#0f172a" }, children: lastFileName ? `Loaded ${lastFileName}` : "Drop a file to upload" }), _jsx("div", { style: { marginTop: "6px", fontSize: "12px", color: "#64748b" }, children: ".gh \u00B7 .ghx \u00B7 .3dm \u00B7 OBJ \u00B7 FBX \u00B7 GLTF \u00B7 STL \u00B7 PLY" }), _jsx("div", { style: { marginTop: "8px", fontSize: "11px", opacity: 0.7, textTransform: "lowercase" }, children: statusText })] })), error ? (_jsx("div", { style: { marginTop: "6px", fontSize: "11px", color: "#b91c1c" }, children: error })) : null] }), _jsx("style", { children: `
+        .upload-dot {
+          width: 5px;
+          height: 5px;
+          border-radius: 999px;
+          background: rgb(49, 143, 78);
+          opacity: 0.35;
+          animation: upload-dot-bounce 1s ease-in-out infinite;
+        }
+        .upload-dot:nth-child(2) {
+          animation-delay: 0.15s;
+        }
+        .upload-dot:nth-child(3) {
+          animation-delay: 0.3s;
+        }
+        @keyframes upload-dot-bounce {
+          0%, 100% {
+            transform: translateY(0);
+            opacity: 0.35;
+          }
+          50% {
+            transform: translateY(-3px);
+            opacity: 0.85;
+          }
+        }
+      ` }), _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,33 @@
+export type LightingOption = {
+    id: string;
+    label: string;
+    summary?: string;
+};
+export type MaterialOption = {
+    id: string;
+    label: string;
+    summary?: string;
+    swatches?: string[];
+};
+export type SkyOption = {
+    id: string;
+    label: string;
+    description?: string;
+};
+export type ViewControlsProps = {
+    activeLightingPreset: string;
+    onLightingChange: (preset: string) => void;
+    materialOptions?: MaterialOption[];
+    activeMaterialPreset?: string;
+    onMaterialChange?: (preset: string) => void;
+    onCameraViewChange: (view: string) => void;
+    skyOptions: SkyOption[];
+    activeSkyId: string;
+    onSkyChange: (skyId: string) => void;
+    lightingOptions: LightingOption[];
+    veilsEnabled?: boolean;
+    onToggleVeils?: () => void;
+    onResetRender?: () => void;
+};
+export default function ViewControls({ activeLightingPreset, onLightingChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled, onToggleVeils, onResetRender, }: 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,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,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,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,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;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAyDF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAmB,EACnB,aAAa,EACb,aAAa,GACd,EAAE,iBAAiB,2CAwYnB"}

package/dist/ViewControls.js

@@ -0,0 +1,250 @@
+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,
+};
+const swatchRowStyle = {
+    display: "flex",
+    gap: "6px",
+    marginTop: "6px",
+};
+const swatchStyle = (color) => ({
+    width: "12px",
+    height: "12px",
+    borderRadius: "999px",
+    background: color,
+    border: "1px solid rgba(15,23,42,0.1)",
+});
+export default function ViewControls({ activeLightingPreset, onLightingChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled = true, onToggleVeils, onResetRender, }) {
+    const lightingMenuRef = useRef(null);
+    const materialMenuRef = useRef(null);
+    const skyMenuRef = useRef(null);
+    const [lightingExpanded, setLightingExpanded] = useState(false);
+    const [materialExpanded, setMaterialExpanded] = useState(false);
+    const [skyExpanded, setSkyExpanded] = useState(false);
+    const [lightingHover, setLightingHover] = useState(false);
+    const [materialHover, setMaterialHover] = 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]);
+    const activeMaterial = useMemo(() => materialOptions?.find((option) => option.id === activeMaterialPreset) ??
+        materialOptions?.[0], [materialOptions, activeMaterialPreset]);
+    useEffect(() => {
+        if (!lightingExpanded && !skyExpanded && !materialExpanded)
+            return;
+        const onMouseDown = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            if (lightingMenuRef.current?.contains(target))
+                return;
+            if (materialMenuRef.current?.contains(target))
+                return;
+            if (skyMenuRef.current?.contains(target))
+                return;
+            setLightingExpanded(false);
+            setMaterialExpanded(false);
+            setSkyExpanded(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setLightingExpanded(false);
+            setMaterialExpanded(false);
+            setSkyExpanded(false);
+        };
+        window.addEventListener("mousedown", onMouseDown);
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("mousedown", onMouseDown);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, [lightingExpanded, materialExpanded, 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] }) }), materialOptions && materialOptions.length && onMaterialChange ? (_jsx("div", { ref: materialMenuRef, children: _jsxs("div", { style: cardStyle, onMouseEnter: () => setMaterialHover(true), onMouseLeave: () => setMaterialHover(false), children: [materialExpanded ? (_jsx("div", { style: dropdownStyle, children: materialOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onMaterialChange(option.id);
+                                    setMaterialExpanded(false);
+                                }, style: {
+                                    width: "100%",
+                                    border: "none",
+                                    borderRadius: "8px",
+                                    padding: "8px 10px",
+                                    textAlign: "left",
+                                    background: option.id === activeMaterialPreset ? "rgba(49,67,144,0.12)" : "transparent",
+                                    color: option.id === activeMaterialPreset ? "#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.swatches && option.swatches.length ? (_jsx("div", { style: swatchRowStyle, children: option.swatches.map((color, index) => (_jsx("span", { style: swatchStyle(color) }, `${option.id}-${index}`))) })) : null] }, option.id))) })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                setMaterialExpanded((prev) => !prev);
+                                setLightingExpanded(false);
+                                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 || materialExpanded || materialHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: activeMaterial?.label ?? activeMaterialPreset ?? "materials" }), _jsx("span", { style: {
+                                        fontSize: "11px",
+                                        color: "#64748b",
+                                        opacity: !veilsEnabled || materialExpanded || materialHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: materialExpanded ? "▼" : "▲" })] }), veilsEnabled && !materialExpanded && !materialHover ? _jsx("div", { style: veilStyle, children: "MATERIALS" }) : null] }) })) : 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 ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", alignSelf: "stretch" }, children: [onResetRender ? (_jsx("button", { type: "button", onClick: onResetRender, "aria-label": "Reset render settings", style: {
+                            border: "none",
+                            background: "transparent",
+                            fontSize: "11px",
+                            textTransform: "uppercase",
+                            letterSpacing: "0.12em",
+                            color: "#64748b",
+                            cursor: "pointer",
+                        }, children: "RESET" })) : null, _jsx("button", { type: "button", onClick: onToggleVeils, "aria-label": "Toggle veils", style: {
+                            border: "none",
+                            background: "transparent",
+                            fontSize: "11px",
+                            textTransform: "uppercase",
+                            letterSpacing: "0.14em",
+                            color: "#64748b",
+                            cursor: "pointer",
+                        }, children: "VEILS" })] })) : null] }));
+}

package/dist/ViewerCanvas.d.ts

@@ -0,0 +1,13 @@
+import type { PresetCatalog, ViewerCreateOptions, ViewerHandle } from "@treasuryspatial/viewer-kit";
+export type ViewerCanvasProps = {
+    presetId?: string;
+    presets?: PresetCatalog;
+    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, usePostprocessing, className, onReady, }: ViewerCanvasProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewerCanvas.d.ts.map

package/dist/ViewerCanvas.d.ts.map

@@ -0,0 +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,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,2CAqInB"}

package/dist/ViewerCanvas.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createViewer } from "@treasuryspatial/viewer-kit";
+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 {
+            presetId: initialPresetRef.current,
+            presets,
+            assetResolver,
+            camera,
+            renderer,
+            usePostprocessing,
+        };
+    }, [assetResolver, camera, presets, renderer, usePostprocessing]);
+    const handleContainerRef = useCallback((node) => {
+        setContainer(node);
+    }, []);
+    useLayoutEffect(() => {
+        if (!container)
+            return;
+        instanceRef.current += 1;
+        const instanceId = instanceRef.current;
+        let disposed = false;
+        let initialized = false;
+        let resizeObserver = null;
+        let sizeObserver = null;
+        let rafId = null;
+        let handle = null;
+        const cleanup = () => {
+            disposed = true;
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            sizeObserver?.disconnect();
+            sizeObserver = null;
+            resizeObserver?.disconnect();
+            resizeObserver = null;
+            if (handle) {
+                handle.stop();
+                handle.dispose();
+            }
+            handleRef.current = 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();
+            handle.resize();
+            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);
+            }
+        };
+        waitForSize();
+        return cleanup;
+    }, [container, createOptions, onReady]);
+    useEffect(() => {
+        if (!handleRef.current)
+            return;
+        if (presetId && presetIdRef.current !== presetId) {
+            presetIdRef.current = presetId;
+            handleRef.current.setPreset(presetId);
+        }
+    }, [presetId]);
+    return _jsx("div", { ref: handleContainerRef, className: className });
+}

package/dist/index.d.ts

@@ -0,0 +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

@@ -0,0 +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,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

@@ -0,0 +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

@@ -0,0 +1,35 @@
+{
+  "name": "@treasuryspatial/viewer-react",
+  "version": "0.1.11",
+  "type": "module",
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@treasuryspatial/viewer-kit": "^0.2.31"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "19.1.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b --pretty false --noEmit"
+  }
+}