@treasuryspatial/viewer-react 0.1.44 → 0.1.48

package/dist/AccessAssetsMenu.d.ts.map

@@ -1 +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,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC9B,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,kDA8IvB"}
+{"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,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC9B,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,kDAkKvB"}

package/dist/AccessAssetsMenu.js

@@ -3,6 +3,7 @@ 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 [openGroups, setOpenGroups] = useState({});
     const resolvedItems = useMemo(() => items.filter((item) => item &&
         item.label &&
         (typeof item.onClick === "function" || (Array.isArray(item.actions) && item.actions.length > 0))), [items]);
@@ -21,6 +22,14 @@ export default function AccessAssetsMenu({ label = "access assets", items, disab
     }, [open]);
     if (!resolvedItems.length)
         return null;
+    const runAction = async (action) => {
+        try {
+            await action.onClick?.();
+        }
+        finally {
+            setOpen(false);
+        }
+    };
     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",
@@ -36,49 +45,48 @@ export default function AccessAssetsMenu({ label = "access assets", items, disab
                     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) => (item.actions && item.actions.length > 0 ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsx("div", { style: {
-                                fontSize: "11px",
-                                textTransform: "uppercase",
-                                letterSpacing: "0.14em",
-                                color: "#94a3b8",
-                                padding: "0 2px",
-                            }, children: item.label }), item.actions
-                            .filter((action) => action && action.label && typeof action.onClick === "function")
-                            .map((action) => (_jsx("button", { type: "button", onClick: async () => {
-                                try {
-                                    await action.onClick?.();
-                                }
-                                finally {
-                                    setOpen(false);
-                                }
-                            }, disabled: disabled || item.disabled || action.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 || action.disabled ? "not-allowed" : "pointer",
-                                opacity: disabled || item.disabled || action.disabled ? 0.5 : 1,
-                            }, children: action.label }, action.key)))] }, item.key)) : (_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] }));
+                }, 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) => {
+                    const actions = item.actions?.filter((action) => action && action.label && typeof action.onClick === "function") ?? [];
+                    const groupOpen = openGroups[item.key] ?? false;
+                    const itemDisabled = disabled || item.disabled;
+                    return actions.length > 0 ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsxs("button", { type: "button", onClick: () => setOpenGroups((prev) => ({ ...prev, [item.key]: !groupOpen })), disabled: itemDisabled, style: {
+                                    width: "100%",
+                                    borderRadius: "8px",
+                                    border: "1px dashed #e2e8f0",
+                                    padding: "10px 12px",
+                                    fontSize: "12px",
+                                    color: "#475569",
+                                    background: "transparent",
+                                    cursor: itemDisabled ? "not-allowed" : "pointer",
+                                    opacity: itemDisabled ? 0.5 : 1,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: "8px",
+                                }, children: [_jsx("span", { children: item.label }), _jsx("span", { style: {
+                                            fontSize: "12px",
+                                            transform: groupOpen ? "rotate(180deg)" : "rotate(0deg)",
+                                            transition: "transform 0.2s ease",
+                                        }, children: "\u25BE" })] }), groupOpen ? (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px", paddingLeft: "12px" }, children: actions.map((action) => (_jsx("button", { type: "button", onClick: () => void runAction(action), disabled: itemDisabled || action.disabled, style: {
+                                        width: "100%",
+                                        borderRadius: "8px",
+                                        border: "1px dashed #e2e8f0",
+                                        padding: "10px 12px",
+                                        fontSize: "12px",
+                                        color: "#64748b",
+                                        background: "transparent",
+                                        cursor: itemDisabled || action.disabled ? "not-allowed" : "pointer",
+                                        opacity: itemDisabled || action.disabled ? 0.5 : 1,
+                                    }, children: action.label }, action.key))) })) : null] }, item.key)) : (_jsx("button", { type: "button", onClick: () => void runAction(item), disabled: itemDisabled, style: {
+                            width: "100%",
+                            borderRadius: "8px",
+                            border: "1px dashed #e2e8f0",
+                            padding: "10px 12px",
+                            fontSize: "12px",
+                            color: "#64748b",
+                            background: "transparent",
+                            cursor: itemDisabled ? "not-allowed" : "pointer",
+                            opacity: itemDisabled ? 0.5 : 1,
+                        }, children: item.label }, item.key));
+                }) })) : null] }));
 }

