@webamoki/web-svelte 0.8.0 → 1.0.0

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

@@ -1,57 +1,58 @@
 <script lang="ts" module>
-	export type ContextMenuState = {
-		position: { x: number; y: number };
-		open: boolean;
-	};
+  export type ContextMenuState = {
+    open: boolean;
+    position: { x: number; y: number };
+  };
 </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);
+  import { onDestroy, setContext, 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>({
+    open: false,
+    position: { x: 0, y: 0 }
+  });
+
+  // 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

@@ -1,9 +1,9 @@
 export type ContextMenuState = {
+    open: boolean;
     position: {
         x: number;
         y: number;
     };
-    open: boolean;
 };
 import { type Snippet } from 'svelte';
 interface Props {

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

@@ -1,99 +1,100 @@
 <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);
-		};
-	});
+  import { cn } from '../../../shadcn/utils.js';
+  import { getContext, onMount, type Snippet } from 'svelte';
+  import { scale } from 'svelte/transition';
+
+  import type { ContextMenuState } from './ContextMenu.svelte';
+
+  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>
+  <div
+    bind:this={menuElement}
+    style="left: {adjustedPosition.x}px; top: {adjustedPosition.y}px;"
+    class={cn('context-menu-content', className)}
+    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;
-	}
+  .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/ContextMenuItem.svelte

@@ -1,33 +1,34 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '../../../shadcn/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		variant?: 'default' | 'destructive';
-		disabled?: boolean;
-	}
+  import { cn } from '../../../shadcn/utils.js';
 
-	let {
-		class: className,
-		variant = 'default',
-		disabled = false,
-		onclick,
-		children,
-		...restProps
-	}: Props = $props();
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    variant?: 'default' | 'destructive';
+  }
+
+  let {
+    children,
+    class: className,
+    disabled = false,
+    onclick,
+    variant = 'default',
+    ...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}
+  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}
+  role="menuitem"
+  tabindex={disabled ? -1 : 0}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>

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

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

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

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

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

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

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

@@ -1,14 +1,25 @@
 const globalMenuState = $state({
-    open: false,
-    id: null
+    id: null,
+    open: false
 });
 export const contextMenuState = {
-    get open() {
-        return globalMenuState.open;
+    closeMenu() {
+        globalMenuState.open = false;
+        globalMenuState.id = null;
+        // Restore scrolling when menu closes
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = '';
+        }
     },
     get currentId() {
         return globalMenuState.id;
     },
+    isThisMenuOpen(id) {
+        return globalMenuState.open && globalMenuState.id === id;
+    },
+    get open() {
+        return globalMenuState.open;
+    },
     openMenu(id) {
         globalMenuState.open = true;
         globalMenuState.id = id;
@@ -16,16 +27,5 @@ export const contextMenuState = {
         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

@@ -1,80 +1,81 @@
-<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 generics="T" lang="ts">
+  import { onDestroy, type Snippet } from 'svelte';
+
+  import type { DragManager } from './drag-manager.js';
+
+  interface Props {
+    children: Snippet<[]>;
+    class?: string;
+    data: T;
+    manager: DragManager<T>;
+  }
+
+  let { children, class: className, data, manager }: 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"
+  class={`relative select-none ${isDragging ? 'opacity-30 grayscale' : 'cursor-grab'} ${className ?? ''}`}
+  aria-label="Draggable item"
+  onmousedown={startDrag}
+  role="button"
+  tabindex="0"
 >
-	{@render children()}
+  {@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>
+  <div
+    style={`top:${mouseY}px; left:${mouseX}px;`}
+    class="pointer-events-none fixed z-9999 -translate-x-1/2 -translate-y-1/2 scale-115 transform opacity-95 shadow-xl"
+  >
+    {@render children()}
+  </div>
 {/if}

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

@@ -2,10 +2,10 @@ 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;
+        data: T;
+        manager: DragManager<T>;
     };
     exports: {};
     bindings: "";