@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/forms/createFormStore.svelte.spec.js

@@ -0,0 +1,387 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { z } from 'zod';
+import { createFormStore } from './createFormStore.svelte';
+const testSchema = z.object({
+    name: z.string().min(1, 'Name is required'),
+    email: z.string().email('Invalid email'),
+    age: z.number().min(0, 'Age must be positive').optional(),
+});
+const defaultData = {
+    name: '',
+    email: '',
+    age: undefined,
+};
+const validData = {
+    name: 'John',
+    email: 'john@example.com',
+    age: 30,
+};
+/**
+ * Helper to create a form store within an effect root context.
+ * Required because createFormStore uses $effect internally.
+ */
+function createTestStore(schema, initialData, options = {}) {
+    let store;
+    const cleanup = $effect.root(() => {
+        store = createFormStore(schema, initialData, options);
+    });
+    return { store: store, cleanup };
+}
+describe('createFormStore', () => {
+    let cleanups = [];
+    function makeStore(data = defaultData, options = {}) {
+        const { store, cleanup } = createTestStore(testSchema, data, options);
+        cleanups.push(cleanup);
+        return store;
+    }
+    afterEach(() => {
+        cleanups.forEach(fn => fn());
+        cleanups = [];
+    });
+    describe('initial state', () => {
+        it('creates a store with default data', () => {
+            const store = makeStore();
+            expect(store.data).toEqual(defaultData);
+        });
+        it('starts with null originalData', () => {
+            const store = makeStore();
+            expect(store.originalData).toBeNull();
+        });
+        it('starts with empty errors', () => {
+            const store = makeStore();
+            expect(store.errors).toEqual({});
+        });
+        it('starts with all UI states as false', () => {
+            const store = makeStore();
+            expect(store.isLoading).toBe(false);
+            expect(store.isSaving).toBe(false);
+            expect(store.isSaved).toBe(false);
+            expect(store.showErrors).toBe(false);
+        });
+        it('isDirty is false initially (edit mode)', () => {
+            const store = makeStore();
+            expect(store.isDirty).toBe(false);
+        });
+        it('isValid reflects schema validation', () => {
+            const store = makeStore();
+            expect(store.isValid).toBe(false);
+        });
+        it('isValid is true for valid data', () => {
+            const store = makeStore(validData);
+            expect(store.isValid).toBe(true);
+        });
+        it('canSave is false when not dirty', () => {
+            const store = makeStore(validData);
+            expect(store.canSave).toBe(false);
+        });
+    });
+    describe('data manipulation', () => {
+        it('can set data', () => {
+            const store = makeStore();
+            store.data = validData;
+            expect(store.data).toEqual(validData);
+        });
+        it('can set originalData', () => {
+            const store = makeStore();
+            store.originalData = validData;
+            expect(store.originalData).toEqual(validData);
+        });
+        it('can set errors', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            expect(store.errors).toEqual({ name: 'Required' });
+        });
+        it('can set UI state flags', () => {
+            const store = makeStore();
+            store.isLoading = true;
+            expect(store.isLoading).toBe(true);
+            store.isSaving = true;
+            expect(store.isSaving).toBe(true);
+            store.isSaved = true;
+            expect(store.isSaved).toBe(true);
+            store.showErrors = true;
+            expect(store.showErrors).toBe(true);
+        });
+    });
+    describe('setOriginal', () => {
+        it('sets both original and current data', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            expect(store.originalData).toEqual(validData);
+            expect(store.data).toEqual(validData);
+        });
+        it('clears errors and showErrors', () => {
+            const store = makeStore();
+            store.errors = { name: 'err' };
+            store.showErrors = true;
+            store.setOriginal(validData);
+            expect(store.errors).toEqual({});
+            expect(store.showErrors).toBe(false);
+        });
+        it('resets isSaved', () => {
+            const store = makeStore();
+            store.isSaved = true;
+            store.setOriginal(validData);
+            expect(store.isSaved).toBe(false);
+        });
+    });
+    describe('isDirty', () => {
+        it('is false when data matches original (edit mode)', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            expect(store.isDirty).toBe(false);
+        });
+        it('is true when data differs from original (edit mode)', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Jane' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('is false when no originalData set (edit mode)', () => {
+            const store = makeStore();
+            store.data = validData;
+            expect(store.isDirty).toBe(false);
+        });
+    });
+    describe('isDirty (create mode)', () => {
+        it('is false when all fields empty', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            expect(store.isDirty).toBe(false);
+        });
+        it('is true when string field has value', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            store.data = { ...defaultData, name: 'test' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('is true when number field has value', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            store.data = { ...defaultData, age: 25 };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles array fields', () => {
+            const arraySchema = z.object({ tags: z.array(z.string()), name: z.string() });
+            const { store, cleanup } = createTestStore(arraySchema, { tags: [], name: '' }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+            store.data = { tags: ['test'], name: '' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles boolean fields', () => {
+            const boolSchema = z.object({ active: z.boolean(), name: z.string() });
+            const { store, cleanup } = createTestStore(boolSchema, { active: false, name: '' }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+            store.data = { active: true, name: '' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles null values', () => {
+            const nullSchema = z.object({ value: z.string().nullable() });
+            const { store, cleanup } = createTestStore(nullSchema, { value: null }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+        });
+    });
+    describe('validate', () => {
+        it('returns false and sets errors for invalid data', () => {
+            const store = makeStore();
+            const result = store.validate();
+            expect(result).toBe(false);
+            expect(store.showErrors).toBe(true);
+            expect(store.errors.name).toBeDefined();
+            expect(store.errors.email).toBeDefined();
+        });
+        it('returns true and clears errors for valid data', () => {
+            const store = makeStore(validData);
+            const result = store.validate();
+            expect(result).toBe(true);
+            expect(store.errors).toEqual({});
+        });
+        it('only keeps first error per field', () => {
+            const store = makeStore({ name: '', email: 'bad', age: undefined });
+            store.validate();
+            expect(typeof store.errors.name).toBe('string');
+            expect(typeof store.errors.email).toBe('string');
+        });
+    });
+    describe('validateField', () => {
+        it('returns undefined for valid field', () => {
+            const store = makeStore(validData);
+            expect(store.validateField('name')).toBeUndefined();
+        });
+        it('returns error message for invalid field', () => {
+            const store = makeStore();
+            expect(store.validateField('name')).toBeDefined();
+        });
+    });
+    describe('fieldError', () => {
+        it('returns undefined when showErrors is false', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            expect(store.fieldError('name')).toBeUndefined();
+        });
+        it('returns error when showErrors is true', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            store.showErrors = true;
+            expect(store.fieldError('name')).toBe('Required');
+        });
+        it('returns undefined for fields without errors', () => {
+            const store = makeStore();
+            store.showErrors = true;
+            expect(store.fieldError('age')).toBeUndefined();
+        });
+    });
+    describe('sections', () => {
+        const sections = {
+            basics: ['name', 'email'],
+            details: ['age'],
+        };
+        it('isSectionValid returns true for unknown section', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionValid('nonexistent')).toBe(true);
+        });
+        it('isSectionValid returns false when section has errors', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionValid('basics')).toBe(false);
+        });
+        it('isSectionValid returns true when section fields are valid', () => {
+            const store = makeStore({ name: 'John', email: 'john@test.com', age: undefined }, { sections });
+            expect(store.isSectionValid('basics')).toBe(true);
+        });
+        it('isSectionDirty returns false when no original data', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionDirty('basics')).toBe(false);
+        });
+        it('isSectionDirty returns false when section has no changes', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            expect(store.isSectionDirty('basics')).toBe(false);
+        });
+        it('isSectionDirty returns true when section field changed', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            expect(store.isSectionDirty('basics')).toBe(true);
+        });
+        it('isSectionDirty returns false for unchanged section', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            expect(store.isSectionDirty('details')).toBe(false);
+        });
+        it('isSectionDirty returns false for unknown section', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionDirty('nonexistent')).toBe(false);
+        });
+    });
+    describe('reset', () => {
+        it('restores data to initial values', () => {
+            const store = makeStore();
+            store.data = validData;
+            store.reset();
+            expect(store.data).toEqual(defaultData);
+        });
+        it('clears all state', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.isLoading = true;
+            store.isSaving = true;
+            store.isSaved = true;
+            store.showErrors = true;
+            store.errors = { name: 'err' };
+            store.reset();
+            expect(store.originalData).toBeNull();
+            expect(store.errors).toEqual({});
+            expect(store.isLoading).toBe(false);
+            expect(store.isSaving).toBe(false);
+            expect(store.isSaved).toBe(false);
+            expect(store.showErrors).toBe(false);
+        });
+    });
+    describe('resetToOriginal', () => {
+        it('restores data to original values', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            store.resetToOriginal();
+            expect(store.data).toEqual(validData);
+        });
+        it('clears errors and showErrors', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.showErrors = true;
+            store.errors = { name: 'err' };
+            store.resetToOriginal();
+            expect(store.errors).toEqual({});
+            expect(store.showErrors).toBe(false);
+        });
+        it('does nothing when no original data', () => {
+            const store = makeStore();
+            store.data = validData;
+            store.resetToOriginal();
+            expect(store.data).toEqual(validData);
+        });
+    });
+    describe('save', () => {
+        it('runs save function on valid data', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            const saveFn = vi.fn().mockResolvedValue({ id: 1 });
+            const result = await store.save(saveFn);
+            expect(saveFn).toHaveBeenCalled();
+            expect(result).toEqual({ id: 1 });
+            expect(store.isSaved).toBe(true);
+            expect(store.isSaving).toBe(false);
+        });
+        it('returns undefined when validation fails', async () => {
+            const store = makeStore();
+            const saveFn = vi.fn();
+            const result = await store.save(saveFn);
+            expect(result).toBeUndefined();
+            expect(saveFn).not.toHaveBeenCalled();
+        });
+        it('updates originalData after successful save', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            const updatedData = { ...validData, name: 'Updated' };
+            store.data = updatedData;
+            await store.save(async () => 'ok');
+            expect(store.originalData).toEqual(updatedData);
+        });
+        it('resets isSaving even on error', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            const saveFn = vi.fn().mockRejectedValue(new Error('fail'));
+            await expect(store.save(saveFn)).rejects.toThrow('fail');
+            expect(store.isSaving).toBe(false);
+        });
+    });
+    describe('canSave', () => {
+        it('is true when dirty, valid, and not saving', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            expect(store.canSave).toBe(true);
+        });
+        it('is false when not dirty', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            expect(store.canSave).toBe(false);
+        });
+        it('is false when not valid', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: '' };
+            expect(store.canSave).toBe(false);
+        });
+        it('is false when saving', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            store.isSaving = true;
+            expect(store.canSave).toBe(false);
+        });
+    });
+});

