@classic-homes/theme-svelte 0.1.0

package/dist/lib/stores/theme.svelte.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Theme Store - Svelte 5 runes-based theme management
+ *
+ * Features:
+ * - Light/dark/system mode support
+ * - System preference detection via matchMedia
+ * - Persistence via localStorage
+ * - SSR-safe (checks for window/document)
+ * - Reactive theme resolution
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { themeStore } from '@classic-homes/theme-svelte';
+ * </script>
+ *
+ * <button onclick={() => themeStore.toggle()}>
+ *   {themeStore.resolvedTheme === 'dark' ? 'Light' : 'Dark'} Mode
+ * </button>
+ *
+ * <select value={themeStore.mode} onchange={(e) => themeStore.setMode(e.target.value)}>
+ *   <option value="light">Light</option>
+ *   <option value="dark">Dark</option>
+ *   <option value="system">System</option>
+ * </select>
+ * ```
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+declare class ThemeStore {
+    /** Current theme mode setting (light, dark, or system) */
+    mode: ThemeMode;
+    /** Resolved theme (accounts for system preference when mode is 'system') */
+    resolvedTheme: "dark" | "light";
+    /** Whether we're on the client (not SSR) */
+    private isClient;
+    /** Media query for system dark mode preference */
+    private mediaQuery;
+    constructor();
+    private init;
+    private handleSystemChange;
+    private updateResolvedTheme;
+    private applyTheme;
+    /**
+     * Set theme mode and persist to localStorage
+     * @param mode - The theme mode to set ('light', 'dark', or 'system')
+     */
+    setMode(mode: ThemeMode): void;
+    /**
+     * Toggle between light and dark modes
+     * If currently using system mode, switches to the opposite of system preference
+     * NOTE: No-op when DARK_MODE_ENABLED is false
+     */
+    toggle(): void;
+    /**
+     * Reset to follow system preference
+     */
+    useSystem(): void;
+    /**
+     * Check if currently following system preference
+     */
+    get isSystem(): boolean;
+    /**
+     * Check if current resolved theme is dark
+     */
+    get isDark(): boolean;
+    /**
+     * Check if current resolved theme is light
+     */
+    get isLight(): boolean;
+}
+export declare const themeStore: ThemeStore;
+export {};

package/dist/lib/stores/theme.svelte.js

@@ -0,0 +1,150 @@
+/**
+ * Theme Store - Svelte 5 runes-based theme management
+ *
+ * Features:
+ * - Light/dark/system mode support
+ * - System preference detection via matchMedia
+ * - Persistence via localStorage
+ * - SSR-safe (checks for window/document)
+ * - Reactive theme resolution
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { themeStore } from '@classic-homes/theme-svelte';
+ * </script>
+ *
+ * <button onclick={() => themeStore.toggle()}>
+ *   {themeStore.resolvedTheme === 'dark' ? 'Light' : 'Dark'} Mode
+ * </button>
+ *
+ * <select value={themeStore.mode} onchange={(e) => themeStore.setMode(e.target.value)}>
+ *   <option value="light">Light</option>
+ *   <option value="dark">Dark</option>
+ *   <option value="system">System</option>
+ * </select>
+ * ```
+ */
+/**
+ * TEMPORARY: Dark mode is disabled while we focus on light mode styling.
+ * Set to true to re-enable dark mode functionality.
+ */
+const DARK_MODE_ENABLED = false;
+const STORAGE_KEY = 'classic-theme-mode';
+class ThemeStore {
+    constructor() {
+        /** Current theme mode setting (light, dark, or system) */
+        this.mode = $state('system');
+        /** Resolved theme (accounts for system preference when mode is 'system') */
+        this.resolvedTheme = $state('light');
+        /** Whether we're on the client (not SSR) */
+        this.isClient = typeof window !== 'undefined';
+        /** Media query for system dark mode preference */
+        this.mediaQuery = null;
+        if (this.isClient) {
+            this.init();
+        }
+    }
+    init() {
+        // Load persisted preference
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored && ['light', 'dark', 'system'].includes(stored)) {
+                this.mode = stored;
+            }
+        }
+        catch {
+            // localStorage may not be available (private browsing, etc.)
+        }
+        // Set up system preference listener
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.mediaQuery.addEventListener('change', this.handleSystemChange.bind(this));
+        // Initial resolution
+        this.updateResolvedTheme();
+    }
+    handleSystemChange() {
+        if (this.mode === 'system') {
+            this.updateResolvedTheme();
+        }
+    }
+    updateResolvedTheme() {
+        if (!this.isClient)
+            return;
+        let resolved;
+        // TEMPORARY: Force light mode while dark mode is disabled
+        if (!DARK_MODE_ENABLED) {
+            resolved = 'light';
+        }
+        else if (this.mode === 'system') {
+            resolved = this.mediaQuery?.matches ? 'dark' : 'light';
+        }
+        else {
+            resolved = this.mode;
+        }
+        this.resolvedTheme = resolved;
+        this.applyTheme(resolved);
+    }
+    applyTheme(theme) {
+        if (!this.isClient)
+            return;
+        const root = document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        // Update meta theme-color for mobile browsers
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute('content', theme === 'dark' ? '#292424' : '#ffffff');
+        }
+    }
+    /**
+     * Set theme mode and persist to localStorage
+     * @param mode - The theme mode to set ('light', 'dark', or 'system')
+     */
+    setMode(mode) {
+        this.mode = mode;
+        if (this.isClient) {
+            try {
+                localStorage.setItem(STORAGE_KEY, mode);
+            }
+            catch {
+                // localStorage may not be available
+            }
+        }
+        this.updateResolvedTheme();
+    }
+    /**
+     * Toggle between light and dark modes
+     * If currently using system mode, switches to the opposite of system preference
+     * NOTE: No-op when DARK_MODE_ENABLED is false
+     */
+    toggle() {
+        if (!DARK_MODE_ENABLED)
+            return;
+        this.setMode(this.resolvedTheme === 'light' ? 'dark' : 'light');
+    }
+    /**
+     * Reset to follow system preference
+     */
+    useSystem() {
+        this.setMode('system');
+    }
+    /**
+     * Check if currently following system preference
+     */
+    get isSystem() {
+        return this.mode === 'system';
+    }
+    /**
+     * Check if current resolved theme is dark
+     */
+    get isDark() {
+        return this.resolvedTheme === 'dark';
+    }
+    /**
+     * Check if current resolved theme is light
+     */
+    get isLight() {
+        return this.resolvedTheme === 'light';
+    }
+}
+export const themeStore = new ThemeStore();

