@getmicdrop/svelte-components 5.3.2 → 5.3.6

package/dist/stories/ComponentConsolidation.stories.svelte

@@ -1,14 +1,8 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  // Placeholder component for documentation-only stories
-  const DocPlaceholder = {
-    $$render: () => ''
-  };
-
   const { Story } = defineMeta({
     title: "Design System/Component Consolidation",
-    component: DocPlaceholder,
     parameters: {
       layout: 'padded',
     }
@@ -256,223 +250,334 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="svelte-components Problems">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Problems in svelte-components</h1>
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">svelte-components: Complete Element Audit (Dec 26, 2025)</h1>
     <p class="text-gray-600 dark:text-gray-400">
-      These are raw native elements within this library that should be using our own components.
+      Comprehensive audit of raw HTML elements in this library: buttons, inputs, forms, textareas, and selects.
+      Categorized by what needs fixing vs. what's expected as primitive implementations.
     </p>
 
-    <!-- HIGH PRIORITY -->
-    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-red-800 dark:text-red-300 mb-4">
-        High Priority: User-Facing Components
+    <!-- SUMMARY BOX -->
+    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Summary by Element Type</h2>
+      <div class="grid grid-cols-3 md:grid-cols-6 gap-3 text-center">
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-green-600">✓</div>
+          <div class="text-xs text-gray-500">Buttons</div>
+          <div class="text-xs text-green-600">0 remaining</div>
+        </div>
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-green-600">5</div>
+          <div class="text-xs text-gray-500">Inputs</div>
+          <div class="text-xs text-green-600">primitives</div>
+        </div>
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-amber-600">5</div>
+          <div class="text-xs text-gray-500">Recipe Inputs</div>
+          <div class="text-xs text-amber-600">specialized</div>
+        </div>
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-green-600">3</div>
+          <div class="text-xs text-gray-500">Textareas</div>
+          <div class="text-xs text-green-600">expected</div>
+        </div>
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-gray-400">4</div>
+          <div class="text-xs text-gray-500">Forms</div>
+          <div class="text-xs text-gray-400">semantic</div>
+        </div>
+        <div class="bg-white dark:bg-gray-800 p-3 rounded-lg">
+          <div class="text-2xl font-bold text-green-600">0</div>
+          <div class="text-xs text-gray-500">Selects</div>
+          <div class="text-xs text-green-600">none</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- COMPLETED - ALL FIXED -->
+    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">
+        ✓ Completed: All High-Priority Files Migrated (Dec 26, 2025)
       </h2>
+      <p class="text-sm text-green-700 dark:text-green-400 mb-4">
+        All files that needed fixing have been migrated to use the Button component with appropriate variants.
+      </p>
 
-      <div class="space-y-4">
-        <!-- Header.svelte -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-red-500">
-          <div class="flex justify-between items-start">
-            <div>
-              <h3 class="font-bold text-gray-900 dark:text-white">patterns/navigation/Header.svelte</h3>
-              <p class="text-sm text-gray-500 dark:text-gray-400">11 raw &lt;button&gt; elements</p>
-            </div>
-            <span class="px-2 py-1 rounded text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">11 buttons</span>
-          </div>
-          <div class="mt-3 text-sm">
-            <p class="text-gray-600 dark:text-gray-400 mb-2"><strong>What they are:</strong></p>
-            <ul class="list-disc list-inside text-gray-500 dark:text-gray-400 space-y-1">
-              <li>Back button (mobile)</li>
-              <li>Avatar/profile dropdown trigger</li>
-              <li>Dropdown menu items (settings, profile, etc.)</li>
-              <li>Mobile menu toggle (hamburger)</li>
-              <li>Sign out button</li>
-            </ul>
-            <p class="text-green-600 dark:text-green-400 mt-3">
-              <strong>Recommendation:</strong> Use Button component with <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">variant="ghost"</code>
-              or <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">variant="icon"</code>
-            </p>
+      <div class="space-y-3">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+          <div>
+            <span class="font-medium text-gray-900 dark:text-white">patterns/navigation/Header.svelte</span>
+            <span class="text-sm text-green-600 dark:text-green-400 ml-2">9 buttons → Button avatar/menu-item/menu-item-danger</span>
           </div>
+          <span class="text-green-600">✓</span>
         </div>
-
-        <!-- SuperLogin.svelte -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-red-500">
-          <div class="flex justify-between items-start">
-            <div>
-              <h3 class="font-bold text-gray-900 dark:text-white">recipes/SuperLogin/SuperLogin.svelte</h3>
-              <p class="text-sm text-gray-500 dark:text-gray-400">10 raw &lt;button&gt; + 4 raw &lt;form&gt; elements</p>
-            </div>
-            <span class="px-2 py-1 rounded text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">14 elements</span>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+          <div>
+            <span class="font-medium text-gray-900 dark:text-white">recipes/SuperLogin/SuperLogin.svelte</span>
+            <span class="text-sm text-green-600 dark:text-green-400 ml-2">4 buttons → Button card/link variants</span>
           </div>
-          <div class="mt-3 text-sm">
-            <p class="text-gray-600 dark:text-gray-400 mb-2"><strong>What they are:</strong></p>
-            <ul class="list-disc list-inside text-gray-500 dark:text-gray-400 space-y-1">
-              <li>Login/Sign up/Submit buttons</li>
-              <li>"Resend code" inline buttons</li>
-              <li>"Back to login" buttons</li>
-              <li>4 forms (login, signup, forgot password, verify)</li>
-            </ul>
-            <p class="text-green-600 dark:text-green-400 mt-3">
-              <strong>Recommendation:</strong> Replace buttons with Button component. Forms can stay raw
-              (they're self-contained auth logic).
-            </p>
+          <span class="text-green-600">✓</span>
+        </div>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500 flex justify-between items-center">
+          <div>
+            <span class="font-medium text-gray-900 dark:text-white">recipes/CropImage/CropImage.svelte</span>
+            <span class="text-sm text-green-600 dark:text-green-400 ml-2">5 Button uses, 0 raw</span>
           </div>
+          <span class="text-green-600">✓</span>
         </div>
+      </div>
 
-        <!-- Modal Recipes -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-red-500">
-          <div class="flex justify-between items-start">
-            <div>
-              <h3 class="font-bold text-gray-900 dark:text-white">recipes/modals/*.svelte</h3>
-              <p class="text-sm text-gray-500 dark:text-gray-400">4 raw &lt;button&gt; elements across modal recipes</p>
-            </div>
-            <span class="px-2 py-1 rounded text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">4 buttons</span>
-          </div>
-          <div class="mt-3 text-sm">
-            <p class="text-gray-600 dark:text-gray-400 mb-2"><strong>Files:</strong></p>
-            <ul class="list-disc list-inside text-gray-500 dark:text-gray-400 space-y-1">
-              <li>StatusModal.svelte - 1 action button</li>
-              <li>ConfirmationModal.svelte - 1 action button</li>
-              <li>InputModal.svelte - 1 action button</li>
-              <li>ModalTestWrapper.svelte - 2 test buttons</li>
-            </ul>
-            <p class="text-green-600 dark:text-green-400 mt-3">
-              <strong>Recommendation:</strong> Replace with Button component
-            </p>
-          </div>
+      <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
+        <strong class="text-blue-700 dark:text-blue-400">New Button variants added:</strong>
+        <ul class="mt-2 list-disc list-inside text-blue-600 dark:text-blue-400 space-y-1">
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="avatar"</code> - Avatar/image trigger buttons (opacity hover)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item"</code> - Dropdown menu items (full width, left-aligned)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item-danger"</code> - Destructive menu items (red text)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="card"</code> - Selectable card buttons (bordered)</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- PRIMITIVES - EXPECTED -->
+    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+        Primitives: Raw Buttons Expected (15 total)
+      </h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        These ARE the button implementations. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;button&gt;</code> is correct here.
+      </p>
+
+      <div class="grid md:grid-cols-2 gap-3 text-sm">
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>Button/Button.svelte</span>
+          <span class="text-gray-400">1 button</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>Pagination/Pagination.svelte</span>
+          <span class="text-gray-400">10 buttons</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>Accordion/AccordionItem.svelte</span>
+          <span class="text-gray-400">1 button</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>Tabs/Tabs.svelte</span>
+          <span class="text-gray-400">1 button</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>DarkModeToggle.svelte</span>
+          <span class="text-gray-400">1 button</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>Dropdown/DropdownItem.svelte</span>
+          <span class="text-gray-400">1 button</span>
         </div>
       </div>
     </div>
 
-    <!-- MEDIUM PRIORITY -->
+    <!-- RAW INPUTS - PRIMITIVES (EXPECTED) -->
+    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+        Raw &lt;input&gt; Elements: Primitives (5 files - Expected)
+      </h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        These ARE the input implementations. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;input&gt;</code> is correct here.
+      </p>
+
+      <div class="grid md:grid-cols-2 gap-3 text-sm">
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Input/Input.svelte</span>
+          <span class="text-gray-400">2 inputs</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Checkbox/Checkbox.svelte</span>
+          <span class="text-gray-400">1 input</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Radio/Radio.svelte</span>
+          <span class="text-gray-400">1 input</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Toggle.svelte</span>
+          <span class="text-gray-400">1 input</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Input/Textarea.svelte</span>
+          <span class="text-gray-400">1 textarea</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- RAW INPUTS - RECIPES (SPECIALIZED) -->
     <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6">
       <h2 class="text-xl font-semibold text-amber-800 dark:text-amber-300 mb-4">
-        Medium Priority: Utility Components
+        Raw &lt;input&gt; Elements: Recipes (5 files - Specialized)
       </h2>
+      <p class="text-sm text-amber-700 dark:text-amber-400 mb-4">
+        These are specialized input controls with unique behavior. Using raw inputs is acceptable for these specialized use cases.
+      </p>
 
-      <div class="space-y-4">
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-amber-500">
-          <div class="flex justify-between items-start">
-            <div>
-              <h3 class="font-bold text-gray-900 dark:text-white">recipes/CropImage/CropImage.svelte</h3>
-              <p class="text-sm text-gray-500 dark:text-gray-400">3 raw buttons (zoom controls, save/cancel)</p>
-            </div>
-            <span class="px-2 py-1 rounded text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300">3 buttons</span>
+      <div class="space-y-3">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+          <div class="flex justify-between">
+            <span class="font-medium">recipes/inputs/OTPInput.svelte</span>
+            <span class="text-green-600">1 input ✓</span>
           </div>
-          <p class="text-green-600 dark:text-green-400 mt-3 text-sm">
-            <strong>Recommendation:</strong> Use Button variant="icon" for zoom, Button for save/cancel
-          </p>
+          <p class="text-sm text-gray-500 mt-1">OTP digit inputs - highly specialized, raw input appropriate</p>
         </div>
-
-        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-amber-500">
-          <div class="flex justify-between items-start">
-            <div>
-              <h3 class="font-bold text-gray-900 dark:text-white">patterns/page/PageLoader.svelte</h3>
-              <p class="text-sm text-gray-500 dark:text-gray-400">1 retry button</p>
-            </div>
-            <span class="px-2 py-1 rounded text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300">1 button</span>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+          <div class="flex justify-between">
+            <span class="font-medium">recipes/inputs/Search.svelte</span>
+            <span class="text-green-600">1 input ✓</span>
           </div>
-          <p class="text-green-600 dark:text-green-400 mt-3 text-sm">
-            <strong>Recommendation:</strong> Use Button variant="default"
-          </p>
+          <p class="text-sm text-gray-500 mt-1">Search input - specialized styling and behavior</p>
+        </div>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+          <div class="flex justify-between">
+            <span class="font-medium">recipes/inputs/MultiSelect.svelte</span>
+            <span class="text-green-600">1 input ✓</span>
+          </div>
+          <p class="text-sm text-gray-500 mt-1">Filter/search input within multiselect dropdown</p>
+        </div>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+          <div class="flex justify-between">
+            <span class="font-medium">recipes/inputs/PlaceAutocomplete.svelte</span>
+            <span class="text-green-600">1 input ✓</span>
+          </div>
+          <p class="text-sm text-gray-500 mt-1">Google Places API integration - requires raw input for autocomplete</p>
+        </div>
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
+          <div class="flex justify-between">
+            <span class="font-medium">recipes/CropImage/CropImage.svelte</span>
+            <span class="text-green-600">1 input ✓</span>
+          </div>
+          <p class="text-sm text-gray-500 mt-1">File input for image upload - must be raw for file picker</p>
         </div>
       </div>
     </div>
 
-    <!-- LOW PRIORITY / KEEP AS-IS -->
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">
-        Low Priority / Keep As-Is
+    <!-- RAW FORMS -->
+    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+        Raw &lt;form&gt; Elements (1 file, 4 forms)
       </h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        No shared Form component exists. Raw <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;form&gt;</code> elements are acceptable as semantic containers.
+      </p>
 
-      <p class="text-sm text-green-700 dark:text-green-400 mb-4">
-        These raw elements are acceptable because they're either:
-        <strong>(a)</strong> the primitive implementation itself, or
-        <strong>(b)</strong> specialized controls that shouldn't use the generic Button.
+      <div class="bg-white dark:bg-gray-900 p-3 rounded">
+        <div class="flex justify-between">
+          <span class="font-medium">recipes/SuperLogin/SuperLogin.svelte</span>
+          <span class="text-gray-400">4 forms</span>
+        </div>
+        <p class="text-sm text-gray-500 mt-1">Login, password reset, OTP, and email verification forms - semantic containers for form submission</p>
+      </div>
+    </div>
+
+    <!-- RAW TEXTAREAS -->
+    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
+        Raw &lt;textarea&gt; Elements (3 files - Expected)
+      </h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        All textarea usage is in primitives and recipes - no migration needed.
       </p>
 
-      <div class="grid md:grid-cols-2 gap-4 text-sm">
-        <div class="bg-white dark:bg-gray-800 p-3 rounded">
-          <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Primitives (Expected):</h4>
-          <ul class="list-disc list-inside text-gray-500 dark:text-gray-400 space-y-1">
-            <li>Button/Button.svelte - IS the component</li>
-            <li>Input/Input.svelte - IS the component</li>
-            <li>Checkbox/Checkbox.svelte - IS the component</li>
-            <li>Radio/Radio.svelte - IS the component</li>
-          </ul>
+      <div class="grid md:grid-cols-3 gap-3 text-sm">
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Input/Textarea.svelte</span>
+          <span class="text-green-500">primitive ✓</span>
         </div>
-        <div class="bg-white dark:bg-gray-800 p-3 rounded">
-          <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Specialized Controls:</h4>
-          <ul class="list-disc list-inside text-gray-500 dark:text-gray-400 space-y-1">
-            <li>Pagination - Navigation controls</li>
-            <li>Tabs - Tab selectors</li>
-            <li>Accordion - Collapse toggles</li>
-            <li>MultiSelect - Dropdown controls</li>
-            <li>SelectDropdown - Custom select</li>
-          </ul>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>primitives/Input/Input.svelte</span>
+          <span class="text-green-500">primitive ✓</span>
+        </div>
+        <div class="bg-white dark:bg-gray-900 p-3 rounded flex justify-between">
+          <span>recipes/modals/InputModal.svelte</span>
+          <span class="text-green-500">recipe ✓</span>
         </div>
       </div>
     </div>
 
+    <!-- RAW SELECTS -->
+    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-green-800 dark:text-green-300 mb-4">
+        Raw &lt;select&gt; Elements: None Found ✓
+      </h2>
+      <p class="text-sm text-green-700 dark:text-green-400">
+        No raw <code class="bg-green-100 dark:bg-green-800 px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
+        All select functionality uses custom dropdown components (MultiSelect, SelectDropdown).
+      </p>
+    </div>
+
     <!-- CALENDAR PACKAGE -->
     <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-6">
       <h2 class="text-xl font-semibold text-purple-800 dark:text-purple-300 mb-4">
-        Separate Handling: Calendar Package
+        Calendar Package: Phase 4 (16 buttons in 6 files)
       </h2>
-
       <p class="text-sm text-purple-700 dark:text-purple-400 mb-4">
-        16 raw buttons across 6 files in <code class="bg-purple-100 dark:bg-purple-800 px-1 rounded">src/lib/calendar/</code>.
-        This code is embedded from venue-calendar-npm and may need updates in that source package.
+        Embedded from venue-calendar-npm. Handle separately - cannot import from svelte-components (circular dependency).
       </p>
 
       <table class="w-full text-sm">
         <thead>
           <tr class="text-left border-b border-purple-300 dark:border-purple-700">
             <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">File</th>
-            <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">Buttons</th>
+            <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">Count</th>
             <th class="py-2 font-semibold text-purple-700 dark:text-purple-300">Purpose</th>
           </tr>
         </thead>
         <tbody class="text-purple-600 dark:text-purple-400">
           <tr class="border-b border-purple-200 dark:border-purple-800">
-            <td class="py-2">MiniMonthCalendar</td>
-            <td class="py-2">3</td>
-            <td class="py-2">Month navigation arrows</td>
-          </tr>
-          <tr class="border-b border-purple-200 dark:border-purple-800">
-            <td class="py-2">OrderSummary</td>
+            <td class="py-2">OrderSummary.svelte</td>
             <td class="py-2">5</td>
             <td class="py-2">Checkout actions</td>
           </tr>
           <tr class="border-b border-purple-200 dark:border-purple-800">
-            <td class="py-2">MonthSwitcher</td>
+            <td class="py-2">MiniMonthCalendar.svelte</td>
             <td class="py-2">3</td>
             <td class="py-2">Month navigation</td>
           </tr>
           <tr class="border-b border-purple-200 dark:border-purple-800">
-            <td class="py-2">AboutShow</td>
+            <td class="py-2">MonthSwitcher.svelte</td>
             <td class="py-2">3</td>
-            <td class="py-2">Show details actions</td>
+            <td class="py-2">Month navigation</td>
           </tr>
           <tr class="border-b border-purple-200 dark:border-purple-800">
-            <td class="py-2">ShowCard</td>
+            <td class="py-2">AboutShow.svelte</td>
+            <td class="py-2">3</td>
+            <td class="py-2">Show details</td>
+          </tr>
+          <tr class="border-b border-purple-200 dark:border-purple-800">
+            <td class="py-2">ShowCard.svelte</td>
             <td class="py-2">1</td>
             <td class="py-2">CTA button</td>
           </tr>
           <tr>
-            <td class="py-2">FAQs</td>
+            <td class="py-2">FAQs.svelte</td>
             <td class="py-2">1</td>
             <td class="py-2">Accordion toggle</td>
           </tr>
         </tbody>
       </table>
     </div>
+
+    <!-- STORIES - LOW PRIORITY -->
+    <div class="bg-gray-100 dark:bg-gray-800/50 rounded-lg p-6">
+      <h2 class="text-xl font-semibold text-gray-600 dark:text-gray-400 mb-4">
+        Stories: Low Priority (~30 buttons in 19 files)
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-500">
+        Demo and test files. Not user-facing. Fix only if time permits.
+      </p>
+    </div>
   </div>
 </Story>
 
 <Story name="micdrop-frontend Detailed">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">micdrop-frontend: Detailed Audit</h1>
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">micdrop-frontend: Fresh Audit (Dec 26, 2025)</h1>
     <p class="text-gray-600 dark:text-gray-400">
-      Complete file-by-file breakdown of consolidation opportunities.
+      <strong>12 files</strong> with raw buttons. Total: <strong>25 raw buttons</strong> (9 production, 8 storybook).
     </p>
 
     <!-- Summary -->
@@ -645,9 +750,10 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
 
 <Story name="performers-portal Detailed">
   <div class="space-y-8">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">performers-portal: Detailed Audit</h1>
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">performers-portal: Fresh Audit (Dec 26, 2025)</h1>
     <p class="text-gray-600 dark:text-gray-400">
-      Complete file-by-file breakdown of consolidation opportunities.
+      <strong>7 files</strong> with raw buttons. Total: <strong>27 raw buttons</strong> (24 production, 3 test/story).
+      <span class="text-red-600 font-medium">Critical: Only 3 files use shared library!</span>
     </p>
 
     <!-- Summary -->
@@ -1071,84 +1177,66 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
   <div class="space-y-8">
     <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Recommended Action Plan</h1>
 
-    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Phase 1: Complete Audit</h2>
+    <!-- Phase 1 COMPLETE -->
+    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border-2 border-green-500">
+      <h2 class="text-xl font-bold text-green-800 dark:text-green-300 mb-4">✓ Phase 1: Audit Complete (Dec 26, 2025)</h2>
 
       <div class="space-y-3">
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-gray-700 dark:text-gray-300">Scan micdrop-frontend for all raw elements</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">buttons, inputs, forms, selects, textareas</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan svelte-components: 36 files, 13 need fixing</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-gray-700 dark:text-gray-300">Scan performers-portal for all raw elements</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan micdrop-frontend: 12 files, 25 raw buttons</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-gray-700 dark:text-gray-300">Inventory local $lib/components in both repos</p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">Which exist? Which are used? Which are outdated?</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">Scan performers-portal: 7 files, 27 raw buttons</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-gray-700 dark:text-gray-300">Update this story with complete counts</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">Document findings with categorization and suggestions</p>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Phase 2: Fix svelte-components</h2>
+    <!-- Phase 2 COMPLETE -->
+    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border-2 border-green-500">
+      <h2 class="text-xl font-bold text-green-800 dark:text-green-300 mb-4">✓ Phase 2: Fix svelte-components (COMPLETE - Dec 26, 2025)</h2>
+      <p class="text-sm text-green-600 dark:text-green-400 mb-4">All 13 raw buttons in 2 files have been migrated. New Button variants added: avatar, menu-item, menu-item-danger, card.</p>
 
       <div class="space-y-3">
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
-          <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Replace raw buttons in Header.svelte (11)</p>
-          </div>
-        </div>
-        <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Replace raw buttons in SuperLogin.svelte (10)</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">CropImage.svelte - fully migrated to Button</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Replace raw buttons in modal recipes (4)</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">Header.svelte - 9 raw buttons → Button avatar/menu-item/menu-item-danger</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Replace raw buttons in CropImage.svelte (3)</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">SuperLogin.svelte - 4 raw buttons → Button card/link variants</p>
           </div>
         </div>
         <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
-          <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Replace raw button in PageLoader.svelte (1)</p>
-          </div>
-        </div>
-        <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
-          <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Ensure Button has all needed variants</p>
-            <p class="text-sm text-blue-500 dark:text-blue-500">ghost, icon, link - do they cover all use cases?</p>
-          </div>
-        </div>
-        <div class="flex items-start gap-3">
-          <input type="checkbox" class="mt-1" />
+          <input type="checkbox" checked disabled class="mt-1" />
           <div>
-            <p class="font-medium text-blue-700 dark:text-blue-400">Publish new version to NPM</p>
+            <p class="font-medium text-green-700 dark:text-green-400 line-through">PR #25 updated with all fixes</p>
           </div>
         </div>
       </div>