User reports Storybook issue
    ├── "cut off" / "clipped" / "can't see"
    │   └── Ask: "Docs page or Canvas?" + "Component type?"
    │   └── Likely: iframe height issue → Check 1
    │
    ├── "error" / "won't render" / "database"
    │   └── Ask: "Console error message?"
    │   └── Likely: Store dependency → Check 2
    │
    ├── "doesn't match" / "wrong props"
    │   └── Ask: "Which props are incorrect?"
    │   └── Likely: Props mismatch → Check 4
    │
    ├── "Cannot find name 'ref'" / "Cannot find name 'computed'"
    │   └── Ask: "Which Vue APIs are you using in setup()?"
    │   └── Likely: Missing imports → Check 7
    │
    ├── "buttons don't work" / "can't close modal"
    │   └── Ask: "What happens when you click [button]?"
    │   └── Likely: Missing event handlers → Check 8
    │
    └── Unknown
        └── Run full audit, then ask about findings

### [ComponentName] (Added: YYYY-MM-DD)
- Minimum height: XXXpx
- Special requirements: [notes]
- Common issues: [list]
- Solution: [what worked]
- User notes: [any context from user]

# Find stories with potentially low iframe heights
grep -rn "iframeHeight" src/stories/ | grep -E "iframeHeight: [0-5][0-9]{2},"

# Find stories without explicit height
grep -L "iframeHeight" src/stories/**/*.stories.ts

parameters: {
  layout: 'fullscreen',
  docs: {
    story: {
      inline: false,
      iframeHeight: 900,  // Adjust based on component type
    }
  }
},

parameters: {
  layout: 'fullscreen',
  docs: {
    story: { inline: true }
  }
},
decorators: [
  () => ({
    template: `
      <div class="story-container" style="
        background: var(--glass-bg-solid); /* Dark glass overlay */
        height: 850px; /* Adjust based on component needs */
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        /* No border for auth/overlay components to match BaseDropdown style */
      ">
        <style>
           .story-container .modal-overlay,
           .story-container .auth-container {
             position: absolute !important;
             width: 100% !important;
             height: 100% !important;
             z-index: 10 !important;
           }
        </style>
        <story />
      </div>
    `
  })
]

