@tnkrai/tnkr-editor 0.1.9 → 0.2.0

package/dist/index.cjs

@@ -74793,7 +74793,9 @@ const PartContextMenu = ({ contextMenu, onClose, onHighlight, onRemoveHighlight,
 
 const TnkrEditorModelViewCore = ({ htmlString, className, style, onElementsReady, 
 // Accept all dependencies as props instead of using hooks
-parts, phases = [], selectedPhaseId, selectedStepId, selectStep, isAnimating = false, isPreparingAnimation = false, setIsAnimating, setIsPreparingAnimation, }) => {
+parts, phases = [], selectedPhaseId, selectedStepId, selectStep, isAnimating = false, isPreparingAnimation = false, setIsAnimating, setIsPreparingAnimation, 
+// Navigation handlers from parent
+handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, }) => {
     // Use the hook with parts passed as parameter
     const { containerRef, scriptsLoaded, initializeModel, controlFunctions, partOperations, handleShowAllParts, updateExplosion, updateDirectionalExplosion, setCameraSettings, contextMenu, setContextMenu, handleContextMenuHighlight, handleContextMenuRemoveHighlight, handleContextMenuHide, handleContextMenuShow, handleContextMenuIsolate, isPartHighlighted, isPartHidden, isPartIsolated, } = useModelViewCore(parts);
     const [lastStepId, setLastStepId] = React.useState(null);
@@ -74844,31 +74846,49 @@ parts, phases = [], selectedPhaseId, selectedStepId, selectStep, isAnimating = f
         });
         return allSteps;
     }, [phases]);