package/dist/lib/stores/toast.svelte.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Toast Store - Svelte 5 runes-based state management for toast notifications
+ *
+ * Features:
+ * - Auto-dismiss with configurable duration
+ * - Manual dismiss support
+ * - Proper timeout cleanup to prevent memory leaks
+ * - Convenience methods for common toast types
+ */
+export interface Toast {
+    id: string;
+    message: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    title?: string;
+    duration?: number;
+}
+export type ToastInput = Omit<Toast, 'id'>;
+declare class ToastStore {
+    toasts: Toast[];
+    /** Map of toast IDs to their timeout handles for cleanup */
+    private timeouts;
+    /**
+     * Add a new toast notification
+     * @param toast - Toast configuration without id
+     * @returns The generated toast id
+     */
+    add(toast: ToastInput): string;
+    /**
+     * Remove a toast by id
+     * Also clears any pending auto-dismiss timeout
+     */
+    remove(id: string): void;
+    /**
+     * Remove all toasts and clear all pending timeouts
+     */
+    clear(): void;
+    /**
+     * Update an existing toast
+     * @param id - Toast ID to update
+     * @param updates - Partial toast properties to update
+     */
+    update(id: string, updates: Partial<Omit<Toast, 'id'>>): void;
+    /**
+     * Convenience method for success toast
+     */
+    success(message: string, options?: Partial<Omit<ToastInput, 'message' | 'type'>>): string;
+    /**
+     * Convenience method for error toast
+     * Note: Errors persist by default (duration: 0) since they typically require acknowledgment
+     */
+    error(message: string, options?: Partial<Omit<ToastInput, 'message' | 'type'>>): string;
+    /**
+     * Convenience method for warning toast
+     */
+    warning(message: string, options?: Partial<Omit<ToastInput, 'message' | 'type'>>): string;
+    /**
+     * Convenience method for info toast
+     */
+    info(message: string, options?: Partial<Omit<ToastInput, 'message' | 'type'>>): string;
+}
+export declare const toastStore: ToastStore;
+export {};

package/dist/lib/stores/toast.svelte.js