// Auto-resize iframes based on content
// Add to .storybook/preview.ts
if (typeof window !== 'undefined') {
  const observer = new MutationObserver(() => {
    document.querySelectorAll('iframe').forEach(iframe => {
      try {
        const body = iframe.contentWindow?.document?.body;
        const parent = iframe.parentElement;
        if (body && parent && parent.style.height === '400px') {
          parent.style.height = body.scrollHeight + 'px';
        }
      } catch (e) { /* cross-origin */ }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

# Find stories importing stores
grep -rn "from '@/stores" src/stories/
grep -rn "useTaskStore\|useTimerStore\|useCanvasStore\|useUIStore" src/stories/

// ❌ BAD - imports real store, triggers PouchDB init
import { useTaskStore } from '@/stores/tasks'

export const Default: Story = {
  render: () => ({
    setup() {
      const taskStore = useTaskStore()  // Database error!
      return { taskStore }
    }
  })
}

// ✅ Pass data via props, no store needed
const mockTask: Task = {
  id: '1',
  title: 'Test Task',
  status: 'planned',
  priority: 'high',
  // ... full task object matching Task interface
}

export const Default: Story = {
  args: {
    task: mockTask,
    onEdit: () => console.log('edit'),
    onDelete: () => console.log('delete'),
  }
}

// Create decorator: src/stories/decorators/freshPiniaDecorator.ts
import { createPinia, setActivePinia } from 'pinia'

export const freshPiniaDecorator = (story: any) => {
  setActivePinia(createPinia())
  return story()
}

// Use in story:
import { freshPiniaDecorator } from '../decorators/freshPiniaDecorator'

export default {
  decorators: [freshPiniaDecorator],
  // ...
}

import { createTestingPinia } from '@pinia/testing'

export const WithMockedState: Story = {
  decorators: [
    () => ({
      setup() {
        // Creates a testing pinia with initial state
        createTestingPinia({
          initialState: {
            tasks: {
              tasks: [{ id: '1', title: 'Mock Task' }]
            }
          }
        })
      },
      template: '<story />'
    })
  ]
}

// .storybook/preview.ts
import { type Preview, setup } from '@storybook/vue3'
import { createPinia } from 'pinia'

const pinia = createPinia()

setup((app) => {
  app.use(pinia)

  // Flag for stores to skip DB initialization
  if (typeof window !== 'undefined') {
    (window as any).__STORYBOOK__ = true
  }
})

// In store initialization
if (typeof window !== 'undefined' && (window as any).__STORYBOOK__) {
  // Skip PouchDB initialization
  return
}

grep -rn "template:.*<style>" src/stories/
grep -rn "template:.*<script>" src/stories/
grep -rn "template:" src/stories/ | grep -E "<style|<script"

// ❌ BAD - causes Vue compilation error
template: `
  <div>
    <style>.my-class { color: red; }</style>
    <Component />
  </div>
`

// ✅ GOOD - use inline styles
template: `
  <div style="color: red;">
    <Component />
  </div>
`

// ✅ GOOD - use CSS variables
template: `
  <div style="color: var(--text-primary);">
    <Component />
  </div>
`

# For each story file, compare args with component props
# Step 1: Get component props
grep -A 30 "defineProps" src/components/[ComponentName].vue

# Step 2: Get story args
grep -A 15 "args:" src/stories/[ComponentName].stories.ts

# Extract all props from a component
grep -oP "(?<=defineProps<\{)[^}]+" src/components/MyComponent.vue | tr ',' '\n'

# Find modals/overlays without fullscreen layout
grep -l "Modal\|Overlay\|Dialog\|Popup\|Drawer" src/stories/**/*.ts | \
  xargs grep -L "layout: 'fullscreen'"

// ❌ BAD for modals
parameters: {
  layout: 'centered',  // Modal will be clipped
}

// ✅ GOOD for modals
parameters: {
  layout: 'fullscreen',
  docs: {
    story: {
      inline: false,
      iframeHeight: 900,
    }
  }
}

# Find hardcoded hex colors in stories
grep -rn "#[0-9a-fA-F]\{3,8\}" src/stories/ --include="*.ts" --include="*.vue"

# Find hardcoded rgba values
grep -rn "rgba\s*(" src/stories/ --include="*.ts" --include="*.vue"

# Find hardcoded rgb values
grep -rn "rgb\s*(" src/stories/ --include="*.ts" --include="*.vue"

# Find inline styles with color/background
grep -rn "style=\"[^\"]*\(color\|background\|border\)" src/stories/

// ❌ BAD - hardcoded colors
const wrapperStyle = {
  background: '#1a1a2e',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  color: '#ffffff',
}

// ✅ GOOD - using CSS variables
const wrapperStyle = {
  background: 'var(--glass-bg-solid)',
  border: '1px solid var(--glass-border)',
  color: 'var(--text-primary)',
}

// ❌ BAD - inline hardcoded in template
template: `<div style="background: #000; color: #fff;">...</div>`

// ✅ GOOD - CSS variables in template
template: `<div style="background: var(--surface-primary); color: var(--text-primary);">...</div>`

// ❌ BAD - hardcoded priority color in mock data render
template: `<span style="color: #ef4444;">High Priority</span>`

// ✅ GOOD - tokenized priority color
template: `<span style="color: var(--color-priority-high);">High Priority</span>`

// Standard dark background decorator with tokens
const darkBgDecorator = () => ({
  template: `
    <div style="
      background: var(--surface-primary);
      min-height: 400px;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    ">
      <story />
    </div>
  `,
})

# Find stories using Vue APIs without importing them
# Step 1: List all story files using Vue APIs
grep -rn "\bref\b\|\breactive\b\|\bcomputed\b\|\bwatch\b\|\bonMounted\b\|\bonUnmounted\b\|\bnextTick\b" src/stories/ --include="*.ts" -l | \
# Step 2: Remove files that already import from 'vue'
while read file; do
  if ! grep -q "from 'vue'" "$file"; then
    echo "$file"
  fi
done

// ❌ BAD - Using Vue APIs without imports
import type { Meta, StoryObj } from '@storybook/vue3'
import MyComponent from '@/components/MyComponent.vue'

export const Interactive: Story = {
  render: () => ({
    components: { MyComponent },
    setup() {
      const counter = ref(0)  // TypeScript error: Cannot find name 'ref'
      const doubleCounter = computed(() => counter.value * 2)  // Error: Cannot find name 'computed'
      return { counter, doubleCounter }
    },
    template: `<MyComponent :count="counter" />`
  })
}

// ✅ GOOD - Import all used Vue APIs
import type { Meta, StoryObj } from '@storybook/vue3'
import { ref, computed } from 'vue'  // ✅ Add imports
import MyComponent from '@/components/MyComponent.vue'

export const Interactive: Story = {
  render: () => ({
    components: { MyComponent },
    setup() {
      const counter = ref(0)
      const doubleCounter = computed(() => counter.value * 2)
      return { counter, doubleCounter }
    },
    template: `<MyComponent :count="counter" />`
  })
}

// Before
import { ref } from 'vue'

// After
import { ref, computed, watch, onMounted } from 'vue'

// Before
import MyComponent from '@/components/MyComponent.vue'

// After
import { ref, computed } from 'vue'
import MyComponent from '@/components/MyComponent.vue'

# Step 1: Find components with event emitters
grep -rn "defineEmits" src/components/ --include="*.vue" | cut -d: -f1 | sort -u

# Step 2: For each component, check if stories provide handlers for critical events
# Manual review recommended for critical events: @close, @submit, @confirm, @cancel

// Component defines emits
const emit = defineEmits<{
  close: []
  confirm: []
  cancel: []
}>()

// Story - MISSING HANDLERS ❌
export const Default: Story = {
  args: {
    isOpen: true,
    title: 'Confirm Action',
  },
  render: (args) => ({
    components: { ConfirmationModal },
    template: `
      <ConfirmationModal
        :is-open="args.isOpen"
        :title="args.title"
        // ❌ Missing: @close handler
        // ❌ Missing: @confirm handler
        // ❌ Missing: @cancel handler
      />
    `
  })
}

export const Default: Story = {
  args: {
    isOpen: true,
    title: 'Confirm Action',
  },
  render: (args) => ({
    components: { ConfirmationModal },
    template: `
      <ConfirmationModal
        :is-open="args.isOpen"
        :title="args.title"
        @close="() => console.log('Closed')"
        @confirm="() => console.log('Confirmed')"
        @cancel="() => console.log('Cancelled')"
      />
    `
  })
}

export const InteractiveDemo: Story = {
  render: () => ({
    components: { ConfirmationModal },
    setup() {
      const isOpen = ref(true)

      const handleClose = () => {
        console.log('Modal closed')
        isOpen.value = false
      }

      const handleConfirm = () => {
        console.log('Confirmed action')
        isOpen.value = false
      }

      const handleCancel = () => {
        console.log('Cancelled')
        isOpen.value = false
      }

      return { isOpen, handleClose, handleConfirm, handleCancel }
    },
    template: `
      <ConfirmationModal
        :is-open="isOpen"
        title="Confirm Action"
        @close="handleClose"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      />
    `
  })
}

echo "=== STORYBOOK AUDIT REPORT ==="
echo ""
echo "=== 1. Store Dependencies ==="
grep -rn "from '@/stores" src/stories/ 2>/dev/null | head -20 || echo "None found"
echo ""
echo "=== 2. Low Iframe Heights (<600px) ==="
grep -rn "iframeHeight: [0-5][0-9]{2}," src/stories/ 2>/dev/null || echo "None found"
echo ""
echo "=== 3. Template Style/Script Tags ==="
grep -rn "template:" src/stories/ 2>/dev/null | grep -E "<style|<script" || echo "None found"
echo ""
echo "=== 4. Modals Without Fullscreen ==="
for f in $(find src/stories -name "*.stories.ts" 2>/dev/null); do
  if grep -q "Modal\|Overlay\|Dialog" "$f" && ! grep -q "fullscreen" "$f"; then
    echo "$f: NEEDS FULLSCREEN"
  fi
done
echo ""
echo "=== 5. Hardcoded Colors (Token Violations) ==="
echo "--- Hex colors ---"
grep -rn "#[0-9a-fA-F]\{3,8\}" src/stories/ --include="*.ts" 2>/dev/null | head -15 || echo "None found"
echo "--- Hardcoded rgba ---"
grep -rn "rgba(" src/stories/ --include="*.ts" 2>/dev/null | head -10 || echo "None found"
echo ""
echo "=== 6. Missing Vue Imports ==="
grep -rn "\bref\b\|\breactive\b\|\bcomputed\b\|\bwatch\b\|\bonMounted\b\|\bonUnmounted\b\|\bnextTick\b" src/stories/ --include="*.ts" -l 2>/dev/null | \
  while read file; do
    if ! grep -q "from 'vue'" "$file"; then
      echo "$file"
    fi
  done | head -20 || echo "None found"
echo ""
echo "=== 7. Missing Event Handlers (Manual Check) ==="
echo "Critical events to verify: @close, @submit, @confirm, @cancel"
echo "Check if stories provide handlers for these events"
echo ""
echo "=== Audit Complete ==="