@salmexio/ui 0.4.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@salmexio/ui",
-	"version": "0.4.0",
-	"description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
+	"version": "1.1.0",
+	"description": "Salmex I/O Design System — INFRARED component library for Salmex products",
 	"type": "module",
 	"license": "UNLICENSED",
 	"publishConfig": {
@@ -74,10 +74,10 @@
 		"sveltekit",
 		"ui",
 		"components",
-		"win2k",
+		"infrared",
+		"dark-mode",
 		"accessibility",
-		"typescript",
-		"ai-assistant"
+		"typescript"
 	],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts"

package/dist/windowing/Window/Window.svelte

@@ -1,637 +0,0 @@
-<!--
-  @component Window
-
-  Win2K x Basquiat -- Draggable window with title bar chrome, minimize/maximize/close
-  controls, 3D beveled borders, and flat shadow. Lives inside a WindowManager container.
-  Non-modal dialog (role="dialog") -- windows do not trap focus.
-  Title bar supports pointer-based dragging with container boundary clamping.
-
-  @example
-  <WindowManager>
-    <Window id="notes" title="Notes">
-      <p>Window body content.</p>
-    </Window>
-  </WindowManager>
--->
-<script lang="ts">
-import type { Snippet } from 'svelte';
-import { getContext, onMount, onDestroy } from 'svelte';
-import { cn } from '../../utils/cn.js';
-import { generateId, Keys } from '../../utils/keyboard.js';
-import type { WindowManagerState } from '../windowStore.svelte.js';
-
-type WindowSize = 'sm' | 'md' | 'lg' | 'xl';
-
-interface Props {
-	/** Unique window identifier. Auto-generated if omitted. */
-	id?: string;
-	/** Title displayed in the title bar. */
-	title?: string;
-	/** Initial width in pixels. */
-	width?: number;
-	/** Initial height in pixels. */
-	height?: number;
-	/** Initial X position (px from container left). */
-	x?: number;
-	/** Initial Y position (px from container top). */
-	y?: number;
-	/** Preset size (overrides width/height). */
-	size?: WindowSize;
-	/** Show minimize button. */
-	minimizable?: boolean;
-	/** Show maximize button. */
-	maximizable?: boolean;
-	/** Show close button. */
-	closable?: boolean;
-	/** Prevent the window from being dragged. */
-	disableDrag?: boolean;
-	/** Icon snippet rendered before the title. */
-	icon?: Snippet;
-	/** Custom title bar content (overrides title text). */
-	titleBar?: Snippet;
-	/** Status bar at bottom of window. */
-	statusBar?: Snippet;
-	/** Main body content. */
-	children?: Snippet;
-	/** Called when close button is clicked. */
-	onclose?: () => void;
-	/** Called when minimize button is clicked. */
-	onminimize?: () => void;
-	/** Called when maximize/restore button is clicked. */
-	onmaximize?: () => void;
-	/** Called when window gains focus. */
-	onfocus?: () => void;
-	/** Additional CSS class. */
-	class?: string;
-	/** Test ID for automated testing. */
-	testId?: string;
-}
-
-let {
-	id,
-	title = 'Window',
-	width = 420,
-	height = 320,
-	x = 20,
-	y = 20,
-	size,
-	minimizable = true,
-	maximizable = true,
-	closable = true,
-	disableDrag = false,
-	icon,
-	titleBar,
-	statusBar,
-	children,
-	onclose,
-	onminimize,
-	onmaximize,
-	onfocus,
-	class: className = '',
-	testId
-}: Props = $props();
-
-const sizeMap: Record<WindowSize, { w: number; h: number }> = {
-	sm: { w: 320, h: 240 },
-	md: { w: 420, h: 320 },
-	lg: { w: 560, h: 420 },
-	xl: { w: 720, h: 520 }
-};
-
-const resolvedWidth = $derived(size ? sizeMap[size].w : width);
-const resolvedHeight = $derived(size ? sizeMap[size].h : height);
-
-const windowId = $derived(id ?? generateId('win'));
-const titleId = $derived(`${windowId}-title`);
-
-const manager = getContext<WindowManagerState>('salmex-window-manager');
-
-let windowEl = $state<HTMLDivElement | null>(null);
-let isDragging = $state(false);
-let dragOffset = $state({ x: 0, y: 0 });
-
-// Register with manager on mount
-onMount(() => {
-	manager.register(windowId, title, {
-		x,
-		y,
-		width: resolvedWidth,
-		height: resolvedHeight
-	});
-});
-
-onDestroy(() => {
-	manager.unregister(windowId);
-});
-
-const win = $derived(manager.getWindow(windowId));
-const isMinimized = $derived(win?.minimized ?? false);
-const isMaximized = $derived(win?.maximized ?? false);
-const isFocused = $derived(win?.focused ?? false);
-
-// Sync title changes
-$effect(() => {
-	const w = manager.getWindow(windowId);
-	if (w && w.title !== title) {
-		w.title = title;
-	}
-});
-
-function handleMouseDown() {
-	if (!isFocused) {
-		manager.focus(windowId);
-		onfocus?.();
-	}
-}
-
-function handleTitleBarPointerDown(e: PointerEvent) {
-	if (disableDrag || isMaximized) return;
-	// Only drag on primary button, not on control buttons
-	if (e.button !== 0) return;
-	const target = e.target as HTMLElement;
-	if (target.closest('.salmex-win-controls')) return;
-
-	isDragging = true;
-	const currentWin = manager.getWindow(windowId);
-	if (!currentWin) return;
-	dragOffset = {
-		x: e.clientX - currentWin.x,
-		y: e.clientY - currentWin.y
-	};
-	(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-	e.preventDefault();
-}
-
-function handlePointerMove(e: PointerEvent) {
-	if (!isDragging) return;
-	const container = windowEl?.parentElement;
-	if (!container) return;
-	const rect = container.getBoundingClientRect();
-	const currentWin = manager.getWindow(windowId);
-	if (!currentWin) return;
-
-	// Clamp: keep at least 60px of title bar visible
-	const minVisible = 60;
-	const newX = Math.max(
-		-(currentWin.width - minVisible),
-		Math.min(e.clientX - dragOffset.x, rect.width - minVisible)
-	);
-	const newY = Math.max(0, Math.min(e.clientY - dragOffset.y, rect.height - 32));
-	manager.move(windowId, newX, newY);
-}
-
-function handlePointerUp() {
-	isDragging = false;
-}
-
-function handleMinimize() {
-	manager.minimize(windowId);
-	onminimize?.();
-}
-
-function handleMaximize() {
-	const container = windowEl?.parentElement;
-	if (!container) return;
-	if (isMaximized) {
-		manager.restore(windowId);
-	} else {
-		const rect = container.getBoundingClientRect();
-		manager.maximize(windowId, rect.width, rect.height);
-	}
-	onmaximize?.();
-}
-
-function handleClose() {
-	onclose?.();
-	manager.close(windowId);
-}
-
-function handleTitleBarDblClick() {
-	if (maximizable) handleMaximize();
-}
-
-function handleKeyDown(e: KeyboardEvent) {
-	if (e.key === Keys.Escape && closable) {
-		e.stopPropagation();
-		handleClose();
-	}
-}
-</script>
-
-{#if win && !isMinimized}
-	<div
-		bind:this={windowEl}
-		id={windowId}
-		class={cn(
-			'salmex-win',
-			isFocused && 'salmex-win-focused',
-			isMaximized && 'salmex-win-maximized',
-			isDragging && 'salmex-win-dragging',
-			className
-		)}
-		style="left: {win.x}px; top: {win.y}px; width: {win.width}px; height: {win.height}px; z-index: {win.zIndex};"
-		role="dialog"
-		aria-labelledby={titleId}
-		tabindex="-1"
-		data-testid={testId}
-		data-window-id={windowId}
-		onmousedown={handleMouseDown}
-		onkeydown={handleKeyDown}
-	>
-		<!-- Title bar -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="salmex-win-titlebar"
-			onpointerdown={handleTitleBarPointerDown}
-			onpointermove={handlePointerMove}
-			onpointerup={handlePointerUp}
-			ondblclick={handleTitleBarDblClick}
-			style="touch-action: none;"
-		>
-			<div id={titleId} class="salmex-win-title-content">
-				{#if titleBar}
-					{@render titleBar()}
-				{:else}
-					{#if icon}
-						<span class="salmex-win-icon" aria-hidden="true">{@render icon()}</span>
-					{/if}
-					<span class="salmex-win-title-text">{title}</span>
-				{/if}
-			</div>
-
-			<div class="salmex-win-controls">
-				{#if minimizable}
-					<button
-						type="button"
-						class="salmex-win-btn salmex-win-btn-minimize"
-						onclick={handleMinimize}
-						aria-label="Minimize {title}"
-					>
-						<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-							<line x1="2" y1="9" x2="10" y2="9" stroke="currentColor" stroke-width="2" />
-						</svg>
-					</button>
-				{/if}
-				{#if maximizable}
-					<button
-						type="button"
-						class="salmex-win-btn salmex-win-btn-maximize"
-						onclick={handleMaximize}
-						aria-label={isMaximized ? `Restore ${title}` : `Maximize ${title}`}
-					>
-						{#if isMaximized}
-							<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-								<rect x="3" y="1" width="8" height="8" stroke="currentColor" stroke-width="1.5" fill="none" />
-								<rect x="1" y="3" width="8" height="8" stroke="currentColor" stroke-width="1.5" fill="rgb(var(--salmex-button-face))" />
-							</svg>
-						{:else}
-							<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-								<rect x="1" y="1" width="10" height="10" stroke="currentColor" stroke-width="1.5" fill="none" />
-								<line x1="1" y1="2.5" x2="11" y2="2.5" stroke="currentColor" stroke-width="2" />
-							</svg>
-						{/if}
-					</button>
-				{/if}
-				{#if closable}
-					<button
-						type="button"
-						class="salmex-win-btn salmex-win-btn-close"
-						onclick={handleClose}
-						aria-label="Close {title}"
-					>
-						<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-							<line x1="2" y1="2" x2="10" y2="10" stroke="currentColor" stroke-width="2" />
-							<line x1="10" y1="2" x2="2" y2="10" stroke="currentColor" stroke-width="2" />
-						</svg>
-					</button>
-				{/if}
-			</div>
-		</div>
-
-		<!-- Body -->
-		{#if children}
-			<div class="salmex-win-body">
-				{@render children()}
-			</div>
-		{/if}
-
-		<!-- Status bar -->
-		{#if statusBar}
-			<div class="salmex-win-statusbar">
-				{@render statusBar()}
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	/* ========================================
-	   WINDOW CONTAINER
-	   ======================================== */
-
-	.salmex-win {
-		position: absolute;
-		display: flex;
-		flex-direction: column;
-		background: rgb(var(--salmex-window-surface));
-		border: 3px solid rgb(var(--salmex-button-dark-edge));
-		border-radius: var(--salmex-radius-md);
-		overflow: hidden;
-		box-shadow:
-			/* 3D raised outer edge */
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			/* Flat bold drop shadow */
-			4px 4px 3px rgb(0 0 0 / 0.25);
-		outline: none;
-		transition:
-			box-shadow var(--salmex-transition-fast),
-			opacity var(--salmex-transition-fast);
-		min-width: 200px;
-		min-height: 120px;
-	}
-
-	.salmex-win:not(.salmex-win-focused) {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			3px 3px 2px rgb(0 0 0 / 0.15);
-	}
-
-	:global([data-theme='dark']) .salmex-win {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 3px rgb(0 0 0 / 0.5);
-	}
-
-	:global([data-theme='dark']) .salmex-win:not(.salmex-win-focused) {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			3px 3px 2px rgb(0 0 0 / 0.35);
-	}
-
-	.salmex-win-maximized {
-		border-width: 2px;
-		border-radius: 0;
-		box-shadow: none !important;
-	}
-
-	.salmex-win-dragging {
-		opacity: 0.92;
-		cursor: grabbing;
-	}
-
-	/* ========================================
-	   TITLE BAR
-	   ======================================== */
-
-	.salmex-win-titlebar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--salmex-space-2);
-		padding: var(--salmex-space-1) var(--salmex-space-2);
-		/* Win2K active title gradient */
-		background: linear-gradient(
-			90deg,
-			rgb(var(--salmex-electric-blue)),
-			rgb(var(--salmex-titlebar-bold))
-		);
-		color: rgb(var(--salmex-chalk-white));
-		border-bottom: 1px solid rgb(var(--salmex-button-dark-edge));
-		border-radius: 3px 3px 0 0;
-		flex-shrink: 0;
-		font-family: var(--salmex-font-display);
-		user-select: none;
-		cursor: grab;
-		min-height: 28px;
-	}
-
-	.salmex-win-dragging .salmex-win-titlebar {
-		cursor: grabbing;
-	}
-
-	.salmex-win-maximized .salmex-win-titlebar {
-		cursor: default;
-	}
-
-	/* Inactive title bar - gray gradient (Win2K) */
-	.salmex-win:not(.salmex-win-focused) .salmex-win-titlebar {
-		background: linear-gradient(
-			90deg,
-			rgb(var(--salmex-button-shadow)),
-			rgb(var(--salmex-border-light))
-		);
-		color: rgb(var(--salmex-text-disabled));
-	}
-
-	/* Dark mode — darker gradient for better text contrast (~5-6:1) */
-	:global([data-theme='dark']) .salmex-win-titlebar {
-		background: linear-gradient(
-			90deg,
-			rgb(0 75 180),
-			rgb(0 105 210)
-		);
-	}
-
-	:global([data-theme='dark']) .salmex-win:not(.salmex-win-focused) .salmex-win-titlebar {
-		background: linear-gradient(
-			90deg,
-			rgb(50 50 50),
-			rgb(70 70 70)
-		);
-		color: rgb(var(--salmex-text-disabled));
-	}
-
-	/* Graffiti yellow underline on focused title bar */
-	.salmex-win-focused .salmex-win-titlebar::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 50%;
-		height: 3px;
-		background: rgb(var(--salmex-crown-yellow));
-		border-radius: 0 2px 0 0;
-	}
-
-	:root:not([data-theme='dark']) .salmex-win-focused .salmex-win-titlebar::after {
-		background: rgb(var(--salmex-street-yellow));
-		box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
-	}
-
-	.salmex-win-titlebar {
-		position: relative;
-	}
-
-	/* ========================================
-	   TITLE CONTENT
-	   ======================================== */
-
-	.salmex-win-title-content {
-		display: flex;
-		align-items: center;
-		gap: var(--salmex-space-2);
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-	}
-
-	.salmex-win-icon {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		width: 16px;
-		height: 16px;
-		font-size: 14px;
-	}
-
-	.salmex-win-title-text {
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 900;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		line-height: 1.3;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-shadow: 1px 1px 2px rgb(0 0 0 / 0.3);
-	}
-
-	.salmex-win:not(.salmex-win-focused) .salmex-win-title-text {
-		text-shadow: none;
-	}
-
-	/* ========================================
-	   WINDOW CONTROL BUTTONS (Minimize / Maximize / Close)
-	   ======================================== */
-
-	.salmex-win-controls {
-		display: flex;
-		gap: 2px;
-		flex-shrink: 0;
-	}
-
-	.salmex-win-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 22px;
-		height: 22px;
-		padding: 0;
-		background: rgb(var(--salmex-button-face));
-		border: 1px solid rgb(var(--salmex-button-dark-edge));
-		border-radius: var(--salmex-radius-sm);
-		color: rgb(var(--salmex-text-primary));
-		cursor: pointer;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow));
-		transition: all var(--salmex-transition-fast);
-	}
-
-	.salmex-win-btn:hover {
-		background: rgb(var(--salmex-button-light));
-	}
-
-	.salmex-win-btn:active {
-		box-shadow:
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow));
-		transform: translate(1px, 1px);
-	}
-
-	.salmex-win-btn:focus-visible {
-		outline: none;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 2px 4px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-win-btn:focus-visible {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 2px 3px rgb(var(--salmex-crown-yellow));
-	}
-
-	/* Close button — red accent on hover */
-	.salmex-win-btn-close:hover {
-		background: rgb(var(--salmex-street-red));
-		color: rgb(var(--salmex-chalk-white));
-	}
-
-	/* ========================================
-	   BODY
-	   ======================================== */
-
-	.salmex-win-body {
-		flex: 1;
-		overflow: auto;
-		padding: var(--salmex-space-4);
-		font-family: var(--salmex-font-system);
-		color: rgb(var(--salmex-text-primary));
-		min-height: 0;
-		background: rgb(var(--salmex-bg-primary));
-	}
-
-	/* Sunken inset for the body area — Win2K content area.
-	   L-shaped top+left inset reads "sunken" without the full
-	   4-sided frame that would double-frame child inputs. */
-	.salmex-win-body {
-		box-shadow:
-			inset 0 1px 0 rgb(var(--salmex-button-shadow)),
-			inset 1px 0 0 rgb(var(--salmex-button-shadow) / 0.5);
-	}
-
-	:global([data-theme='dark']) .salmex-win-body {
-		box-shadow:
-			inset 0 1px 0 rgb(0 0 0 / 0.4),
-			inset 1px 0 0 rgb(0 0 0 / 0.2);
-	}
-
-	/* ========================================
-	   STATUS BAR
-	   ======================================== */
-
-	.salmex-win-statusbar {
-		display: flex;
-		align-items: center;
-		gap: var(--salmex-space-2);
-		padding: var(--salmex-space-1) var(--salmex-space-3);
-		background: rgb(var(--salmex-window-surface));
-		border-top: 1px solid rgb(var(--salmex-button-highlight));
-		border-radius: 0 0 3px 3px;
-		font-size: var(--salmex-font-size-xs);
-		font-family: var(--salmex-font-system);
-		color: rgb(var(--salmex-text-secondary));
-		flex-shrink: 0;
-		/* Sunken inset segments */
-		box-shadow: inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
-	}
-
-	:global([data-theme='dark']) .salmex-win-statusbar {
-		border-top-color: rgb(var(--salmex-button-shadow));
-		box-shadow:
-			inset 1px 1px 0 rgb(0 0 0 / 0.3),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
-	}
-
-	/* ========================================
-	   REDUCED MOTION
-	   ======================================== */
-
-	@media (prefers-reduced-motion: reduce) {
-		.salmex-win {
-			transition: none;
-		}
-		.salmex-win-btn {
-			transition: none;
-		}
-	}
-</style>