@tnkrai/tnkr-editor 0.3.4 → 0.3.6

package/dist/index.cjs

@@ -75107,28 +75107,46 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
     React.useEffect(() => {
         isPreparingRef.current = isPreparingAnimation;
     }, [isPreparingAnimation]);
-    // Reverse explosion animation function
-    const performReverseExplosion = React.useCallback(async (specificTransforms) => {
-        if (!updateExplosion) {
-            return;
-        }
-        const duration = 2000;
-        const startTime = Date.now();
-        const startFactor = 1;
-        const endFactor = 0;
-        const animate = () => {
-            const elapsed = Date.now() - startTime;
-            const progress = Math.min(elapsed / duration, 1);
-            const easeOut = 1 - Math.pow(1 - progress, 3);
-            const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
-            updateExplosion(currentFactor, specificTransforms);
-            if (progress < 1) {
-                requestAnimationFrame(animate);
-            }
-        };
-        requestAnimationFrame(animate);
-        await new Promise((resolve) => setTimeout(resolve, duration + 100));
-    }, [updateExplosion]);
+    // Sequential animation function - animate parts one by one based on order
+    const performSequentialAnimation = React.useCallback(async (orderedParts, hasDirectionalParts) => {
+        const partDuration = 700; // Fixed duration per part (500ms each)
+        const overlap = 0; // 30% overlap between parts for smoother flow
+        for (let i = 0; i < orderedParts.length; i++) {
+            // if (playAnimationControlRef.current.shouldStop) return;
+            const part = orderedParts[i];
+            const delay = i * partDuration * (1 - overlap);
+            // Start this part's animation after the delay
+            setTimeout(() => {
+                // if (playAnimationControlRef.current.shouldStop) return;
+                // console.log(`🎬 Animating part ${i + 1}/${orderedParts.length}:`, part.name);
+                const startTime = Date.now();
+                const startFactor = 1;
+                const endFactor = 0;
+                const animatePart = () => {
+                    // if (playAnimationControlRef.current.shouldStop) return;
+                    const elapsed = Date.now() - startTime;
+                    const progress = Math.min(elapsed / partDuration, 1);
+                    const easeOut = 1 - Math.pow(1 - progress, 3);
+                    const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
+                    // Animate this single part
+                    if (hasDirectionalParts && updateDirectionalExplosion) {
+                        updateDirectionalExplosion(currentFactor, [part]);
+                    }
+                    else if (updateExplosion) {
+                        updateExplosion(currentFactor, [part]);
+                    }
+                    if (progress < 1) {
+                        requestAnimationFrame(animatePart);
+                    }
+                };
+                requestAnimationFrame(animatePart);
+            }, delay);
+        }
+        // Wait for all animations to complete
+        const totalAnimationTime = (orderedParts.length - 1) * partDuration * (1 - overlap) + partDuration;
+        await new Promise((resolve) => setTimeout(resolve, totalAnimationTime + 200));
+        // console.log('✅ Sequential animation completed');
+    }, [updateExplosion, updateDirectionalExplosion]);
     // ========================================
     // NEW: Updated function to use partOperations.isolateShapes
     // ========================================
@@ -75345,29 +75363,9 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
                     console.log("⏳ Parts in start position. Waiting 1.5 seconds before animating...");
                     await new Promise((resolve) => setTimeout(resolve, 1500));
                     console.log("🎬 Starting animation now!");