package/dist/AssetUploadCard.d.ts

@@ -2,6 +2,7 @@ import { type UploadResult } from "@treasuryspatial/viewer-kit";
 export type AssetUploadCardProps = {
     disabled?: boolean;
     apiRoute?: string;
+    resolveApiRoute?: () => string;
     geometryApiRoute?: string;
     maxBytes?: number;
     timeoutMs?: number;
@@ -15,5 +16,5 @@ export type AssetUploadCardProps = {
     description?: string;
     minimal?: boolean;
 };
-export default function AssetUploadCard({ disabled, apiRoute, geometryApiRoute, maxBytes, timeoutMs, preview, allowEmptyGeometry, accept, onSolved, onClear, className, title, description, minimal, }: AssetUploadCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AssetUploadCard({ disabled, apiRoute, resolveApiRoute, geometryApiRoute, 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

@@ -1 +1 @@
-{"version":3,"file":"AssetUploadCard.d.ts","sourceRoot":"","sources":["../src/AssetUploadCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,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,gBAAsC,EACtC,QAAyC,EACzC,SAA2C,EAC3C,OAAO,EACP,kBAAkB,EAClB,MAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAsB,EACtB,WAAsF,EACtF,OAAe,GAChB,EAAE,oBAAoB,2CAgOtB"}
+{"version":3,"file":"AssetUploadCard.d.ts","sourceRoot":"","sources":["../src/AssetUploadCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,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,eAAe,EACf,gBAAsC,EACtC,QAAyC,EACzC,SAA2C,EAC3C,OAAO,EACP,kBAAkB,EAClB,MAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAsB,EACtB,WAAsF,EACtF,OAAe,GAChB,EAAE,oBAAoB,2CAiOtB"}

package/dist/AssetUploadCard.js

@@ -8,7 +8,7 @@ const formatBytes = (bytes) => {
     const mb = bytes / (1024 * 1024);
     return `${mb.toFixed(0)}MB`;
 };
-export default function AssetUploadCard({ disabled, apiRoute = "/api/gh-solve", geometryApiRoute = "/api/geometry-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, }) {
+export default function AssetUploadCard({ disabled, apiRoute = "/api/gh-solve", resolveApiRoute, geometryApiRoute = "/api/geometry-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);
@@ -40,8 +40,9 @@ export default function AssetUploadCard({ disabled, apiRoute = "/api/gh-solve",
         try {
             let result;
             if (kind === "gh" || kind === "ghx") {
+                const resolvedApiRoute = resolveApiRoute?.() ?? apiRoute;
                 const solved = await solveGrasshopperFile(file, {
-                    apiRoute,
+                    apiRoute: resolvedApiRoute,
                     preview,
                     allowEmptyGeometry,
                     onStatus: (detail) => updateStatus(file.name, detail),

package/dist/ViewControls.d.ts

@@ -1,33 +1,67 @@
+import React from "react";
 export type LightingOption = {
     id: string;
     label: string;
     summary?: string;
+    group?: string;
 };
 export type MaterialOption = {
     id: string;
     label: string;
     summary?: string;
     swatches?: string[];
+    group?: string;
 };
 export type SkyOption = {
     id: string;
     label: string;
     description?: string;
+    group?: string;
+};
+export type ViewControlsAction = {
+    id: string;
+    label: string;
+    active?: boolean;
+    onClick: () => void;
+};
+export type ViewControlsWidget = {
+    id: string;
+    content: React.ReactNode;
+    minWidth?: number | string;
 };
 export type ViewControlsProps = {
     activeLightingPreset: string;
     onLightingChange: (preset: string) => void;
+    /**
+     * When environment/rig options are provided, the single LIGHTING chip is
+     * replaced by ENVIRONMENT + RIG axis chips (lighting-preset catalog
+     * restructure). Consumers that omit them keep the legacy single chip.
+     */
+    environmentOptions?: LightingOption[];
+    activeEnvironmentId?: string;
+    onEnvironmentChange?: (environmentId: string) => void;
+    rigOptions?: LightingOption[];
+    activeRigId?: string;
+    onRigChange?: (rigId: string) => void;
     materialOptions?: MaterialOption[];
     activeMaterialPreset?: string;
     onMaterialChange?: (preset: string) => void;
-    onCameraViewChange: (view: string) => void;
+    onCameraViewChange?: (view: string) => void;
     skyOptions: SkyOption[];
     activeSkyId: string;
     onSkyChange: (skyId: string) => void;
+    /**
+     * BACKDROP gate (owner final spec 2026-07-11): while an ENVIRONMENT (HDR
+     * photo world) owns light + sky, the BACKDROP menu is disabled — the
+     * generated worlds only apply once the environment is cleared to none.
+     */
+    skyDisabled?: boolean;
     lightingOptions: LightingOption[];
+    extraActions?: ViewControlsAction[];
+    extraWidgets?: ViewControlsWidget[];
     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;
+export default function ViewControls({ activeLightingPreset, onLightingChange, environmentOptions, activeEnvironmentId, onEnvironmentChange, rigOptions, activeRigId, onRigChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, skyDisabled, lightingOptions, extraActions, extraWidgets, veilsEnabled, onToggleVeils, onResetRender, }: ViewControlsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ViewControls.d.ts.map

package/dist/ViewControls.d.ts.map

@@ -1 +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;AA6EF,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,2CA8VnB"}
+{"version":3,"file":"ViewControls.d.ts","sourceRoot":"","sources":["../src/ViewControls.tsx"],"names":[],"mappings":"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"}

package/dist/ViewControls.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 const cardStyle = {
     position: "relative",
     background: "var(--viewer-ui-color-surface-strong, rgba(255,255,255,0.92))",
@@ -25,6 +25,7 @@ const veilStyle = {
     letterSpacing: "0.1em",
     color: "var(--viewer-ui-color-text-subtle, rgba(100,116,139,0.7))",
 };
+const compactControlHeight = "32px";
 const dropdownStyle = {
     position: "absolute",
     bottom: "calc(100% + 8px)",
@@ -56,6 +57,14 @@ const menuButtonStyle = (active) => ({
     fontSize: "12px",
     textTransform: "lowercase",
 });
+const menuGroupLabelStyle = {
+    padding: "8px 10px 4px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0.12em",
+    textTransform: "uppercase",
+    color: "var(--viewer-ui-color-text-subtle, rgba(100,116,139,0.72))",
+};
 const swatchRowStyle = {
     display: "flex",
     gap: "6px",
@@ -68,44 +77,97 @@ const swatchStyle = (color) => ({
     background: color,
     border: "1px solid var(--viewer-ui-color-panel-border, 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 shouldShowGroupLabel = (items, index) => {
+    const current = items[index]?.group;
+    if (!current)
+        return false;
+    if (index === 0)
+        return true;
+    return items[index - 1]?.group !== current;
+};
+const dropdownHeaderStyle = {
+    padding: "4px 10px 8px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0.14em",
+    textTransform: "uppercase",
+    color: "var(--viewer-ui-color-text-subtle, rgba(100,116,139,0.85))",
+    textAlign: "left",
+    borderBottom: "1px solid var(--viewer-ui-color-panel-border, #e2e8f0)",
+    marginBottom: "4px",
+};
+function AxisDropdownChip({ caption, options, activeId, onSelect, expanded, menuRef, onToggle, onClose, disabled = false, disabledHint, }) {
+    const active = options.find((option) => option.id === activeId) ?? options[0];
+    return (_jsx("div", { ref: menuRef, children: _jsxs("div", { style: { ...cardStyle, opacity: disabled ? 0.45 : 1 }, children: [expanded && !disabled ? (_jsxs("div", { style: dropdownStyle, children: [_jsx("div", { style: dropdownHeaderStyle, children: caption }), options.map((option, index) => (_jsxs(React.Fragment, { children: [shouldShowGroupLabel(options, index) ? (_jsx("div", { style: menuGroupLabelStyle, children: option.group })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                        onSelect(option.id);
+                                        onClose();
+                                    }, style: menuButtonStyle(option.id === activeId), 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", disabled: disabled, "aria-disabled": disabled, title: disabled ? disabledHint : undefined, onClick: () => {
+                        if (disabled)
+                            return;
+                        onToggle();
+                    }, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: "10px",
+                        padding: "8px 12px",
+                        border: "none",
+                        background: "transparent",
+                        width: "100%",
+                        minWidth: "128px",
+                        cursor: disabled ? "not-allowed" : "pointer",
+                    }, children: [_jsx("span", { style: labelStyle, children: active?.label ?? activeId }), _jsx("span", { style: { fontSize: "11px", color: "var(--viewer-ui-color-text-muted, #64748b)" }, children: disabled ? "" : expanded ? "▼" : "▲" })] })] }) }));
+}
+export default function ViewControls({ activeLightingPreset, onLightingChange, environmentOptions, activeEnvironmentId, onEnvironmentChange, rigOptions, activeRigId, onRigChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, skyDisabled = false, lightingOptions, extraActions = [], extraWidgets = [], veilsEnabled = true, onToggleVeils, onResetRender, }) {
     const lightingMenuRef = useRef(null);
+    const environmentMenuRef = useRef(null);
+    const rigMenuRef = useRef(null);
     const materialMenuRef = useRef(null);
     const skyMenuRef = useRef(null);
     const [lightingExpanded, setLightingExpanded] = useState(false);
+    const [environmentExpanded, setEnvironmentExpanded] = useState(false);
+    const [rigExpanded, setRigExpanded] = 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 showAxisChips = Boolean(environmentOptions?.length && rigOptions?.length && onEnvironmentChange && onRigChange);
     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)
+        if (!lightingExpanded && !environmentExpanded && !rigExpanded && !skyExpanded && !materialExpanded)
             return;
+        const closeAll = () => {
+            setLightingExpanded(false);
+            setEnvironmentExpanded(false);
+            setRigExpanded(false);
+            setMaterialExpanded(false);
+            setSkyExpanded(false);
+        };
         const onMouseDown = (event) => {
             const target = event.target;
             if (!target)
                 return;
             if (lightingMenuRef.current?.contains(target))
                 return;
+            if (environmentMenuRef.current?.contains(target))
+                return;
+            if (rigMenuRef.current?.contains(target))
+                return;
             if (materialMenuRef.current?.contains(target))
                 return;
             if (skyMenuRef.current?.contains(target))
                 return;
-            setLightingExpanded(false);
-            setMaterialExpanded(false);
-            setSkyExpanded(false);
+            closeAll();
         };
         const onKeyDown = (event) => {
             if (event.key !== "Escape")
                 return;
-            setLightingExpanded(false);
-            setMaterialExpanded(false);
-            setSkyExpanded(false);
+            closeAll();
         };
         window.addEventListener("mousedown", onMouseDown);
         window.addEventListener("keydown", onKeyDown);
@@ -113,11 +175,46 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
             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: menuButtonStyle(option.id === activeLightingPreset), 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: () => {
+    }, [environmentExpanded, lightingExpanded, materialExpanded, rigExpanded, skyExpanded]);
+    return (_jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "flex-end" }, children: [showAxisChips && skyOptions.length ? (_jsx(AxisDropdownChip, { caption: "BACKGROUND", options: skyOptions, activeId: activeSkyId, onSelect: (id) => onSkyChange(id), expanded: skyExpanded, menuRef: skyMenuRef, onToggle: () => {
+                    setSkyExpanded((prev) => !prev);
+                    setEnvironmentExpanded(false);
+                    setRigExpanded(false);
+                    setMaterialExpanded(false);
+                }, onClose: () => setSkyExpanded(false), disabled: skyDisabled, disabledHint: "environment owns the scene \u2014 set environment to none/white to use a background" })) : 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, index) => (_jsxs(React.Fragment, { children: [shouldShowGroupLabel(skyOptions, index) ? (_jsx("div", { style: menuGroupLabelStyle, children: option.group })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                            onSkyChange(option.id);
+                                            setSkyExpanded(false);
+                                        }, style: menuButtonStyle(option.id === activeSkyId), 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: "var(--viewer-ui-color-text-muted, #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, showAxisChips ? (_jsx(AxisDropdownChip, { caption: "LIGHT", options: rigOptions ?? [], activeId: activeRigId, onSelect: (id) => onRigChange?.(id), expanded: rigExpanded, menuRef: rigMenuRef, onToggle: () => {
+                    setRigExpanded((prev) => !prev);
+                    setEnvironmentExpanded(false);
+                    setMaterialExpanded(false);
+                    setSkyExpanded(false);
+                }, onClose: () => setRigExpanded(false) })) : (_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, index) => (_jsxs(React.Fragment, { children: [shouldShowGroupLabel(lightingOptions, index) ? (_jsx("div", { style: menuGroupLabelStyle, children: option.group })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                            onLightingChange(option.id);
+                                            setLightingExpanded(false);
+                                        }, style: menuButtonStyle(option.id === activeLightingPreset), 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: {
@@ -139,10 +236,10 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
                                         color: "var(--viewer-ui-color-text-muted, #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: menuButtonStyle(option.id === activeMaterialPreset), 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: () => {
+                                    }, 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 ? (_jsxs("div", { style: dropdownStyle, children: [_jsx("div", { style: dropdownHeaderStyle, children: "SURFACES" }), materialOptions.map((option, index) => (_jsxs(React.Fragment, { children: [shouldShowGroupLabel(materialOptions, index) ? (_jsx("div", { style: menuGroupLabelStyle, children: option.group })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                                onMaterialChange(option.id);
+                                                setMaterialExpanded(false);
+                                            }, style: menuButtonStyle(option.id === activeMaterialPreset), 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, swatchIndex) => (_jsx("span", { style: swatchStyle(color) }, `${option.id}-${swatchIndex}`))) })) : null] })] }, option.id)))] })) : null, _jsxs("button", { type: "button", onClick: () => {
                                 setMaterialExpanded((prev) => !prev);
                                 setLightingExpanded(false);
                                 setSkyExpanded(false);
@@ -165,7 +262,12 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
                                         color: "var(--viewer-ui-color-text-muted, #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: {
+                                    }, children: materialExpanded ? "▼" : "▲" })] }), veilsEnabled && !materialExpanded && !materialHover ? _jsx("div", { style: veilStyle, children: "SURFACES" }) : null] }) })) : null, showAxisChips ? (_jsx(AxisDropdownChip, { caption: "ENVIRONMENT", options: environmentOptions ?? [], activeId: activeEnvironmentId, onSelect: (id) => onEnvironmentChange?.(id), expanded: environmentExpanded, menuRef: environmentMenuRef, onToggle: () => {
+                    setEnvironmentExpanded((prev) => !prev);
+                    setRigExpanded(false);
+                    setMaterialExpanded(false);
+                    setSkyExpanded(false);
+                }, onClose: () => setEnvironmentExpanded(false) })) : null, onCameraViewChange ? (_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 var(--viewer-ui-color-panel-border, #e2e8f0)",
@@ -182,32 +284,39 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
                             minWidth: "84px",
                             ...labelStyle,
                             color: !veilsEnabled || viewHover ? "var(--viewer-ui-color-text-muted, #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: menuButtonStyle(option.id === activeSkyId), 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: "var(--viewer-ui-color-text-muted, #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: {
+                        }, children: "perspective" }), veilsEnabled && !viewHover ? _jsx("div", { style: veilStyle, children: "VIEW" }) : null] })) : null, extraActions.map((action) => (_jsx("div", { children: _jsx("div", { style: {
+                        ...cardStyle,
+                        border: action.active ? "1px solid transparent" : cardStyle.border,
+                    }, children: _jsx("button", { type: "button", onClick: action.onClick, style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            gap: "10px",
+                            padding: "8px 12px",
+                            minHeight: compactControlHeight,
+                            border: "none",
+                            background: action.active
+                                ? "var(--viewer-ui-color-button-primary, var(--brand-primary, #318f4e))"
+                                : "transparent",
+                            borderRadius: "11px",
+                            width: "100%",
+                            cursor: "pointer",
+                        }, children: _jsx("span", { style: {
+                                ...labelStyle,
+                                opacity: 1,
+                                color: action.active
+                                    ? "var(--viewer-ui-color-button-primary-text, #ffffff)"
+                                    : labelStyle.color,
+                            }, children: action.label }) }) }) }, action.id))), extraWidgets.map((widget) => (_jsx("div", { children: _jsx("div", { style: {
+                        ...cardStyle,
+                        minWidth: widget.minWidth ?? 280,
+                        minHeight: compactControlHeight,
+                        display: "flex",
+                        alignItems: "stretch",
+                        position: "relative",
+                        zIndex: 1,
+                        pointerEvents: "auto",
+                    }, children: widget.content }) }, widget.id))), 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",

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,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"}
+{"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;AASF,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,2CA4GnB"}