@webamoki/web-svelte 0.6.1 → 0.6.3

package/dist/components/ui/context-menu/ContextMenu.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	export type ContextMenuState = {
+		position: { x: number; y: number };
+		open: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import { setContext, onDestroy, type Snippet } from 'svelte';
+	import { contextMenuState } from './context-menu-state.svelte';
+
+	interface Props {
+		children: Snippet<[]>;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { children, onOpenChange }: Props = $props();
+
+	const menuId = Symbol('context-menu');
+
+	let menuState = $state<ContextMenuState>({
+		position: { x: 0, y: 0 },
+		open: false
+	});
+
+	// Watch for changes to menuState.open and sync with global store
+	$effect(() => {
+		if (menuState.open) {
+			contextMenuState.openMenu(menuId);
+		} else if (contextMenuState.isThisMenuOpen(menuId)) {
+			contextMenuState.closeMenu();
+		}
+	});
+
+	// Watch for global store changes and close this menu if another opens
+	$effect(() => {
+		if (contextMenuState.open && !contextMenuState.isThisMenuOpen(menuId)) {
+			menuState.open = false;
+		}
+	});
+
+	// Call onOpenChange callback when open state changes
+	$effect(() => {
+		onOpenChange?.(menuState.open);
+	});
+
+	// Cleanup scroll lock when component is destroyed
+	onDestroy(() => {
+		if (contextMenuState.isThisMenuOpen(menuId)) {
+			contextMenuState.closeMenu();
+		}
+	});
+
+	setContext('context-menu', menuState);
+</script>
+
+{@render children()}

package/dist/components/ui/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+export type ContextMenuState = {
+    position: {
+        x: number;
+        y: number;
+    };
+    open: boolean;
+};
+import { type Snippet } from 'svelte';
+interface Props {
+    children: Snippet<[]>;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/ui/context-menu/ContextMenuContent.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from 'svelte';
+	import { scale } from 'svelte/transition';
+	import type { ContextMenuState } from './ContextMenu.svelte';
+	import { cn } from '../../../shadcn/utils.js';
+
+	interface Props {
+		children: Snippet<[]>;
+		class?: string;
+	}
+
+	let { children, class: className }: Props = $props();
+
+	const menuState: ContextMenuState = getContext('context-menu');
+
+	let menuElement: HTMLDivElement | null = $state(null);
+	let adjustedPosition = $state({ x: 0, y: 0 });
+
+	function handleDocumentClick(event: MouseEvent) {
+		if (menuElement && !menuElement.contains(event.target as Node)) {
+			menuState.open = false;
+		}
+	}
+
+	function adjustPositionToFitScreen() {
+		if (!menuElement) return;
+
+		const rect = menuElement.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+
+		let x = menuState.position.x;
+		let y = menuState.position.y;
+
+		// Adjust horizontal position if menu goes off right edge
+		if (x + rect.width > viewportWidth) {
+			x = viewportWidth - rect.width - 8; // 8px padding from edge
+		}
+
+		// Adjust horizontal position if menu goes off left edge
+		if (x < 0) {
+			x = 8; // 8px padding from edge
+		}
+
+		// Adjust vertical position if menu goes off bottom edge
+		if (y + rect.height > viewportHeight) {
+			y = viewportHeight - rect.height - 8; // 8px padding from edge
+		}
+
+		// Adjust vertical position if menu goes off top edge
+		if (y < 0) {
+			y = 8; // 8px padding from edge
+		}
+
+		adjustedPosition = { x, y };
+	}
+
+	$effect(() => {
+		if (menuState.open && menuElement) {
+			// Use requestAnimationFrame to ensure DOM has updated
+			requestAnimationFrame(() => {
+				adjustPositionToFitScreen();
+			});
+		}
+	});
+
+	onMount(() => {
+		document.addEventListener('click', handleDocumentClick);
+
+		return () => {
+			document.removeEventListener('click', handleDocumentClick);
+		};
+	});
+</script>
+
+{#if menuState.open}
+	<div
+		bind:this={menuElement}
+		class={cn('context-menu-content', className)}
+		style="left: {adjustedPosition.x}px; top: {adjustedPosition.y}px;"
+		transition:scale={{ duration: 150, start: 0.95 }}
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.context-menu-content {
+		position: fixed;
+		background-color: white;
+		border: 1px solid #ddd;
+		border-radius: 8px;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+		padding: 4px;
+		min-width: 150px;
+		z-index: 50;
+		transform-origin: top left;
+	}
+</style>

package/dist/components/ui/context-menu/ContextMenuContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    children: Snippet<[]>;
+    class?: string;
+}
+declare const ContextMenuContent: import("svelte").Component<Props, {}, "">;
+type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
+export default ContextMenuContent;

package/dist/components/ui/context-menu/ContextMenuItem.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../../shadcn/utils.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		variant?: 'default' | 'destructive';
+		disabled?: boolean;
+	}
+
+	let {
+		class: className,
+		variant = 'default',
+		disabled = false,
+		onclick,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	role="menuitem"
+	tabindex={disabled ? -1 : 0}
+	class={cn(
+		'flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm hover:bg-gray-100',
+		variant === 'destructive' && 'text-red-600 hover:bg-red-50',
+		disabled && 'pointer-events-none opacity-50',
+		className
+	)}
+	{onclick}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/context-menu/ContextMenuItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'destructive';
+    disabled?: boolean;
+}
+declare const ContextMenuItem: import("svelte").Component<Props, {}, "">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;

package/dist/components/ui/context-menu/ContextMenuSeparator.svelte

@@ -0,0 +1 @@
+<div class="my-1 border-b border-gray-200"></div>

package/dist/components/ui/context-menu/ContextMenuSeparator.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ContextMenuSeparator;
+type ContextMenuSeparator = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ContextMenuSeparator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/context-menu/ContextMenuTrigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getContext, type Snippet } from 'svelte';
+	import type { ContextMenuState } from './ContextMenu.svelte';
+
+	interface Props {
+		children: Snippet<[]>;
+	}
+
+	let { children }: Props = $props();
+
+	const menuState: ContextMenuState = getContext('context-menu');
+
+	function handleContextMenu(event: MouseEvent) {
+		event.preventDefault();
+		menuState.position.x = event.clientX;
+		menuState.position.y = event.clientY;
+		menuState.open = true;
+	}
+</script>
+
+<div role="button" tabindex="-1" oncontextmenu={handleContextMenu}>
+	{@render children()}
+</div>

package/dist/components/ui/context-menu/ContextMenuTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    children: Snippet<[]>;
+}
+declare const ContextMenuTrigger: import("svelte").Component<Props, {}, "">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

