@classic-homes/theme-svelte 0.1.0

package/dist/lib/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Classic Theme Svelte Components
+ *
+ * A collection of accessible, composable Svelte 5 components built on Bits UI
+ * and styled with Tailwind CSS using the Classic theme design tokens.
+ *
+ * All components use Svelte 5 runes syntax ($props, $state, $derived, etc.)
+ */
+export { default as Button } from './components/Button.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Separator } from './components/Separator.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as CardHeader } from './components/CardHeader.svelte';
+export { default as CardTitle } from './components/CardTitle.svelte';
+export { default as CardDescription } from './components/CardDescription.svelte';
+export { default as CardContent } from './components/CardContent.svelte';
+export { default as CardFooter } from './components/CardFooter.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as AlertTitle } from './components/AlertTitle.svelte';
+export { default as AlertDescription } from './components/AlertDescription.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as ToastContainer } from './components/ToastContainer.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as AlertDialog } from './components/AlertDialog.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as FormField } from './components/FormField.svelte';
+export { default as FileUpload } from './components/FileUpload.svelte';
+export { default as DataTable } from './components/DataTable.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as TabPanel } from './components/TabPanel.svelte';
+export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, } from './types/components.js';
+export { default as LogoMain } from './components/LogoMain.svelte';
+export { default as LoadingLogo } from './components/LoadingLogo.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as AvatarImage } from './components/AvatarImage.svelte';
+export { default as AvatarFallback } from './components/AvatarFallback.svelte';
+export { default as Section } from './components/Section.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as AppShell } from './components/layout/AppShell.svelte';
+export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';
+export { default as PublicLayout } from './components/layout/PublicLayout.svelte';
+export { default as FormPageLayout } from './components/layout/FormPageLayout.svelte';
+export { default as Sidebar } from './components/layout/Sidebar.svelte';
+export { default as Header } from './components/layout/Header.svelte';
+export { default as Footer } from './components/layout/Footer.svelte';
+export { default as QuickLinks } from './components/layout/QuickLinks.svelte';
+export type { NavItem, NavSection, User, BackLink, QuickLink, QuickLinksProps, DashboardLayoutProps, PublicLayoutProps, FormPageLayoutProps, SidebarProps, HeaderProps, FooterProps, AppShellProps, } from './types/layout.js';
+export { toastStore, type Toast as ToastType, type ToastInput } from './stores/toast.svelte.js';
+export { sidebarStore } from './stores/sidebar.svelte.js';
+export { themeStore, type ThemeMode } from './stores/theme.svelte.js';
+export { cn } from './utils.js';
+export { tv, type VariantProps } from 'tailwind-variants';
+export { validateNonEmptyArray, validateRequired, validateOneOf, validateRange, validateProps, createValidator, type ValidationResult, } from './validation.js';
+export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clearPerformanceEntries, createPerfMonitor, type PerformanceMark, } from './performance.js';
+export { useForm, useAsync, runAsync, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, type UseAsyncOptions, type UseAsyncReturn, } from './composables/index.js';
+export * from './schemas/index.js';

package/dist/lib/index.js

