@treasuryspatial/viewer-react 0.1.44 → 0.1.47

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,18 +1,33 @@
+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;
@@ -20,14 +35,16 @@ export type ViewControlsProps = {
     materialOptions?: MaterialOption[];
     activeMaterialPreset?: string;
     onMaterialChange?: (preset: string) => void;
-    onCameraViewChange: (view: string) => void;
+    onCameraViewChange?: (view: string) => void;
     skyOptions: SkyOption[];
     activeSkyId: string;
     onSkyChange: (skyId: string) => void;
     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, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, 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":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,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;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,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,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,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,kBAAkB,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA+FF,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,YAAiB,EACjB,YAAiB,EACjB,YAAmB,EACnB,aAAa,EACb,aAAa,GACd,EAAE,iBAAiB,2CA0anB"}

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,7 +77,15 @@ 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;
+};
+export default function ViewControls({ activeLightingPreset, onLightingChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, extraActions = [], extraWidgets = [], veilsEnabled = true, onToggleVeils, onResetRender, }) {
     const lightingMenuRef = useRef(null);
     const materialMenuRef = useRef(null);
     const skyMenuRef = useRef(null);
@@ -114,10 +131,10 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
             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: () => {
+    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, 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 +156,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 ? (_jsx("div", { style: dropdownStyle, children: 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 +182,7 @@ 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: "MATERIALS" }) : null] }) })) : 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,10 +199,10 @@ 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: () => {
+                        }, children: "perspective" }), veilsEnabled && !viewHover ? _jsx("div", { style: veilStyle, children: "VIEW" }) : null] })) : 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, 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: {
@@ -207,7 +224,39 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, m
                                         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: skyExpanded ? "▼" : "▲" })] }), veilsEnabled && !skyExpanded && !skyHover ? _jsx("div", { style: veilStyle, children: "BACKGROUND" }) : 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"}

package/dist/ViewerCanvas.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createViewer } from "@treasuryspatial/viewer-kit";
+const VIEWER_CANVAS_STYLE = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+};
 export default function ViewerCanvas({ presetId, presets, assetResolver, camera, renderer, usePostprocessing, className, onReady, }) {
     const [container, setContainer] = useState(null);
     const handleRef = useRef(null);
+    const onReadyRef = useRef(onReady);
     const presetIdRef = useRef(presetId);
     const initialPresetRef = useRef(presetId);
     const instanceRef = useRef(0);
+    useEffect(() => {
+        onReadyRef.current = onReady;
+    }, [onReady]);
     const createOptions = useMemo(() => {
         return {
             presetId: initialPresetRef.current,
@@ -28,17 +38,9 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
         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) {
@@ -47,14 +49,12 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
             }
             handleRef.current = null;
             if (instanceRef.current === instanceId) {
-                onReady?.(null);
+                onReadyRef.current?.(null);
             }
         };
         const initViewer = () => {
             if (disposed || initialized)
                 return;
-            if (container.clientWidth === 0 || container.clientHeight === 0)
-                return;
             initialized = true;
             container.innerHTML = "";
             handle = createViewer({
@@ -67,13 +67,13 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
                         viewer.__viewerId = instanceId;
                         handleRef.current = viewer;
                         console.log("[viewer-react] ready", { viewerId: instanceId });
-                        onReady?.(viewer);
+                        onReadyRef.current?.(viewer);
                     },
                     onError: (error) => {
                         if (disposed || instanceRef.current !== instanceId)
                             return;
                         console.error("[viewer-react] Failed to initialise viewer", error);
-                        onReady?.(null);
+                        onReadyRef.current?.(null);
                     },
                 },
             });
@@ -94,35 +94,10 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
             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]);
+    }, [container, createOptions]);
     useEffect(() => {
         if (!handleRef.current)
             return;
@@ -131,5 +106,5 @@ export default function ViewerCanvas({ presetId, presets, assetResolver, camera,
             handleRef.current.setPreset(presetId);
         }
     }, [presetId]);
-    return _jsx("div", { ref: handleContainerRef, className: className });
+    return _jsx("div", { ref: handleContainerRef, className: className, style: VIEWER_CANVAS_STYLE });
 }

package/dist/composerRouting.d.ts

@@ -1,5 +1,11 @@
 export type ComposerMode = string;
 export declare const DEFAULT_COMPOSER_MODE = "imagine";
