sveltacular 0.0.77 → 1.0.0

package/dist/navigation/command-palette/command-palette.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from 'svelte';
+/**
+ * Command item interface
+ */
+export interface Command {
+    /** Unique identifier for the command */
+    id: string;
+    /** Display label for the command */
+    label: string;
+    /** Optional description/subtitle */
+    description?: string;
+    /** Optional icon (snippet or string class name) */
+    icon?: Snippet | string;
+    /** Group this command belongs to */
+    group?: string;
+    /** Keywords for better search matching */
+    keywords?: string[];
+    /** Custom data to pass to onSelect handler */
+    data?: any;
+    /** Whether this command is disabled */
+    disabled?: boolean;
+    /** Action to perform when selected */
+    action?: () => void | Promise<void>;
+}
+export interface CommandGroup {
+    /** Group identifier */
+    id: string;
+    /** Group display name */
+    label: string;
+    /** Group priority for ordering */
+    priority?: number;
+}
+interface Props {
+    /** List of available commands */
+    commands?: Command[];
+    /** Command groups configuration */
+    groups?: CommandGroup[];
+    /** Whether the palette is open */
+    open?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Show recent commands at the top */
+    showRecent?: boolean;
+    /** Maximum recent commands to show */
+    maxRecent?: number;
+    /** Keyboard shortcut to open (default: 'k' for Cmd/Ctrl+K) */
+    shortcut?: string;
+    /** Modifier key for shortcut (default: 'meta' for Cmd/Ctrl) */
+    shortcutModifier?: 'meta' | 'ctrl' | 'alt' | 'shift';
+    /** Enable keyboard shortcut */
+    enableShortcut?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Blur background when open */
+    blur?: boolean;
+    /** Callback when a command is selected */
+    onSelect?: (command: Command) => void;
+    /** Callback when palette opens */
+    onOpen?: () => void;
+    /** Callback when palette closes */
+    onClose?: () => void;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/navigation/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CommandPalette } from './command-palette.svelte';
+export type { Command, CommandGroup } from './command-palette.svelte';

package/dist/navigation/command-palette/index.js

@@ -0,0 +1 @@
+export { default as CommandPalette } from './command-palette.svelte';

package/dist/navigation/context-menu/README.md

