@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/stories/ButtonAuditReview.svelte

@@ -1,427 +1,427 @@
-<script>
-  import Button from '../primitives/Button/Button.svelte';
-
-  // Valid variants in the Button component
-  // Note: Both legacy names (default, alternative, etc.) and semantic aliases (blue-solid, gray-outline) work
-  const validVariants = [
-    { name: 'default', alias: 'blue-solid', description: 'Primary solid blue', usage: 'Main CTAs, Save, Submit' },
-    { name: 'alternative', alias: 'gray-outline', description: 'Gray outline', usage: 'Cancel, Secondary actions' },
-    { name: 'outline', alias: 'blue-outline', description: 'Blue outline', usage: 'Secondary CTAs' },
-    { name: 'red', alias: 'red-solid', description: 'Solid red danger', usage: 'Delete, destructive actions' },
-    { name: 'red-outline', alias: null, description: 'Red outline', usage: 'Less prominent danger' },
-    { name: 'ghost', alias: 'gray-text', description: 'Gray text, no border', usage: 'Tertiary actions' },
-    { name: 'ghost-red', alias: 'red-text', description: 'Red text, no border', usage: 'Tertiary danger, Remove' },
-    { name: 'icon', alias: null, description: 'Icon-only button', usage: 'Toolbar icons, close buttons' },
-    { name: 'toggle', alias: null, description: 'Toggle button', usage: 'View switchers' },
-    { name: 'menu-item', alias: null, description: 'Dropdown menu item', usage: 'Menu items, search results' },
-    { name: 'menu-item-danger', alias: null, description: 'Red menu item', usage: 'Delete in menus' },
-    { name: 'link', alias: null, description: 'Blue text link', usage: 'Inline text links' },
-    { name: 'card', alias: null, description: 'Selectable card', usage: 'List selections' },
-    { name: 'search-result', alias: null, description: 'Search result item', usage: 'Search dropdowns' },
-    { name: 'nav', alias: null, description: 'Navigation item', usage: 'Bottom nav bars' },
-  ];
-
-  // Recent fixes - December 30, 2024
-  const recentFixes = [
-    {
-      date: '2024-12-30',
-      description: 'Lineup page buttons',
-      fixes: [
-        'Changed + Add button to use Carbon Add icon with text-white',
-        'Changed + New spot button to use Carbon Add icon with text-white',
-        'Made + New spot blue-solid, + Add blue-solid',
-        'Removed 3-dot menus from lineup table (kept in roster)',
-        'Fixed icon sizes from w-4 h-4 to w-3 h-3 mr-1',
-      ]
-    },
-    {
-      date: '2024-12-30',
-      description: 'Edit spot modal performer search',
-      fixes: [
-        'Added variant="menu-item" to performer search result buttons',
-        'Previously had no variant, defaulting to solid blue background',
-      ]
-    },
-    {
-      date: '2024-12-30',
-      description: 'Actions dropdown in LineupSection',
-      fixes: [
-        'Fixed dropdown not opening - changed from triggeredBy to bind:open',
-        'Added actionsDropdownOpen state with $state(false)',
-        'Changed placement to bottom-end',
-      ]
-    },
-    {
-      date: '2024-12-30',
-      description: 'Batch invalid variant fixes',
-      fixes: [
-        'alternative → gray-outline (across ~120 files)',
-        'default → blue-solid',
-        'ghost → gray-text',
-        'primary → blue-solid',
-        'outline → blue-outline',
-        'link → gray-text',
-        'green-solid → blue-solid',
-      ]
-    },
-  ];
-
-  // Buttons WITHOUT variant that need review (default to solid blue)
-  // Accurate count using multi-line tag parsing (260 total production buttons)
-  const buttonsWithoutVariant = [
-    // High priority - 5+ buttons
-    { file: 'routes/a/profile/venue/add/+page.svelte', count: 8, context: 'Add venue form' },
-    { file: 'routes/superuser/templates/sms/+page.svelte', count: 7, context: 'SMS template editor' },
-    { file: 'routes/superuser/+page.svelte', count: 6, context: 'Superuser admin' },
-    { file: 'lib/components/onboarding/VenueFaqModals.svelte', count: 6, context: 'Onboarding FAQ modals' },
-    { file: 'routes/a/venues/[venueID]/roster/+page.svelte', count: 5, context: 'Venue roster' },
-    { file: 'routes/a/venues/[venueID]/+page.svelte', count: 5, context: 'Venue page' },
-    { file: 'routes/a/venues/[venueID]/[eventID]/tracking/+page.svelte', count: 5, context: 'Event tracking' },
-    { file: 'routes/a/events/_components/CollectionForm.svelte', count: 5, context: 'Event collection form' },
-    { file: 'components/PromoCode/PromoCode.svelte', count: 5, context: 'Promo code actions' },
-
-    // Medium priority - 4 buttons
-    { file: 'routes/a/venues/[venueID]/[eventID]/tickets/+page.svelte', count: 4, context: 'Event tickets' },
-    { file: 'routes/a/venues/_components/availsSettings.svelte', count: 4, context: 'Availability settings' },
-    { file: 'routes/a/team/_components/TeamTabContent.svelte', count: 4, context: 'Team tab' },
-    { file: 'lib/components/venues/VenueDisclaimersSection.svelte', count: 4, context: 'Venue disclaimers' },
-    { file: 'components/IndividualPerformerTable/IndividualPerformerTableUnified.svelte', count: 4, context: 'Performer table' },
-    { file: 'components/DateRangePicker/DateRangePicker.svelte', count: 4, context: 'Date range picker' },
-    { file: 'components/DateRangeAndDate.svelte', count: 4, context: 'Date range' },
-    { file: 'components/AllPerformerTable/AllPerformerTableUnified.svelte', count: 4, context: 'All performers table' },
-
-    // 3 buttons each
-    { file: 'routes/superuser/templates/email/+page.svelte', count: 3, context: 'Email template editor' },
-    { file: 'routes/superuser/+layout.svelte', count: 3, context: 'Superuser layout' },
-    { file: 'routes/a/widgets/+page.svelte', count: 3, context: 'Widget management' },
-    { file: 'routes/a/venues/[venueID]/[eventID]/schedule/+page.svelte', count: 3, context: 'Event schedule' },
-    { file: 'components/FileDropzone/FileDropzone.svelte', count: 3, context: 'File upload' },
-    { file: 'components/Events/Tickets/OrderSummary.svelte', count: 3, context: 'Order summary' },
-    { file: 'components/DateTimePicker/DateTimePicker.svelte', count: 3, context: 'Date/time picker' },
-    { file: 'components/DatePicker/ArrowsDatePicker.svelte', count: 3, context: 'Date picker arrows' },
-    { file: 'components/CropImage/CropImage.svelte', count: 3, context: 'Image cropper' },
-    { file: 'components/Calendar/QuarterView.svelte', count: 3, context: 'Calendar navigation' },
-
-    // Remaining ~100 files with 1-2 buttons each
-    { file: '~100 other files (1-2 buttons each)', count: 142, context: 'Various actions across codebase' },
-  ];
-
-  // Accurate count using multi-line tag parsing
-  const totalWithoutVariant = 260;
-
-  // Visual examples of buttons that need review
-  // These show CURRENT rendering (no variant = default/blue-solid) vs RECOMMENDED variant
-  const visualExamples = [
-    {
-      category: 'Tertiary Actions (Edit, View, Details)',
-      description: 'Text-only actions that should not compete with primary CTAs',
-      examples: [
-        { label: 'Edit', location: 'Cards/LeftCard.svelte', current: undefined, recommended: 'ghost' },
-        { label: 'View Details', location: 'Various card components', current: undefined, recommended: 'ghost' },
-        { label: 'Show More', location: 'Lists and tables', current: undefined, recommended: 'ghost' },
-      ]
-    },
-    {
-      category: 'Cancel / Dismiss Buttons',
-      description: 'Secondary actions that close modals or cancel operations',
-      examples: [
-        { label: 'Cancel', location: 'Forms and modals', current: undefined, recommended: 'alternative' },
-        { label: 'Close', location: 'Modal headers', current: undefined, recommended: 'alternative' },
-        { label: 'Dismiss', location: 'Notifications', current: undefined, recommended: 'alternative' },
-      ]
-    },
-    {
-      category: 'Dropdown / Menu Items',
-      description: 'Items in dropdown menus and search results',
-      examples: [
-        { label: 'Select Option', location: 'Various dropdowns', current: undefined, recommended: 'menu-item' },
-        { label: 'Search Result', location: 'Search dropdowns', current: undefined, recommended: 'search-result' },
-        { label: 'Delete Item', location: 'Dropdown danger actions', current: undefined, recommended: 'menu-item-danger' },
-      ]
-    },
-    {
-      category: 'Icon-Only Buttons',
-      description: 'Buttons with only icons (close X, calendar, etc)',
-      examples: [
-        { label: 'X', location: 'TimePicker.svelte (calendar)', current: undefined, recommended: 'icon' },
-        { label: 'X', location: 'Modal close buttons', current: undefined, recommended: 'icon' },
-        { label: '...', location: 'More options buttons', current: undefined, recommended: 'icon' },
-      ]
-    },
-    {
-      category: 'Primary CTAs (Correct as default)',
-      description: 'These buttons are correctly using the default (blue-solid)',
-      examples: [
-        { label: 'Save', location: 'Form submissions', current: undefined, recommended: 'default', correct: true },
-        { label: 'Add', location: 'Cards/LeftCard.svelte', current: undefined, recommended: 'default', correct: true },
-        { label: 'Submit', location: 'Contact forms', current: undefined, recommended: 'default', correct: true },
-      ]
-    },
-  ];
-</script>
-
-<div class="p-6 max-w-7xl mx-auto space-y-8">
-  <div class="text-center mb-8">
-    <h1 class="text-3xl font-bold text-gray-900 mb-2">Button Audit Review</h1>
-    <p class="text-gray-600">Last updated: December 30, 2024</p>
-  </div>
-
-  <!-- Summary Cards -->
-  <div class="grid grid-cols-3 gap-6 mb-8">
-    <div class="p-6 bg-yellow-50 border-2 border-yellow-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-yellow-600">{totalWithoutVariant}</div>
-      <div class="text-sm text-gray-600 mt-2">Buttons Without Variant</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Needs Review</span>
-    </div>
-    <div class="p-6 bg-green-50 border-2 border-green-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-green-600">{recentFixes.length}</div>
-      <div class="text-sm text-gray-600 mt-2">Recent Fix Sessions</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-green-200 text-green-800">Today</span>
-    </div>
-    <div class="p-6 bg-blue-50 border-2 border-blue-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-blue-600">{validVariants.length}</div>
-      <div class="text-sm text-gray-600 mt-2">Valid Variants</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-blue-200 text-blue-800">Reference</span>
-    </div>
-  </div>
-
-  <!-- Buttons Without Variant -->
-  <section class="border-2 border-yellow-400 rounded-lg p-6 bg-yellow-50">
-    <h2 class="text-xl font-bold text-yellow-700 mb-4 flex items-center gap-2">
-      <span class="text-2xl">⚠</span> Buttons Without Variant (Default to blue-solid)
-    </h2>
-    <p class="text-gray-600 mb-4">
-      These buttons have no <code class="bg-white px-2 py-0.5 rounded text-sm">variant</code> prop and render as solid blue by default.
-      Review each to determine if blue-solid is correct or if another variant should be used.
-    </p>
-
-    <div class="overflow-x-auto bg-white rounded-lg">
-      <table class="w-full text-sm">
-        <thead class="bg-gray-100">
-          <tr>
-            <th class="px-4 py-3 text-left font-medium">File</th>
-            <th class="px-4 py-3 text-center font-medium">Count</th>
-            <th class="px-4 py-3 text-left font-medium">Context</th>
-            <th class="px-4 py-3 text-center font-medium">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each buttonsWithoutVariant as item}
-            <tr class="border-b border-gray-200">
-              <td class="px-4 py-3">
-                <code class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
-                  {item.file}
-                </code>
-              </td>
-              <td class="px-4 py-3 text-center font-medium">{item.count}</td>
-              <td class="px-4 py-3 text-gray-600">{item.context}</td>
-              <td class="px-4 py-3 text-center">
-                <span class="px-2 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Review</span>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-
-    <div class="mt-4 p-4 bg-yellow-100 rounded-lg">
-      <p class="text-sm text-yellow-800">
-        <strong>Total: ~{totalWithoutVariant} buttons</strong> across the codebase need variant review.
-        Many may be intentionally blue-solid (CTAs), but others may need gray-outline, menu-item, or icon variants.
-      </p>
-    </div>
-  </section>
-
-  <!-- Visual Examples: Current vs Recommended -->
-  <section class="border-2 border-orange-400 rounded-lg p-6 bg-orange-50">
-    <h2 class="text-xl font-bold text-orange-700 mb-4 flex items-center gap-2">
-      <span class="text-2xl">👁</span> Visual Comparison: Current vs Recommended
-    </h2>
-    <p class="text-gray-600 mb-6">
-      These examples show how buttons WITHOUT a variant currently render (blue-solid default) versus how they SHOULD render with the correct variant.
-    </p>
-
-    <div class="space-y-8">
-      {#each visualExamples as category}
-        <div class="bg-white rounded-lg p-5 border border-orange-200">
-          <div class="flex items-center gap-3 mb-2">
-            <h3 class="font-bold text-gray-900">{category.category}</h3>
-            {#if category.examples[0]?.correct}
-              <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">Correct</span>
-            {:else}
-              <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">Needs Fix</span>
-            {/if}
-          </div>
-          <p class="text-sm text-gray-500 mb-4">{category.description}</p>
-
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {#each category.examples as example}
-              <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
-                <div class="text-xs text-gray-500 mb-3 font-mono truncate" title={example.location}>
-                  {example.location}
-                </div>
-
-                <div class="space-y-3">
-                  <!-- Current (no variant) -->
-                  <div>
-                    <div class="text-xs text-red-600 font-medium mb-1">Current (no variant):</div>
-                    <Button size="sm">{example.label}</Button>
-                  </div>
-
-                  <!-- Arrow -->
-                  <div class="text-center text-gray-400">↓</div>
-
-                  <!-- Recommended -->
-                  <div>
-                    <div class="text-xs text-green-600 font-medium mb-1">
-                      Recommended: <code class="bg-green-100 px-1 rounded">{example.recommended}</code>
-                    </div>
-                    <Button variant={example.recommended} size="sm">{example.label}</Button>
-                  </div>
-                </div>
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-
-    <div class="mt-6 p-4 bg-orange-100 rounded-lg">
-      <p class="text-sm text-orange-800">
-        <strong>Key insight:</strong> Buttons without variant all render as solid blue (left), making it hard to distinguish
-        primary actions from secondary ones. Adding proper variants (right) creates visual hierarchy.
-      </p>
-    </div>
-  </section>
-
-  <!-- Recent Fixes -->
-  <section class="border-2 border-green-400 rounded-lg p-6 bg-green-50">
-    <h2 class="text-xl font-bold text-green-700 mb-4 flex items-center gap-2">
-      <span class="text-2xl">✓</span> Recent Fixes (December 30, 2024)
-    </h2>
-
-    <div class="space-y-6">
-      {#each recentFixes as fix}
-        <div class="bg-white rounded-lg p-4 border-l-4 border-green-500">
-          <h3 class="font-semibold text-gray-900 mb-2">{fix.description}</h3>
-          <ul class="text-sm text-gray-600 space-y-1">
-            {#each fix.fixes as item}
-              <li class="flex items-start gap-2">
-                <span class="text-green-500 mt-0.5">✓</span>
-                {item}
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/each}
-    </div>
-  </section>
-
-  <!-- Valid Variants Reference -->
-  <section class="border rounded-lg p-6 bg-white">
-    <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
-      <span class="text-blue-600">ℹ</span> Valid Variants Reference
-    </h2>
-
-    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      {#each validVariants as v}
-        <div class="border border-gray-200 rounded-lg p-4">
-          <div class="flex items-center gap-2 mb-3">
-            <Button variant={v.name} size="sm">{v.name}</Button>
-          </div>
-          <code class="text-xs bg-gray-100 px-2 py-1 rounded block mb-1">
-            variant="{v.name}"
-          </code>
-          {#if v.alias}
-            <code class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded block mb-2">
-              or: "{v.alias}"
-            </code>
-          {/if}
-          <p class="text-xs text-gray-500">{v.usage}</p>
-        </div>
-      {/each}
-    </div>
-  </section>
-
-  <!-- Decision Guide -->
-  <section class="border-2 border-blue-400 rounded-lg p-6 bg-blue-50">
-    <h2 class="text-xl font-bold text-blue-700 mb-4">Button Variant Decision Guide</h2>
-
-    <div class="grid grid-cols-2 gap-6">
-      <div class="bg-white rounded-lg p-4">
-        <h3 class="font-semibold text-gray-900 mb-3">When to use each variant</h3>
-        <ul class="space-y-2 text-sm">
-          <li class="flex items-start gap-2">
-            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">default</code>
-            <span class="text-gray-600">Primary CTAs: Save, Submit, + New</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">outline</code>
-            <span class="text-gray-600">Secondary CTAs: Invite, Export</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">alternative</code>
-            <span class="text-gray-600">Cancel, Close, Filter, Actions triggers</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-red-100 text-red-800 px-1 rounded text-xs shrink-0">red</code>
-            <span class="text-gray-600">Delete confirmations, destructive actions</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">ghost</code>
-            <span class="text-gray-600">Tertiary actions: Edit, View, Show more</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">menu-item</code>
-            <span class="text-gray-600">Dropdown items, list selections</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">icon</code>
-            <span class="text-gray-600">Close buttons, drag handles</span>
-          </li>
-        </ul>
-      </div>
-
-      <div class="bg-white rounded-lg p-4">
-        <h3 class="font-semibold text-gray-900 mb-3">Common mistakes</h3>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
-            <span>No variant on dropdown items → defaults to solid blue</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
-            <span>No variant on Cancel → should be alternative</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
-            <span>No variant on close/X buttons → should be icon</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
-            <span>Invalid variant names fall back to default (solid blue)</span>
-          </li>
-        </ul>
-
-        <div class="mt-4 p-3 bg-blue-100 rounded-lg">
-          <p class="text-xs text-blue-800">
-            <strong>Tip:</strong> When in doubt, use alternative for secondary actions
-            and default only for the primary action.
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- How to Find Issues -->
-  <section class="border rounded-lg p-6 bg-gray-50">
-    <h2 class="text-xl font-bold text-gray-900 mb-4">How to Find Buttons Without Variant</h2>
-
-    <div class="bg-white rounded-lg p-4">
-      <p class="text-sm text-gray-600 mb-2">Run this command in micdrop-frontend:</p>
-      <code class="block bg-gray-900 text-green-400 p-3 rounded text-xs overflow-x-auto">
-        grep -rn "&lt;Button" --include="*.svelte" src | grep -v "variant="
-      </code>
-    </div>
-  </section>
-</div>
+<script>
+  import Button from '../primitives/Button/Button.svelte';
+
+  // Valid variants in the Button component
+  // Note: Both legacy names (default, alternative, etc.) and semantic aliases (blue-solid, gray-outline) work
+  const validVariants = [
+    { name: 'default', alias: 'blue-solid', description: 'Primary solid blue', usage: 'Main CTAs, Save, Submit' },
+    { name: 'alternative', alias: 'gray-outline', description: 'Gray outline', usage: 'Cancel, Secondary actions' },
+    { name: 'outline', alias: 'blue-outline', description: 'Blue outline', usage: 'Secondary CTAs' },
+    { name: 'red', alias: 'red-solid', description: 'Solid red danger', usage: 'Delete, destructive actions' },
+    { name: 'red-outline', alias: null, description: 'Red outline', usage: 'Less prominent danger' },
+    { name: 'ghost', alias: 'gray-text', description: 'Gray text, no border', usage: 'Tertiary actions' },
+    { name: 'ghost-red', alias: 'red-text', description: 'Red text, no border', usage: 'Tertiary danger, Remove' },
+    { name: 'icon', alias: null, description: 'Icon-only button', usage: 'Toolbar icons, close buttons' },
+    { name: 'toggle', alias: null, description: 'Toggle button', usage: 'View switchers' },
+    { name: 'menu-item', alias: null, description: 'Dropdown menu item', usage: 'Menu items, search results' },
+    { name: 'menu-item-danger', alias: null, description: 'Red menu item', usage: 'Delete in menus' },
+    { name: 'link', alias: null, description: 'Blue text link', usage: 'Inline text links' },
+    { name: 'card', alias: null, description: 'Selectable card', usage: 'List selections' },
+    { name: 'search-result', alias: null, description: 'Search result item', usage: 'Search dropdowns' },
+    { name: 'nav', alias: null, description: 'Navigation item', usage: 'Bottom nav bars' },
+  ];
+
+  // Recent fixes - December 30, 2024
+  const recentFixes = [
+    {
+      date: '2024-12-30',
+      description: 'Lineup page buttons',
+      fixes: [
+        'Changed + Add button to use Carbon Add icon with text-white',
+        'Changed + New spot button to use Carbon Add icon with text-white',
+        'Made + New spot blue-solid, + Add blue-solid',
+        'Removed 3-dot menus from lineup table (kept in roster)',
+        'Fixed icon sizes from w-4 h-4 to w-3 h-3 mr-1',
+      ]
+    },
+    {
+      date: '2024-12-30',
+      description: 'Edit spot modal performer search',
+      fixes: [
+        'Added variant="menu-item" to performer search result buttons',
+        'Previously had no variant, defaulting to solid blue background',
+      ]
+    },
+    {
+      date: '2024-12-30',
+      description: 'Actions dropdown in LineupSection',
+      fixes: [
+        'Fixed dropdown not opening - changed from triggeredBy to bind:open',
+        'Added actionsDropdownOpen state with $state(false)',
+        'Changed placement to bottom-end',
+      ]
+    },
+    {
+      date: '2024-12-30',
+      description: 'Batch invalid variant fixes',
+      fixes: [
+        'alternative → gray-outline (across ~120 files)',
+        'default → blue-solid',
+        'ghost → gray-text',
+        'primary → blue-solid',
+        'outline → blue-outline',
+        'link → gray-text',
+        'green-solid → blue-solid',
+      ]
+    },
+  ];
+
+  // Buttons WITHOUT variant that need review (default to solid blue)
+  // Accurate count using multi-line tag parsing (260 total production buttons)
+  const buttonsWithoutVariant = [
+    // High priority - 5+ buttons
+    { file: 'routes/a/profile/venue/add/+page.svelte', count: 8, context: 'Add venue form' },
+    { file: 'routes/superuser/templates/sms/+page.svelte', count: 7, context: 'SMS template editor' },
+    { file: 'routes/superuser/+page.svelte', count: 6, context: 'Superuser admin' },
+    { file: 'lib/components/onboarding/VenueFaqModals.svelte', count: 6, context: 'Onboarding FAQ modals' },
+    { file: 'routes/a/venues/[venueID]/roster/+page.svelte', count: 5, context: 'Venue roster' },
+    { file: 'routes/a/venues/[venueID]/+page.svelte', count: 5, context: 'Venue page' },
+    { file: 'routes/a/venues/[venueID]/[eventID]/tracking/+page.svelte', count: 5, context: 'Event tracking' },
+    { file: 'routes/a/events/_components/CollectionForm.svelte', count: 5, context: 'Event collection form' },
+    { file: 'components/PromoCode/PromoCode.svelte', count: 5, context: 'Promo code actions' },
+
+    // Medium priority - 4 buttons
+    { file: 'routes/a/venues/[venueID]/[eventID]/tickets/+page.svelte', count: 4, context: 'Event tickets' },
+    { file: 'routes/a/venues/_components/availsSettings.svelte', count: 4, context: 'Availability settings' },
+    { file: 'routes/a/team/_components/TeamTabContent.svelte', count: 4, context: 'Team tab' },
+    { file: 'lib/components/venues/VenueDisclaimersSection.svelte', count: 4, context: 'Venue disclaimers' },
+    { file: 'components/IndividualPerformerTable/IndividualPerformerTableUnified.svelte', count: 4, context: 'Performer table' },
+    { file: 'components/DateRangePicker/DateRangePicker.svelte', count: 4, context: 'Date range picker' },
+    { file: 'components/DateRangeAndDate.svelte', count: 4, context: 'Date range' },
+    { file: 'components/AllPerformerTable/AllPerformerTableUnified.svelte', count: 4, context: 'All performers table' },
+
+    // 3 buttons each
+    { file: 'routes/superuser/templates/email/+page.svelte', count: 3, context: 'Email template editor' },
+    { file: 'routes/superuser/+layout.svelte', count: 3, context: 'Superuser layout' },
+    { file: 'routes/a/widgets/+page.svelte', count: 3, context: 'Widget management' },
+    { file: 'routes/a/venues/[venueID]/[eventID]/schedule/+page.svelte', count: 3, context: 'Event schedule' },
+    { file: 'components/FileDropzone/FileDropzone.svelte', count: 3, context: 'File upload' },
+    { file: 'components/Events/Tickets/OrderSummary.svelte', count: 3, context: 'Order summary' },
+    { file: 'components/DateTimePicker/DateTimePicker.svelte', count: 3, context: 'Date/time picker' },
+    { file: 'components/DatePicker/ArrowsDatePicker.svelte', count: 3, context: 'Date picker arrows' },
+    { file: 'components/CropImage/CropImage.svelte', count: 3, context: 'Image cropper' },
+    { file: 'components/Calendar/QuarterView.svelte', count: 3, context: 'Calendar navigation' },
+
+    // Remaining ~100 files with 1-2 buttons each
+    { file: '~100 other files (1-2 buttons each)', count: 142, context: 'Various actions across codebase' },
+  ];
+
+  // Accurate count using multi-line tag parsing
+  const totalWithoutVariant = 260;
+
+  // Visual examples of buttons that need review
+  // These show CURRENT rendering (no variant = default/blue-solid) vs RECOMMENDED variant
+  const visualExamples = [
+    {
+      category: 'Tertiary Actions (Edit, View, Details)',
+      description: 'Text-only actions that should not compete with primary CTAs',
+      examples: [
+        { label: 'Edit', location: 'Cards/LeftCard.svelte', current: undefined, recommended: 'ghost' },
+        { label: 'View Details', location: 'Various card components', current: undefined, recommended: 'ghost' },
+        { label: 'Show More', location: 'Lists and tables', current: undefined, recommended: 'ghost' },
+      ]
+    },
+    {
+      category: 'Cancel / Dismiss Buttons',
+      description: 'Secondary actions that close modals or cancel operations',
+      examples: [
+        { label: 'Cancel', location: 'Forms and modals', current: undefined, recommended: 'alternative' },
+        { label: 'Close', location: 'Modal headers', current: undefined, recommended: 'alternative' },
+        { label: 'Dismiss', location: 'Notifications', current: undefined, recommended: 'alternative' },
+      ]
+    },
+    {
+      category: 'Dropdown / Menu Items',
+      description: 'Items in dropdown menus and search results',
+      examples: [
+        { label: 'Select Option', location: 'Various dropdowns', current: undefined, recommended: 'menu-item' },
+        { label: 'Search Result', location: 'Search dropdowns', current: undefined, recommended: 'search-result' },
+        { label: 'Delete Item', location: 'Dropdown danger actions', current: undefined, recommended: 'menu-item-danger' },
+      ]
+    },
+    {
+      category: 'Icon-Only Buttons',
+      description: 'Buttons with only icons (close X, calendar, etc)',
+      examples: [
+        { label: 'X', location: 'TimePicker.svelte (calendar)', current: undefined, recommended: 'icon' },
+        { label: 'X', location: 'Modal close buttons', current: undefined, recommended: 'icon' },
+        { label: '...', location: 'More options buttons', current: undefined, recommended: 'icon' },
+      ]
+    },
+    {
+      category: 'Primary CTAs (Correct as default)',
+      description: 'These buttons are correctly using the default (blue-solid)',
+      examples: [
+        { label: 'Save', location: 'Form submissions', current: undefined, recommended: 'default', correct: true },
+        { label: 'Add', location: 'Cards/LeftCard.svelte', current: undefined, recommended: 'default', correct: true },
+        { label: 'Submit', location: 'Contact forms', current: undefined, recommended: 'default', correct: true },
+      ]
+    },
+  ];
+</script>
+
+<div class="p-6 max-w-7xl mx-auto space-y-8">
+  <div class="text-center mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 mb-2">Button Audit Review</h1>
+    <p class="text-gray-600">Last updated: December 30, 2024</p>
+  </div>
+
+  <!-- Summary Cards -->
+  <div class="grid grid-cols-3 gap-6 mb-8">
+    <div class="p-6 bg-yellow-50 border-2 border-yellow-400 rounded-lg text-center">
+      <div class="text-4xl font-bold text-yellow-600">{totalWithoutVariant}</div>
+      <div class="text-sm text-gray-600 mt-2">Buttons Without Variant</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Needs Review</span>
+    </div>
+    <div class="p-6 bg-green-50 border-2 border-green-400 rounded-lg text-center">
+      <div class="text-4xl font-bold text-green-600">{recentFixes.length}</div>
+      <div class="text-sm text-gray-600 mt-2">Recent Fix Sessions</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-green-200 text-green-800">Today</span>
+    </div>
+    <div class="p-6 bg-blue-50 border-2 border-blue-400 rounded-lg text-center">
+      <div class="text-4xl font-bold text-blue-600">{validVariants.length}</div>
+      <div class="text-sm text-gray-600 mt-2">Valid Variants</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-blue-200 text-blue-800">Reference</span>
+    </div>
+  </div>
+
+  <!-- Buttons Without Variant -->
+  <section class="border-2 border-yellow-400 rounded-lg p-6 bg-yellow-50">
+    <h2 class="text-xl font-bold text-yellow-700 mb-4 flex items-center gap-2">
+      <span class="text-2xl">⚠</span> Buttons Without Variant (Default to blue-solid)
+    </h2>
+    <p class="text-gray-600 mb-4">
+      These buttons have no <code class="bg-white px-2 py-0.5 rounded text-sm">variant</code> prop and render as solid blue by default.
+      Review each to determine if blue-solid is correct or if another variant should be used.
+    </p>
+
+    <div class="overflow-x-auto bg-white rounded-lg">
+      <table class="w-full text-sm">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="px-4 py-3 text-left font-medium">File</th>
+            <th class="px-4 py-3 text-center font-medium">Count</th>
+            <th class="px-4 py-3 text-left font-medium">Context</th>
+            <th class="px-4 py-3 text-center font-medium">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each buttonsWithoutVariant as item}
+            <tr class="border-b border-gray-200">
+              <td class="px-4 py-3">
+                <code class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                  {item.file}
+                </code>
+              </td>
+              <td class="px-4 py-3 text-center font-medium">{item.count}</td>
+              <td class="px-4 py-3 text-gray-600">{item.context}</td>
+              <td class="px-4 py-3 text-center">
+                <span class="px-2 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Review</span>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-4 p-4 bg-yellow-100 rounded-lg">
+      <p class="text-sm text-yellow-800">
+        <strong>Total: ~{totalWithoutVariant} buttons</strong> across the codebase need variant review.
+        Many may be intentionally blue-solid (CTAs), but others may need gray-outline, menu-item, or icon variants.
+      </p>
+    </div>
+  </section>
+
+  <!-- Visual Examples: Current vs Recommended -->
+  <section class="border-2 border-orange-400 rounded-lg p-6 bg-orange-50">
+    <h2 class="text-xl font-bold text-orange-700 mb-4 flex items-center gap-2">
+      <span class="text-2xl">👁</span> Visual Comparison: Current vs Recommended
+    </h2>
+    <p class="text-gray-600 mb-6">
+      These examples show how buttons WITHOUT a variant currently render (blue-solid default) versus how they SHOULD render with the correct variant.
+    </p>
+
+    <div class="space-y-8">
+      {#each visualExamples as category}
+        <div class="bg-white rounded-lg p-5 border border-orange-200">
+          <div class="flex items-center gap-3 mb-2">
+            <h3 class="font-bold text-gray-900">{category.category}</h3>
+            {#if category.examples[0]?.correct}
+              <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">Correct</span>
+            {:else}
+              <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">Needs Fix</span>
+            {/if}
+          </div>
+          <p class="text-sm text-gray-500 mb-4">{category.description}</p>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {#each category.examples as example}
+              <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                <div class="text-xs text-gray-500 mb-3 font-mono truncate" title={example.location}>
+                  {example.location}
+                </div>
+
+                <div class="space-y-3">
+                  <!-- Current (no variant) -->
+                  <div>
+                    <div class="text-xs text-red-600 font-medium mb-1">Current (no variant):</div>
+                    <Button size="sm">{example.label}</Button>
+                  </div>
+
+                  <!-- Arrow -->
+                  <div class="text-center text-gray-400">↓</div>
+
+                  <!-- Recommended -->
+                  <div>
+                    <div class="text-xs text-green-600 font-medium mb-1">
+                      Recommended: <code class="bg-green-100 px-1 rounded">{example.recommended}</code>
+                    </div>
+                    <Button variant={example.recommended} size="sm">{example.label}</Button>
+                  </div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <div class="mt-6 p-4 bg-orange-100 rounded-lg">
+      <p class="text-sm text-orange-800">
+        <strong>Key insight:</strong> Buttons without variant all render as solid blue (left), making it hard to distinguish
+        primary actions from secondary ones. Adding proper variants (right) creates visual hierarchy.
+      </p>
+    </div>
+  </section>
+
+  <!-- Recent Fixes -->
+  <section class="border-2 border-green-400 rounded-lg p-6 bg-green-50">
+    <h2 class="text-xl font-bold text-green-700 mb-4 flex items-center gap-2">
+      <span class="text-2xl">✓</span> Recent Fixes (December 30, 2024)
+    </h2>
+
+    <div class="space-y-6">
+      {#each recentFixes as fix}
+        <div class="bg-white rounded-lg p-4 border-l-4 border-green-500">
+          <h3 class="font-semibold text-gray-900 mb-2">{fix.description}</h3>
+          <ul class="text-sm text-gray-600 space-y-1">
+            {#each fix.fixes as item}
+              <li class="flex items-start gap-2">
+                <span class="text-green-500 mt-0.5">✓</span>
+                {item}
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <!-- Valid Variants Reference -->
+  <section class="border rounded-lg p-6 bg-white">
+    <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+      <span class="text-blue-600">ℹ</span> Valid Variants Reference
+    </h2>
+
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {#each validVariants as v}
+        <div class="border border-gray-200 rounded-lg p-4">
+          <div class="flex items-center gap-2 mb-3">
+            <Button variant={v.name} size="sm">{v.name}</Button>
+          </div>
+          <code class="text-xs bg-gray-100 px-2 py-1 rounded block mb-1">
+            variant="{v.name}"
+          </code>
+          {#if v.alias}
+            <code class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded block mb-2">
+              or: "{v.alias}"
+            </code>
+          {/if}
+          <p class="text-xs text-gray-500">{v.usage}</p>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <!-- Decision Guide -->
+  <section class="border-2 border-blue-400 rounded-lg p-6 bg-blue-50">
+    <h2 class="text-xl font-bold text-blue-700 mb-4">Button Variant Decision Guide</h2>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div class="bg-white rounded-lg p-4">
+        <h3 class="font-semibold text-gray-900 mb-3">When to use each variant</h3>
+        <ul class="space-y-2 text-sm">
+          <li class="flex items-start gap-2">
+            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">default</code>
+            <span class="text-gray-600">Primary CTAs: Save, Submit, + New</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">outline</code>
+            <span class="text-gray-600">Secondary CTAs: Invite, Export</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">alternative</code>
+            <span class="text-gray-600">Cancel, Close, Filter, Actions triggers</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-red-100 text-red-800 px-1 rounded text-xs shrink-0">red</code>
+            <span class="text-gray-600">Delete confirmations, destructive actions</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">ghost</code>
+            <span class="text-gray-600">Tertiary actions: Edit, View, Show more</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">menu-item</code>
+            <span class="text-gray-600">Dropdown items, list selections</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">icon</code>
+            <span class="text-gray-600">Close buttons, drag handles</span>
+          </li>
+        </ul>
+      </div>
+
+      <div class="bg-white rounded-lg p-4">
+        <h3 class="font-semibold text-gray-900 mb-3">Common mistakes</h3>
+        <ul class="space-y-2 text-sm text-gray-600">
+          <li class="flex items-start gap-2">
+            <span class="text-red-500">✗</span>
+            <span>No variant on dropdown items → defaults to solid blue</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-red-500">✗</span>
+            <span>No variant on Cancel → should be alternative</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-red-500">✗</span>
+            <span>No variant on close/X buttons → should be icon</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-red-500">✗</span>
+            <span>Invalid variant names fall back to default (solid blue)</span>
+          </li>
+        </ul>
+
+        <div class="mt-4 p-3 bg-blue-100 rounded-lg">
+          <p class="text-xs text-blue-800">
+            <strong>Tip:</strong> When in doubt, use alternative for secondary actions
+            and default only for the primary action.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- How to Find Issues -->
+  <section class="border rounded-lg p-6 bg-gray-50">
+    <h2 class="text-xl font-bold text-gray-900 mb-4">How to Find Buttons Without Variant</h2>
+
+    <div class="bg-white rounded-lg p-4">
+      <p class="text-sm text-gray-600 mb-2">Run this command in micdrop-frontend:</p>
+      <code class="block bg-gray-900 text-green-400 p-3 rounded text-xs overflow-x-auto">
+        grep -rn "&lt;Button" --include="*.svelte" src | grep -v "variant="
+      </code>
+    </div>
+  </section>
+</div>