fix: tutorial no longer dismisses on overlay click; hidden panel warning replaced with Show Panel button

- Set overlayClickBehavior to no-op so clicking the overlay doesn't
  destroy the tour (users can still close via the X button)
- Replace "Element not visible" warning with "Panel hidden" label,
  an animated SVG cursor, and a "Show {Panel}" button that
  programmatically opens the required panel
- Add delegated click handler for [data-open-panel] buttons
- Bump to 1.1.2

Made-with: Cursor

Author: aeronauty

flexfoil-ui/package.json

@@ -2,7 +2,7 @@
   "name": "flexfoil-ui",
   "private": true,
   "license": "MIT",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

flexfoil-ui/src/App.css

@@ -717,30 +717,25 @@ button.primary:hover {
   color: #ffc107;
 }
 
-/* Element not visible warning (when tour element is hidden behind a tab) */
+/* Panel-hidden warning (when tour element is behind a closed/inactive tab) */
 .tour-element-warning {
   margin-bottom: 12px;
-  padding: 12px;
-  background: rgba(255, 152, 0, 0.15);
-  border: 1px solid rgba(255, 152, 0, 0.4);
-  border-radius: 6px;
+  padding: 12px 14px;
+  background: rgba(255, 152, 0, 0.12);
+  border: 1px solid rgba(255, 152, 0, 0.35);
+  border-radius: 8px;
   border-left: 3px solid #ff9800;
 }
 
 [data-theme="light"] .tour-element-warning {
-  background: rgba(255, 152, 0, 0.1);
+  background: rgba(255, 152, 0, 0.08);
 }
 
 .tour-element-warning__header {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
-}
-
-.tour-element-warning__icon {
-  font-size: 16px;
-  color: #ff9800;
+  margin-bottom: 6px;
 }
 
 .tour-element-warning__label {
@@ -755,19 +750,60 @@ button.primary:hover {
   font-size: 13px;
   color: var(--text-secondary);
   line-height: 1.5;
+  margin-bottom: 10px;
 }
 
 .tour-element-warning__message strong {
   color: var(--text-primary);
 }
 
-.tour-element-warning__message ul {
-  margin: 8px 0 0 0;
-  padding-left: 20px;
+/* Animated cursor SVG inside the warning header */
+.tour-animated-cursor {
+  color: #ff9800;
+  animation: tour-cursor-click 1.6s ease-in-out infinite;
+  flex-shrink: 0;
 }
 
-.tour-element-warning__message li {
-  margin-bottom: 4px;
+@keyframes tour-cursor-click {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
+  40%       { transform: translate(2px, 3px) scale(0.92); opacity: 0.8; }
+  55%       { transform: translate(2px, 3px) scale(0.92); opacity: 0.8; }
+  70%       { transform: translate(0, 0) scale(1); opacity: 1; }
+}
+
+/* "Show Panel" button */
+.tour-show-panel-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: #e68a00;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.tour-show-panel-btn:hover {
+  background: #cc7a00;
+}
+
+.tour-show-panel-btn:active {
+  transform: scale(0.97);
+}
+
+[data-theme="light"] .tour-show-panel-btn {
+  background: #f59e0b;
+  color: #1a1a1a;
+}
+
+[data-theme="light"] .tour-show-panel-btn:hover {
+  background: #d97706;
 }
 
 /* ── Command Palette ───────────────────────────────── */

flexfoil-ui/src/lib/version.ts

@@ -28,6 +28,14 @@ export interface ChangelogEntry {
 }
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: '1.1.2',
+    date: '2026-03-20',
+    items: [
+      { category: 'fixed', text: 'Tutorial no longer dismisses when clicking on panels or the overlay' },
+      { category: 'changed', text: 'Hidden panel warning in tutorials replaced with a "Show Panel" button and animated cursor' },
+    ],
+  },
   {
     version: '1.1.1',
     date: '2026-03-19',

flexfoil-ui/src/onboarding/OnboardingProvider.tsx

@@ -130,6 +130,7 @@ export function OnboardingProvider({ children }: OnboardingProviderProps) {
       doneBtnText: 'Done',
       progressText: '{{current}} of {{total}}',
       allowClose: true,
+      overlayClickBehavior: () => {},
       overlayColor: isDark ? 'rgba(0, 0, 0, 0.75)' : 'rgba(0, 0, 0, 0.5)',
       stagePadding: 8,
       stageRadius: 8,
@@ -308,6 +309,27 @@ export function OnboardingProvider({ children }: OnboardingProviderProps) {
     return driverRef.current;
   }, [clearChallengePolling, buildChallengeHTML, openPanel]);
 
+  // Delegated click handler for "Show Panel" buttons injected into tour popovers.
+  // Active only while a tour is running so it doesn't interfere otherwise.
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleShowPanel = (e: MouseEvent) => {
+      const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-open-panel]');
+      if (!btn) return;
+      e.stopPropagation();
+      const panelId = btn.dataset.openPanel;
+      if (panelId) {
+        openPanel(panelId);
+        // After opening, give layout a moment to settle then refresh the highlight
+        setTimeout(() => driverRef.current?.refresh(), 150);
+      }
+    };
+
+    document.addEventListener('click', handleShowPanel, true);
+    return () => document.removeEventListener('click', handleShowPanel, true);
+  }, [isActive, openPanel]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {

flexfoil-ui/src/onboarding/challenges.ts

@@ -159,24 +159,29 @@ export function getParentPanel(selector: string): string | null {
 }
 
 /**
- * Build HTML for element not visible warning
+ * Build HTML for element not visible warning with actionable "Show Panel" button
+ * and an animated cursor to draw attention.
  */
 export function buildElementNotVisibleHTML(panelId: string | null): string {
   const panelName = panelId ? getPanelDisplayName(panelId) : 'the required panel';
-  
+  const dataAttr = panelId ? ` data-open-panel="${panelId}"` : '';
+
+  const cursorSvg = `<svg class="tour-animated-cursor" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 3l14 8-6.5 1.5L11 19z" fill="currentColor" stroke="var(--bg-primary, #1a1a1a)" stroke-width="1.2" stroke-linejoin="round"/>
+  </svg>`;
+
   return `
     <div class="tour-element-warning">
       <div class="tour-element-warning__header">
-        <span class="tour-element-warning__icon">⚠</span>
-        <span class="tour-element-warning__label">Element not visible</span>
+        ${cursorSvg}
+        <span class="tour-element-warning__label">Panel hidden</span>
       </div>
       <div class="tour-element-warning__message">
-        The element for this step is hidden. Please open the <strong>${panelName}</strong> panel:
-        <ul style="margin: 8px 0 0 0; padding-left: 20px;">
-          <li>Click on the <strong>${panelName}</strong> tab if you see it</li>
-          <li>Or use <strong>Window</strong> menu → <strong>${panelName}</strong></li>
-        </ul>
+        The <strong>${panelName}</strong> panel needs to be visible for this step.
       </div>
+      <button class="tour-show-panel-btn"${dataAttr}>
+        Show ${panelName}
+      </button>
     </div>
   `;
 }