@getmicdrop/svelte-components 5.4.1 → 5.4.2

package/dist/index.js

@@ -1,223 +1,47 @@
-// =============================================================================
-// PRIMITIVES - Pure visual components (Layer 1)
-// =============================================================================
-
-// Accordion
-export { default as Accordion } from './primitives/Accordion/Accordion.svelte';
-export { default as AccordionItem } from './primitives/Accordion/AccordionItem.svelte';
-
-// Alert
-export { default as Alert } from './primitives/Alert/Alert.svelte';
-
-// Avatar
-export { default as Avatar } from './primitives/Avatar/Avatar.svelte';
-
-// Badge
-export { default as Badge } from './primitives/Badges/Badge.svelte';
-
-// BottomSheet
-export { default as BottomSheet } from './primitives/BottomSheet/BottomSheet.svelte';
-
-// Breadcrumb
-export { default as Breadcrumb } from './primitives/Breadcrumb/Breadcrumb.svelte';
-
-// Button
-export { default as Button } from './primitives/Button/Button.svelte';
-export { default as ButtonSaveDemo } from './primitives/Button/ButtonSaveDemo.svelte';
-
-// Card
-export { default as Card } from './primitives/Card.svelte';
-
-// Checkbox
-export { default as Checkbox } from './primitives/Checkbox/Checkbox.svelte';
-
-// DarkModeToggle
-export { default as DarkModeToggle } from './primitives/DarkModeToggle.svelte';
-
-// Drawer
-export { default as Drawer } from './primitives/Drawer/Drawer.svelte';
-
-// Dropdown
-export { default as Dropdown } from './primitives/Dropdown/Dropdown.svelte';
-export { default as DropdownItem } from './primitives/Dropdown/DropdownItem.svelte';
-
-// Icons
-export { default as Icon } from './primitives/Icons/Icon.svelte';
-export { default as ArrowLeft } from './primitives/Icons/ArrowLeft.svelte';
-export { default as ArrowRight } from './primitives/Icons/ArrowRight.svelte';
-export { default as Availability } from './primitives/Icons/Availability.svelte';
-export { default as Back } from './primitives/Icons/Back.svelte';
-export { default as CheckCircle } from './primitives/Icons/CheckCircle.svelte';
-export { default as CheckCircleOutline } from './primitives/Icons/CheckCircleOutline.svelte';
-export { default as ChevronLeft } from './primitives/Icons/ChevronLeft.svelte';
-export { default as ChevronRight } from './primitives/Icons/ChevronRight.svelte';
-export { default as Copy } from './primitives/Icons/Copy.svelte';
-export { default as Cross } from './primitives/Icons/Cross.svelte';
-export { default as DownArrow } from './primitives/Icons/DownArrow.svelte';
-export { default as ErrorCircle } from './primitives/Icons/ErrorCircle.svelte';
-export { default as FacebookIcon } from './primitives/Icons/FacebookIcon.svelte';
-export { default as Home } from './primitives/Icons/Home.svelte';
-export { default as Info } from './primitives/Icons/Info.svelte';
-export { default as InstagramIcon } from './primitives/Icons/InstagramIcon.svelte';
-export { default as Message } from './primitives/Icons/Message.svelte';
-export { default as MoonIcon } from './primitives/Icons/MoonIcon.svelte';
-export { default as More } from './primitives/Icons/More.svelte';
-export { default as MoreHori } from './primitives/Icons/MoreHori.svelte';
-export { default as Notification } from './primitives/Icons/Notification.svelte';
-export { default as Payment } from './primitives/Icons/Payment.svelte';
-export { default as Profile } from './primitives/Icons/Profile.svelte';
-export { default as Reload } from './primitives/Icons/Reload.svelte';
-export { default as Shows } from './primitives/Icons/Shows.svelte';
-export { default as Signout } from './primitives/Icons/Signout.svelte';
-export { default as SunIcon } from './primitives/Icons/SunIcon.svelte';
-export { default as TiktokIcon } from './primitives/Icons/TiktokIcon.svelte';
-export { default as TwitterIcon } from './primitives/Icons/TwitterIcon.svelte';
-export { default as WarningIcon } from './primitives/Icons/WarningIcon.svelte';
-
-// Input (primitives only - Select, Textarea are here; recipes are in recipes/inputs)
-export { default as Input } from './primitives/Input/Input.svelte';
-export { default as Select } from './primitives/Input/Select.svelte';
-export { default as Textarea } from './primitives/Input/Textarea.svelte';
-
-// Label
-export { default as Label } from './primitives/Label/Label.svelte';
-
-// Modal (base only - composite modals are in recipes/modals)
-export { default as Modal } from './primitives/Modal/Modal.svelte';
-
-// Pagination
-export { default as Pagination } from './primitives/Pagination/Pagination.svelte';
-
-// Radio
-export { default as Radio } from './primitives/Radio/Radio.svelte';
-
-// Skeleton
-export { default as Skeleton } from './primitives/Skeleton/Skeleton.svelte';
-export { default as ImagePlaceholder } from './primitives/Skeleton/ImagePlaceholder.svelte';
-export { default as CardPlaceholder } from './primitives/Skeleton/CardPlaceholder.svelte';
-export { default as ListPlaceholder } from './primitives/Skeleton/ListPlaceholder.svelte';
-
-// Spinner
-export { default as Spinner } from './primitives/Spinner/Spinner.svelte';
-
-// Tabs
-export { default as Tabs } from './primitives/Tabs/Tabs.svelte';
-export { default as TabItem } from './primitives/Tabs/TabItem.svelte';
-
-// Toggle
-export { default as Toggle } from './primitives/Toggle.svelte';
-
-// Typography
-export { default as Typography } from './primitives/Typography/Typography.svelte';
-
-// ValidationError
-export { default as ValidationError } from './primitives/ValidationError.svelte';
-
-// =============================================================================
-// RECIPES - Domain-agnostic compositions (Layer 2)
-// =============================================================================
-
-// CropImage
-export { default as CropImage } from './recipes/CropImage/CropImage.svelte';
-
-// ImageUploader
-export { default as ImageUploader } from './recipes/ImageUploader/ImageUploader.svelte';
-
-// Feedback
-export { default as EmptyState } from './recipes/feedback/EmptyState/EmptyState.svelte';
-export { default as ErrorDisplay } from './recipes/feedback/ErrorDisplay.svelte';
-export { default as StatusIndicator } from './recipes/feedback/StatusIndicator/StatusIndicator.svelte';
-
-// Inputs (composite input components)
-export { default as MultiSelect } from './recipes/inputs/MultiSelect.svelte';
-export { default as OTPInput } from './recipes/inputs/OTPInput.svelte';
-export { default as PasswordInput } from './recipes/inputs/PasswordInput.svelte';
-export { default as PasswordStrengthIndicator } from './recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-export { default as PlaceAutocomplete } from './recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte';
-export { default as Search } from './recipes/inputs/Search.svelte';
-export { default as SelectDropdown } from './recipes/inputs/SelectDropdown.svelte';
-
-// Modals (composite modal components)
-export { default as AlertModal } from './recipes/modals/AlertModal.svelte';
-export { default as ConfirmationModal } from './recipes/modals/ConfirmationModal.svelte';
-export { default as InputModal } from './recipes/modals/InputModal.svelte';
-export { default as ModalStateManager } from './recipes/modals/ModalStateManager.svelte';
-export { default as ModalTestWrapper } from './recipes/modals/ModalTestWrapper.svelte';
-export { default as StatusModal } from './recipes/modals/StatusModal.svelte';
-
-// SuperLogin
-export { default as SuperLogin } from './recipes/SuperLogin/SuperLogin.svelte';
-
-// Fields (form field compositions)
-export { default as CheckboxField } from './recipes/fields/CheckboxField.svelte';
-export { default as FormField } from './recipes/fields/FormField.svelte';
-export { default as RadioGroup } from './recipes/fields/RadioGroup.svelte';
-export { default as SelectField } from './recipes/fields/SelectField.svelte';
-export { default as TextareaField } from './recipes/fields/TextareaField.svelte';
-export { default as ToggleField } from './recipes/fields/ToggleField.svelte';
-
-// =============================================================================
-// PATTERNS - Layout & flow components (Layer 3)
-// =============================================================================
-
-// Forms
-export { default as FormActions } from './patterns/forms/FormActions.svelte';
-export { default as FormGrid } from './patterns/forms/FormGrid.svelte';
-export { default as FormSection } from './patterns/forms/FormSection.svelte';
-export { default as FormValidationSummary } from './patterns/forms/FormValidationSummary.svelte';
-
-// Navigation
-export { default as BottomNav } from './patterns/navigation/BottomNav.svelte';
-export { default as Header } from './patterns/navigation/Header.svelte';
-
-// Page
-export { default as PageHeader } from './patterns/page/PageHeader.svelte';
-export { default as PageLayout } from './patterns/page/PageLayout.svelte';
-export { default as PageLoader } from './patterns/page/PageLoader.svelte';
-export { default as SectionHeader } from './patterns/page/SectionHeader.svelte';
-
-// Data
-export { default as DataGrid } from './patterns/data/DataGrid.svelte';
-export { default as DataList } from './patterns/data/DataList.svelte';
-export { default as DataTable } from './patterns/data/DataTable.svelte';
-
-// Layout
-export { default as Grid } from './patterns/layout/Grid.svelte';
-export { default as Sidebar } from './patterns/layout/Sidebar.svelte';
-export { default as Stack } from './patterns/layout/Stack.svelte';
-
-// =============================================================================
-// CALENDAR - Domain components (deferred migration to apps)
-// =============================================================================
-
-export { default as MiniMonthCalendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
-// Legacy alias for backward compatibility - will be removed in future version
-export { default as Calendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
-
-export { default as PublicCard } from './calendar/PublicCard/PublicCard.svelte';
-export { default as MonthSwitcher } from './calendar/MonthSwitcher/MonthSwitcher.svelte';
-export { default as OrderSummary } from './calendar/OrderSummary/OrderSummary.svelte';
-export { default as ShowCard } from './calendar/ShowCard/ShowCard.svelte';
-export { default as AboutShow } from './calendar/AboutShow/AboutShow.svelte';
-export { default as FAQs } from './calendar/FAQs/FAQs.svelte';
-export { default as ShowTimeCard } from './calendar/ShowTimeCard/ShowTimeCard.svelte';
-
-// =============================================================================
-// NON-COMPONENT EXPORTS
-// =============================================================================
-
-// Note: config.js and telemetry.js removed - they use import.meta.env which
-// is Vite-specific. Apps should define their own config/telemetry locally.
-
-// Constants
-export * from './constants/formOptions.js';
-export * from './constants/validation.js';
-
-// Presets - Domain-to-color mappings for migration
-export * from './presets/index.js';
-
-// Utils / Actions
-export { portal } from './utils/portal.js';
-
-// Design Tokens
-export { typography } from './tokens/typography.js';
+// =============================================================================
+// PRIMITIVES - Pure visual components (Layer 1)
+// =============================================================================
+
+// Re-export all primitives from primitives/index.js
+export * from './primitives/index.js';
+
+// =============================================================================
+// RECIPES - Domain-agnostic compositions (Layer 2)
+// =============================================================================
+
+// Re-export all recipes from recipes/index.js
+export * from './recipes/index.js';
+
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+// Re-export all patterns from patterns/index.js
+export * from './patterns/index.js';
+
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+// Re-export all calendar components from calendar/index.js
+export * from './calendar/index.js';
+
+// =============================================================================
+// NON-COMPONENT EXPORTS
+// =============================================================================
+
+// Note: config.js and telemetry.js removed - they use import.meta.env which
+// is Vite-specific. Apps should define their own config/telemetry locally.
+
+// Constants
+export * from './constants/formOptions.js';
+export * from './constants/validation.js';
+
+// Presets - Domain-to-color mappings for migration
+export * from './presets/index.js';
+
+// Utils / Actions
+export { portal } from './utils/portal.js';
+
+// Design Tokens
+export { typography } from './tokens/typography.js';

package/dist/index.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.spec.d.ts.map

package/dist/index.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.d.ts","sourceRoot":"","sources":["../src/lib/index.spec.js"],"names":[],"mappings":""}

package/dist/index.spec.js

@@ -0,0 +1,370 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync, existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Export Organization Tests
+ *
+ * These tests verify that the hierarchical export structure is properly
+ * organized with intermediate index files for tree-shaking support.
+ *
+ * Note: We test file existence and export patterns rather than importing
+ * Svelte components directly, as vitest has issues with Svelte preprocessing.
+ */
+
+function fileExists(relativePath) {
+  return existsSync(resolve(__dirname, relativePath));
+}
+
+function readFile(relativePath) {
+  return readFileSync(resolve(__dirname, relativePath), 'utf-8');
+}
+
+function getExportedNames(content) {
+  const exports = [];
+
+  // Match: export { default as Name } from './path'
+  const defaultExports = content.matchAll(/export\s*\{\s*default\s+as\s+(\w+)\s*\}/g);
+  for (const match of defaultExports) {
+    exports.push(match[1]);
+  }
+
+  // Match: export * from './path'
+  const reExports = content.matchAll(/export\s*\*\s*from/g);
+  exports.push(...Array.from(reExports).map(() => '*'));
+
+  // Match: export { name1, name2 } from './path'
+  const namedExports = content.matchAll(/export\s*\{([^}]+)\}\s*from/g);
+  for (const match of namedExports) {
+    const names = match[1].split(',').map((n) => n.trim().split(/\s+as\s+/).pop().trim());
+    exports.push(...names);
+  }
+
+  return exports;
+}
+
+describe('Export Organization - File Structure', () => {
+  describe('Main index.js', () => {
+    it('exists at src/lib/index.js', () => {
+      expect(fileExists('./index.js')).toBe(true);
+    });
+
+    it('uses re-exports from intermediate files', () => {
+      const content = readFile('./index.js');
+
+      // Should re-export from layer directories
+      expect(content).toContain("export * from './primitives/index.js'");
+      expect(content).toContain("export * from './recipes/index.js'");
+      expect(content).toContain("export * from './patterns/index.js'");
+      expect(content).toContain("export * from './calendar/index.js'");
+    });
+
+    it('has organized sections with comments', () => {
+      const content = readFile('./index.js');
+
+      expect(content).toContain('PRIMITIVES');
+      expect(content).toContain('RECIPES');
+      expect(content).toContain('PATTERNS');
+      expect(content).toContain('CALENDAR');
+    });
+  });
+});
+
+describe('Recipes Layer - Intermediate Index Files', () => {
+  describe('recipes/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./recipes/index.js')).toBe(true);
+    });
+
+    it('re-exports from all subdirectories', () => {
+      const content = readFile('./recipes/index.js');
+
+      expect(content).toContain("export * from './feedback/index.js'");
+      expect(content).toContain("export * from './inputs/index.js'");
+      expect(content).toContain("export * from './modals/index.js'");
+      expect(content).toContain("export * from './fields/index.js'");
+      expect(content).toContain("export * from './SuperLogin/index.js'");
+    });
+
+    it('exports CropImage and ImageUploader directly', () => {
+      const content = readFile('./recipes/index.js');
+
+      expect(content).toContain('CropImage');
+      expect(content).toContain('ImageUploader');
+    });
+  });
+
+  describe('recipes/inputs/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./recipes/inputs/index.js')).toBe(true);
+    });
+
+    it('exports all input recipe components', () => {
+      const content = readFile('./recipes/inputs/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('MultiSelect');
+      expect(exports).toContain('OTPInput');
+      expect(exports).toContain('PasswordInput');
+      expect(exports).toContain('PasswordStrengthIndicator');
+      expect(exports).toContain('PlaceAutocomplete');
+      expect(exports).toContain('Search');
+      expect(exports).toContain('SelectDropdown');
+    });
+  });
+
+  describe('recipes/modals/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./recipes/modals/index.js')).toBe(true);
+    });
+
+    it('exports all modal recipe components', () => {
+      const content = readFile('./recipes/modals/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('AlertModal');
+      expect(exports).toContain('ConfirmationModal');
+      expect(exports).toContain('InputModal');
+      expect(exports).toContain('ModalStateManager');
+      expect(exports).toContain('ModalTestWrapper');
+      expect(exports).toContain('StatusModal');
+    });
+  });
+
+  describe('recipes/feedback/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./recipes/feedback/index.js')).toBe(true);
+    });
+
+    it('exports all feedback components', () => {
+      const content = readFile('./recipes/feedback/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('EmptyState');
+      expect(exports).toContain('ErrorDisplay');
+      expect(exports).toContain('StatusIndicator');
+    });
+  });
+
+  describe('recipes/fields/index.js (pre-existing)', () => {
+    it('exists', () => {
+      expect(fileExists('./recipes/fields/index.js')).toBe(true);
+    });
+
+    it('exports all field components', () => {
+      const content = readFile('./recipes/fields/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('CheckboxField');
+      expect(exports).toContain('FormField');
+      expect(exports).toContain('RadioGroup');
+      expect(exports).toContain('SelectField');
+      expect(exports).toContain('TextareaField');
+      expect(exports).toContain('ToggleField');
+    });
+  });
+});
+
+describe('Patterns Layer - Intermediate Index Files', () => {
+  describe('patterns/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/index.js')).toBe(true);
+    });
+
+    it('re-exports from all subdirectories', () => {
+      const content = readFile('./patterns/index.js');
+
+      expect(content).toContain("export * from './forms/index.js'");
+      expect(content).toContain("export * from './navigation/index.js'");
+      expect(content).toContain("export * from './page/index.js'");
+      expect(content).toContain("export * from './data/index.js'");
+      expect(content).toContain("export * from './layout/index.js'");
+    });
+  });
+
+  describe('patterns/forms/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/forms/index.js')).toBe(true);
+    });
+
+    it('exports all form pattern components', () => {
+      const content = readFile('./patterns/forms/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('FormActions');
+      expect(exports).toContain('FormGrid');
+      expect(exports).toContain('FormSection');
+      expect(exports).toContain('FormValidationSummary');
+    });
+  });
+
+  describe('patterns/navigation/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/navigation/index.js')).toBe(true);
+    });
+
+    it('exports all navigation pattern components', () => {
+      const content = readFile('./patterns/navigation/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('BottomNav');
+      expect(exports).toContain('Header');
+    });
+  });
+
+  describe('patterns/page/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/page/index.js')).toBe(true);
+    });
+
+    it('exports all page pattern components', () => {
+      const content = readFile('./patterns/page/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('PageHeader');
+      expect(exports).toContain('PageLayout');
+      expect(exports).toContain('PageLoader');
+      expect(exports).toContain('SectionHeader');
+    });
+  });
+
+  describe('patterns/data/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/data/index.js')).toBe(true);
+    });
+
+    it('exports all data pattern components', () => {
+      const content = readFile('./patterns/data/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('DataGrid');
+      expect(exports).toContain('DataList');
+      expect(exports).toContain('DataTable');
+    });
+  });
+
+  describe('patterns/layout/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./patterns/layout/index.js')).toBe(true);
+    });
+
+    it('exports all layout pattern components', () => {
+      const content = readFile('./patterns/layout/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('Grid');
+      expect(exports).toContain('Section');
+      expect(exports).toContain('Sidebar');
+      expect(exports).toContain('Stack');
+    });
+
+    it('re-exports from components/Layout/ for compatibility', () => {
+      const content = readFile('./patterns/layout/index.js');
+
+      // Should point to canonical location
+      expect(content).toContain('../../components/Layout/');
+    });
+  });
+});
+
+describe('Calendar Layer - Index File', () => {
+  describe('calendar/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./calendar/index.js')).toBe(true);
+    });
+
+    it('exports all calendar components', () => {
+      const content = readFile('./calendar/index.js');
+      const exports = getExportedNames(content);
+
+      expect(exports).toContain('MiniMonthCalendar');
+      expect(exports).toContain('Calendar'); // Legacy alias
+      expect(exports).toContain('PublicCard');
+      expect(exports).toContain('MonthSwitcher');
+      expect(exports).toContain('OrderSummary');
+      expect(exports).toContain('ShowCard');
+      expect(exports).toContain('AboutShow');
+      expect(exports).toContain('FAQs');
+      expect(exports).toContain('ShowTimeCard');
+    });
+
+    it('has backward compatibility alias for Calendar', () => {
+      const content = readFile('./calendar/index.js');
+
+      // Both should export from same source
+      expect(content).toContain("export { default as MiniMonthCalendar } from './Calendar/MiniMonthCalendar.svelte'");
+      expect(content).toContain("export { default as Calendar } from './Calendar/MiniMonthCalendar.svelte'");
+    });
+  });
+});
+
+describe('Pre-existing Index Files (verification)', () => {
+  describe('primitives/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./primitives/index.js')).toBe(true);
+    });
+
+    it('has organized sections', () => {
+      const content = readFile('./primitives/index.js');
+
+      expect(content).toContain('PRIMITIVES');
+    });
+  });
+
+  describe('stores/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./stores/index.js')).toBe(true);
+    });
+  });
+
+  describe('presets/index.js', () => {
+    it('exists', () => {
+      expect(fileExists('./presets/index.js')).toBe(true);
+    });
+
+    it('re-exports badges and buttons presets', () => {
+      const content = readFile('./presets/index.js');
+
+      expect(content).toContain("export * from './badges.js'");
+      expect(content).toContain("export * from './buttons.js'");
+    });
+  });
+});
+
+describe('Tree-Shaking Structure', () => {
+  it('main index uses only re-exports (no direct component imports)', () => {
+    const content = readFile('./index.js');
+
+    // Should NOT have direct .svelte imports in main index
+    // All component exports should come via intermediate index files
+    const directSvelteImports = content.match(/from\s+['"][^'"]+\.svelte['"]/g) || [];
+
+    expect(directSvelteImports).toHaveLength(0);
+  });
+
+  it('layer indexes aggregate their subdirectories', () => {
+    // recipes/index.js should use export * from subdirs
+    const recipesContent = readFile('./recipes/index.js');
+    const recipesReExports = (recipesContent.match(/export \* from/g) || []).length;
+    expect(recipesReExports).toBeGreaterThanOrEqual(5); // feedback, inputs, modals, fields, SuperLogin
+
+    // patterns/index.js should use export * from subdirs
+    const patternsContent = readFile('./patterns/index.js');
+    const patternsReExports = (patternsContent.match(/export \* from/g) || []).length;
+    expect(patternsReExports).toBe(5); // forms, navigation, page, data, layout
+  });
+
+  it('leaf indexes export components individually', () => {
+    // Leaf indexes should have individual exports, not re-exports
+    const inputsContent = readFile('./recipes/inputs/index.js');
+
+    // Should have individual component exports
+    expect(inputsContent).toContain('export { default as');
+
+    // Should NOT have wildcard re-exports (it's a leaf)
+    expect(inputsContent).not.toContain('export * from');
+  });
+});