@getmicdrop/svelte-components 5.6.0 → 5.6.1

package/dist/components/Layout/__tests__/AppShell.test.d.ts

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

package/dist/components/Layout/__tests__/AppShell.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/AppShell.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/AppShell.test.js

@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import AppShell from '../AppShell.svelte';
+describe('AppShell', () => {
+    describe('basic rendering', () => {
+        it('renders the shell container', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell).toBeTruthy();
+        });
+        it('applies min-h-screen class', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('min-h-screen')).toBe(true);
+        });
+        it('renders main element', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('main')).toBeTruthy();
+        });
+    });
+    describe('variant prop', () => {
+        it('applies admin background by default', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies admin background for variant="admin"', () => {
+            const { container } = render(AppShell, { variant: 'admin' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies performer background for variant="performer"', () => {
+            const { container } = render(AppShell, { variant: 'performer' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies public background for variant="public"', () => {
+            const { container } = render(AppShell, { variant: 'public' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-white')).toBe(true);
+        });
+        it('applies minimal background for variant="minimal"', () => {
+            const { container } = render(AppShell, { variant: 'minimal' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-white')).toBe(true);
+        });
+    });
+    describe('fixedHeader prop', () => {
+        it('applies pt-16 to main when fixedHeader=true', () => {
+            const { container } = render(AppShell, { fixedHeader: true });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('pt-16')).toBe(true);
+        });
+        it('does not apply pt-16 to main when fixedHeader=false', () => {
+            const { container } = render(AppShell, { fixedHeader: false });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('pt-16')).toBe(false);
+        });
+    });
+    describe('sidebarCollapsed prop', () => {
+        // Note: sidebar tests require the sidebar snippet to be provided
+        // These tests verify the main content margin adjusts correctly
+        it('applies transition classes to main', () => {
+            const { container } = render(AppShell);
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('transition-all')).toBe(true);
+            expect(main?.classList.contains('duration-300')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes to main element', () => {
+            const { container } = render(AppShell, { class: 'custom-main-class' });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('custom-main-class')).toBe(true);
+        });
+    });
+    describe('structural elements', () => {
+        it('does not render header when no header snippet provided', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('header')).toBeFalsy();
+        });
+        it('does not render aside when no sidebar snippet provided', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('aside')).toBeFalsy();
+        });
+        it('does not render nav when showBottomNav=false', () => {
+            const { container } = render(AppShell, { showBottomNav: false });
+            expect(container.querySelector('nav')).toBeFalsy();
+        });
+        it('does not render nav when no bottomNav snippet provided', () => {
+            const { container } = render(AppShell, { showBottomNav: true });
+            expect(container.querySelector('nav')).toBeFalsy();
+        });
+    });
+});

package/dist/components/Layout/__tests__/ContentSection.test.d.ts

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