package/dist/messages.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Centralized validation messages for Zod schemas
+ */
+export declare const VALIDATION_MESSAGES: {
+    readonly REQUIRED: "This field is required";
+    readonly INVALID_EMAIL: "Please enter a valid email address";
+    readonly INVALID_PHONE: "Please enter a valid phone number";
+    readonly INVALID_URL: "Please enter a valid URL";
+    readonly INVALID_UUID: "Invalid identifier format";
+    readonly INVALID_DATE: "Please enter a valid date";
+    readonly DATE_MUST_BE_FUTURE: "Date must be in the future";
+    readonly MUST_BE_INTEGER: "Must be a whole number";
+    readonly MUST_BE_POSITIVE: "Must be a positive number";
+    readonly MUST_BE_NON_NEGATIVE: "Must be zero or greater";
+    readonly PRICE_TOO_HIGH: "Price is too high (max $10,000)";
+    readonly PERCENTAGE_TOO_HIGH: "Percentage must be 100 or less";
+    readonly PASSWORD_TOO_SHORT: (min: number) => string;
+    readonly PASSWORD_TOO_LONG: (max: number) => string;
+    readonly INVALID_FORMAT: "Invalid format";
+    readonly INVALID_TIMEZONE: "Please enter a valid timezone";
+    readonly INVALID_STATE: "Please enter a valid 2-letter state code";
+    readonly INVALID_ZIP: "Please enter a valid zip code";
+    readonly tooLong: (field: string, max: number) => string;
+    readonly tooShort: (field: string, min: number) => string;
+    readonly tooSmall: (field: string, min: number) => string;
+    readonly tooLarge: (field: string, max: number) => string;
+    readonly fileTooLarge: (maxMB: number) => string;
+    readonly invalidFileType: (types: readonly string[]) => string;
+    readonly DISCOUNT_REQUIRED: "A discount amount is required";
+    readonly INVALID_DISCOUNT_TYPE: "Invalid discount type";
+    readonly END_DATE_AFTER_START: "End date must be after start date";
+    readonly MIN_EXCEEDS_MAX: "Minimum cannot exceed maximum";
+    readonly ACCEPT_TERMS_REQUIRED: "You must accept the terms and conditions";
+    readonly passwordTooShort: (min: number) => string;
+    readonly passwordTooLong: (max: number) => string;
+    readonly PASSWORD_NEEDS_UPPERCASE: "Password must contain at least one uppercase letter";
+    readonly PASSWORD_NEEDS_LOWERCASE: "Password must contain at least one lowercase letter";
+    readonly PASSWORD_NEEDS_NUMBER: "Password must contain at least one number";
+    readonly PASSWORD_NEEDS_SPECIAL: "Password must contain at least one special character";
+    readonly PASSWORDS_MUST_MATCH: "Passwords do not match";
+    readonly PASSWORD_SAME_AS_CURRENT: "New password must be different from current password";
+};
+//# sourceMappingURL=messages.d.ts.map