package/dist/components/ui/context-menu/context-menu-state.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const contextMenuState: {
+    readonly open: boolean;
+    readonly currentId: symbol | null;
+    openMenu(id: symbol): void;
+    closeMenu(): void;
+    isThisMenuOpen(id: symbol): boolean;
+};

package/dist/components/ui/context-menu/context-menu-state.svelte.js

@@ -0,0 +1,31 @@
+const globalMenuState = $state({
+    open: false,
+    id: null
+});
+export const contextMenuState = {
+    get open() {
+        return globalMenuState.open;
+    },
+    get currentId() {
+        return globalMenuState.id;
+    },
+    openMenu(id) {
+        globalMenuState.open = true;
+        globalMenuState.id = id;
+        // Prevent scrolling when menu opens
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = 'hidden';
+        }
+    },
+    closeMenu() {
+        globalMenuState.open = false;
+        globalMenuState.id = null;
+        // Restore scrolling when menu closes
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = '';
+        }
+    },
+    isThisMenuOpen(id) {
+        return globalMenuState.open && globalMenuState.id === id;
+    }
+};

package/dist/components/ui/drag-drop/Draggable.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" generics="T">
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { DragManager } from './drag-manager.js';
+
+	interface Props {
+		data: T;
+		manager: DragManager<T>;
+		children: Snippet<[]>;
+		class?: string;
+	}
+
+	let { manager, children, class: className, data }: Props = $props();
+
+	let isDragging = $state(false);
+	let mouseX = $state(0);
+	let mouseY = $state(0);
+
+	function startDrag(e: MouseEvent) {
+		if (e.button !== 0) return;
+
+		e.preventDefault();
+		isDragging = true;
+		manager.drag(data);
+
+		mouseX = e.clientX;
+		mouseY = e.clientY;
+
+		// Force grabbing cursor on the body
+		document.body.style.cursor = 'grabbing';
+
+		window.addEventListener('mousemove', moveDrag);
+		window.addEventListener('mouseup', endDrag);
+	}
+
+	function moveDrag(e: MouseEvent) {
+		mouseX = e.clientX;
+		mouseY = e.clientY;
+	}
+
+	function endDrag() {
+		isDragging = false;
+		manager.stop();
+
+		// Reset cursor
+		document.body.style.cursor = '';
+
+		window.removeEventListener('mousemove', moveDrag);
+		window.removeEventListener('mouseup', endDrag);
+	}
+
+	onDestroy(() => {
+		if (isDragging) {
+			manager.stop();
+		}
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('mousemove', moveDrag);
+			window.removeEventListener('mouseup', endDrag);
+			document.body.style.cursor = ''; // safe in browser only
+		}
+	});
+</script>
+
+<div
+	onmousedown={startDrag}
+	class={`relative select-none ${isDragging ? 'opacity-30 grayscale' : 'cursor-grab'} ${className ?? ''}`}
+	role="button"
+	tabindex="0"
+	aria-label="Draggable item"
+>
+	{@render children()}
+</div>
+
+{#if isDragging}
+	<div
+		class="pointer-events-none fixed z-9999 -translate-x-1/2 -translate-y-1/2 scale-115 transform opacity-95 shadow-xl"
+		style={`top:${mouseY}px; left:${mouseX}px;`}
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/ui/drag-drop/Draggable.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { DragManager } from './drag-manager.js';
+declare function $$render<T>(): {
+    props: {
+        data: T;
+        manager: DragManager<T>;
+        children: Snippet<[]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Draggable: $$IsomorphicComponent;
+type Draggable<T> = InstanceType<typeof Draggable<T>>;
+export default Draggable;

package/dist/components/ui/drag-drop/Dropzone.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { DragManager } from './drag-manager.js';
+	import { LucideArrowDown } from '@lucide/svelte';
+
+	interface Props {
+		isDroppable: (data: T) => boolean;
+		onDrop: (data: T) => void;
+		manager: DragManager<T>;
+		children: Snippet<[]>;
+		class?: string;
+	}
+	let { isDroppable, onDrop, manager, children, class: className = '' }: Props = $props();
+
+	let isOver = $state(false);
+
+	let canDrop = $derived(manager.isDragging && isDroppable(manager.dragData!));
+
+	// --- Event Handlers ---
+
+	function handleMouseEnter() {
+		// Only track 'isOver' if a drag is active
+		if (manager.isDragging) {
+			isOver = true;
+		}
+	}
+
+	function handleMouseLeave() {
+		isOver = false;
+	}
+
+	function handleMouseUp() {
+		if (isOver && canDrop) {
+			onDrop(manager.dragData as T);
+			manager.stop();
+		}
+		isOver = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	onmouseup={handleMouseUp}
+	class={`relative p-4 transition-colors duration-150 ${className}
+    ${
+			// Zero Layout Shift: always reserve the same border width to prevent layout flicker.
+			// Use transparent border when not droppable so sizing remains constant.
+			!manager.isDragging
+				? 'border-2 border-dashed border-transparent'
+				: canDrop
+					? 'border-2 border-dashed border-gray-400'
+					: 'border-2 border-dashed border-transparent'
+		}`}
+>
+	{@render children()}
+
+	{#if isOver && canDrop}
+		<div
+			class="absolute inset-0 z-10 flex flex-col items-center justify-center
+             bg-gray-200/50 p-4 backdrop-blur-none"
+		>
+			<LucideArrowDown class="h-16 w-16 animate-bounce text-gray-700" />
+		</div>
+	{/if}
+
+	{#if isOver && !canDrop}
+		<div class="absolute inset-0 z-10" aria-label="Cannot drop here"></div>
+	{/if}
+</div>

package/dist/components/ui/drag-drop/Dropzone.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { DragManager } from './drag-manager.js';
+declare function $$render<T>(): {
+    props: {
+        isDroppable: (data: T) => boolean;
+        onDrop: (data: T) => void;
+        manager: DragManager<T>;
+        children: Snippet<[]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dropzone: $$IsomorphicComponent;
+type Dropzone<T> = InstanceType<typeof Dropzone<T>>;
+export default Dropzone;

package/dist/components/ui/drag-drop/drag-manager.d.ts

@@ -0,0 +1,8 @@
+export declare class DragManager<T> {
+    #private;
+    constructor();
+    drag(dragData: T): void;
+    stop(): void;
+    get isDragging(): boolean;
+    get dragData(): T | null;
+}

package/dist/components/ui/drag-drop/drag-manager.js

@@ -0,0 +1,28 @@
+import { createSubscriber } from 'svelte/reactivity';
+export class DragManager {
+    #dragData = null;
+    #subscribe;
+    #update = () => { };
+    constructor() {
+        this.#subscribe = createSubscriber((update) => {
+            this.#update = update;
+            return () => { };
+        });
+    }
+    drag(dragData) {
+        this.#dragData = dragData;
+        this.#update();
+    }
+    stop() {
+        this.#dragData = null;
+        this.#update();
+    }
+    get isDragging() {
+        this.#subscribe();
+        return this.#dragData !== null;
+    }
+    get dragData() {
+        this.#subscribe();
+        return this.#dragData;
+    }
+}

package/dist/components/ui/index.d.ts

@@ -3,4 +3,12 @@ import ChoiceMulti from './choice/ChoiceMulti.svelte';
 import WeekdayChoice from './choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
 import SearchBar from './search/SearchBar.svelte';
-export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };
+import ContextMenu from './context-menu/ContextMenu.svelte';
+import ContextMenuContent from './context-menu/ContextMenuContent.svelte';
+import ContextMenuItem from './context-menu/ContextMenuItem.svelte';
+import ContextMenuSeparator from './context-menu/ContextMenuSeparator.svelte';
+import ContextMenuTrigger from './context-menu/ContextMenuTrigger.svelte';
+import { DragManager } from './drag-drop/drag-manager.js';
+import Draggable from './drag-drop/Draggable.svelte';
+import Dropzone from './drag-drop/Dropzone.svelte';
+export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti, DragManager, Draggable, Dropzone, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger };

package/dist/components/ui/index.js

@@ -3,4 +3,18 @@ import ChoiceMulti from './choice/ChoiceMulti.svelte';
 import WeekdayChoice from './choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
 import SearchBar from './search/SearchBar.svelte';
-export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };
+// context menu
+import ContextMenu from './context-menu/ContextMenu.svelte';
+import ContextMenuContent from './context-menu/ContextMenuContent.svelte';
+import ContextMenuItem from './context-menu/ContextMenuItem.svelte';
+import ContextMenuSeparator from './context-menu/ContextMenuSeparator.svelte';
+import ContextMenuTrigger from './context-menu/ContextMenuTrigger.svelte';
+// drag drop
+import { DragManager } from './drag-drop/drag-manager.js';
+import Draggable from './drag-drop/Draggable.svelte';
+import Dropzone from './drag-drop/Dropzone.svelte';
+export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti, 
+// drag drop
+DragManager, Draggable, Dropzone, 
+// context menu
+ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger };

package/dist/utils/form/index.d.ts

@@ -1,5 +1,6 @@
 import { type } from 'arktype';
 import { type SuperValidated } from 'sveltekit-superforms';
+export * from './virtual-form.js';
 export declare function prepareForm<S extends type.Any<Record<string, unknown>>>(validated: SuperValidated<S['infer']> | S['infer'], schema: S, options?: Partial<{
     invalidateAll: boolean;
     resetForm: boolean;

package/dist/utils/form/index.js

@@ -3,6 +3,7 @@ import { toast } from 'svelte-sonner';
 import { defaults, superForm } from 'sveltekit-superforms';
 import { arktype, arktypeClient } from 'sveltekit-superforms/adapters';
 import { dateTransport } from '../datetime/index.js';
+export * from './virtual-form.js';
 export function prepareForm(validated, schema, options) {
     const form = superForm(validated, {
         validators: arktypeClient(schema),

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.1",
+  "version": "0.6.3",
   "license": "MIT",
   "files": [
     "dist",