package/dist/components/Layout/__tests__/ContentSection.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSection.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/ContentSection.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/ContentSection.test.js

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ContentSection from '../ContentSection.svelte';
+describe('ContentSection', () => {
+    describe('basic rendering', () => {
+        it('renders a section element', () => {
+            const { container } = render(ContentSection);
+            expect(container.querySelector('section')).toBeTruthy();
+        });
+        it('applies default spacing class', () => {
+            const { container } = render(ContentSection);
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-6')).toBe(true);
+        });
+    });
+    describe('title prop', () => {
+        it('renders title when provided', () => {
+            const { container } = render(ContentSection, { title: 'Test Title' });
+            expect(container.textContent).toContain('Test Title');
+        });
+        it('renders title as h2 by default', () => {
+            const { container } = render(ContentSection, { title: 'Test Title' });
+            const h2 = container.querySelector('h2');
+            expect(h2).toBeTruthy();
+            expect(h2?.textContent).toBe('Test Title');
+        });
+        it('applies title size classes', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'lg' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-xl')).toBe(true);
+        });
+    });
+    describe('subtitle prop', () => {
+        it('renders subtitle when provided', () => {
+            const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle text' });
+            expect(container.textContent).toContain('Subtitle text');
+        });
+        it('applies subtitle styling', () => {
+            const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle' });
+            const subtitle = container.querySelector('p');
+            expect(subtitle?.classList.contains('text-sm')).toBe(true);
+            expect(subtitle?.classList.contains('text-gray-500')).toBe(true);
+        });
+    });
+    describe('headingLevel prop', () => {
+        it('renders h2 by default', () => {
+            const { container } = render(ContentSection, { title: 'Test' });
+            expect(container.querySelector('h2')).toBeTruthy();
+        });
+        it('renders h3 when headingLevel=3', () => {
+            const { container } = render(ContentSection, { title: 'Test', headingLevel: 3 });
+            expect(container.querySelector('h3')).toBeTruthy();
+        });
+        it('renders h4 when headingLevel=4', () => {
+            const { container } = render(ContentSection, { title: 'Test', headingLevel: 4 });
+            expect(container.querySelector('h4')).toBeTruthy();
+        });
+    });
+    describe('titleSize prop', () => {
+        it('applies text-base for titleSize="sm"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'sm' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-base')).toBe(true);
+        });
+        it('applies text-lg for titleSize="base"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'base' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-lg')).toBe(true);
+        });
+        it('applies text-xl for titleSize="lg"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'lg' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-xl')).toBe(true);
+        });
+        it('applies text-2xl for titleSize="xl"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'xl' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-2xl')).toBe(true);
+        });
+    });
+    describe('spacing prop', () => {
+        it('applies no margin for spacing="none"', () => {
+            const { container } = render(ContentSection, { spacing: 'none' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-4')).toBe(false);
+            expect(section?.classList.contains('mb-6')).toBe(false);
+            expect(section?.classList.contains('mb-8')).toBe(false);
+        });
+        it('applies mb-4 for spacing="sm"', () => {
+            const { container } = render(ContentSection, { spacing: 'sm' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-4')).toBe(true);
+        });
+        it('applies mb-6 for spacing="md"', () => {
+            const { container } = render(ContentSection, { spacing: 'md' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-6')).toBe(true);
+        });
+        it('applies mb-8 for spacing="lg"', () => {
+            const { container } = render(ContentSection, { spacing: 'lg' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-8')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(ContentSection, { class: 'custom-class' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/components/Layout/__tests__/PageContainer.test.d.ts

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

package/dist/components/Layout/__tests__/PageContainer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/PageContainer.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/PageContainer.test.js

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import PageContainer from '../PageContainer.svelte';
+describe('PageContainer', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(PageContainer);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies default max-w-full class', () => {
+            const { container } = render(PageContainer);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+        });
+        it('applies mx-auto for centering by default', () => {
+            const { container } = render(PageContainer);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+        });
+    });
+    describe('maxWidth prop', () => {
+        it('applies max-w-sm for maxWidth="sm"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-sm')).toBe(true);
+        });
+        it('applies max-w-md for maxWidth="md"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-md')).toBe(true);
+        });
+        it('applies max-w-lg for maxWidth="lg"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-lg')).toBe(true);
+        });
+        it('applies max-w-xl for maxWidth="xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-xl')).toBe(true);
+        });
+        it('applies max-w-2xl for maxWidth="2xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '2xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-2xl')).toBe(true);
+        });
+        it('applies max-w-4xl for maxWidth="4xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '4xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-4xl')).toBe(true);
+        });
+        it('applies max-w-6xl for maxWidth="6xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '6xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-6xl')).toBe(true);
+        });
+        it('applies max-w-full for maxWidth="full"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'full' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+        });
+    });
+    describe('padding prop', () => {
+        it('applies no padding for padding="none"', () => {
+            const { container } = render(PageContainer, { padding: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(false);
+            expect(div?.classList.contains('py-6')).toBe(false);
+        });
+        it('applies tight padding for padding="tight"', () => {
+            const { container } = render(PageContainer, { padding: 'tight' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-2')).toBe(true);
+            expect(div?.classList.contains('py-2')).toBe(true);
+        });
+        it('applies default padding for padding="default"', () => {
+            const { container } = render(PageContainer, { padding: 'default' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(true);
+            expect(div?.classList.contains('py-6')).toBe(true);
+        });
+        it('applies spacious padding for padding="spacious"', () => {
+            const { container } = render(PageContainer, { padding: 'spacious' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(true);
+            expect(div?.classList.contains('py-8')).toBe(true);
+        });
+    });
+    describe('center prop', () => {
+        it('applies mx-auto when center=true', () => {
+            const { container } = render(PageContainer, { center: true });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+        });
+        it('does not apply mx-auto when center=false', () => {
+            const { container } = render(PageContainer, { center: false });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(false);
+        });
+    });
+    describe('background prop', () => {
+        it('applies no background for background="none"', () => {
+            const { container } = render(PageContainer, { background: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-white')).toBe(false);
+            expect(div?.classList.contains('bg-gray-50')).toBe(false);
+        });
+        it('applies white background for background="white"', () => {
+            const { container } = render(PageContainer, { background: 'white' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-white')).toBe(true);
+        });
+        it('applies gray background for background="gray"', () => {
+            const { container } = render(PageContainer, { background: 'gray' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-gray-50')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(PageContainer, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves default classes when adding custom classes', () => {
+            const { container } = render(PageContainer, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/components/Layout/__tests__/Responsive.test.d.ts

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

package/dist/components/Layout/__tests__/Responsive.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Responsive.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/Responsive.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/Responsive.test.js

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Responsive from '../Responsive.svelte';
+describe('Responsive', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+    });
+    describe('mode="show-mobile"', () => {
+        it('applies block and lg:hidden classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+        it('respects breakpoint prop', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('md:hidden')).toBe(true);
+        });
+    });
+    describe('mode="show-desktop"', () => {
+        it('applies hidden and lg:block classes', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('respects breakpoint prop', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('md:block')).toBe(true);
+        });
+    });
+    describe('mode="hide-mobile"', () => {
+        it('applies hidden and lg:block classes (same as show-desktop)', () => {
+            const { container } = render(Responsive, { mode: 'hide-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+    });
+    describe('mode="hide-desktop"', () => {
+        it('applies block and lg:hidden classes (same as show-mobile)', () => {
+            const { container } = render(Responsive, { mode: 'hide-desktop' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+    });
+    describe('breakpoint prop', () => {
+        it('uses sm breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('sm:block')).toBe(true);
+        });
+        it('uses md breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('md:block')).toBe(true);
+        });
+        it('uses lg breakpoint (default)', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('uses xl breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('xl:block')).toBe(true);
+        });
+    });
+    describe('display prop', () => {
+        it('uses block display by default', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+        });
+        it('uses flex display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex')).toBe(true);
+        });
+        it('uses grid display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+        });
+        it('uses inline display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'inline' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline')).toBe(true);
+        });
+        it('uses inline-block display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'inline-block' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline-block')).toBe(true);
+        });
+        it('applies display to desktop breakpoint for show-desktop mode', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:flex')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves responsive classes when adding custom classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/index.d.ts

@@ -8,4 +8,5 @@ export * from "./presets/index.js";
 export { portal } from "./utils/portal.js";
 export { safeSlide } from "./utils/transitions.js";
 export { typography } from "./tokens/typography.js";
+export { logger, configureLogger } from "./utils/logger.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,40 +1,41 @@
-// =============================================================================
-// PRIMITIVES - Pure visual components (Layer 1)
-// =============================================================================
-export * from './primitives/index.js';
-
-// =============================================================================
-// RECIPES - Domain-agnostic compositions (Layer 2)
-// =============================================================================
-export * from './recipes/index.js';
-
-// =============================================================================
-// PATTERNS - Layout & flow components (Layer 3)
-// =============================================================================
-export * from './patterns/index.js';
-
-// =============================================================================
-// CALENDAR - Domain components (deferred migration to apps)
-// =============================================================================
-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';
-export { safeSlide } from './utils/transitions.js';
-
-// Design Tokens
-export { typography } from './tokens/typography.js';
+// =============================================================================
+// PRIMITIVES - Pure visual components (Layer 1)
+// =============================================================================
+export * from './primitives/index.js';
+
+// =============================================================================
+// RECIPES - Domain-agnostic compositions (Layer 2)
+// =============================================================================
+export * from './recipes/index.js';
+
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+export * from './patterns/index.js';
+
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+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';
+export { safeSlide } from './utils/transitions.js';
+export { logger, configureLogger } from './utils/logger.js';
+
+// Design Tokens
+export { typography } from './tokens/typography.js';

package/dist/patterns/navigation/BottomNav.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { page } from '../../__LIB_STORES__.js';
   import { base } from '../../__LIB_PATHS__.js';
+  import { browser } from '../../__LIB_ENVIRONMENT__.js';
+  import { onMount } from "svelte";
   import Icon from "../../primitives/Icons/Icon.svelte";
   import { typography } from '../../tokens/typography';
 
@@ -18,7 +20,7 @@
     links = [],
   }: Props = $props();
 
-  let shows = $state({ invitation: [] as Array<{ acceptedState: number }> });
+  let invitationCount = $state(0);
 
   let currentPath = $derived($page.url.pathname);
 
@@ -29,17 +31,25 @@
     return path.startsWith(href);
   }
 
-  $effect(() => {
-    (async () => {
+  onMount(() => {
+    async function fetchShows() {
       try {
         const res = await fetch(`/api/getEventsForVenue`);
-        if (!res.ok) throw new Error("Failed to fetch shows.");
+        if (!res.ok) {
+          // Silently ignore auth errors - user may not be logged in yet
+          if (res.status === 401) return;
+          return;
+        }
         const events = await res.json();
-        shows.invitation = events.filter((event: { acceptedState: number }) => event.acceptedState === 0);
+        invitationCount = events.filter((event: { acceptedState: number }) => event.acceptedState === 0).length;
       } catch (err) {
-        console.error("Failed to fetch shows:", err);
+        // Silently fail - this is non-critical UI enhancement
       }
-    })();
+    }
+
+    if (browser) {
+      fetchShows();
+    }
   });
 </script>
 
@@ -56,7 +66,7 @@
   >
     <span class="bottom-nav-icon relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
       <Icon name={icon} size="24" />
-      {#if label === "Shows" && shows?.invitation?.length > 0}
+      {#if label === "Shows" && invitationCount > 0}
         <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
       {/if}
     </span>

package/dist/patterns/navigation/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.ts"],"names":[],"mappings":"AASE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAuDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.ts"],"names":[],"mappings":"AAWE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAiEH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}