From 22cd773688dfc9e7efe8fdabbf20c952479144d1 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 22 Dec 2025 22:07:59 -0500
Subject: [PATCH] fix: improve onboarding tour first step to show full canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add noSpotlight option for steps that dim the canvas without a cutout
- Add center placement for viewport-centered tooltips
- Update first step to welcome users to the full canvas space
- Replace arbitrary square highlight with uniform overlay

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/ui/OnboardingTour/TourTooltip.tsx | 25 +++++++++++++++++++++++--
 src/ui/OnboardingTour/tourSteps.ts    | 20 +++++++++++---------
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/ui/OnboardingTour/TourTooltip.tsx b/src/ui/OnboardingTour/TourTooltip.tsx
index d56bd30..418f655 100644
--- a/src/ui/OnboardingTour/TourTooltip.tsx
+++ b/src/ui/OnboardingTour/TourTooltip.tsx
@@ -27,6 +27,12 @@ function calculateTooltipPosition(
   const centerY = top + height / 2
 
   switch (placement) {
+    case 'center':
+      // Center in viewport
+      return {
+        top: window.innerHeight / 2 - tooltipHeight / 2,
+        left: window.innerWidth / 2 - tooltipWidth / 2
+      }
     case 'top':
       return { top: top - tooltipHeight - gap, left: centerX - tooltipWidth / 2 }
     case 'bottom':
@@ -118,8 +124,23 @@ export function TourTooltip({
 
   return (
     <>
-      {/* Spotlight overlay with cutout */}
-      {targetRect && (
+      {/* Spotlight overlay with cutout (or full overlay for noSpotlight steps) */}
+      {step.noSpotlight ? (
+        // Full overlay without cutout for intro/welcome steps
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            background: colors.overlay,
+            zIndex: 99998,
+            pointerEvents: 'none',
+            transition: 'opacity 0.3s ease-out'
+          }}
+        />
+      ) : targetRect && (
         <div
           style={{
             position: 'fixed',
diff --git a/src/ui/OnboardingTour/tourSteps.ts b/src/ui/OnboardingTour/tourSteps.ts
index 6d94386..869b52e 100644
--- a/src/ui/OnboardingTour/tourSteps.ts
+++ b/src/ui/OnboardingTour/tourSteps.ts
@@ -9,25 +9,27 @@ export interface TourStep {
   // Fallback positioning if element not found
   fallbackPosition?: { top: number; left: number }
   // Tooltip placement relative to target
-  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'
   // Optional highlight padding around target element
   highlightPadding?: number
   // Optional action hint (e.g., "Click to continue" vs "Press Enter")
   actionHint?: string
   // Optional icon for visual interest
   icon?: string
+  // If true, don't show spotlight cutout (for full-canvas intro steps)
+  noSpotlight?: boolean
 }
 
 export const TOUR_STEPS: TourStep[] = [
   {
-    id: 'local-first',
-    title: 'Your Data, Your Device',
-    content: 'This canvas stores everything locally in your browser first. Your work is saved automatically and works offline - no account required to start creating.',
-    targetSelector: '.tlui-menu__button',
-    placement: 'bottom-right',
-    highlightPadding: 8,
-    icon: '🏠',
-    actionHint: 'Your data never leaves your device unless you choose to sync'
+    id: 'welcome-canvas',
+    title: 'Welcome to Your Canvas',
+    content: 'This is your infinite creative space. Everything you create here is stored locally in your browser first - your work is saved automatically and works offline.',
+    targetSelector: '.tl-container',
+    placement: 'center',
+    noSpotlight: true,
+    icon: '✨',
+    actionHint: 'No account required to start creating'
   },
   {
     id: 'cryptid-login',