package/dist/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/lib/messages.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;uCA4BJ,MAAM;sCACP,MAAM;;;;;8BASd,MAAM,OAAO,MAAM;+BAClB,MAAM,OAAO,MAAM;+BACnB,MAAM,OAAO,MAAM;+BACnB,MAAM,OAAO,MAAM;mCAGf,MAAM;sCACH,SAAS,MAAM,EAAE;;;;;;qCAclB,MAAM;oCACP,MAAM;;;;;;;CAOrB,CAAC"}

package/dist/messages.js

@@ -0,0 +1,57 @@
+/**
+ * Centralized validation messages for Zod schemas
+ */
+export const VALIDATION_MESSAGES = {
+    // Required field
+    REQUIRED: 'This field is required',
+    // Email validation
+    INVALID_EMAIL: 'Please enter a valid email address',
+    // Phone validation
+    INVALID_PHONE: 'Please enter a valid phone number',
+    // URL validation
+    INVALID_URL: 'Please enter a valid URL',
+    // UUID validation
+    INVALID_UUID: 'Invalid identifier format',
+    // Date validation
+    INVALID_DATE: 'Please enter a valid date',
+    DATE_MUST_BE_FUTURE: 'Date must be in the future',
+    // Number validation
+    MUST_BE_INTEGER: 'Must be a whole number',
+    MUST_BE_POSITIVE: 'Must be a positive number',
+    MUST_BE_NON_NEGATIVE: 'Must be zero or greater',
+    PRICE_TOO_HIGH: 'Price is too high (max $10,000)',
+    PERCENTAGE_TOO_HIGH: 'Percentage must be 100 or less',
+    // Password validation
+    PASSWORD_TOO_SHORT: (min) => `Password must be at least ${min} characters`,
+    PASSWORD_TOO_LONG: (max) => `Password must be ${max} characters or less`,
+    // Format validation
+    INVALID_FORMAT: 'Invalid format',
+    INVALID_TIMEZONE: 'Please enter a valid timezone',
+    INVALID_STATE: 'Please enter a valid 2-letter state code',
+    INVALID_ZIP: 'Please enter a valid zip code',
+    // Dynamic length messages
+    tooLong: (field, max) => `${field} must be ${max} characters or less`,
+    tooShort: (field, min) => `${field} must be at least ${min} characters`,
+    tooSmall: (field, min) => `${field} must be at least ${min}`,
+    tooLarge: (field, max) => `${field} must be no more than ${max}`,
+    // File validation
+    fileTooLarge: (maxMB) => `File must be ${maxMB}MB or less`,
+    invalidFileType: (types) => `File must be one of: ${types.join(', ')}`,
+    // Promo code validation
+    DISCOUNT_REQUIRED: 'A discount amount is required',
+    INVALID_DISCOUNT_TYPE: 'Invalid discount type',
+    // Date range validation
+    END_DATE_AFTER_START: 'End date must be after start date',
+    MIN_EXCEEDS_MAX: 'Minimum cannot exceed maximum',
+    // Terms validation
+    ACCEPT_TERMS_REQUIRED: 'You must accept the terms and conditions',
+    // Password validation (function variants)
+    passwordTooShort: (min) => `Password must be at least ${min} characters`,
+    passwordTooLong: (max) => `Password must be ${max} characters or less`,
+    PASSWORD_NEEDS_UPPERCASE: 'Password must contain at least one uppercase letter',
+    PASSWORD_NEEDS_LOWERCASE: 'Password must contain at least one lowercase letter',
+    PASSWORD_NEEDS_NUMBER: 'Password must contain at least one number',
+    PASSWORD_NEEDS_SPECIAL: 'Password must contain at least one special character',
+    PASSWORDS_MUST_MATCH: 'Passwords do not match',
+    PASSWORD_SAME_AS_CURRENT: 'New password must be different from current password',
+};