@@ -0,0 +1,93 @@
+/**
+ * Toast Store - Svelte 5 runes-based state management for toast notifications
+ *
+ * Features:
+ * - Auto-dismiss with configurable duration
+ * - Manual dismiss support
+ * - Proper timeout cleanup to prevent memory leaks
+ * - Convenience methods for common toast types
+ */
+class ToastStore {
+    constructor() {
+        this.toasts = $state([]);
+        /** Map of toast IDs to their timeout handles for cleanup */
+        this.timeouts = new Map();
+    }
+    /**
+     * Add a new toast notification
+     * @param toast - Toast configuration without id
+     * @returns The generated toast id
+     */
+    add(toast) {
+        const id = crypto.randomUUID();
+        const newToast = { ...toast, id };
+        this.toasts = [...this.toasts, newToast];
+        // Auto-dismiss unless duration is explicitly 0 (persistent)
+        if (toast.duration !== 0) {
+            const duration = toast.duration ?? 5000;
+            const timeoutId = setTimeout(() => {
+                this.remove(id);
+            }, duration);
+            this.timeouts.set(id, timeoutId);
+        }
+        return id;
+    }
+    /**
+     * Remove a toast by id
+     * Also clears any pending auto-dismiss timeout
+     */
+    remove(id) {
+        // Clear timeout if exists to prevent memory leak
+        const timeoutId = this.timeouts.get(id);
+        if (timeoutId !== undefined) {
+            clearTimeout(timeoutId);
+            this.timeouts.delete(id);
+        }
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    /**
+     * Remove all toasts and clear all pending timeouts
+     */
+    clear() {
+        // Clear all pending timeouts
+        for (const timeoutId of this.timeouts.values()) {
+            clearTimeout(timeoutId);
+        }
+        this.timeouts.clear();
+        this.toasts = [];
+    }
+    /**
+     * Update an existing toast
+     * @param id - Toast ID to update
+     * @param updates - Partial toast properties to update
+     */
+    update(id, updates) {
+        this.toasts = this.toasts.map((t) => (t.id === id ? { ...t, ...updates } : t));
+    }
+    /**
+     * Convenience method for success toast
+     */
+    success(message, options) {
+        return this.add({ message, type: 'success', ...options });
+    }
+    /**
+     * Convenience method for error toast
+     * Note: Errors persist by default (duration: 0) since they typically require acknowledgment
+     */
+    error(message, options) {
+        return this.add({ message, type: 'error', duration: 0, ...options });
+    }
+    /**
+     * Convenience method for warning toast
+     */
+    warning(message, options) {
+        return this.add({ message, type: 'warning', ...options });
+    }
+    /**
+     * Convenience method for info toast
+     */
+    info(message, options) {
+        return this.add({ message, type: 'info', ...options });
+    }
+}
+export const toastStore = new ToastStore();

package/dist/lib/types/components.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Component Types for Classic Theme
+ *
+ * These types are exported from components but need to be
+ * re-exported from a TypeScript file for proper type inference.
+ */
+/**
+ * Dropdown Menu Types
+ */
+import type { Snippet } from 'svelte';
+export interface DropdownMenuItem {
+    type?: 'item' | 'checkbox' | 'radio' | 'separator' | 'label';
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    onSelect?: () => void;
+    destructive?: boolean;
+    icon?: Snippet;
+    shortcut?: string;
+}
+export interface DropdownMenuGroup {
+    label?: string;
+    items: DropdownMenuItem[];
+}
+/**
+ * Select Types
+ */
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+/**
+ * Tabs Types
+ */
+export interface Tab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * FileUpload Types
+ */
+export interface FileMetadata {
+    /** Unique identifier for the file */
+    id: string;
+    /** Original filename */
+    filename: string;
+    /** MIME type */
+    contentType: string;
+    /** File size in bytes */
+    size: number;
+    /** URL for preview (data URL or remote URL) */
+    url?: string;
+    /** Upload progress (0-100) */
+    progress?: number;
+    /** Error message if upload failed */
+    error?: string;
+    /** Whether the file is currently uploading */
+    uploading?: boolean;
+}
+/**
+ * DataTable Types
+ */
+export interface DataTableColumn<T = Record<string, unknown>> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header text */
+    header: string;
+    /** Key in the data object, or accessor function */
+    accessor: keyof T | ((row: T) => unknown);
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Custom cell render function returning string */
+    format?: (value: unknown, row: T) => string;
+}

package/dist/lib/types/components.js

@@ -0,0 +1,7 @@
+/**
+ * Component Types for Classic Theme
+ *
+ * These types are exported from components but need to be
+ * re-exported from a TypeScript file for proper type inference.
+ */
+export {};