@salmexio/ui 1.0.0 → 1.2.0

package/dist/layout/ThermalBackground/ThermalBackground.svelte

@@ -0,0 +1,275 @@
+<!--
+  ThermalBackground — Dynamic INFRARED background
+
+  Layered ambient background with thermal blob drift
+  and film grain. Pure CSS — zero JS runtime cost.
+
+  Usage:
+    <ThermalBackground />              — default (all layers)
+    <ThermalBackground grain={false} /> — no grain overlay
+    <ThermalBackground intensity="low" /> — subtler blobs
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Show film grain overlay */
+		grain?: boolean;
+		/** Blob intensity: low = barely visible, default = subtle, high = pronounced */
+		intensity?: 'low' | 'default' | 'high';
+		/** Additional CSS class */
+		class?: string;
+		/** Test ID */
+		testId?: string;
+	}
+
+	let {
+		grain = true,
+		intensity = 'default',
+		class: className = '',
+		testId = undefined,
+	}: Props = $props();
+</script>
+
+<div
+	class="sx-thermal-bg sx-thermal-{intensity} {className}"
+	aria-hidden="true"
+	data-testid={testId}
+>
+	<!-- Layer 1: Thermal blobs — large diffuse orbs drifting independently -->
+	<div class="sx-thermal-blobs">
+		<div class="sx-thermal-blob sx-thermal-blob-1"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-2"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-3"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-4"></div>
+	</div>
+
+	<!-- Layer 2: Animated film grain -->
+	{#if grain}
+		<div class="sx-thermal-grain"></div>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   ROOT CONTAINER — fixed fullscreen backdrop
+	   ======================================== */
+
+	.sx-thermal-bg {
+		position: fixed;
+		inset: 0;
+		z-index: 0;
+		overflow: hidden;
+		pointer-events: none;
+		background: var(--sx-color-base);
+	}
+
+	/* ========================================
+	   THERMAL BLOBS — Drifting infrared orbs
+	   Large, soft radial gradients that move on
+	   independent orbits. Each has a unique size,
+	   color, speed, and path.
+	   ======================================== */
+
+	.sx-thermal-blobs {
+		position: absolute;
+		inset: -50%;
+		width: 200%;
+		height: 200%;
+	}
+
+	.sx-thermal-blob {
+		position: absolute;
+		border-radius: 50%;
+		filter: blur(80px);
+		will-change: transform;
+	}
+
+	/* Blob 1 — Vermilion/primary — largest, slowest */
+	.sx-thermal-blob-1 {
+		width: 45vmax;
+		height: 45vmax;
+		top: 10%;
+		left: 15%;
+		background: radial-gradient(
+			circle,
+			rgba(255, 107, 53, 0.08) 0%,
+			rgba(255, 107, 53, 0.02) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-1 35s ease-in-out infinite;
+	}
+
+	/* Blob 2 — Brass/secondary — medium, offset orbit */
+	.sx-thermal-blob-2 {
+		width: 35vmax;
+		height: 35vmax;
+		top: 55%;
+		right: 10%;
+		background: radial-gradient(
+			circle,
+			rgba(200, 168, 78, 0.06) 0%,
+			rgba(200, 168, 78, 0.015) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-2 42s ease-in-out infinite;
+	}
+
+	/* Blob 3 — Teal — smallest, fastest, cool counterpoint */
+	.sx-thermal-blob-3 {
+		width: 30vmax;
+		height: 30vmax;
+		bottom: 15%;
+		left: 40%;
+		background: radial-gradient(
+			circle,
+			rgba(61, 139, 139, 0.06) 0%,
+			rgba(61, 139, 139, 0.015) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-3 28s ease-in-out infinite;
+	}
+
+	/* Blob 4 — Deep vermilion — secondary heat signature */
+	.sx-thermal-blob-4 {
+		width: 38vmax;
+		height: 38vmax;
+		top: 40%;
+		left: 60%;
+		background: radial-gradient(
+			circle,
+			rgba(224, 85, 32, 0.05) 0%,
+			rgba(224, 85, 32, 0.01) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-4 50s ease-in-out infinite;
+	}
+
+	/* ========================================
+	   BLOB DRIFT ORBITS
+	   Each blob traces a unique Lissajous-like path
+	   using translate transforms. Different durations
+	   ensure they never sync up, creating organic motion.
+	   ======================================== */
+
+	@keyframes sx-thermal-drift-1 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		25%    { transform: translate(12%, -8%) scale(1.05); }
+		50%    { transform: translate(-5%, 15%) scale(0.95); }
+		75%    { transform: translate(-15%, -5%) scale(1.08); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-2 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		20%    { transform: translate(-18%, 8%) scale(1.1); }
+		40%    { transform: translate(8%, -12%) scale(0.9); }
+		60%    { transform: translate(-8%, -18%) scale(1.05); }
+		80%    { transform: translate(15%, 5%) scale(0.95); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-3 {
+		0%     { transform: translate(0%, 0%) rotate(0deg) scale(1); }
+		33%    { transform: translate(20%, -15%) rotate(5deg) scale(1.1); }
+		66%    { transform: translate(-15%, 10%) rotate(-3deg) scale(0.92); }
+		100%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-4 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		30%    { transform: translate(-10%, 12%) scale(1.06); }
+		60%    { transform: translate(15%, -8%) scale(0.94); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	/* ========================================
+	   INTENSITY VARIANTS
+	   Control blob visibility without changing motion
+	   ======================================== */
+
+	.sx-thermal-low .sx-thermal-blobs {
+		opacity: 0.5;
+	}
+
+	.sx-thermal-default .sx-thermal-blobs {
+		opacity: 1;
+	}
+
+	.sx-thermal-high .sx-thermal-blobs {
+		opacity: 1.5;
+	}
+
+	.sx-thermal-high .sx-thermal-blob-1 {
+		background: radial-gradient(
+			circle,
+			rgba(255, 107, 53, 0.14) 0%,
+			rgba(255, 107, 53, 0.04) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-2 {
+		background: radial-gradient(
+			circle,
+			rgba(200, 168, 78, 0.10) 0%,
+			rgba(200, 168, 78, 0.03) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-3 {
+		background: radial-gradient(
+			circle,
+			rgba(61, 139, 139, 0.10) 0%,
+			rgba(61, 139, 139, 0.03) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-4 {
+		background: radial-gradient(
+			circle,
+			rgba(224, 85, 32, 0.09) 0%,
+			rgba(224, 85, 32, 0.02) 50%,
+			transparent 70%
+		);
+	}
+
+	/* ========================================
+	   FILM GRAIN — Animated noise texture
+	   SVG feTurbulence noise with subtle position
+	   stepping for a living grain effect.
+	   ======================================== */
+
+	.sx-thermal-grain {
+		position: absolute;
+		inset: -50%;
+		width: 300%;
+		height: 300%;
+		opacity: 0.03;
+		mix-blend-mode: overlay;
+		pointer-events: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+		background-size: 256px 256px;
+		animation: sx-thermal-grain-drift 0.4s steps(4) infinite;
+	}
+
+	@keyframes sx-thermal-grain-drift {
+		0%   { transform: translate(0, 0); }
+		25%  { transform: translate(-5%, -5%); }
+		50%  { transform: translate(3%, -8%); }
+		75%  { transform: translate(-8%, 2%); }
+		100% { transform: translate(0, 0); }
+	}
+
+	/* ========================================
+	   REDUCED MOTION — Static fallback
+	   ======================================== */
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-thermal-blob,
+		.sx-thermal-grain {
+			animation: none !important;
+		}
+	}
+</style>

package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Show film grain overlay */
+    grain?: boolean;
+    /** Blob intensity: low = barely visible, default = subtle, high = pronounced */
+    intensity?: 'low' | 'default' | 'high';
+    /** Additional CSS class */
+    class?: string;
+    /** Test ID */
+    testId?: string;
+}
+declare const ThermalBackground: import("svelte").Component<Props, {}, "">;
+type ThermalBackground = ReturnType<typeof ThermalBackground>;
+export default ThermalBackground;
+//# sourceMappingURL=ThermalBackground.svelte.d.ts.map

package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThermalBackground.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/ThermalBackground.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,SAAS,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/layout/ThermalBackground/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThermalBackground } from './ThermalBackground.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/ThermalBackground/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/layout/ThermalBackground/index.js

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

package/dist/layout/index.d.ts

@@ -1,3 +1,4 @@
 export { Card } from './Card/index.js';
 export { Container } from './Container/index.js';
+export { ThermalBackground } from './ThermalBackground/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/layout/index.js

@@ -1,2 +1,3 @@
 export { Card } from './Card/index.js';
 export { Container } from './Container/index.js';
+export { ThermalBackground } from './ThermalBackground/index.js';

package/dist/navigation/CommandPalette/CommandPalette.svelte

@@ -1,7 +1,7 @@
 <!--
   @component CommandPalette
 
-  Neo-Brutalist Dark — Premium keyboard-first command launcher.
+  INFRARED — Premium keyboard-first command launcher.
   Glass backdrop, entrance animations, fuzzy search with match highlighting,
   categorised results, shortcut display, live result count announcements.
 
@@ -467,14 +467,37 @@ function getItemId(itemId: string): string {
 		border: 1px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-lg);
 		box-shadow:
-			var(--sx-shadow-xl),
-			0 0 0 1px rgba(255, 255, 255, 0.04),
-			0 0 60px rgba(0, 0, 0, 0.5);
+			/* 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 4px 0 0 rgba(0, 0, 0, 0.06),
+			/* Deep ambient shadow */
+			0 8px 24px -4px rgba(0, 0, 0, 0.5),
+			0 16px 48px -8px rgba(0, 0, 0, 0.3),
+			/* Warm forge glow */
+			0 0 40px -10px rgba(255, 107, 53, 0.1);
 		font-family: var(--sx-font-body);
 		overflow: hidden;
 		animation: sx-cmd-panel-in 200ms var(--sx-ease-out) both;
 	}
 
+	/* Top-lit bevel */
+	.sx-command::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.04) 0%,
+			transparent 25%,
+			rgba(0, 0, 0, 0.04) 100%
+		);
+		pointer-events: none;
+		z-index: 10;
+	}
+
 	.sx-command-exit {
 		animation: sx-cmd-panel-out 120ms ease-in both;
 	}
@@ -505,17 +528,24 @@ function getItemId(itemId: string): string {
 	   SEARCH FIELD
 	   ======================================== */
 	.sx-command-search {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		gap: var(--sx-space-3);
 		padding: var(--sx-space-4) var(--sx-space-5);
 		border-bottom: 1px solid var(--sx-color-border);
+		/* Recessed search well */
+		background: rgba(0, 0, 0, 0.08);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.2),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.04);
 	}
 
 	.sx-command-search-icon {
 		flex-shrink: 0;
 		display: flex;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		opacity: 0.7;
 	}
 
@@ -559,6 +589,8 @@ function getItemId(itemId: string): string {
 	   RESULTS LIST
 	   ======================================== */
 	.sx-command-results {
+		position: relative;
+		z-index: 1;
 		flex: 1;
 		overflow-y: auto;
 		overscroll-behavior: contain;
@@ -639,13 +671,13 @@ function getItemId(itemId: string): string {
 	}
 
 	.sx-command-item-active {
-		background: var(--sx-color-cyan-hover);
+		background: var(--sx-color-primary-hover);
 		color: var(--sx-color-text);
-		border-left-color: var(--sx-color-cyan);
+		border-left-color: var(--sx-color-primary);
 	}
 
 	.sx-command-item:active:not(.sx-command-item-disabled) {
-		background: var(--sx-color-cyan-active);
+		background: var(--sx-color-primary-active);
 	}
 
 	.sx-command-item-disabled {
@@ -664,7 +696,7 @@ function getItemId(itemId: string): string {
 	}
 
 	.sx-command-item-active .sx-command-item-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-command-item-content {
@@ -691,12 +723,12 @@ function getItemId(itemId: string): string {
 	/* Match highlighting */
 	.sx-command-match {
 		background: none;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		font-weight: 700;
 	}
 
 	.sx-command-item-active .sx-command-match {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-command-item-desc {
@@ -735,6 +767,8 @@ function getItemId(itemId: string): string {
 	   FOOTER
 	   ======================================== */
 	.sx-command-footer {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		gap: var(--sx-space-5);

package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts

@@ -30,7 +30,7 @@ interface Props {
 /**
  * CommandPalette
  *
- * Neo-Brutalist Dark — Premium keyboard-first command launcher.
+ * INFRARED — Premium keyboard-first command launcher.
  * Glass backdrop, entrance animations, fuzzy search with match highlighting,
  * categorised results, shortcut display, live result count announcements.
  *