package/dist/patterns/chat/ChatActivityNotice.spec.d.ts

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

package/dist/patterns/chat/ChatActivityNotice.spec.d.ts.map

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

package/dist/patterns/chat/ChatActivityNotice.spec.js

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatActivityNotice from './ChatActivityNotice.svelte';
+
+describe('ChatActivityNotice', () => {
+  test('renders without crashing', () => {
+    const { container } = render(ChatActivityNotice);
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('shows actor name', () => {
+    render(ChatActivityNotice, { props: { actorName: 'John' } });
+    expect(screen.getByText('John')).toBeInTheDocument();
+  });
+
+  test('shows timestamp', () => {
+    render(ChatActivityNotice, { props: { timestamp: '2:00 PM' } });
+    expect(screen.getByText('2:00 PM')).toBeInTheDocument();
+  });
+
+  test('shows dot separator when both actorName and timestamp', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { actorName: 'John', timestamp: '2:00 PM' }
+    });
+    expect(container.textContent).toContain('·');
+  });
+
+  test('no separator when only actorName', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { actorName: 'John' }
+    });
+    expect(container.textContent).not.toContain('·');
+  });
+
+  test('no separator when only timestamp', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { timestamp: '2:00 PM' }
+    });
+    expect(container.textContent).not.toContain('·');
+  });
+
+  test('hides metadata line when neither actorName nor timestamp', () => {
+    const { container } = render(ChatActivityNotice);
+    // No actor or timestamp text should appear
+    const metaText = container.textContent.trim();
+    expect(metaText).toBe('');
+  });
+
+  test('renders decorative lines', () => {
+    const { container } = render(ChatActivityNotice, { props: { actorName: 'Test' } });
+    const lines = container.querySelectorAll('.bg-gray-200, [class*="h-px"]');
+    expect(lines.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatActivityNotice, { props: { className: 'my-notice' } });
+    expect(container.querySelector('.my-notice')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatBubble.spec.d.ts

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

package/dist/patterns/chat/ChatBubble.spec.d.ts.map

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

package/dist/patterns/chat/ChatBubble.spec.js

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import ChatBubble from './ChatBubble.svelte';
+
+describe('ChatBubble', () => {
+  test('renders with default inbound direction', () => {
+    const { container } = render(ChatBubble);
+    const bubble = container.querySelector('.rounded-bl-sm');
+    expect(bubble).toBeInTheDocument();
+  });
+
+  test('renders outbound direction', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const bubble = container.querySelector('.rounded-br-sm');
+    expect(bubble).toBeInTheDocument();
+  });
+
+  test('outbound uses flex-row-reverse', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const wrapper = container.querySelector('.flex-row-reverse');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('outbound uses items-end', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const el = container.querySelector('.items-end');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('inbound uses items-start', () => {
+    const { container } = render(ChatBubble);
+    const el = container.querySelector('.items-start');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('shows sender name for inbound', () => {
+    render(ChatBubble, { props: { direction: 'inbound', senderName: 'Alice' } });
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  test('hides sender name for outbound', () => {
+    render(ChatBubble, { props: { direction: 'outbound', senderName: 'Alice' } });
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  test('shows timestamp when not failed', () => {
+    render(ChatBubble, { props: { timestamp: '2:30 PM' } });
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+  });
+
+  test('shows failed indicator', () => {
+    const { container } = render(ChatBubble, { props: { failed: true } });
+    const redIndicator = container.querySelector('.text-red-500, .bg-red-500, [class*="red"]');
+    expect(redIndicator).toBeInTheDocument();
+  });
+
+  test('shows error message when failed with errorMessage', () => {
+    render(ChatBubble, { props: { failed: true, errorMessage: 'Send failed' } });
+    expect(screen.getByText('Send failed')).toBeInTheDocument();
+  });
+
+  test('shows timestamp even when failed (below error)', () => {
+    render(ChatBubble, { props: { failed: true, timestamp: '2:30 PM' } });
+    // timestamp still renders; error indicator shown alongside
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+  });
+
+  test('shows retry button when failed with onretry', async () => {
+    const onretry = vi.fn();
+    const { container } = render(ChatBubble, {
+      props: { failed: true, errorMessage: 'Error', onretry }
+    });
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+    await userEvent.click(button);
+    expect(onretry).toHaveBeenCalled();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatBubble, { props: { className: 'my-bubble' } });
+    const el = container.querySelector('.my-bubble');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('no sender name when not provided for inbound', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'inbound' } });
+    // Should not crash and should render
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatContainer.spec.d.ts

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

package/dist/patterns/chat/ChatContainer.spec.d.ts.map

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