-                    // Step 4: Animate back to assembled (reverse explosion) - only affects step-specific parts
-                    if (hasDirectionalParts && updateDirectionalExplosion) {
-                        // Animate directional parts back to assembled position
-                        const duration = 2000;
-                        const startTime = Date.now();
-                        const startFactor = 1;
-                        const endFactor = 0;
-                        const animate = () => {
-                            const elapsed = Date.now() - startTime;
-                            const progress = Math.min(elapsed / duration, 1);
-                            const easeOut = 1 - Math.pow(1 - progress, 3);
-                            const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
-                            updateDirectionalExplosion(currentFactor, stepSpecificParts);
-                            if (progress < 1) {
-                                requestAnimationFrame(animate);
-                            }
-                        };
-                        requestAnimationFrame(animate);
-                        await new Promise((resolve) => setTimeout(resolve, duration + 100));
-                    }
-                    else {
-                        await performReverseExplosion(stepSpecificParts);
-                    }
+                    // Step 4: Execute sequential animation (always use this as default)
+                    console.log('🎬 EXECUTING SEQUENTIAL ANIMATION');
+                    await performSequentialAnimation(stepSpecificParts, hasDirectionalParts);
                 }
                 catch (error) {
                     console.error("❌ Error in step animation:", error);
@@ -75392,7 +75390,7 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
         updateExplosion,
         updateDirectionalExplosion,
         handleShowAllParts,
-        performReverseExplosion,
+        performSequentialAnimation,
         isolateMultipleStepParts,
         setIsAnimating,
         setIsPreparingAnimation,
@@ -77030,11 +77028,7 @@ const AssemblyViewMode = ({ phases, htmlContent, className = "", productTitle, p
                                                 if (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id) {
                                                     handlePhaseDescriptionChange(currentPhase.id, content);
                                                 }
-                                            }, onUploadImage: onUploadImage, customExtensionSet: getBasicExtensions(), className: "text-white", minHeight: 20, readOnly: !editMode }, `phase-${currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id}`) }), jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4 text-white", children: "Steps" }), jsxRuntimeExports.jsx("div", { className: "space-y-4", children: (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 ? (currentPhase.steps.map((step, index) => (jsxRuntimeExports.jsx("button", { onClick: () => handleStepClick(index), className: "w-full text-left rounded-2xl px-4 py-3 cursor-pointer border border-[#313133] transition-all", onMouseEnter: (e) => {
-                                                        e.currentTarget.style.border = '2px solid white';
-                                                    }, onMouseLeave: (e) => {
-                                                        e.currentTarget.style.border = '1px solid #313133';
-                                                    }, children: jsxRuntimeExports.jsxs("span", { className: "text-white/70", children: ["Step ", index + 1, ": ", step.title] }) }, step.id)))) : (
+                                            }, onUploadImage: onUploadImage, customExtensionSet: getBasicExtensions(), className: "text-white", minHeight: 20, readOnly: !editMode }, `phase-${currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.id}`) }), jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4 text-white", children: "Steps" }), jsxRuntimeExports.jsx("div", { className: "space-y-4", children: (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 ? (currentPhase.steps.map((step, index) => (jsxRuntimeExports.jsx("button", { onClick: () => handleStepClick(index), className: "w-full text-left rounded-2xl px-4 py-3 cursor-pointer border border-[#313133] transition-all hover:border-[#AA423A]", children: jsxRuntimeExports.jsxs("span", { className: "text-white/70", children: ["Step ", index + 1, ": ", step.title] }) }, step.id)))) : (
                                                 // Display message when phase has valid title but no steps
                                                 jsxRuntimeExports.jsx("p", { className: "text-white/80 text-md max-w-[31rem]", children: "No steps yet. Add an assembly step and an animation to let your readers know what to do." })) })] }), (currentPhase === null || currentPhase === void 0 ? void 0 : currentPhase.steps) && currentPhase.steps.length > 0 && (jsxRuntimeExports.jsx("div", { className: "mt-8 max-w-[7rem] ml-auto", children: jsxRuntimeExports.jsx(Button, { onClick: handleBeginPhase, className: "bg-[#AA423A] hover:bg-[#8A322E] text-white px-6 py-2 rounded-lg font-medium w-full h-11", children: "Begin Phase" }) }))] }))) : (
                             // Step Details
@@ -77590,7 +77584,7 @@ const PreviewCategoryItem = ({ category, level, selectedId, onSelect, onToggleEx
                         }, className: "ml-2 p-0.5 hover:bg-gray-700 rounded transition-colors flex-shrink-0", "aria-label": isExpanded ? "Collapse" : "Expand", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { size: 14, className: "text-gray-400" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { size: 14, className: "text-gray-400" })) }))] }), isExpanded && hasChildren && (jsxRuntimeExports.jsx("div", { children: category.children.map((child) => (jsxRuntimeExports.jsx(PreviewCategoryItem, { category: child, level: level + 1, selectedId: selectedId, onSelect: onSelect, onToggleExpand: onToggleExpand }, child.id))) }))] }));
 };
 const PreviewSidebar = ({ categories, selectedCategoryId, onCategorySelect, onToggleExpand, className = "", }) => {
-    return (jsxRuntimeExports.jsx("div", { className: cn("w-64 flex flex-col px-2", className), children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto py-4", children: [categories.map((category, index) => (jsxRuntimeExports.jsx("div", { className: index > 0 ? "mt-8" : "", children: jsxRuntimeExports.jsx(PreviewCategoryItem, { category: category, level: 0, selectedId: selectedCategoryId, onSelect: onCategorySelect, onToggleExpand: onToggleExpand }) }, category.id))), categories.length === 0 && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-8 text-gray-500", children: jsxRuntimeExports.jsx("p", { children: "No content available" }) }))] }) }));
+    return (jsxRuntimeExports.jsxs("div", { className: cn("w-64 flex flex-col px-2", className), children: [jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto py-4", children: [categories.map((category, index) => (jsxRuntimeExports.jsx("div", { className: index > 0 ? "mt-8" : "", children: jsxRuntimeExports.jsx(PreviewCategoryItem, { category: category, level: 0, selectedId: selectedCategoryId, onSelect: onCategorySelect, onToggleExpand: onToggleExpand }) }, category.id))), categories.length === 0 && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-8 text-gray-500", children: jsxRuntimeExports.jsx("p", { children: "No content available" }) }))] }), jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-t border-[#313133]", children: jsxRuntimeExports.jsxs("a", { href: "https://tnkr.ai", target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center gap-2 text-xs text-gray-400 hover:text-gray-300 transition-colors", children: [jsxRuntimeExports.jsx("span", { children: "Powered by" }), jsxRuntimeExports.jsx("span", { className: "font-semibold text-[#AA423A]", children: "TnkrAI" })] }) })] }));
 };
 
 const PageContentNavigator = ({ content, className = "" }) => {