+export declare const IMAGE_STREAM_MODE = "images";
+export declare const COMPOSER_PRODUCT_ROUTE = "/composer";
+export declare const COMPOSER_RUNTIME_ROUTE = "/composer/compose";
+export declare const COMPOSER_GALLERY_ROUTE = "/composer/gallery";
+export declare const COMPOSER_IMAGE_STREAM_ROUTE = "/composer/images";
+export declare const COMPOSER_ADMIN_ROUTE = "/composer/admin";
 export declare const resolveComposerMode: (value?: string | null, options?: {
     allowedModes?: string[];
     fallback?: string;

package/dist/composerRouting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composerRouting.d.ts","sourceRoot":"","sources":["../src/composerRouting.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,eAAO,MAAM,qBAAqB,YAAY,CAAC;AAI/C,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,GAAG,IAAI,EACrB,UAAS;IAAE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,KAC3D,YAUF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,MAAM,YAAY,KAAG,MAIvD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,YAAY,KAAG,MAI5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,2BAIpC;IACD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,KAAG;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;CA0B5B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uBAG5B;IACD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,KAAG,MAKH,CAAC"}
+{"version":3,"file":"composerRouting.d.ts","sourceRoot":"","sources":["../src/composerRouting.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,eAAO,MAAM,qBAAqB,YAAY,CAAC;AAC/C,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,sBAAsB,cAAc,CAAC;AAClD,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAC1D,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAC1D,eAAO,MAAM,2BAA2B,qBAAqB,CAAC;AAC9D,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAItD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,GAAG,IAAI,EACrB,UAAS;IAAE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,KAC3D,YAUF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,MAAM,YAAY,KAAG,MAKvD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,YAAY,KAAG,MAI5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,2BAIpC;IACD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,KAAG;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;CA2B5B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uBAG5B;IACD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,KAAG,MAKH,CAAC"}

package/dist/composerRouting.js

@@ -1,4 +1,10 @@
 export const DEFAULT_COMPOSER_MODE = "imagine";
+export const IMAGE_STREAM_MODE = "images";
+export const COMPOSER_PRODUCT_ROUTE = "/composer";
+export const COMPOSER_RUNTIME_ROUTE = "/composer/compose";
+export const COMPOSER_GALLERY_ROUTE = "/composer/gallery";
+export const COMPOSER_IMAGE_STREAM_ROUTE = "/composer/images";
+export const COMPOSER_ADMIN_ROUTE = "/composer/admin";
 const normalizeMode = (value) => (typeof value === "string" ? value.trim() : "");
 export const resolveComposerMode = (value, options = {}) => {
     const requested = normalizeMode(value);
@@ -15,28 +21,31 @@ export const resolveComposerMode = (value, options = {}) => {
 };
 export const composeHrefForMode = (mode) => {
     const resolved = normalizeMode(mode);
+    if (resolved === IMAGE_STREAM_MODE)
+        return COMPOSER_IMAGE_STREAM_ROUTE;
     if (!resolved || resolved === DEFAULT_COMPOSER_MODE)
-        return "/compose";
-    return `/compose?mode=${encodeURIComponent(resolved)}`;
+        return COMPOSER_RUNTIME_ROUTE;
+    return `${COMPOSER_RUNTIME_ROUTE}?mode=${encodeURIComponent(resolved)}`;
 };
 export const composeGuideHrefForMode = (mode) => {
     const resolved = normalizeMode(mode);
     if (!resolved || resolved === DEFAULT_COMPOSER_MODE)
-        return "/compose?view=guide";
-    return `/compose?mode=${encodeURIComponent(resolved)}&view=guide`;
+        return `${COMPOSER_RUNTIME_ROUTE}?view=guide`;
+    return `${COMPOSER_RUNTIME_ROUTE}?mode=${encodeURIComponent(resolved)}&view=guide`;
 };
 export const resolveGuideNavigation = ({ pathname, mode, view, }) => {
     const currentPath = pathname || "/";
-    const isAdminPage = currentPath.startsWith("/admin");
-    const isGuideViewActive = currentPath === "/compose" && view === "guide";
+    const isAdminPage = currentPath.startsWith(COMPOSER_ADMIN_ROUTE) || currentPath.startsWith("/admin");
+    const isComposeRuntimePath = currentPath === COMPOSER_RUNTIME_ROUTE || currentPath === "/compose";
+    const isGuideViewActive = isComposeRuntimePath && view === "guide";
     const guideLabel = isAdminPage ? "user guide" : isGuideViewActive || currentPath === "/guide" ? "composer" : "user guide";
     const composerHref = composeHrefForMode(mode);
     const guideLinkBase = composeGuideHrefForMode(mode);
     const guideHref = isAdminPage
         ? "/guide"
         : currentPath === "/guide"
-            ? "/compose"
-            : currentPath === "/compose"
+            ? COMPOSER_RUNTIME_ROUTE
+            : isComposeRuntimePath
                 ? isGuideViewActive
                     ? composerHref
                     : guideLinkBase
@@ -54,5 +63,5 @@ export const buildLoginHref = ({ pathname, search, }) => {
     const currentPath = pathname || "/";
     const searchString = search || "";
     const loginFrom = searchString ? `${currentPath}?${searchString}` : currentPath;
-    return `/login?from=${encodeURIComponent(loginFrom)}`;
+    return `/composer/login?from=${encodeURIComponent(loginFrom)}`;
 };