@@ -0,0 +1,83 @@
+/**
+ * Classic Theme Svelte Components
+ *
+ * A collection of accessible, composable Svelte 5 components built on Bits UI
+ * and styled with Tailwind CSS using the Classic theme design tokens.
+ *
+ * All components use Svelte 5 runes syntax ($props, $state, $derived, etc.)
+ */
+// Core UI Components
+export { default as Button } from './components/Button.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Separator } from './components/Separator.svelte';
+// Card Components
+export { default as Card } from './components/Card.svelte';
+export { default as CardHeader } from './components/CardHeader.svelte';
+export { default as CardTitle } from './components/CardTitle.svelte';
+export { default as CardDescription } from './components/CardDescription.svelte';
+export { default as CardContent } from './components/CardContent.svelte';
+export { default as CardFooter } from './components/CardFooter.svelte';
+// Alert Components
+export { default as Alert } from './components/Alert.svelte';
+export { default as AlertTitle } from './components/AlertTitle.svelte';
+export { default as AlertDescription } from './components/AlertDescription.svelte';
+// Badge
+export { default as Badge } from './components/Badge.svelte';
+// Feedback Components
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as ToastContainer } from './components/ToastContainer.svelte';
+// Overlay Components (using Bits UI)
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as AlertDialog } from './components/AlertDialog.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+// Form Components (using Bits UI)
+export { default as Select } from './components/Select.svelte';
+export { default as FormField } from './components/FormField.svelte';
+export { default as FileUpload } from './components/FileUpload.svelte';
+// Data Display
+export { default as DataTable } from './components/DataTable.svelte';
+// Tabs
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as TabPanel } from './components/TabPanel.svelte';
+// Branding
+export { default as LogoMain } from './components/LogoMain.svelte';
+export { default as LoadingLogo } from './components/LoadingLogo.svelte';
+// Avatar Components
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as AvatarImage } from './components/AvatarImage.svelte';
+export { default as AvatarFallback } from './components/AvatarFallback.svelte';
+// Page Components
+export { default as Section } from './components/Section.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+// Layout Components
+export { default as AppShell } from './components/layout/AppShell.svelte';
+export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';
+export { default as PublicLayout } from './components/layout/PublicLayout.svelte';
+export { default as FormPageLayout } from './components/layout/FormPageLayout.svelte';
+export { default as Sidebar } from './components/layout/Sidebar.svelte';
+export { default as Header } from './components/layout/Header.svelte';
+export { default as Footer } from './components/layout/Footer.svelte';
+export { default as QuickLinks } from './components/layout/QuickLinks.svelte';
+// Stores
+export { toastStore } from './stores/toast.svelte.js';
+export { sidebarStore } from './stores/sidebar.svelte.js';
+export { themeStore } from './stores/theme.svelte.js';
+// Utilities
+export { cn } from './utils.js';
+// Re-export tailwind-variants types for consumer convenience
+export { tv } from 'tailwind-variants';
+// Validation utilities (dev-only, tree-shaken in production)
+export { validateNonEmptyArray, validateRequired, validateOneOf, validateRange, validateProps, createValidator, } from './validation.js';
+// Performance monitoring utilities (dev-only, tree-shaken in production)
+export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clearPerformanceEntries, createPerfMonitor, } from './performance.js';
+// Composables - reusable Svelte 5 state management patterns
+export { useForm, useAsync, runAsync, } from './composables/index.js';
+// Validation schemas - Zod schemas for forms and data validation
+export * from './schemas/index.js';

package/dist/lib/performance.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Performance monitoring utilities for development
+ *
+ * All functions are no-ops in production builds for zero runtime cost.
+ * These utilities help identify slow operations during development.
+ *
+ * @example
+ * ```ts
+ * import { measure, measureAsync } from '@classic-homes/theme-svelte';
+ *
+ * // Sync measurement
+ * const result = measure('sort-data', () => {
+ *   return data.sort((a, b) => a.name.localeCompare(b.name));
+ * });
+ *
+ * // Async measurement
+ * const data = await measureAsync('fetch-users', async () => {
+ *   return await fetch('/api/users').then(r => r.json());
+ * });
+ * ```
+ */
+export interface PerformanceMark {
+    name: string;
+    startTime: number;
+    duration?: number;
+}
+/**
+ * Start a performance measurement
+ * @param name - Unique name for this measurement
+ */
+export declare function perfStart(name: string): void;
+/**
+ * End a performance measurement and log results
+ * @param name - Name of the measurement to end
+ * @returns Duration in milliseconds, or undefined if not in dev mode
+ */
+export declare function perfEnd(name: string): number | undefined;
+/**
+ * Measure a synchronous function's execution time
+ * @param name - Name for the measurement
+ * @param fn - Function to measure
+ * @returns The function's return value
+ */
+export declare function measure<T>(name: string, fn: () => T): T;
+/**
+ * Measure an async function's execution time
+ * @param name - Name for the measurement
+ * @param fn - Async function to measure
+ * @returns Promise resolving to the function's return value
+ */
+export declare function measureAsync<T>(name: string, fn: () => Promise<T>): Promise<T>;
+/**
+ * Get all recorded performance measurements
+ * Useful for testing or building custom performance dashboards
+ * @returns Array of performance entries
+ */
+export declare function getPerformanceEntries(): PerformanceEntryList;
+/**
+ * Clear all recorded performance measurements
+ */
+export declare function clearPerformanceEntries(): void;
+/**
+ * Create a performance monitor for a specific component or module
+ * @param prefix - Prefix for all measurements (e.g., 'DataTable')
+ * @returns Object with prefixed measurement functions
+ *
+ * @example
+ * ```ts
+ * const perf = createPerfMonitor('DataTable');
+ * perf.measure('sort', () => sortData());
+ * await perf.measureAsync('fetch', () => fetchData());
+ * ```
+ */
+export declare function createPerfMonitor(prefix: string): {
+    start: (name: string) => void;
+    end: (name: string) => number | undefined;
+    measure: <T>(name: string, fn: () => T) => T;
+    measureAsync: <T>(name: string, fn: () => Promise<T>) => Promise<T>;
+};

package/dist/lib/performance.js

