yaxa-svelte 1.3.0 → 1.5.0

package/README.md

@@ -68,7 +68,7 @@ export default defineConfig({
 
 ### 3. Define Your Site Configuration
 
-Create `src/site.config.ts` — your single source of truth for branding, metadata, and SEO:
+Create `src/site.config.ts` — your single source of truth for branding, metadata, licensing, and SEO:
 
 ```ts
 // src/site.config.ts
@@ -79,14 +79,20 @@ export const siteConfig = defineSiteConfig({
 	title: 'My Indie SaaS — Build Fast with SvelteKit',
 	description: 'Fast, beautiful, accessible web applications.',
 	url: 'https://my-app.com',
+	// Single-email mode: Solo devs can set one email for contact, support & DPO
+	email: 'hello@my-app.com',
+	project: {
+		license: 'MIT',
+		type: 'open-source',
+		repositoryUrl: 'https://github.com/my-org/my-app'
+	},
 	theme: {
 		accent: 'svelte', // 'svelte' | 'emerald' | 'amber' | 'sky' | 'violet' | 'rose' | 'indigo'
 		neutral: 'zinc', // 'zinc' | 'slate' | 'stone' | 'neutral'
 		defaultMode: 'dark'
 	},
 	socials: {
-		github: 'https://github.com/my-org/my-app',
-		twitter: '@my_app'
+		github: 'https://github.com/my-org/my-app'
 	}
 });
 ```
@@ -219,15 +225,15 @@ export const POST = createPolarWebhookHandler();
 
 ## 🧩 Component Library
 
-| Category           | Components                                                                                                                                                   |
-| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **SaaS Suite**     | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                             |
-| **Admin Suite**    | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                   |
-| **Elements**       | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`    |
-| **Forms**          | `Form`, `FormField`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`                                              |
-| **Layout**         | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`                                                                                     |
-| **Overlays & Nav** | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion` |
-| **Composables**    | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                |
+| Category            | Components                                                                                                                                                                  |
+| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **SaaS Suite**      | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                            |
+| **Admin Suite**     | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                  |
+| **Elements**        | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`     |
+| **Forms**           | `Form`, `FormField`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker` |
+| **Layout & Blocks** | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, Page Blocks (Hero, SaaS Metrics, 2FA Security)                                                    |
+| **Overlays & Nav**  | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion`                |
+| **Composables**     | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                               |
 
 ---
 

package/dist/actions/autosize.d.ts

@@ -0,0 +1,16 @@
+import type { Action } from 'svelte/action';
+export interface AutosizeOptions {
+    /** Maximum height in pixels before scrolling */
+    maxHeight?: number;
+    /** Minimum height in pixels (defaults to initial height) */
+    minHeight?: number;
+}
+/**
+ * Headless Svelte Action to dynamically auto-grow a <textarea> based on its content.
+ *
+ * Usage:
+ * ```svelte
+ * <textarea use:autosize={{ maxHeight: 300 }} bind:value={text}></textarea>
+ * ```
+ */
+export declare const autosize: Action<HTMLTextAreaElement, AutosizeOptions | undefined>;

package/dist/actions/autosize.js

@@ -0,0 +1,38 @@
+/**
+ * Headless Svelte Action to dynamically auto-grow a <textarea> based on its content.
+ *
+ * Usage:
+ * ```svelte
+ * <textarea use:autosize={{ maxHeight: 300 }} bind:value={text}></textarea>
+ * ```
+ */
+export const autosize = (node, options = {}) => {
+    let currentOptions = options || {};
+    function resize() {
+        // Reset height to calculate true scrollHeight
+        node.style.height = 'auto';
+        const minH = currentOptions.minHeight ?? 0;
+        const maxH = currentOptions.maxHeight;
+        let targetHeight = Math.max(node.scrollHeight, minH);
+        if (maxH && targetHeight > maxH) {
+            targetHeight = maxH;
+            node.style.overflowY = 'auto';
+        }
+        else {
+            node.style.overflowY = 'hidden';
+        }
+        node.style.height = `${targetHeight}px`;
+    }
+    node.addEventListener('input', resize);
+    // Initial resize
+    requestAnimationFrame(resize);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions || {};
+            resize();
+        },
+        destroy() {
+            node.removeEventListener('input', resize);
+        }
+    };
+};

package/dist/actions/clickOutside.d.ts

@@ -0,0 +1,18 @@
+import type { Action } from 'svelte/action';
+export interface ClickOutsideOptions {
+    /** Callback invoked when a click occurs outside the node */
+    handler?: (event: MouseEvent | TouchEvent) => void;
+    /** Optional list of elements or selectors to ignore */
+    exclude?: (HTMLElement | string)[];
+    /** Enabled flag */
+    enabled?: boolean;
+}
+/**
+ * Headless Svelte Action to trigger a callback when clicking outside the target element.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:clickOutside={() => (isOpen = false)}>...</div>
+ * ```
+ */
+export declare const clickOutside: Action<HTMLElement, ClickOutsideOptions | ((event: MouseEvent | TouchEvent) => void) | undefined>;

package/dist/actions/clickOutside.js

@@ -0,0 +1,46 @@
+/**
+ * Headless Svelte Action to trigger a callback when clicking outside the target element.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:clickOutside={() => (isOpen = false)}>...</div>
+ * ```
+ */
+export const clickOutside = (node, param) => {
+    let options = typeof param === 'function' ? { handler: param } : param || {};
+    function handleClick(event) {
+        if (options.enabled === false)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        // Check if click was inside node
+        if (node.contains(target))
+            return;
+        // Check excluded elements
+        if (options.exclude) {
+            for (const item of options.exclude) {
+                if (typeof item === 'string') {
+                    const el = document.querySelector(item);
+                    if (el && el.contains(target))
+                        return;
+                }
+                else if (item && item.contains(target)) {
+                    return;
+                }
+            }
+        }
+        if (options.handler) {
+            options.handler(event);
+        }
+    }
+    document.addEventListener('pointerdown', handleClick, true);
+    return {
+        update(newParam) {
+            options = typeof newParam === 'function' ? { handler: newParam } : newParam || {};
+        },
+        destroy() {
+            document.removeEventListener('pointerdown', handleClick, true);
+        }
+    };
+};

package/dist/actions/index.d.ts

@@ -0,0 +1,10 @@
+export { autosize } from './autosize';
+export type { AutosizeOptions } from './autosize';
+export { clickOutside } from './clickOutside';
+export type { ClickOutsideOptions } from './clickOutside';
+export { portal } from './portal';
+export type { PortalOptions } from './portal';
+export { infiniteScroll } from './infiniteScroll';
+export type { InfiniteScrollActionOptions } from './infiniteScroll';
+export { sortableItem } from './sortable';
+export type { SortableItemOptions } from './sortable';

package/dist/actions/index.js

@@ -0,0 +1,5 @@
+export { autosize } from './autosize';
+export { clickOutside } from './clickOutside';
+export { portal } from './portal';
+export { infiniteScroll } from './infiniteScroll';
+export { sortableItem } from './sortable';

package/dist/actions/infiniteScroll.d.ts

@@ -0,0 +1,21 @@
+import type { Action } from 'svelte/action';
+export interface InfiniteScrollActionOptions {
+    /** Threshold in pixels from bottom/top to trigger (default: 100) */
+    distance?: number;
+    /** Direction to monitor (default: 'bottom') */
+    direction?: 'bottom' | 'top';
+    /** Disable infinite scroll triggering */
+    disabled?: boolean;
+    /** Callback invoked when trigger threshold is reached */
+    onLoadMore: () => Promise<void> | void;
+}
+/**
+ * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:infiniteScroll={loadMore}>...</div>
+ * <div use:infiniteScroll={{ onLoadMore: loadMore, distance: 200 }}>...</div>
+ * ```
+ */
+export declare const infiniteScroll: Action<HTMLElement, InfiniteScrollActionOptions | (() => Promise<void> | void)>;

package/dist/actions/infiniteScroll.js

@@ -0,0 +1,62 @@
+import { browser } from '$app/environment';
+/**
+ * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:infiniteScroll={loadMore}>...</div>
+ * <div use:infiniteScroll={{ onLoadMore: loadMore, distance: 200 }}>...</div>
+ * ```
+ */
+export const infiniteScroll = (node, param) => {
+    if (!browser)
+        return;
+    let options = typeof param === 'function' ? { onLoadMore: param } : param;
+    let isPending = false;
+    async function trigger() {
+        if (isPending || options.disabled)
+            return;
+        try {
+            isPending = true;
+            await options.onLoadMore();
+        }
+        finally {
+            isPending = false;
+        }
+    }
+    const distance = options.distance ?? 100;
+    const direction = options.direction ?? 'bottom';
+    const sentinel = document.createElement('div');
+    sentinel.setAttribute('data-yaxa-sentinel', 'true');
+    sentinel.style.height = '1px';
+    sentinel.style.width = '100%';
+    sentinel.style.pointerEvents = 'none';
+    sentinel.style.opacity = '0';
+    if (direction === 'bottom') {
+        node.appendChild(sentinel);
+    }
+    else {
+        node.insertBefore(sentinel, node.firstChild);
+    }
+    const observer = new IntersectionObserver((entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting && !isPending && !options.disabled) {
+            trigger();
+        }
+    }, {
+        root: node === document.documentElement || node === document.body ? null : node,
+        rootMargin: `${distance}px`
+    });
+    observer.observe(sentinel);
+    return {
+        update(newParam) {
+            options = typeof newParam === 'function' ? { onLoadMore: newParam } : newParam;
+        },
+        destroy() {
+            observer.disconnect();
+            if (sentinel.parentNode) {
+                sentinel.parentNode.removeChild(sentinel);
+            }
+        }
+    };
+};

package/dist/actions/portal.d.ts

@@ -0,0 +1,17 @@
+import type { Action } from 'svelte/action';
+export interface PortalOptions {
+    /** Target container element or CSS selector. Defaults to `document.body` */
+    target?: HTMLElement | string;
+    /** Whether the portal is enabled */
+    enabled?: boolean;
+}
+/**
+ * Headless Svelte Action to teleport an element into another DOM container (e.g. `document.body`).
+ *
+ * Usage:
+ * ```svelte
+ * <div use:portal>...</div>
+ * <div use:portal="#modal-root">...</div>
+ * ```
+ */
+export declare const portal: Action<HTMLElement, HTMLElement | string | PortalOptions | undefined>;

package/dist/actions/portal.js

@@ -0,0 +1,63 @@
+/**
+ * Headless Svelte Action to teleport an element into another DOM container (e.g. `document.body`).
+ *
+ * Usage:
+ * ```svelte
+ * <div use:portal>...</div>
+ * <div use:portal="#modal-root">...</div>
+ * ```
+ */
+export const portal = (node, param) => {
+    let targetEl = null;
+    const placeholder = document.createComment('portal-placeholder');
+    function resolveTarget(p) {
+        if (!p)
+            return document.body;
+        if (typeof p === 'string')
+            return document.querySelector(p);
+        if (p instanceof HTMLElement)
+            return p;
+        if (typeof p === 'object') {
+            if (p.enabled === false)
+                return null;
+            if (typeof p.target === 'string')
+                return document.querySelector(p.target);
+            if (p.target instanceof HTMLElement)
+                return p.target;
+            return document.body;
+        }
+        return document.body;
+    }
+    function mount(target) {
+        if (!target) {
+            // Restore to placeholder if disabled
+            if (placeholder.parentNode && node.parentNode !== placeholder.parentNode) {
+                placeholder.parentNode.insertBefore(node, placeholder);
+            }
+            return;
+        }
+        if (node.parentNode && node.parentNode !== target) {
+            node.parentNode.insertBefore(placeholder, node);
+            target.appendChild(node);
+        }
+        else if (!node.parentNode) {
+            target.appendChild(node);
+        }
+    }
+    targetEl = resolveTarget(param);
+    mount(targetEl);
+    return {
+        update(newParam) {
+            targetEl = resolveTarget(newParam);
+            mount(targetEl);
+        },
+        destroy() {
+            if (placeholder.parentNode) {
+                placeholder.parentNode.removeChild(placeholder);
+            }
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+        }
+    };
+};

package/dist/actions/sortable.d.ts

@@ -0,0 +1,18 @@
+import type { Action } from 'svelte/action';
+export interface SortableItemOptions {
+    index: number;
+    disabled?: boolean;
+    onDragStart?: (index: number, e: DragEvent) => void;
+    onDragOver?: (index: number, e: DragEvent) => void;
+    onDrop?: (index: number, e: DragEvent) => void;
+    onDragEnd?: () => void;
+}
+/**
+ * Headless Svelte Action to make any DOM item draggable and droppable for reordering.
+ *
+ * Usage:
+ * ```svelte
+ * <li use:sortableItem={{ index, onDragStart, onDragOver, onDrop, onDragEnd }}>...</li>
+ * ```
+ */
+export declare const sortableItem: Action<HTMLElement, SortableItemOptions>;

package/dist/actions/sortable.js

@@ -0,0 +1,66 @@
+/**
+ * Headless Svelte Action to make any DOM item draggable and droppable for reordering.
+ *
+ * Usage:
+ * ```svelte
+ * <li use:sortableItem={{ index, onDragStart, onDragOver, onDrop, onDragEnd }}>...</li>
+ * ```
+ */
+export const sortableItem = (node, options) => {
+    let currentOptions = options;
+    function setupDraggable() {
+        node.draggable = !currentOptions.disabled;
+    }
+    function handleDragStart(e) {
+        if (currentOptions.disabled)
+            return;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(currentOptions.index));
+        }
+        if (currentOptions.onDragStart) {
+            currentOptions.onDragStart(currentOptions.index, e);
+        }
+    }
+    function handleDragOver(e) {
+        if (currentOptions.disabled)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        if (currentOptions.onDragOver) {
+            currentOptions.onDragOver(currentOptions.index, e);
+        }
+    }
+    function handleDrop(e) {
+        if (currentOptions.disabled)
+            return;
+        e.preventDefault();
+        if (currentOptions.onDrop) {
+            currentOptions.onDrop(currentOptions.index, e);
+        }
+    }
+    function handleDragEnd() {
+        if (currentOptions.onDragEnd) {
+            currentOptions.onDragEnd();
+        }
+    }
+    setupDraggable();
+    node.addEventListener('dragstart', handleDragStart);
+    node.addEventListener('dragover', handleDragOver);
+    node.addEventListener('drop', handleDrop);
+    node.addEventListener('dragend', handleDragEnd);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions;
+            setupDraggable();
+        },
+        destroy() {
+            node.removeEventListener('dragstart', handleDragStart);
+            node.removeEventListener('dragover', handleDragOver);
+            node.removeEventListener('drop', handleDrop);
+            node.removeEventListener('dragend', handleDragEnd);
+        }
+    };
+};