@salmexio/ui 0.1.1 → 0.3.0

package/dist/dialogs/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,521 @@
+<!--
+  @component ContextMenu
+
+  Win2K × Basquiat — Right-click context menu with raised panel, keyboard navigation,
+  separators, section headers, submenus, and keyboard shortcut hints.
+
+  @example
+  <ContextMenu
+    items={[
+      { type: 'item', label: 'Cut', shortcut: 'Ctrl+X', action: handleCut },
+      { type: 'item', label: 'Copy', shortcut: 'Ctrl+C', action: handleCopy },
+      { type: 'separator' },
+      { type: 'item', label: 'Paste', shortcut: 'Ctrl+V', action: handlePaste },
+    ]}
+    bind:this={menu}
+  />
+  <div oncontextmenu={(e) => { e.preventDefault(); menu.open(e.clientX, e.clientY); }}>
+    Right click here
+  </div>
+-->
+<script lang="ts" module>
+export interface MenuItem {
+	type: 'item';
+	label: string;
+	shortcut?: string;
+	disabled?: boolean;
+	icon?: string;
+	action?: () => void;
+	children?: MenuItemOrSeparator[];
+}
+
+export interface MenuSeparator {
+	type: 'separator';
+}
+
+export interface MenuGroup {
+	type: 'group';
+	label: string;
+	items: MenuItemOrSeparator[];
+}
+
+export type MenuItemOrSeparator = MenuItem | MenuSeparator | MenuGroup;
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+
+interface Props {
+	/** Menu items */
+	items: MenuItemOrSeparator[];
+	/** Additional CSS class */
+	class?: string;
+	/** Test ID */
+	testId?: string;
+}
+
+let {
+	items,
+	class: className = '',
+	testId
+}: Props = $props();
+
+let isOpen = $state(false);
+let posX = $state(0);
+let posY = $state(0);
+let activeIndex = $state(-1);
+let menuEl = $state<HTMLDivElement | null>(null);
+let openSubmenuIndex = $state(-1);
+let submenuPosX = $state(0);
+let submenuPosY = $state(0);
+let submenuActiveIndex = $state(-1);
+
+// Flatten to only actionable items for keyboard nav indices
+const actionableIndices = $derived(
+	items.map((item, i) => ({ i, actionable: item.type === 'item' || item.type === 'group' }))
+		.filter((x) => x.actionable)
+		.map((x) => x.i)
+);
+
+export function open(x: number, y: number) {
+	posX = x;
+	posY = y;
+	isOpen = true;
+	activeIndex = -1;
+	openSubmenuIndex = -1;
+	// Clamping and focus are handled by the portal $effect
+}
+
+export function close() {
+	isOpen = false;
+	activeIndex = -1;
+	openSubmenuIndex = -1;
+}
+
+function navigateUp() {
+	const pos = actionableIndices.indexOf(activeIndex);
+	if (pos > 0) activeIndex = actionableIndices[pos - 1];
+	else activeIndex = actionableIndices[actionableIndices.length - 1];
+	openSubmenuIndex = -1;
+}
+
+function navigateDown() {
+	const pos = actionableIndices.indexOf(activeIndex);
+	if (pos < actionableIndices.length - 1) activeIndex = actionableIndices[pos + 1];
+	else activeIndex = actionableIndices[0];
+	openSubmenuIndex = -1;
+}
+
+function activateItem(item: MenuItemOrSeparator) {
+	if (item.type !== 'item' || item.disabled) return;
+	if (item.children && item.children.length > 0) {
+		openSubmenu(items.indexOf(item));
+		return;
+	}
+	item.action?.();
+	close();
+}
+
+function openSubmenu(index: number) {
+	const item = items[index];
+	if (item.type !== 'item' || !item.children?.length) return;
+	openSubmenuIndex = index;
+	submenuActiveIndex = -1;
+	// Position submenu to the right of the item
+	requestAnimationFrame(() => {
+		if (!menuEl) return;
+		const itemEl = menuEl.querySelector(`[data-index="${index}"]`) as HTMLElement;
+		if (!itemEl) return;
+		const itemRect = itemEl.getBoundingClientRect();
+		const menuRect = menuEl.getBoundingClientRect();
+		submenuPosX = menuRect.width - 4;
+		submenuPosY = itemRect.top - menuRect.top;
+	});
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (openSubmenuIndex >= 0) {
+		handleSubmenuKeydown(e);
+		return;
+	}
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			navigateDown();
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			navigateUp();
+			break;
+		case Keys.Enter:
+		case Keys.Space:
+			e.preventDefault();
+			if (activeIndex >= 0) activateItem(items[activeIndex]);
+			break;
+		case Keys.ArrowRight:
+			e.preventDefault();
+			if (activeIndex >= 0) {
+				const item = items[activeIndex];
+				if (item.type === 'item' && item.children?.length) openSubmenu(activeIndex);
+			}
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			close();
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			activeIndex = actionableIndices[0] ?? -1;
+			break;
+		case Keys.End:
+			e.preventDefault();
+			activeIndex = actionableIndices[actionableIndices.length - 1] ?? -1;
+			break;
+	}
+}
+
+function handleSubmenuKeydown(e: KeyboardEvent) {
+	const parentItem = items[openSubmenuIndex];
+	if (parentItem.type !== 'item' || !parentItem.children) return;
+	const subItems = parentItem.children.filter((i) => i.type === 'item') as MenuItem[];
+	const subActionable = parentItem.children.map((item, i) => ({ i, actionable: item.type === 'item' })).filter((x) => x.actionable).map((x) => x.i);
+
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			{
+				const pos = subActionable.indexOf(submenuActiveIndex);
+				submenuActiveIndex = pos < subActionable.length - 1 ? subActionable[pos + 1] : subActionable[0];
+			}
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			{
+				const pos = subActionable.indexOf(submenuActiveIndex);
+				submenuActiveIndex = pos > 0 ? subActionable[pos - 1] : subActionable[subActionable.length - 1];
+			}
+			break;
+		case Keys.Enter:
+		case Keys.Space:
+			e.preventDefault();
+			if (submenuActiveIndex >= 0) {
+				const subItem = parentItem.children[submenuActiveIndex];
+				if (subItem.type === 'item' && !subItem.disabled) {
+					subItem.action?.();
+					close();
+				}
+			}
+			break;
+		case Keys.ArrowLeft:
+		case Keys.Escape:
+			e.preventDefault();
+			openSubmenuIndex = -1;
+			submenuActiveIndex = -1;
+			break;
+	}
+}
+
+function handleClickOutside(e: MouseEvent) {
+	const target = e.target as Node;
+	if (menuEl && !menuEl.contains(target)) close();
+}
+
+// Portal: move menu DOM node to document.body to escape transform/overflow ancestors
+$effect(() => {
+	if (menuEl && isOpen) {
+		document.body.appendChild(menuEl);
+		// Re-clamp after portal move
+		tick().then(() => {
+			if (!menuEl) return;
+			const rect = menuEl.getBoundingClientRect();
+			if (rect.right > window.innerWidth) posX = window.innerWidth - rect.width - 4;
+			if (rect.bottom > window.innerHeight) posY = window.innerHeight - rect.height - 4;
+			if (posX < 0) posX = 4;
+			if (posY < 0) posY = 4;
+			menuEl.focus();
+		});
+		return () => {
+			if (menuEl?.parentNode === document.body) {
+				document.body.removeChild(menuEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	document.addEventListener('mousedown', handleClickOutside);
+	return () => {
+		document.removeEventListener('mousedown', handleClickOutside);
+		if (menuEl?.parentNode === document.body) {
+			document.body.removeChild(menuEl);
+		}
+	};
+});
+</script>
+
+{#if isOpen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
+	<div
+		bind:this={menuEl}
+		class={cn('salmex-ctx', className)}
+		style="left: {posX}px; top: {posY}px;"
+		role="menu"
+		tabindex="-1"
+		data-testid={testId}
+		onkeydown={handleKeydown}
+	>
+		{#each items as item, i}
+			{#if item.type === 'separator'}
+				<div class="salmex-ctx-separator" role="separator"></div>
+			{:else if item.type === 'group'}
+				<div class="salmex-ctx-group-label">{item.label}</div>
+				{#each item.items as groupItem}
+					{#if groupItem.type === 'item'}
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
+						<div
+							class={cn(
+								'salmex-ctx-item',
+								groupItem.disabled && 'salmex-ctx-item-disabled'
+							)}
+							role="menuitem"
+							tabindex="-1"
+							aria-disabled={groupItem.disabled || undefined}
+							onclick={() => { if (!groupItem.disabled) { groupItem.action?.(); close(); } }}
+							onkeydown={handleKeydown}
+							onmouseenter={() => { if (!groupItem.disabled) { activeIndex = -1; openSubmenuIndex = -1; } }}
+						>
+							{#if groupItem.icon}
+								<span class="salmex-ctx-icon" aria-hidden="true">{groupItem.icon}</span>
+							{:else}
+								<span class="salmex-ctx-icon-spacer"></span>
+							{/if}
+							<span class="salmex-ctx-label">{groupItem.label}</span>
+							{#if groupItem.shortcut}
+								<span class="salmex-ctx-shortcut">{groupItem.shortcut}</span>
+							{/if}
+						</div>
+					{:else if groupItem.type === 'separator'}
+						<div class="salmex-ctx-separator" role="separator"></div>
+					{/if}
+				{/each}
+			{:else if item.type === 'item'}
+				<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
+				<div
+					class={cn(
+						'salmex-ctx-item',
+						i === activeIndex && 'salmex-ctx-item-active',
+						item.disabled && 'salmex-ctx-item-disabled'
+					)}
+					role="menuitem"
+					tabindex="-1"
+					aria-disabled={item.disabled || undefined}
+					data-index={i}
+					onmouseenter={() => { if (!item.disabled) { activeIndex = i; if (item.children?.length) openSubmenu(i); else openSubmenuIndex = -1; } }}
+					onclick={() => activateItem(item)}
+					onkeydown={handleKeydown}
+				>
+					{#if item.icon}
+						<span class="salmex-ctx-icon" aria-hidden="true">{item.icon}</span>
+					{:else}
+						<span class="salmex-ctx-icon-spacer"></span>
+					{/if}
+					<span class="salmex-ctx-label">{item.label}</span>
+					{#if item.children?.length}
+						<span class="salmex-ctx-submenu-arrow" aria-hidden="true">&#9654;</span>
+					{:else if item.shortcut}
+						<span class="salmex-ctx-shortcut">{item.shortcut}</span>
+					{/if}
+				</div>
+
+				<!-- Submenu -->
+				{#if openSubmenuIndex === i && item.children?.length}
+					<div
+						class="salmex-ctx salmex-ctx-submenu"
+						style="left: {submenuPosX}px; top: {submenuPosY}px;"
+						role="menu"
+					>
+						{#each item.children as subItem, si}
+							{#if subItem.type === 'separator'}
+								<div class="salmex-ctx-separator" role="separator"></div>
+							{:else if subItem.type === 'item'}
+								<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
+								<div
+									class={cn(
+										'salmex-ctx-item',
+										si === submenuActiveIndex && 'salmex-ctx-item-active',
+										subItem.disabled && 'salmex-ctx-item-disabled'
+									)}
+									role="menuitem"
+									tabindex="-1"
+									aria-disabled={subItem.disabled || undefined}
+									onmouseenter={() => { if (!subItem.disabled) submenuActiveIndex = si; }}
+									onclick={() => { if (!subItem.disabled) { subItem.action?.(); close(); } }}
+									onkeydown={handleKeydown}
+								>
+									{#if subItem.icon}
+										<span class="salmex-ctx-icon" aria-hidden="true">{subItem.icon}</span>
+									{:else}
+										<span class="salmex-ctx-icon-spacer"></span>
+									{/if}
+									<span class="salmex-ctx-label">{subItem.label}</span>
+									{#if subItem.shortcut}
+										<span class="salmex-ctx-shortcut">{subItem.shortcut}</span>
+									{/if}
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   MENU PANEL — Raised, bold shadow
+	   ======================================== */
+	.salmex-ctx {
+		position: fixed;
+		z-index: var(--salmex-z-popover);
+		min-width: 180px;
+		max-width: 320px;
+		background: rgb(var(--salmex-bg-primary));
+		border: 3px solid rgb(var(--salmex-border-dark));
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			5px 5px 0 rgb(0 0 0 / 0.35);
+		padding: var(--salmex-space-1) 0;
+		outline: none;
+		font-family: var(--salmex-font-system);
+	}
+
+	:global([data-theme='dark']) .salmex-ctx {
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			5px 5px 0 rgb(0 0 0 / 0.7);
+	}
+
+	/* ========================================
+	   SUBMENU — Positioned relative to parent
+	   ======================================== */
+	.salmex-ctx-submenu {
+		position: absolute;
+	}
+
+	/* ========================================
+	   MENU ITEM
+	   ======================================== */
+	.salmex-ctx-item {
+		display: flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		padding: var(--salmex-space-2) var(--salmex-space-4);
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 600;
+		color: rgb(var(--salmex-text-primary));
+		cursor: pointer;
+		user-select: none;
+		white-space: nowrap;
+		transition: background var(--salmex-transition-fast);
+	}
+
+	.salmex-ctx-item-active {
+		background: rgb(var(--salmex-electric-blue));
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	:global([data-theme='dark']) .salmex-ctx-item-active {
+		background: rgb(var(--salmex-primary-light));
+		color: rgb(var(--salmex-midnight-black));
+	}
+
+	.salmex-ctx-item-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/* ========================================
+	   ICON
+	   ======================================== */
+	.salmex-ctx-icon {
+		flex-shrink: 0;
+		width: 16px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.salmex-ctx-icon-spacer {
+		flex-shrink: 0;
+		width: 16px;
+	}
+
+	/* ========================================
+	   LABEL & SHORTCUT
+	   ======================================== */
+	.salmex-ctx-label {
+		flex: 1;
+	}
+
+	.salmex-ctx-shortcut {
+		margin-left: var(--salmex-space-6);
+		font-size: var(--salmex-font-size-xs);
+		font-family: var(--salmex-font-mono);
+		font-weight: 600;
+		opacity: 0.6;
+		text-align: right;
+	}
+
+	.salmex-ctx-item-active .salmex-ctx-shortcut {
+		opacity: 0.85;
+	}
+
+	/* ========================================
+	   SUBMENU ARROW
+	   ======================================== */
+	.salmex-ctx-submenu-arrow {
+		margin-left: var(--salmex-space-4);
+		font-size: 8px;
+		opacity: 0.7;
+	}
+
+	.salmex-ctx-item-active .salmex-ctx-submenu-arrow {
+		opacity: 1;
+	}
+
+	/* ========================================
+	   SEPARATOR
+	   ======================================== */
+	.salmex-ctx-separator {
+		height: 0;
+		margin: var(--salmex-space-1) var(--salmex-space-2);
+		border-top: 1px solid rgb(var(--salmex-button-shadow));
+		border-bottom: 1px solid rgb(var(--salmex-button-highlight));
+	}
+
+	/* ========================================
+	   GROUP LABEL
+	   ======================================== */
+	.salmex-ctx-group-label {
+		padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.4px;
+		color: rgb(var(--salmex-text-secondary));
+		user-select: none;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-ctx-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,53 @@
+export interface MenuItem {
+    type: 'item';
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    icon?: string;
+    action?: () => void;
+    children?: MenuItemOrSeparator[];
+}
+export interface MenuSeparator {
+    type: 'separator';
+}
+export interface MenuGroup {
+    type: 'group';
+    label: string;
+    items: MenuItemOrSeparator[];
+}
+export type MenuItemOrSeparator = MenuItem | MenuSeparator | MenuGroup;
+interface Props {
+    /** Menu items */
+    items: MenuItemOrSeparator[];
+    /** Additional CSS class */
+    class?: string;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * ContextMenu
+ *
+ * Win2K × Basquiat — Right-click context menu with raised panel, keyboard navigation,
+ * separators, section headers, submenus, and keyboard shortcut hints.
+ *
+ * @example
+ * <ContextMenu
+ *   items={[
+ *     { type: 'item', label: 'Cut', shortcut: 'Ctrl+X', action: handleCut },
+ *     { type: 'item', label: 'Copy', shortcut: 'Ctrl+C', action: handleCopy },
+ *     { type: 'separator' },
+ *     { type: 'item', label: 'Paste', shortcut: 'Ctrl+V', action: handlePaste },
+ *   ]}
+ *   bind:this={menu}
+ * />
+ * <div oncontextmenu={(e) => { e.preventDefault(); menu.open(e.clientX, e.clientY); }}>
+ *   Right click here
+ * </div>
+ */
+declare const ContextMenu: import("svelte").Component<Props, {
+    open: (x: number, y: number) => void;
+    close: () => void;
+}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;
+//# sourceMappingURL=ContextMenu.svelte.d.ts.map

package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/dialogs/ContextMenu/ContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,QAAQ;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAQvE,UAAU,KAAK;IACd,iBAAiB;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsSD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,WAAW;cA5RC,MAAM,KAAK,MAAM;;MA4RsB,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/dialogs/ContextMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ContextMenu } from './ContextMenu.svelte';
+export type { MenuItem, MenuSeparator, MenuGroup, MenuItemOrSeparator } from './ContextMenu.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/dialogs/ContextMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dialogs/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/dialogs/ContextMenu/index.js

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