@salmexio/ui 0.4.0 → 1.1.0

package/dist/layout/Container/Container.svelte

@@ -1,8 +1,8 @@
 <!--
   @component Container
 
-  Win2K × Basquiat — Responsive layout wrapper. Max-width, padding, optional centering.
-  Sharp edges, no rounded corners; supports semantic elements.
+  INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
+  Pure layout utility; supports semantic elements.
 -->
 <script lang="ts">
 import type { Snippet } from 'svelte';
@@ -45,11 +45,11 @@ const resolvedPaddingY = $derived(paddingY ?? 'none');
 	this={as}
 	{id}
 	class={cn(
-		'salmex-container',
-		`salmex-container-${size}`,
-		`salmex-container-px-${resolvedPaddingX}`,
-		`salmex-container-py-${resolvedPaddingY}`,
-		centered && 'salmex-container-centered',
+		'sx-container',
+		`sx-container-${size}`,
+		`sx-container-px-${resolvedPaddingX}`,
+		`sx-container-py-${resolvedPaddingY}`,
+		centered && 'sx-container-centered',
 		className
 	)}
 	{...restProps}
@@ -60,143 +60,143 @@ const resolvedPaddingY = $derived(paddingY ?? 'none');
 </svelte:element>
 
 <style>
-	.salmex-container {
+	.sx-container {
 		width: 100%;
 	}
 
-	.salmex-container-centered {
+	.sx-container-centered {
 		margin-left: auto;
 		margin-right: auto;
 	}
 
-	.salmex-container-xs {
+	.sx-container-xs {
 		max-width: 20rem;
 	}
 
-	.salmex-container-sm {
+	.sx-container-sm {
 		max-width: 42rem;
 	}
 
-	.salmex-container-md {
+	.sx-container-md {
 		max-width: 56rem;
 	}
 
-	.salmex-container-lg {
+	.sx-container-lg {
 		max-width: 64rem;
 	}
 
-	.salmex-container-xl {
+	.sx-container-xl {
 		max-width: 72rem;
 	}
 
-	.salmex-container-2xl {
+	.sx-container-2xl {
 		max-width: 80rem;
 	}
 
-	.salmex-container-prose {
+	.sx-container-prose {
 		max-width: 65ch;
 	}
 
-	.salmex-container-full {
+	.sx-container-full {
 		max-width: 100%;
 	}
 
-	.salmex-container-px-none {
+	.sx-container-px-none {
 		padding-left: 0;
 		padding-right: 0;
 	}
 
-	.salmex-container-px-sm {
-		padding-left: var(--salmex-space-4);
-		padding-right: var(--salmex-space-4);
+	.sx-container-px-sm {
+		padding-left: var(--sx-space-4);
+		padding-right: var(--sx-space-4);
 	}
 
-	.salmex-container-px-md {
-		padding-left: var(--salmex-space-6);
-		padding-right: var(--salmex-space-6);
+	.sx-container-px-md {
+		padding-left: var(--sx-space-6);
+		padding-right: var(--sx-space-6);
 	}
 
-	.salmex-container-px-lg {
-		padding-left: var(--salmex-space-8);
-		padding-right: var(--salmex-space-8);
+	.sx-container-px-lg {
+		padding-left: var(--sx-space-8);
+		padding-right: var(--sx-space-8);
 	}
 
-	.salmex-container-px-xl {
-		padding-left: var(--salmex-space-10);
-		padding-right: var(--salmex-space-10);
+	.sx-container-px-xl {
+		padding-left: var(--sx-space-10);
+		padding-right: var(--sx-space-10);
 	}
 
 	@media (min-width: 640px) {
-		.salmex-container-px-sm {
-			padding-left: var(--salmex-space-6);
-			padding-right: var(--salmex-space-6);
+		.sx-container-px-sm {
+			padding-left: var(--sx-space-6);
+			padding-right: var(--sx-space-6);
 		}
-		.salmex-container-px-md {
-			padding-left: var(--salmex-space-8);
-			padding-right: var(--salmex-space-8);
+		.sx-container-px-md {
+			padding-left: var(--sx-space-8);
+			padding-right: var(--sx-space-8);
 		}
-		.salmex-container-px-lg {
-			padding-left: var(--salmex-space-10);
-			padding-right: var(--salmex-space-10);
+		.sx-container-px-lg {
+			padding-left: var(--sx-space-10);
+			padding-right: var(--sx-space-10);
 		}
-		.salmex-container-px-xl {
-			padding-left: var(--salmex-space-12);
-			padding-right: var(--salmex-space-12);
+		.sx-container-px-xl {
+			padding-left: var(--sx-space-12);
+			padding-right: var(--sx-space-12);
 		}
 	}
 
 	@media (min-width: 1024px) {
-		.salmex-container-px-md {
-			padding-left: var(--salmex-space-10);
-			padding-right: var(--salmex-space-10);
+		.sx-container-px-md {
+			padding-left: var(--sx-space-10);
+			padding-right: var(--sx-space-10);
 		}
-		.salmex-container-px-lg {
-			padding-left: var(--salmex-space-12);
-			padding-right: var(--salmex-space-12);
+		.sx-container-px-lg {
+			padding-left: var(--sx-space-12);
+			padding-right: var(--sx-space-12);
 		}
-		.salmex-container-px-xl {
+		.sx-container-px-xl {
 			padding-left: 42px;
 			padding-right: 42px;
 		}
 	}
 
-	.salmex-container-py-none {
+	.sx-container-py-none {
 		padding-top: 0;
 		padding-bottom: 0;
 	}
 
-	.salmex-container-py-sm {
-		padding-top: var(--salmex-space-4);
-		padding-bottom: var(--salmex-space-4);
+	.sx-container-py-sm {
+		padding-top: var(--sx-space-4);
+		padding-bottom: var(--sx-space-4);
 	}
 
-	.salmex-container-py-md {
-		padding-top: var(--salmex-space-6);
-		padding-bottom: var(--salmex-space-6);
+	.sx-container-py-md {
+		padding-top: var(--sx-space-6);
+		padding-bottom: var(--sx-space-6);
 	}
 
-	.salmex-container-py-lg {
-		padding-top: var(--salmex-space-8);
-		padding-bottom: var(--salmex-space-8);
+	.sx-container-py-lg {
+		padding-top: var(--sx-space-8);
+		padding-bottom: var(--sx-space-8);
 	}
 
-	.salmex-container-py-xl {
-		padding-top: var(--salmex-space-10);
-		padding-bottom: var(--salmex-space-10);
+	.sx-container-py-xl {
+		padding-top: var(--sx-space-10);
+		padding-bottom: var(--sx-space-10);
 	}
 
 	@media (min-width: 640px) {
-		.salmex-container-py-md {
-			padding-top: var(--salmex-space-8);
-			padding-bottom: var(--salmex-space-8);
+		.sx-container-py-md {
+			padding-top: var(--sx-space-8);
+			padding-bottom: var(--sx-space-8);
 		}
-		.salmex-container-py-lg {
-			padding-top: var(--salmex-space-10);
-			padding-bottom: var(--salmex-space-10);
+		.sx-container-py-lg {
+			padding-top: var(--sx-space-10);
+			padding-bottom: var(--sx-space-10);
 		}
-		.salmex-container-py-xl {
-			padding-top: var(--salmex-space-12);
-			padding-bottom: var(--salmex-space-12);
+		.sx-container-py-xl {
+			padding-top: var(--sx-space-12);
+			padding-bottom: var(--sx-space-12);
 		}
 	}
 </style>

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

@@ -16,8 +16,8 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 /**
  * Container
  *
- * Win2K × Basquiat — Responsive layout wrapper. Max-width, padding, optional centering.
- * Sharp edges, no rounded corners; supports semantic elements.
+ * INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
+ * Pure layout utility; supports semantic elements.
  */
 declare const Container: import("svelte").Component<Props, {}, "">;
 type Container = ReturnType<typeof Container>;

package/dist/layout/ThermalBackground/ThermalBackground.svelte

@@ -0,0 +1,313 @@
+<!--
+  ThermalBackground — Dynamic INFRARED background
+
+  Layered ambient background with thermal blob drift, radar sweep,
+  and film grain. Pure CSS — zero JS runtime cost.
+
+  Usage:
+    <ThermalBackground />              — default (all layers)
+    <ThermalBackground grain={false} /> — no grain overlay
+    <ThermalBackground sweep={false} /> — no radar sweep
+    <ThermalBackground intensity="low" /> — subtler blobs
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Show film grain overlay */
+		grain?: boolean;
+		/** Show radar sweep line */
+		sweep?: 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,
+		sweep = 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: Radar/thermal sweep — horizontal scan line -->
+	{#if sweep}
+		<div class="sx-thermal-sweep"></div>
+	{/if}
+
+	<!-- Layer 3: 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%
+		);
+	}
+
+	/* ========================================
+	   RADAR SWEEP — Horizontal scan line
+	   A faint horizontal gradient that sweeps
+	   top to bottom like a thermal scanner or
+	   radar display. Very subtle.
+	   ======================================== */
+
+	.sx-thermal-sweep {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			rgba(255, 107, 53, 0.015) 48%,
+			rgba(255, 107, 53, 0.04) 50%,
+			rgba(255, 107, 53, 0.015) 52%,
+			transparent 100%
+		);
+		background-size: 100% 300%;
+		animation: sx-thermal-scan 8s linear infinite;
+		opacity: 0.7;
+	}
+
+	@keyframes sx-thermal-scan {
+		0%   { background-position: 0% 0%; }
+		100% { background-position: 0% 100%; }
+	}
+
+	/* ========================================
+	   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-sweep,
+		.sx-thermal-grain {
+			animation: none !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+interface Props {
+    /** Show film grain overlay */
+    grain?: boolean;
+    /** Show radar sweep line */
+    sweep?: 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,4BAA4B;IAC5B,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;AAuCF,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';