@@ -0,0 +1,146 @@
+# Context Menu Component
+
+A fully-featured right-click menu component with keyboard navigation and nested submenus.
+
+## Features
+
+- ✅ Right-click trigger with contextmenu event
+- ✅ Full keyboard navigation (↑↓←→, Home, End, Enter, Space, Escape)
+- ✅ Nested submenus with multi-level support
+- ✅ Auto-positioning with viewport collision detection
+- ✅ Fully accessible (ARIA roles, keyboard support)
+- ✅ Visual states: hover, focus, disabled, danger
+- ✅ Icon support
+- ✅ Click outside to close
+
+## Basic Usage
+
+```svelte
+<script>
+  import { ContextMenu, ContextMenuItem, ContextMenuDivider } from 'sveltacular';
+  
+  let menu;
+  
+  function showMenu(event) {
+    event.preventDefault();
+    menu.show(event);
+  }
+</script>
+
+<div oncontextmenu={showMenu}>
+  Right-click me
+</div>
+
+<ContextMenu bind:this={menu}>
+  <ContextMenuItem onClick={() => console.log('New')}>
+    New File
+  </ContextMenuItem>
+  <ContextMenuItem onClick={() => console.log('Open')}>
+    Open
+  </ContextMenuItem>
+  <ContextMenuDivider />
+  <ContextMenuItem onClick={() => console.log('Delete')} danger>
+    Delete
+  </ContextMenuItem>
+</ContextMenu>
+```
+
+## With Icons
+
+```svelte
+<ContextMenuItem onClick={() => console.log('Copy')}>
+  {#snippet icon()}
+    <CopyIcon />
+  {/snippet}
+  Copy
+</ContextMenuItem>
+```
+
+## Nested Submenus
+
+```svelte
+<ContextMenuItem>
+  {#snippet submenu()}
+    <ContextMenuItem onClick={() => console.log('Option 1')}>
+      Option 1
+    </ContextMenuItem>
+    <ContextMenuItem onClick={() => console.log('Option 2')}>
+      Option 2
+    </ContextMenuItem>
+  {/snippet}
+  More Options
+</ContextMenuItem>
+```
+
+## Props
+
+### ContextMenu
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onOpen` | `() => void` | `undefined` | Callback when menu opens |
+| `onClose` | `() => void` | `undefined` | Callback when menu closes |
+| `closeOnClick` | `boolean` | `true` | Auto-close menu when item is clicked |
+
+### ContextMenuItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `() => void` | `undefined` | Callback when item is clicked |
+| `disabled` | `boolean` | `false` | Disable the menu item |
+| `danger` | `boolean` | `false` | Style as destructive action (red) |
+| `icon` | `Snippet` | `undefined` | Optional icon snippet |
+| `submenu` | `Snippet` | `undefined` | Optional submenu content |
+
+## Methods
+
+### show(event)
+
+Show the context menu at the event position.
+
+```svelte
+menu.show(event);
+```
+
+### hide()
+
+Hide the context menu.
+
+```svelte
+menu.hide();
+```
+
+## Keyboard Navigation
+
+- **↑ / ↓** - Navigate between items
+- **→** - Open submenu
+- **←** - Close submenu
+- **Enter / Space** - Activate item
+- **Escape** - Close menu
+- **Home** - Jump to first item
+- **End** - Jump to last item
+
+## Accessibility
+
+- Uses ARIA `menu` and `menuitem` roles
+- Full keyboard navigation support
+- Focus management for submenus
+- Screen reader compatible
+- WCAG 2.1 AA compliant
+
+## Testing
+
+See `CONTEXT_MENU_TESTING.md` for comprehensive testing guide with 50+ test checkpoints.
+
+## Note on Storybook
+
+Due to limitations in the Storybook Svelte CSF parser with advanced Svelte 5 syntax, this component does not have interactive Storybook stories. However, the component is fully functional and can be tested in your application or by following the testing guide.
+
+---
+
+**Component Version:** 1.0.0  
+**Last Updated:** January 3, 2026
+
+
+
+

package/dist/navigation/context-menu/context-menu-divider.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	/**
+	 * ContextMenuDivider Component
+	 * 
+	 * Visual separator for context menu items.
+	 * 
+	 * @component
+	 */
+</script>
+
+<div class="context-menu-divider" role="separator" aria-orientation="horizontal"></div>
+
+<style>.context-menu-divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  background-color: var(--form-input-border, #e5e7eb);
+}</style>
+
+
+
+

package/dist/navigation/context-menu/context-menu-divider.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const ContextMenuDivider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ContextMenuDivider = InstanceType<typeof ContextMenuDivider>;
+export default ContextMenuDivider;

package/dist/navigation/context-menu/context-menu-item.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+	/**
+	 * ContextMenuItem Component
+	 * 
+	 * Individual item in a context menu. Can contain a submenu.
+	 * 
+	 * @component
+	 */
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import AngleRightIcon from '../../icons/angle-right-icon.svelte';
+
+	let {
+		onClick = undefined,
+		disabled = false,
+		danger = false,
+		icon = undefined,
+		submenu = undefined,
+		children
+	}: {
+		onClick?: (() => void) | undefined;
+		disabled?: boolean;
+		danger?: boolean;
+		icon?: Snippet | undefined;
+		submenu?: Snippet | undefined;
+		children: Snippet;
+	} = $props();
+
+	let showSubmenu = $state(false);
+	let itemRef: HTMLDivElement | null = null;
+	let submenuRef = $state<HTMLDivElement | null>(null);
+	let submenuTimeout: number | null = null;
+
+	/**
+	 * Handle item click
+	 */
+	function handleClick(event: Event) {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+
+		// If there's a submenu, toggle it instead of closing
+		if (submenu) {
+			event.stopPropagation();
+			showSubmenu = !showSubmenu;
+			return;
+		}
+
+		onClick?.();
+		
+		// Get the context menu and tell it to close
+		const contextMenu = getContext('contextMenu') as any;
+		if (contextMenu?.handleItemClick) {
+			contextMenu.handleItemClick();
+		}
+	}
+
+	/**
+	 * Handle keyboard interaction
+	 */
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return;
+
+		switch (event.key) {
+			case 'Enter':
+			case ' ':
+				event.preventDefault();
+				handleClick(event);
+				break;
+
+			case 'ArrowRight':
+				if (submenu) {
+					event.preventDefault();
+					event.stopPropagation();
+					showSubmenu = true;
+					// Focus first item in submenu
+					setTimeout(() => {
+						const firstItem = submenuRef?.querySelector('[role="menuitem"]') as HTMLElement;
+						firstItem?.focus();
+					}, 0);
+				}
+				break;
+
+			case 'ArrowLeft':
+				if (showSubmenu) {
+					event.preventDefault();
+					event.stopPropagation();
+					showSubmenu = false;
+					itemRef?.focus();
+				}
+				break;
+		}
+	}
+
+	/**
+	 * Show submenu on hover
+	 */
+	function handleMouseEnter() {
+		if (submenu && !disabled) {
+			if (submenuTimeout) {
+				clearTimeout(submenuTimeout);
+			}
+			submenuTimeout = window.setTimeout(() => {
+				showSubmenu = true;
+			}, 200);
+		}
+	}
+
+	/**
+	 * Hide submenu on leave
+	 */
+	function handleMouseLeave() {
+		if (submenuTimeout) {
+			clearTimeout(submenuTimeout);
+			submenuTimeout = null;
+		}
+		// Don't hide if mouse is over submenu
+		if (submenu) {
+			setTimeout(() => {
+				const isOverSubmenu = submenuRef?.matches(':hover');
+				if (!isOverSubmenu) {
+					showSubmenu = false;
+				}
+			}, 100);
+		}
+	}
+
+	/**
+	 * Position submenu
+	 */
+	function getSubmenuPosition() {
+		if (!itemRef) return 'left: 100%; top: 0;';
+		
+		const rect = itemRef.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		
+		// Check if submenu would go off right edge
+		const wouldOverflow = rect.right + 200 > viewportWidth; // Assume 200px submenu width
+		
+		if (wouldOverflow) {
+			return 'right: 100%; top: 0;';
+		}
+		
+		return 'left: 100%; top: 0;';
+	}
+</script>
+
+<div
+	bind:this={itemRef}
+	class="context-menu-item"
+	class:disabled
+	class:danger
+	class:has-submenu={!!submenu}
+	role="menuitem"
+	tabindex={disabled ? -1 : 0}
+	aria-disabled={disabled}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	{#if icon}
+		<span class="icon" aria-hidden="true">
+			{@render icon()}
+		</span>
+	{/if}
+	
+	<span class="label">
+		{@render children()}
+	</span>
+	
+	{#if submenu}
+		<span class="arrow" aria-hidden="true">
+			<AngleRightIcon />
+		</span>
+		
+		{#if showSubmenu}
+			<div
+				bind:this={submenuRef}
+				class="submenu"
+				role="menu"
+				aria-orientation="vertical"
+				style={getSubmenuPosition()}
+			>
+				{@render submenu()}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>.context-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  color: var(--form-input-fg, #000);
+  font-size: 0.875rem;
+  transition: background-color 0.15s ease;
+  outline: none;
+}
+.context-menu-item:hover:not(.disabled) {
+  background-color: var(--form-input-selected-bg, #0066cc);
+  color: var(--form-input-selected-fg, white);
+}
+.context-menu-item:focus-visible {
+  background-color: var(--form-input-selected-bg, #0066cc);
+  color: var(--form-input-selected-fg, white);
+  outline: 2px solid var(--focus-ring-color, #0066cc);
+  outline-offset: -2px;
+}
+.context-menu-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.context-menu-item.danger {
+  color: var(--danger-color, #dc2626);
+}
+.context-menu-item.danger:hover:not(.disabled), .context-menu-item.danger:focus-visible {
+  background-color: var(--danger-color, #dc2626);
+  color: white;
+}
+.context-menu-item .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.context-menu-item .label {
+  flex: 1;
+  white-space: nowrap;
+}
+.context-menu-item .arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.context-menu-item .submenu {
+  position: absolute;
+  z-index: 10001;
+  min-width: 12rem;
+  background: var(--form-input-bg, white);
+  border: 1px solid var(--form-input-border, #ccc);
+  border-radius: var(--border-radius-md, 0.375rem);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  padding: 0.25rem 0;
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}</style>
+

package/dist/navigation/context-menu/context-menu-item.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+     * ContextMenuItem Component
+     *
+     * Individual item in a context menu. Can contain a submenu.
+     *
+     * @component
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    onClick?: (() => void) | undefined;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: Snippet | undefined;
+    submenu?: Snippet | undefined;
+    children: Snippet;
+};
+declare const ContextMenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;