@@ -0,0 +1,170 @@
+/**
+ * Performance monitoring utilities for development
+ *
+ * All functions are no-ops in production builds for zero runtime cost.
+ * These utilities help identify slow operations during development.
+ *
+ * @example
+ * ```ts
+ * import { measure, measureAsync } from '@classic-homes/theme-svelte';
+ *
+ * // Sync measurement
+ * const result = measure('sort-data', () => {
+ *   return data.sort((a, b) => a.name.localeCompare(b.name));
+ * });
+ *
+ * // Async measurement
+ * const data = await measureAsync('fetch-users', async () => {
+ *   return await fetch('/api/users').then(r => r.json());
+ * });
+ * ```
+ */
+// Detect development mode
+const getIsDev = () => {
+    try {
+        // @ts-expect-error - import.meta.env may not exist
+        if (typeof import.meta !== 'undefined' && import.meta.env?.DEV !== undefined) {
+            // @ts-expect-error - accessing env.DEV
+            return import.meta.env.DEV === true;
+        }
+    }
+    catch {
+        // Ignore
+    }
+    try {
+        // @ts-expect-error - process may not exist
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV !== undefined) {
+            // @ts-expect-error - accessing process.env
+            return process.env.NODE_ENV !== 'production';
+        }
+    }
+    catch {
+        // Ignore
+    }
+    return false;
+};
+const isDev = getIsDev();
+const marks = new Map();
+/** Threshold in ms for logging slow operations (1 frame at 60fps) */
+const SLOW_THRESHOLD = 16;
+/**
+ * Start a performance measurement
+ * @param name - Unique name for this measurement
+ */
+export function perfStart(name) {
+    if (!isDev)
+        return;
+    marks.set(name, {
+        name,
+        startTime: performance.now(),
+    });
+    if (typeof performance !== 'undefined' && performance.mark) {
+        performance.mark(`${name}-start`);
+    }
+}
+/**
+ * End a performance measurement and log results
+ * @param name - Name of the measurement to end
+ * @returns Duration in milliseconds, or undefined if not in dev mode
+ */
+export function perfEnd(name) {
+    if (!isDev)
+        return undefined;
+    const mark = marks.get(name);
+    if (!mark) {
+        console.warn(`[perf] No start mark found for "${name}"`);
+        return undefined;
+    }
+    const duration = performance.now() - mark.startTime;
+    mark.duration = duration;
+    if (typeof performance !== 'undefined' && performance.mark && performance.measure) {
+        performance.mark(`${name}-end`);
+        performance.measure(name, `${name}-start`, `${name}-end`);
+    }
+    // Log slow operations
+    if (duration > SLOW_THRESHOLD) {
+        console.warn(`[perf] Slow operation "${name}": ${duration.toFixed(2)}ms`);
+    }
+    else {
+        console.debug(`[perf] "${name}": ${duration.toFixed(2)}ms`);
+    }
+    marks.delete(name);
+    return duration;
+}
+/**
+ * Measure a synchronous function's execution time
+ * @param name - Name for the measurement
+ * @param fn - Function to measure
+ * @returns The function's return value
+ */
+export function measure(name, fn) {
+    if (!isDev)
+        return fn();
+    perfStart(name);
+    try {
+        return fn();
+    }
+    finally {
+        perfEnd(name);
+    }
+}
+/**
+ * Measure an async function's execution time
+ * @param name - Name for the measurement
+ * @param fn - Async function to measure
+ * @returns Promise resolving to the function's return value
+ */
+export async function measureAsync(name, fn) {
+    if (!isDev)
+        return fn();
+    perfStart(name);
+    try {
+        return await fn();
+    }
+    finally {
+        perfEnd(name);
+    }
+}
+/**
+ * Get all recorded performance measurements
+ * Useful for testing or building custom performance dashboards
+ * @returns Array of performance entries
+ */
+export function getPerformanceEntries() {
+    if (typeof performance === 'undefined' || !performance.getEntriesByType) {
+        return [];
+    }
+    return performance.getEntriesByType('measure');
+}
+/**
+ * Clear all recorded performance measurements
+ */
+export function clearPerformanceEntries() {
+    if (typeof performance === 'undefined')
+        return;
+    if (performance.clearMarks)
+        performance.clearMarks();
+    if (performance.clearMeasures)
+        performance.clearMeasures();
+    marks.clear();
+}
+/**
+ * Create a performance monitor for a specific component or module
+ * @param prefix - Prefix for all measurements (e.g., 'DataTable')
+ * @returns Object with prefixed measurement functions
+ *
+ * @example
+ * ```ts
+ * const perf = createPerfMonitor('DataTable');
+ * perf.measure('sort', () => sortData());
+ * await perf.measureAsync('fetch', () => fetchData());
+ * ```
+ */
+export function createPerfMonitor(prefix) {
+    return {
+        start: (name) => perfStart(`${prefix}:${name}`),
+        end: (name) => perfEnd(`${prefix}:${name}`),
+        measure: (name, fn) => measure(`${prefix}:${name}`, fn),
+        measureAsync: (name, fn) => measureAsync(`${prefix}:${name}`, fn),
+    };
+}