-    // Navigation handlers - work across all phases
+    // Use parent navigation handlers if provided, otherwise create local ones as fallback
     const handlePrevious = React.useCallback(() => {
-        if (!selectStep || !selectedPhaseId || !selectedStepId)
-            return;
-        if (isAnimatingRef.current || isPreparingRef.current)
-            return;
-        const allSteps = getAllSteps();
-        const currentIndex = allSteps.findIndex((s) => s.phaseId === selectedPhaseId && s.stepId === selectedStepId);
-        if (currentIndex > 0) {
-            const prevStep = allSteps[currentIndex - 1];
-            selectStep(prevStep.phaseId, prevStep.stepId);
+        if (parentHandlePrevious) {
+            // Check animation state before calling parent handler
+            if (isAnimatingRef.current || isPreparingRef.current)
+                return;
+            parentHandlePrevious();
         }
-    }, [selectStep, selectedPhaseId, selectedStepId, getAllSteps]);
+        else {
+            // Fallback to local implementation for backward compatibility
+            if (!selectStep || !selectedPhaseId || !selectedStepId)
+                return;
+            if (isAnimatingRef.current || isPreparingRef.current)
+                return;
+            const allSteps = getAllSteps();
+            const currentIndex = allSteps.findIndex((s) => s.phaseId === selectedPhaseId && s.stepId === selectedStepId);
+            if (currentIndex > 0) {
+                const prevStep = allSteps[currentIndex - 1];
+                selectStep(prevStep.phaseId, prevStep.stepId);
+            }
+        }
+    }, [parentHandlePrevious, selectStep, selectedPhaseId, selectedStepId, getAllSteps]);
     const handleNext = React.useCallback(() => {
-        if (!selectStep || !selectedPhaseId || !selectedStepId)
-            return;
-        if (isAnimatingRef.current || isPreparingRef.current)
-            return;
-        const allSteps = getAllSteps();
-        const currentIndex = allSteps.findIndex((s) => s.phaseId === selectedPhaseId && s.stepId === selectedStepId);
-        if (currentIndex >= 0 && currentIndex < allSteps.length - 1) {
-            const nextStep = allSteps[currentIndex + 1];
-            selectStep(nextStep.phaseId, nextStep.stepId);
+        if (parentHandleNext) {
+            // Check animation state before calling parent handler
+            if (isAnimatingRef.current || isPreparingRef.current)
+                return;
+            parentHandleNext();
+        }
+        else {
+            // Fallback to local implementation for backward compatibility
+            if (!selectStep || !selectedPhaseId || !selectedStepId)
+                return;
+            if (isAnimatingRef.current || isPreparingRef.current)
+                return;
+            const allSteps = getAllSteps();
+            const currentIndex = allSteps.findIndex((s) => s.phaseId === selectedPhaseId && s.stepId === selectedStepId);
+            if (currentIndex >= 0 && currentIndex < allSteps.length - 1) {
+                const nextStep = allSteps[currentIndex + 1];
+                selectStep(nextStep.phaseId, nextStep.stepId);
+            }
         }
-    }, [selectStep, selectedPhaseId, selectedStepId, getAllSteps]);
+    }, [parentHandleNext, selectStep, selectedPhaseId, selectedStepId, getAllSteps]);
     // Keep refs in sync with state
     React.useEffect(() => {
         isAnimatingRef.current = isAnimating;
@@ -75329,8 +75349,7 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                         finalX = dragPositionRef.current[annotation.id].x;
                         finalY = dragPositionRef.current[annotation.id].y;
                     }
-                    else if (annotation.customOffset &&
-                        !(annotation.customOffset.x === 0 && annotation.customOffset.y === 0)) {
+                    else if (annotation.customOffset && !(annotation.customOffset.x === 0 && annotation.customOffset.y === 0)) {
                         // Use custom offset if dragged - but ignore (0,0) which means no real offset
                         finalX = canvasPos[0] + annotation.customOffset.x;
                         finalY = canvasPos[1] + annotation.customOffset.y;
@@ -75424,7 +75443,7 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
         if (hitPoint && hitPoint.length >= 3) {
             const newAnnotation = Object.assign(Object.assign({}, currentAnnotation), { worldPos: [hitPoint[0], hitPoint[1], hitPoint[2]] });
             // Add to annotations list
-            setAnnotations(prev => {
+            setAnnotations((prev) => {
                 const updated = [...prev, newAnnotation];
                 return updated;
             });
@@ -75437,7 +75456,14 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                 updateAnnotationPositions();
             }, 100);
         }
-    }, [isPlacingAnnotation, currentAnnotation, updateAnnotationPositions, setAnnotations, setCurrentAnnotation, setIsPlacingAnnotation]);
+    }, [
+        isPlacingAnnotation,
+        currentAnnotation,
+        updateAnnotationPositions,
+        setAnnotations,
+        setCurrentAnnotation,
+        setIsPlacingAnnotation,
+    ]);
     // Set up enterFrame callback for position updates with better performance
     React.useEffect(() => {
         if (!runtimeRef.current || annotations.length === 0)
@@ -75521,14 +75547,27 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
             return;
         e.preventDefault();
         e.stopPropagation();
-        const rect = e.currentTarget.getBoundingClientRect();
         const containerRect = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         if (!containerRect)
             return;
+        // Get the annotation element's current position from the DOM
+        const element = document.getElementById(`assembly-annotation-${annotationId}`);
+        if (!element)
+            return;
+        // Get the actual current position from the element's style (this is where it's visually positioned)
+        const currentLeft = parseFloat(element.style.left) || 0;
+        const currentTop = parseFloat(element.style.top) || 0;
+        // Store the exact current position to prevent any jump
+        dragPositionRef.current[annotationId] = {
+            x: currentLeft,
+            y: currentTop,
+        };
         setIsDragging(annotationId);
+        // Calculate offset from mouse to the element's current position
+        // This maintains the grab point during dragging
         setDragOffset({
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top,
+            x: e.clientX - containerRect.left - currentLeft,
+            y: e.clientY - containerRect.top - currentTop,
         });
         // Notify parent that drag started
         onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
@@ -75545,7 +75584,7 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
         const canvasPos = runtimeRef.current.calcCanvasPos(x, y, z);
         if (!canvasPos)
             return;
-        // Calculate new position with drag offset
+        // Calculate new position: mouse position minus the offset gives us where the center should be
         const newX = e.clientX - containerRect.left - dragOffset.x;
         const newY = e.clientY - containerRect.top - dragOffset.y;
         // Calculate offset from 3D anchor point
@@ -75585,7 +75624,7 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
             if (updatedAnnotation) {
                 console.log('💾 Flushing pending update for annotation', updatedAnnotation.id, {
                     customOffset: updatedAnnotation.customOffset,
-                    scale: updatedAnnotation.scale
+                    scale: updatedAnnotation.scale,
                 });
                 // Update state with final position
                 setAnnotations((prev) => prev.map((annotation) => (annotation.id === updatedAnnotation.id ? updatedAnnotation : annotation)));
@@ -75713,7 +75752,9 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                 return null;
         }
     };
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("svg", { className: 'absolute inset-0 w-full h-full pointer-events-none z-10 opacity-100 transition-opacity duration-300 ease-in-out', children: [jsxRuntimeExports.jsx("defs", { children: annotations.filter(a => a.type === 'arrow' && a.arrow).map((annotation) => {
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("svg", { className: 'absolute inset-0 w-full h-full pointer-events-none z-10 opacity-100 transition-opacity duration-300 ease-in-out', children: [jsxRuntimeExports.jsx("defs", { children: annotations
+                            .filter((a) => a.type === 'arrow' && a.arrow)
+                            .map((annotation) => {
                             const lineColor = getColorCode(annotation.arrow.color);
                             const uniqueId = annotation.id;
                             return (jsxRuntimeExports.jsxs(React__namespace.default.Fragment, { children: [jsxRuntimeExports.jsx("marker", { id: `point-fill-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '9', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '0 0, 10 3, 0 6', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `pointFill-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '9', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '0 0, 10 3, 0 6', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `point-outline-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '9', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '0 0, 10 3, 0 6', fill: 'none', stroke: lineColor, strokeWidth: '1' }) }), jsxRuntimeExports.jsx("marker", { id: `pointOutline-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '9', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '0 0, 10 3, 0 6', fill: 'none', stroke: lineColor, strokeWidth: '1' }) }), jsxRuntimeExports.jsx("marker", { id: `inverse-point-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '1', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '10 0, 0 3, 10 6', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `inversePointFill-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '1', refY: '3', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '10 0, 0 3, 10 6', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `diamond-${uniqueId}`, markerWidth: '10', markerHeight: '10', refX: '5', refY: '5', orient: 'auto', children: jsxRuntimeExports.jsx("polygon", { points: '5 1, 9 5, 5 9, 1 5', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `dot-${uniqueId}`, markerWidth: '8', markerHeight: '8', refX: '4', refY: '4', orient: 'auto', children: jsxRuntimeExports.jsx("circle", { cx: '4', cy: '4', r: '3', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `dotFill-${uniqueId}`, markerWidth: '8', markerHeight: '8', refX: '4', refY: '4', orient: 'auto', children: jsxRuntimeExports.jsx("circle", { cx: '4', cy: '4', r: '3', fill: lineColor }) }), jsxRuntimeExports.jsx("marker", { id: `joint-${uniqueId}`, markerWidth: '8', markerHeight: '8', refX: '4', refY: '4', orient: 'auto', children: jsxRuntimeExports.jsx("circle", { cx: '4', cy: '4', r: '2', fill: 'none', stroke: lineColor, strokeWidth: '1' }) })] }, `markers-${uniqueId}`));
@@ -75747,8 +75788,8 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                             const deltaY = pos.endY - pos.startY;
                             // Calculate bend point (70% along the path with 10° offset for 100° angle)
                             const bendRatio = 0.7; // How far along to place the bend
-                            const midX = pos.startX + (deltaX * bendRatio);
-                            const midY = pos.startY + (deltaY * bendRatio) + (deltaX * 0.1); // 10° offset for 100° angle
+                            const midX = pos.startX + deltaX * bendRatio;
+                            const midY = pos.startY + deltaY * bendRatio + deltaX * 0.1; // 10° offset for 100° angle
                             const pathData = `M ${pos.startX} ${pos.startY} L ${midX} ${midY} L ${pos.endX} ${pos.endY}`;
                             pathElement = (jsxRuntimeExports.jsx("path", { d: pathData, stroke: lineColor, strokeWidth: lineThickness, fill: 'none', markerStart: markerStart, markerEnd: markerEnd, opacity: '0.9', strokeLinecap: 'round', strokeLinejoin: 'round' }));
                         }
@@ -75790,7 +75831,7 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                     // Check if this annotation should be visible
                     const isVisible = visibleAnnotationIds.includes(annotation.id);
                     const ContainerClasses = `
-            ${annotation.type === 'label' ? 'transform -translate-x-1/2 -translate-y-full' : ''} ${isSelected ? 'ring-1 ring-blue-400' : isDragging === annotation.id ? 'opacity-70 ring-1 ring-red-400' : ''} ${!isVisible ? 'invisible' : ''}
+            ${annotation.type === 'label' ? 'transform -translate-x-1/2 -translate-y-1/2' : ''} ${isSelected ? 'ring-1 ring-blue-400' : isDragging === annotation.id ? 'opacity-70 ring-1 ring-red-400' : ''} ${!isVisible ? 'invisible' : ''}
           `;
                     const TextAreaClasses = `
             absolute top-1/2 -translate-y-1/2 ${fontFamilyClass} text-${annotation.align}
@@ -75833,17 +75874,17 @@ function AssemblyAnnotationOverlay({ annotations, setAnnotations, currentAnnotat
                     return (jsxRuntimeExports.jsxs("div", { id: `assembly-annotation-${annotation.id}`, className: cn('w-max relative text-xs pointer-events-auto cursor-pointer flex items-center transition-all', ContainerClasses), onDoubleClick: handleDoubleClick, onMouseDown: handleSelect, children: [jsxRuntimeExports.jsx("div", { style: { height: scale, width: scale }, children: jsxRuntimeExports.jsx(ShapeSVG, { annotation: annotation }) }), jsxRuntimeExports.jsx(Textarea, { rows: 1, value: canContainText ? annotation.text.value : '', placeholder: canContainText ? 'Add Text' : '', readOnly: !canContainText || editingAnnotation !== annotation.id, className: cn(`absolute resize-none bg-transparent cursor-pointer leading-tight w-full !border-none !outline-none !ring-0 z-[2]`, TextAreaClasses), style: {
                                     color: textColor,
                                     fontSize: `${textSize}px`,
-                                    minHeight: `${textSize}px`
+                                    minHeight: `${textSize}px`,
                                 }, autoFocus: editingAnnotation === annotation.id && canContainText, onChange: (e) => {
                                     // Update the annotation text immediately on change
                                     if (editingAnnotation === annotation.id) {
                                         // Find the current annotation with all its properties
-                                        const currentAnn = annotations.find(a => a.id === annotation.id);
+                                        const currentAnn = annotations.find((a) => a.id === annotation.id);
                                         if (!currentAnn)
                                             return;
                                         const updatedAnnotation = Object.assign(Object.assign({}, currentAnn), { text: Object.assign(Object.assign({}, currentAnn.text), { value: e.target.value }) });
                                         // Update annotations array
-                                        setAnnotations((prev) => prev.map((a) => a.id === annotation.id ? updatedAnnotation : a));
+                                        setAnnotations((prev) => prev.map((a) => (a.id === annotation.id ? updatedAnnotation : a)));
                                         // Also update currentAnnotation if this is the currently selected annotation
                                         if ((currentAnnotation === null || currentAnnotation === void 0 ? void 0 : currentAnnotation.id) === annotation.id) {
                                             setCurrentAnnotation(updatedAnnotation);
@@ -75956,11 +75997,41 @@ const Tag = ({ text, className = '' }) => {
     const backgroundColor = getColor(text);
     return (jsxRuntimeExports.jsx("span", { className: `px-3 py-1.5 rounded-md text-sm font-medium text-white ${className}`, style: { backgroundColor }, children: text }));
 };
-const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, parts, organizationId, productId, editMode = false, onUploadImage, onPhasesUpdate, }) => {
+const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, parts, organizationId, productId, editMode = false, onUploadImage, onPhasesUpdate, routePhaseId, routeStepId, onAssemblyChange, }) => {
     var _a;
-    const [currentPhaseIndex, setCurrentPhaseIndex] = React.useState(0);
-    const [currentStepIndex, setCurrentStepIndex] = React.useState(0);
-    const [currentView, setCurrentView] = React.useState('overview');
+    // Initialize state based on route props
+    const getInitialPhaseIndex = () => {
+        if (routePhaseId) {
+            const index = phases.findIndex(p => p.id === routePhaseId);
+            return index >= 0 ? index : 0;
+        }
+        return 0;
+    };
+    const getInitialStepIndex = () => {
+        if (routePhaseId && routeStepId) {
+            const phaseIndex = phases.findIndex(p => p.id === routePhaseId);
+            if (phaseIndex >= 0) {
+                const stepIndex = phases[phaseIndex].steps.findIndex(s => s.id === routeStepId);
+                return stepIndex >= 0 ? stepIndex : 0;
+            }
+        }
+        return 0;
+    };
+    const getInitialView = () => {
+        if (routePhaseId && routeStepId) {
+            const phaseIndex = phases.findIndex(p => p.id === routePhaseId);
+            if (phaseIndex >= 0) {
+                const stepIndex = phases[phaseIndex].steps.findIndex(s => s.id === routeStepId);
+                if (stepIndex >= 0) {
+                    return 'step';
+                }
+            }
+        }
+        return 'overview';
+    };
+    const [currentPhaseIndex, setCurrentPhaseIndex] = React.useState(getInitialPhaseIndex);
+    const [currentStepIndex, setCurrentStepIndex] = React.useState(getInitialStepIndex);
+    const [currentView, setCurrentView] = React.useState(getInitialView);
     const [isAnimating, setIsAnimating] = React.useState(false);
     const [isPreparingAnimation, setIsPreparingAnimation] = React.useState(false);
     const containerRef = React__namespace.default.useRef(null);
@@ -76301,16 +76372,40 @@ const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, p
         // Trigger debounced save for step description
         debouncedSave(stepId, content, 'step-description');
     }, [debouncedSave]);
-    // Load annotations when step changes - same logic as Editor3D
-    React__namespace.default.useEffect(() => {
+    // Load annotations when step changes - same logic as Editor3D with migration
+    React.useEffect(() => {
         // Only update if the step ID actually changed
         if (prevStepIdRef.current !== (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id)) {
             prevStepIdRef.current = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id) || null;
-            const stepAnnotations = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.annotations) || [];
-            setAssemblyAnnotations(stepAnnotations);
+            if (currentStep === null || currentStep === void 0 ? void 0 : currentStep.annotations) {
+                // MIGRATION LOGIC: Convert old pulse format to new format
+                // Background: In commit 8e30c8a, pulse structure was changed from:
+                //   arrow.endPulse (boolean) and arrow.pulseColor (ColorLabel)
+                // to:
+                //   pulse: { show: boolean, color: ColorLabel }
+                // This migration ensures existing annotations don't lose their pulse settings
+                const migratedAnnotations = currentStep.annotations.map((annotation) => {
+                    var _a;
+                    // Check if annotation has old pulse format but no new pulse property
+                    if (((_a = annotation.arrow) === null || _a === void 0 ? void 0 : _a.endPulse) && !annotation.pulse) {
+                        return Object.assign(Object.assign({}, annotation), { pulse: {
+                                show: annotation.arrow.endPulse,
+                                color: annotation.arrow.pulseColor || 'pulse orange'
+                            }, 
+                            // Clean up old properties from arrow object
+                            arrow: Object.assign(Object.assign({}, annotation.arrow), { endPulse: undefined, pulseColor: undefined }) });
+                    }
+                    // Return annotation as-is if already migrated or doesn't need migration
+                    return annotation;
+                });
+                setAssemblyAnnotations(migratedAnnotations);
+                console.log('📝 View mode annotations loaded and migrated for step:', currentStep === null || currentStep === void 0 ? void 0 : currentStep.id, 'count:', migratedAnnotations.length);
+            }
+            else {
+                setAssemblyAnnotations([]);
+            }
             // Reset visible annotations (default to all hidden in view mode)
             setVisibleAnnotationIds([]);
-            console.log('📝 View mode annotations loaded for step:', currentStep === null || currentStep === void 0 ? void 0 : currentStep.id, 'count:', stepAnnotations.length);
         }
     }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.id, currentStep]);
     // Navigation functions
@@ -76327,33 +76422,115 @@ const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, p
         }
         return false;
     }, [currentPhase, currentStepIndex, currentPhaseIndex, phases]);
+    const canGoPrevious = React.useMemo(() => {
+        if (!currentPhase)
+            return false;
+        // If not at first step of current phase, can go previous
+        if (currentStepIndex > 0)
+            return true;
+        // If at first step of current phase, check if there's a previous phase with steps
+        if (currentPhaseIndex > 0) {
+            const previousPhase = phases[currentPhaseIndex - 1];
+            return previousPhase.steps.length > 0;
+        }
+        return false;
+    }, [currentPhase, currentStepIndex, currentPhaseIndex, phases]);
     const handleNext = () => {
+        var _a, _b, _c;
         if (!currentPhase)
             return;
+        let newPhaseIndex = currentPhaseIndex;
+        let newStepIndex = currentStepIndex;
         if (currentStepIndex < currentPhase.steps.length - 1) {
-            setCurrentStepIndex(currentStepIndex + 1);
+            newStepIndex = currentStepIndex + 1;
+            setCurrentStepIndex(newStepIndex);
         }
         else if (currentPhaseIndex < phases.length - 1) {
             const nextPhaseIndex = currentPhaseIndex + 1;
             const nextPhase = phases[nextPhaseIndex];
             if (nextPhase.steps.length > 0) {
-                setCurrentPhaseIndex(nextPhaseIndex);
-                setCurrentStepIndex(0);
+                newPhaseIndex = nextPhaseIndex;
+                newStepIndex = 0;
+                setCurrentPhaseIndex(newPhaseIndex);
+                setCurrentStepIndex(newStepIndex);
+            }
+        }
+        // Call onAssemblyChange if provided
+        if (onAssemblyChange) {
+            const phaseId = (_a = phases[newPhaseIndex]) === null || _a === void 0 ? void 0 : _a.id;
+            const stepId = currentView === 'step' ? (_c = (_b = phases[newPhaseIndex]) === null || _b === void 0 ? void 0 : _b.steps[newStepIndex]) === null || _c === void 0 ? void 0 : _c.id : undefined;
+            if (phaseId) {
+                onAssemblyChange(phaseId, stepId);
+            }
+        }
+    };
+    const handlePrevious = () => {
+        var _a, _b, _c;
+        if (!currentPhase)
+            return;
+        let newPhaseIndex = currentPhaseIndex;
+        let newStepIndex = currentStepIndex;
+        if (currentStepIndex > 0) {
+            newStepIndex = currentStepIndex - 1;
+            setCurrentStepIndex(newStepIndex);
+        }
+        else if (currentPhaseIndex > 0) {
+            const previousPhaseIndex = currentPhaseIndex - 1;
+            const previousPhase = phases[previousPhaseIndex];
+            if (previousPhase.steps.length > 0) {
+                newPhaseIndex = previousPhaseIndex;
+                newStepIndex = previousPhase.steps.length - 1;
+                setCurrentPhaseIndex(newPhaseIndex);
+                setCurrentStepIndex(newStepIndex);
+            }
+        }
+        // Call onAssemblyChange if provided
+        if (onAssemblyChange) {
+            const phaseId = (_a = phases[newPhaseIndex]) === null || _a === void 0 ? void 0 : _a.id;
+            const stepId = currentView === 'step' ? (_c = (_b = phases[newPhaseIndex]) === null || _b === void 0 ? void 0 : _b.steps[newStepIndex]) === null || _c === void 0 ? void 0 : _c.id : undefined;
+            if (phaseId) {
+                onAssemblyChange(phaseId, stepId);
             }
         }
     };
     const handlePhaseChange = (phaseIndex) => {
+        var _a;
         setCurrentPhaseIndex(phaseIndex);
         setCurrentStepIndex(0);
         setCurrentView('overview');
+        // Call onAssemblyChange if provided
+        if (onAssemblyChange) {
+            const phaseId = (_a = phases[phaseIndex]) === null || _a === void 0 ? void 0 : _a.id;
+            if (phaseId) {
+                onAssemblyChange(phaseId, undefined); // No stepId in overview mode
+            }
+        }
     };
     const handleStepClick = (stepIndex) => {
+        var _a;
         setCurrentStepIndex(stepIndex);
         setCurrentView('step');
+        // Call onAssemblyChange if provided
+        if (onAssemblyChange) {
+            const phaseId = currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id;
+            const stepId = (_a = currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps[stepIndex]) === null || _a === void 0 ? void 0 : _a.id;
+            if (phaseId) {
+                onAssemblyChange(phaseId, stepId);
+            }
+        }
     };
     const handleBeginPhase = () => {
+        var _a;
         setCurrentStepIndex(0);
         setCurrentView('step');
+        // Call onAssemblyChange if provided
+        if (onAssemblyChange) {
+            const phaseId = currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id;
+            const stepId = (_a = currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps[0]) === null || _a === void 0 ? void 0 : _a.id;
+            if (phaseId) {
+                onAssemblyChange(phaseId, stepId);
+            }
+        }
     };
     const handleToggleAnnotation = (annotationId) => {
         // Note: Camera settings functionality would require additional props if needed
@@ -76427,7 +76604,7 @@ const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, p
     if (phases.length === 0) {
         return (jsxRuntimeExports.jsx("div", { className: `flex items-center justify-center h-full ${className}`, children: jsxRuntimeExports.jsxs("div", { className: 'text-center text-white/60 space-y-2', children: [jsxRuntimeExports.jsx("p", { className: 'text-lg', children: "No assembly phases available" }), jsxRuntimeExports.jsx("p", { className: 'text-sm', children: "Import assembly instructions to get started" })] }) }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: `assembly-view-container w-full h-full relative rounded-3xl bg-[#161617] ${className}`, children: jsxRuntimeExports.jsxs("div", { className: 'grid grid-cols-1 lg:grid-cols-5 gap-4 px-4 py-4 items-stretch', children: [jsxRuntimeExports.jsxs("div", { className: 'lg:col-span-3 flex flex-col w-full relative bg-transparent border rounded-3xl border-[#313133]', children: [jsxRuntimeExports.jsxs("div", { className: 'rounded-lg p-6 flex-shrink-0', children: [jsxRuntimeExports.jsxs("div", { className: 'flex items-center justify-between mb-4', children: [jsxRuntimeExports.jsxs("div", { className: 'text-sm text-white/70', children: [productTitle, " Assembly"] }), jsxRuntimeExports.jsxs("div", { className: 'text-sm text-white/70', children: [completedStepsInCurrentPhase, "/", totalStepsInCurrentPhase, " Complete"] })] }), jsxRuntimeExports.jsx("div", { className: 'space-y-2', children: jsxRuntimeExports.jsx("div", { className: 'flex space-x-1', children: currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps.map((_, index) => (jsxRuntimeExports.jsx("div", { className: `h-1 rounded-sm flex-1 transition-all duration-300 ${index < completedStepsInCurrentPhase ? 'bg-white' : 'bg-[#313133]'}` }, index))) }) })] }), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: 'w-full relative flex-1 min-h-[400px]', style: { backgroundColor: 'transparent' }, children: [currentView === 'step' && assemblyAnnotations.length > 0 && (jsxRuntimeExports.jsx("div", { className: 'absolute right-[4.5rem] z-20', children: jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsxs(Button, { variant: 'outline', size: 'sm', className: 'flex items-center gap-2 px-3 py-1.5', children: [jsxRuntimeExports.jsxs("div", { className: 'relative', children: [jsxRuntimeExports.jsx(CiBellOn, { className: 'size-5 stroke-[0.7] text-[#AA423A]' }), jsxRuntimeExports.jsx("p", { className: 'absolute top-0 right-0 rounded-full text-[7px] bg-[#AA423A] text-white size-2.5 text-center', children: assemblyAnnotations.length })] }), "Annotations", jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:caret-down', className: 'w-3 h-3 ml-1' })] }) }), jsxRuntimeExports.jsxs(DropdownMenuContent, { align: 'end', className: 'bg-[#232326] border-gray-700 min-w-[200px]', children: [jsxRuntimeExports.jsx(DropdownMenuLabel, { className: 'text-gray-400 text-xs', children: "Annotation Controls" }), jsxRuntimeExports.jsx(DropdownMenuSeparator, { className: 'bg-gray-700' }), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: () => setVisibleAnnotationIds(assemblyAnnotations.map((a) => a.id)), className: 'text-white hover:bg-gray-800 cursor-pointer', children: [jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:eye', className: 'w-4 h-4 mr-2' }), "Show All Annotations"] }), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: () => setVisibleAnnotationIds([]), className: 'text-white hover:bg-gray-800 cursor-pointer', children: [jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:eye-slash', className: 'w-4 h-4 mr-2' }), "Hide All Annotations"] }), jsxRuntimeExports.jsx(DropdownMenuSeparator, { className: 'bg-gray-700' }), jsxRuntimeExports.jsx(DropdownMenuLabel, { className: 'text-gray-400 text-xs', children: "Individual Annotations" }), assemblyAnnotations.map((annotation, index) => {
+    return (jsxRuntimeExports.jsx("div", { className: `h-full max-h-screen w-full relative bg-[#161617] rounded-3xl ${className}`, children: jsxRuntimeExports.jsxs("div", { className: 'grid grid-cols-1 lg:grid-cols-5 gap-4 px-4 py-4 h-full', children: [jsxRuntimeExports.jsxs("div", { className: 'lg:col-span-3 flex flex-col w-full h-full relative bg-transparent border rounded-3xl border-[#313133] min-h-0', children: [jsxRuntimeExports.jsxs("div", { className: 'rounded-lg py-6 px-18 flex-shrink-0 h-[120px] flex flex-col justify-end', children: [jsxRuntimeExports.jsxs("div", { className: 'flex items-center justify-between mb-4', children: [jsxRuntimeExports.jsxs("div", { className: 'text-sm text-white/70', children: [productTitle, " Assembly"] }), jsxRuntimeExports.jsxs("div", { className: 'text-sm text-white/70', children: [completedStepsInCurrentPhase, "/", totalStepsInCurrentPhase, " Complete"] })] }), jsxRuntimeExports.jsx("div", { className: 'flex space-x-1', children: currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps.map((_, index) => (jsxRuntimeExports.jsx("div", { className: `h-1 rounded-sm flex-1 transition-all duration-300 ${index < completedStepsInCurrentPhase ? 'bg-white' : 'bg-[#313133]'}` }, index))) })] }), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: 'w-full relative flex-1 min-h-[400px]', style: { backgroundColor: 'transparent' }, children: [currentView === 'step' && assemblyAnnotations.length > 0 && (jsxRuntimeExports.jsx("div", { className: 'absolute right-[4.5rem] z-20', children: jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsxs(Button, { variant: 'outline', size: 'sm', className: 'flex items-center gap-2 px-3 py-1.5', children: [jsxRuntimeExports.jsxs("div", { className: 'relative', children: [jsxRuntimeExports.jsx(CiBellOn, { className: 'size-5 stroke-[0.7] text-[#AA423A]' }), jsxRuntimeExports.jsx("p", { className: 'absolute top-0 right-0 rounded-full text-[7px] bg-[#AA423A] text-white size-2.5 text-center', children: assemblyAnnotations.length })] }), "Annotations", jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:caret-down', className: 'w-3 h-3 ml-1' })] }) }), jsxRuntimeExports.jsxs(DropdownMenuContent, { align: 'end', className: 'bg-[#232326] border-gray-700 min-w-[200px]', children: [jsxRuntimeExports.jsx(DropdownMenuLabel, { className: 'text-gray-400 text-xs', children: "Annotation Controls" }), jsxRuntimeExports.jsx(DropdownMenuSeparator, { className: 'bg-gray-700' }), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: () => setVisibleAnnotationIds(assemblyAnnotations.map((a) => a.id)), className: 'text-white hover:bg-gray-800 cursor-pointer', children: [jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:eye', className: 'w-4 h-4 mr-2' }), "Show All Annotations"] }), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: () => setVisibleAnnotationIds([]), className: 'text-white hover:bg-gray-800 cursor-pointer', children: [jsxRuntimeExports.jsx(react$2.Icon, { icon: 'ph:eye-slash', className: 'w-4 h-4 mr-2' }), "Hide All Annotations"] }), jsxRuntimeExports.jsx(DropdownMenuSeparator, { className: 'bg-gray-700' }), jsxRuntimeExports.jsx(DropdownMenuLabel, { className: 'text-gray-400 text-xs', children: "Individual Annotations" }), assemblyAnnotations.map((annotation, index) => {
                                                         const displayText = annotation.text.value || `${annotation.type === 'arrow' ? 'Arrow' : 'Label'} ${index + 1}`;
                                                         const truncatedText = displayText.length > 30 ? displayText.substring(0, 30) + '...' : displayText;
                                                         const isVisible = visibleAnnotationIds.includes(annotation.id);
@@ -76442,9 +76619,13 @@ const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, p
                                                         setCurrentPhaseIndex(targetPhaseIndex);
                                                         setCurrentStepIndex(targetStepIndex);
                                                         setCurrentView('step');
+                                                        // Call onAssemblyChange when navigation happens from 3D viewer
+                                                        if (onAssemblyChange) {
+                                                            onAssemblyChange(phaseId, stepId);
+                                                        }
                                                     }
                                                 }
-                                            }, isAnimating: isAnimating, isPreparingAnimation: isPreparingAnimation, setIsAnimating: setIsAnimating, setIsPreparingAnimation: setIsPreparingAnimation, onElementsReady: handleElementsReady })) : (jsxRuntimeExports.jsx("div", { className: 'flex items-center justify-center h-full text-gray-500', children: jsxRuntimeExports.jsx("p", { children: "3D Model Loading..." }) })), htmlContent && currentView === 'step' && assemblyAnnotations.length > 0 && (jsxRuntimeExports.jsx(AssemblyAnnotationOverlay, { annotations: assemblyAnnotations, setAnnotations: () => { }, currentAnnotation: null, setCurrentAnnotation: () => { }, isPlacingAnnotation: false, setIsPlacingAnnotation: () => { }, runtimeRef: runtimeRef, isPenToolActive: false, visibleAnnotationIds: visibleAnnotationIds, setVisibleAnnotationIds: setVisibleAnnotationIds, setCameraSettings: () => { }, onActivatePenTool: () => { }, onCloseTypeSelector: () => { } }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: 'lg:col-span-2 bg-[#0D0D0D] rounded-3xl w-full px-6 pt-4 pb-6 flex flex-col min-h-[600px]', children: [jsxRuntimeExports.jsx("div", { className: 'mb-4 max-w-[12rem]', children: jsxRuntimeExports.jsx(TnkrSelect, { value: { value: currentPhaseIndex.toString(), label: ((_a = phases[currentPhaseIndex]) === null || _a === void 0 ? void 0 : _a.title) || '' }, options: phases.map((phase, index) => ({ value: index.toString(), label: phase.title })), onChange: (option) => handlePhaseChange(Number(option.value)) }) }), jsxRuntimeExports.jsx("div", { className: 'border-b border-[#313133] mb-6' }), jsxRuntimeExports.jsx("div", { className: 'flex-1 flex flex-col overflow-y-auto min-h-0', children: currentView === 'overview' ? (
+                                            }, isAnimating: isAnimating, isPreparingAnimation: isPreparingAnimation, setIsAnimating: setIsAnimating, setIsPreparingAnimation: setIsPreparingAnimation, onElementsReady: handleElementsReady, handleNext: handleNext, handlePrevious: handlePrevious })) : (jsxRuntimeExports.jsx("div", { className: 'flex items-center justify-center h-full text-gray-500', children: jsxRuntimeExports.jsx("p", { children: "3D Model Loading..." }) })), htmlContent && currentView === 'step' && assemblyAnnotations.length > 0 && (jsxRuntimeExports.jsx(AssemblyAnnotationOverlay, { annotations: assemblyAnnotations, setAnnotations: () => { }, currentAnnotation: null, setCurrentAnnotation: () => { }, isPlacingAnnotation: false, setIsPlacingAnnotation: () => { }, runtimeRef: runtimeRef, isPenToolActive: false, visibleAnnotationIds: visibleAnnotationIds, setVisibleAnnotationIds: setVisibleAnnotationIds, setCameraSettings: () => { }, onActivatePenTool: () => { }, onCloseTypeSelector: () => { } }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: 'lg:col-span-2 bg-[#0D0D0D] rounded-3xl w-full h-full px-6 pt-4 pb-6 flex flex-col min-h-0', children: [jsxRuntimeExports.jsx("div", { className: 'mb-4 max-w-[12rem]', children: jsxRuntimeExports.jsx(TnkrSelect, { value: { value: currentPhaseIndex.toString(), label: ((_a = phases[currentPhaseIndex]) === null || _a === void 0 ? void 0 : _a.title) || '' }, options: phases.map((phase, index) => ({ value: index.toString(), label: phase.title })), onChange: (option) => handlePhaseChange(Number(option.value)) }) }), jsxRuntimeExports.jsx("div", { className: 'border-b border-[#313133] mb-6' }), jsxRuntimeExports.jsx("div", { className: 'flex-1 flex flex-col overflow-y-auto min-h-0', children: currentView === 'overview' ? (
                             // Phase Overview
                             // Check if phase has "Add a title" and no content
                             (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.title) === 'Add a title' &&
@@ -76475,11 +76656,13 @@ const AssemblyViewMode = ({ phases, htmlContent, className = '', productTitle, p
                                             }, onUploadImage: onUploadImage, customExtensionSet: getBasicExtensions(), className: "text-white/70 leading-relaxed", minHeight: 20, readOnly: !editMode }, `step-description-${currentStep === null || currentStep === void 0 ? void 0 : currentStep.id}`) }), jsxRuntimeExports.jsxs("div", { className: 'space-y-6 flex-1', children: [jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: 'text-lg font-semibold mb-4 text-white', children: "Parts Needed" }), (currentStep === null || currentStep === void 0 ? void 0 : currentStep.parts) && currentStep.parts.length > 0 ? (jsxRuntimeExports.jsx("div", { className: 'flex flex-wrap gap-2', children: currentStep.parts.map((part, index) => {
                                                             const displayName = part.name;
                                                             return jsxRuntimeExports.jsx(Tag, { text: displayName }, part.id || index);
-                                                        }) })) : (jsxRuntimeExports.jsx("p", { className: 'text-white/50 text-sm', children: "No parts required for this step" }))] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: 'text-lg font-semibold mb-4 text-white', children: "Tools" }), (currentStep === null || currentStep === void 0 ? void 0 : currentStep.tools) && currentStep.tools.length > 0 ? (jsxRuntimeExports.jsx("div", { className: 'flex flex-wrap gap-2', children: currentStep.tools.map((tool, index) => (jsxRuntimeExports.jsx(Tag, { text: tool.title }, tool.id || index))) })) : (jsxRuntimeExports.jsx("p", { className: 'text-white/50 text-sm', children: "No tools required for this step" }))] })] }), jsxRuntimeExports.jsx(Button, { onClick: handleNext, disabled: !canGoNext, className: 'bg-[#AA423A] hover:bg-[#8A322E] disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2 rounded-lg font-medium max-w-[7rem] ml-auto  h-11', children: currentStepIndex === (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps.length) - 1
-                                            ? currentPhaseIndex < phases.length - 1
-                                                ? 'Next Phase'
-                                                : 'Complete'
-                                            : 'Next Step' })] })) })] })] }) }));
+                                                        }) })) : (jsxRuntimeExports.jsx("p", { className: 'text-white/50 text-sm', children: "No parts required for this step" }))] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: 'text-lg font-semibold mb-4 text-white', children: "Tools" }), (currentStep === null || currentStep === void 0 ? void 0 : currentStep.tools) && currentStep.tools.length > 0 ? (jsxRuntimeExports.jsx("div", { className: 'flex flex-wrap gap-2', children: currentStep.tools.map((tool, index) => (jsxRuntimeExports.jsx(Tag, { text: tool.title }, tool.id || index))) })) : (jsxRuntimeExports.jsx("p", { className: 'text-white/50 text-sm', children: "No tools required for this step" }))] })] }), jsxRuntimeExports.jsxs("div", { className: 'flex items-center justify-between gap-4', children: [canGoPrevious && (jsxRuntimeExports.jsx(Button, { onClick: handlePrevious, className: 'bg-transparent border border-[#313133] hover:bg-[#232326] text-white/70 hover:text-white px-6 py-2.5 rounded-lg font-medium h-11', children: currentStepIndex === 0 && currentPhaseIndex > 0
+                                                    ? 'Previous Phase'
+                                                    : 'Previous Step' })), jsxRuntimeExports.jsx(Button, { onClick: handleNext, disabled: !canGoNext, className: 'bg-[#AA423A] hover:bg-[#8A322E] disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2.5 rounded-lg font-medium h-11 ml-auto', children: currentStepIndex === (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps.length) - 1
+                                                    ? currentPhaseIndex < phases.length - 1
+                                                        ? 'Next Phase'
+                                                        : 'Complete'
+                                                    : 'Next Step' })] })] })) })] })] }) }));
 };
 
 /**