@leftium/logo 0.0.2 → 0.2.0

package/dist/LeftiumLogo.svelte

@@ -35,6 +35,7 @@
 	import { Ripples, type RipplesOptions } from './webgl-ripples/webgl-ripples.js';
 
 	import logoGlow from './assets/logo-parts/glow.svg';
+	import logoGlowSquircle from './assets/logo-parts/glow-squircle.svg';
 	import logoLigature from './assets/logo-parts/ligature.svg';
 	import logoShadow from './assets/logo-parts/shadow.svg';
 	import logoSquare from './assets/logo-parts/square.svg?inline';
@@ -44,21 +45,56 @@
 		toggleAnimationWithShift?: boolean;
 		ripplesOptions?: RipplesOptions;
 		boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
+		squircle?: boolean;
 		class?: string;
 		onClick?: (event: MouseEvent | KeyboardEvent) => void;
 		[key: string]: unknown; // Allow any additional props
 	}
 
+	// Squircle clip-path (50% radius, K=2 superellipse, CSS polygon with percentages)
+	const SQUIRCLE_CLIP =
+		'polygon(50% 0%, 53.05% 0%, 55.96% 0%, 58.74% 0%, 61.38% 0%, 63.89% 0%, 66.27% 0%, 68.54% 0.01%, 70.69% 0.01%, 72.73% 0.02%, 74.66% 0.03%, 76.48% 0.04%, 78.21% 0.06%, 79.84% 0.09%, 81.37% 0.11%, 82.82% 0.15%, 84.18% 0.2%, 85.46% 0.25%, 86.66% 0.31%, 87.78% 0.39%, 88.83% 0.48%, 89.81% 0.58%, 90.73% 0.7%, 91.58% 0.83%, 92.37% 0.99%, 93.11% 1.16%, 93.79% 1.36%, 94.41% 1.58%, 94.99% 1.83%, 95.53% 2.11%, 96.02% 2.41%, 96.47% 2.75%, 96.88% 3.13%, 97.25% 3.53%, 97.59% 3.98%, 97.89% 4.47%, 98.17% 5.01%, 98.42% 5.59%, 98.64% 6.21%, 98.84% 6.89%, 99.01% 7.63%, 99.17% 8.42%, 99.3% 9.27%, 99.42% 10.19%, 99.52% 11.17%, 99.61% 12.22%, 99.69% 13.34%, 99.75% 14.54%, 99.8% 15.82%, 99.85% 17.18%, 99.89% 18.63%, 99.91% 20.16%, 99.94% 21.79%, 99.96% 23.52%, 99.97% 25.34%, 99.98% 27.27%, 99.99% 29.31%, 99.99% 31.46%, 100% 33.73%, 100% 36.11%, 100% 38.62%, 100% 41.26%, 100% 44.04%, 100% 46.95%, 100% 50%, 100% 50%, 100% 53.05%, 100% 55.96%, 100% 58.74%, 100% 61.38%, 100% 63.89%, 100% 66.27%, 99.99% 68.54%, 99.99% 70.69%, 99.98% 72.73%, 99.97% 74.66%, 99.96% 76.48%, 99.94% 78.21%, 99.91% 79.84%, 99.89% 81.37%, 99.85% 82.82%, 99.8% 84.18%, 99.75% 85.46%, 99.69% 86.66%, 99.61% 87.78%, 99.52% 88.83%, 99.42% 89.81%, 99.3% 90.73%, 99.17% 91.58%, 99.01% 92.37%, 98.84% 93.11%, 98.64% 93.79%, 98.42% 94.41%, 98.17% 94.99%, 97.89% 95.53%, 97.59% 96.02%, 97.25% 96.47%, 96.88% 96.88%, 96.47% 97.25%, 96.02% 97.59%, 95.53% 97.89%, 94.99% 98.17%, 94.41% 98.42%, 93.79% 98.64%, 93.11% 98.84%, 92.37% 99.01%, 91.58% 99.17%, 90.73% 99.3%, 89.81% 99.42%, 88.83% 99.52%, 87.78% 99.61%, 86.66% 99.69%, 85.46% 99.75%, 84.18% 99.8%, 82.82% 99.85%, 81.37% 99.89%, 79.84% 99.91%, 78.21% 99.94%, 76.48% 99.96%, 74.66% 99.97%, 72.73% 99.98%, 70.69% 99.99%, 68.54% 99.99%, 66.27% 100%, 63.89% 100%, 61.38% 100%, 58.74% 100%, 55.96% 100%, 53.05% 100%, 50% 100%, 50% 100%, 46.95% 100%, 44.04% 100%, 41.26% 100%, 38.62% 100%, 36.11% 100%, 33.73% 100%, 31.46% 99.99%, 29.31% 99.99%, 27.27% 99.98%, 25.34% 99.97%, 23.52% 99.96%, 21.79% 99.94%, 20.16% 99.91%, 18.63% 99.89%, 17.18% 99.85%, 15.82% 99.8%, 14.54% 99.75%, 13.34% 99.69%, 12.22% 99.61%, 11.17% 99.52%, 10.19% 99.42%, 9.27% 99.3%, 8.42% 99.17%, 7.63% 99.01%, 6.89% 98.84%, 6.21% 98.64%, 5.59% 98.42%, 5.01% 98.17%, 4.47% 97.89%, 3.98% 97.59%, 3.53% 97.25%, 3.13% 96.88%, 2.75% 96.47%, 2.41% 96.02%, 2.11% 95.53%, 1.83% 94.99%, 1.58% 94.41%, 1.36% 93.79%, 1.16% 93.11%, 0.99% 92.37%, 0.83% 91.58%, 0.7% 90.73%, 0.58% 89.81%, 0.48% 88.83%, 0.39% 87.78%, 0.31% 86.66%, 0.25% 85.46%, 0.2% 84.18%, 0.15% 82.82%, 0.11% 81.37%, 0.09% 79.84%, 0.06% 78.21%, 0.04% 76.48%, 0.03% 74.66%, 0.02% 72.73%, 0.01% 70.69%, 0.01% 68.54%, 0% 66.27%, 0% 63.89%, 0% 61.38%, 0% 58.74%, 0% 55.96%, 0% 53.05%, 0% 50%, 0% 50%, 0% 46.95%, 0% 44.04%, 0% 41.26%, 0% 38.62%, 0% 36.11%, 0% 33.73%, 0.01% 31.46%, 0.01% 29.31%, 0.02% 27.27%, 0.03% 25.34%, 0.04% 23.52%, 0.06% 21.79%, 0.09% 20.16%, 0.11% 18.63%, 0.15% 17.18%, 0.2% 15.82%, 0.25% 14.54%, 0.31% 13.34%, 0.39% 12.22%, 0.48% 11.17%, 0.58% 10.19%, 0.7% 9.27%, 0.83% 8.42%, 0.99% 7.63%, 1.16% 6.89%, 1.36% 6.21%, 1.58% 5.59%, 1.83% 5.01%, 2.11% 4.47%, 2.41% 3.98%, 2.75% 3.53%, 3.13% 3.13%, 3.53% 2.75%, 3.98% 2.41%, 4.47% 2.11%, 5.01% 1.83%, 5.59% 1.58%, 6.21% 1.36%, 6.89% 1.16%, 7.63% 0.99%, 8.42% 0.83%, 9.27% 0.7%, 10.19% 0.58%, 11.17% 0.48%, 12.22% 0.39%, 13.34% 0.31%, 14.54% 0.25%, 15.82% 0.2%, 17.18% 0.15%, 18.63% 0.11%, 20.16% 0.09%, 21.79% 0.06%, 23.52% 0.04%, 25.34% 0.03%, 27.27% 0.02%, 29.31% 0.01%, 31.46% 0.01%, 33.73% 0%, 36.11% 0%, 38.62% 0%, 41.26% 0%, 44.04% 0%, 46.95% 0%, 50% 0%)';
+
 	let {
 		size = '100%',
 		toggleAnimationWithShift = false,
 		ripplesOptions: ripplesOptionsProp = {},
 		boundingBox = 'default',
+		squircle = false,
 		class: className = '',
 		onClick = undefined,
 		...restProps
 	}: Props = $props();
 
+	// Ligature positioning: original (square) vs squircle-adjusted base values
+	// Square: original positioning where ligature inner corners touch the square corners
+	const LIG_ORIG_W = 440;
+	const LIG_ORIG_H = 666;
+	const LIG_ORIG_L = 133.5;
+	const LIG_ORIG_T = -65.75;
+	const BLUR_PAD_ORIG = 50; // shadow extends 50px beyond ligature on each side
+
+	// Squircle: scaled to align inner corners with squircle boundary
+	// (base 94.46% * 1.023 scale, offset x=-6.5, y=7)
+	const LIG_SQRC_W = 425.2;
+	const LIG_SQRC_H = 643.6;
+	const LIG_SQRC_L = 129.5;
+	const LIG_SQRC_T = -47.6;
+	const BLUR_PAD_SQRC = 48.3;
+
+	// Select positioning values depending on squircle mode
+	let ligW = $derived(squircle ? LIG_SQRC_W : LIG_ORIG_W);
+	let ligH = $derived(squircle ? LIG_SQRC_H : LIG_ORIG_H);
+	let ligL = $derived(squircle ? LIG_SQRC_L : LIG_ORIG_L);
+	let ligT = $derived(squircle ? LIG_SQRC_T : LIG_ORIG_T);
+
+	// Shadow tracks ligature center + blur padding
+	let blurPad = $derived(squircle ? BLUR_PAD_SQRC : BLUR_PAD_ORIG);
+	let shadW = $derived(ligW + blurPad * 2);
+	let shadH = $derived(ligH + blurPad * 2);
+	let shadL = $derived(ligL - blurPad);
+	let shadT = $derived(ligT - blurPad);
+
 	// Use global animation state shared across ALL instances
 	let animated = $state(globalAnimated);
 
@@ -74,6 +110,9 @@
 	let animatedElements: Element[];
 	let animate: (time: number) => void;
 
+	// State for dimension bindings
+	let ripplesWidth = $state(0);
+
 	// Reactive effect to handle animation state changes from global store
 	$effect(() => {
 		if (animated) {
@@ -103,27 +142,71 @@
 
 	const logoAnimation: Attachment = (element) => {
 		animatedElements = [...element.children].filter((child) => child.classList.contains('animate'));
-		const ripplesElement = element.getElementsByClassName('ripples')[0] as HTMLElement | undefined;
+		const ripplesElement = element.getElementsByTagName('d-ripple')[0] as HTMLElement | undefined;
+
+		// Scaling constants for ripple calculations
+		const SCALING_CONSTANTS = {
+			// Resolution scaling
+			MIN_RESOLUTION: 128,
+			MAX_RESOLUTION: 512,
+			RESOLUTION_FACTOR: 0.8,
+
+			// Drop radius scaling (linear interpolation from 62px:2px to 800px:23.36px, capped at 20px)
+			MIN_DROP_RADIUS: 2,
+			MAX_DROP_RADIUS: 20,
+			DROP_RADIUS_MIN_SIZE: 62,
+			DROP_RADIUS_MAX_SIZE: 800,
+			DROP_RADIUS_RANGE: 21.36,
+
+			// Wave propagation scaling (2.0 at 500px down to 0.2 at 125px)
+			MIN_WAVE_PROPAGATION: 0.2,
+			MAX_WAVE_PROPAGATION: 2.0,
+			WAVE_PROP_REFERENCE_SIZE: 500,
+			WAVE_PROP_MIN_SIZE: 125,
+			WAVE_PROP_FACTOR: 1.5
+		};
+
+		// Scaling utility functions
+		function calculateResolution(width: number): number {
+			return Math.min(
+				SCALING_CONSTANTS.MAX_RESOLUTION,
+				Math.max(SCALING_CONSTANTS.MIN_RESOLUTION, width * SCALING_CONSTANTS.RESOLUTION_FACTOR)
+			);
+		}
+
+		function calculateDropRadius(width: number): number {
+			return Math.min(
+				SCALING_CONSTANTS.MAX_DROP_RADIUS,
+				Math.max(
+					SCALING_CONSTANTS.MIN_DROP_RADIUS,
+					SCALING_CONSTANTS.MIN_DROP_RADIUS +
+						((width - SCALING_CONSTANTS.DROP_RADIUS_MIN_SIZE) /
+							(SCALING_CONSTANTS.DROP_RADIUS_MAX_SIZE - SCALING_CONSTANTS.DROP_RADIUS_MIN_SIZE)) *
+							SCALING_CONSTANTS.DROP_RADIUS_RANGE
+				)
+			);
+		}
 
-		// Higher resolution for smaller sizes to avoid blurriness
-		// For small logos, use closer to 1:1 ratio, for large logos cap at 512
+		function calculateWavePropagation(width: number): number {
+			return Math.max(
+				SCALING_CONSTANTS.MIN_WAVE_PROPAGATION,
+				Math.min(
+					SCALING_CONSTANTS.MAX_WAVE_PROPAGATION,
+					SCALING_CONSTANTS.MAX_WAVE_PROPAGATION -
+						((SCALING_CONSTANTS.WAVE_PROP_REFERENCE_SIZE - width) /
+							(SCALING_CONSTANTS.WAVE_PROP_REFERENCE_SIZE - SCALING_CONSTANTS.WAVE_PROP_MIN_SIZE)) *
+							SCALING_CONSTANTS.WAVE_PROP_FACTOR
+				)
+			);
+		}
+
+		// Calculate initial scaling values
 		const elementSize = ripplesElement?.offsetWidth || 100;
-		const resolution = !ripplesElement ? 512 : Math.min(512, Math.max(128, elementSize * 0.8));
-
-		// Scale drop radius based on element size: 15px at 500px down to 2px at 62px
-		// Linear interpolation from 62px:2px to 800px:23.36px, capped at 20px
-		// Formula: 2 + ((elementSize - 62) / (800 - 62)) * (23.36 - 2)
-		const scaledDropRadius = Math.min(
-			20,
-			Math.max(2, 2 + ((elementSize - 62) / (800 - 62)) * 21.36)
-		);
-
-		// Scale wave propagation based on element size: 2.0 at 500px down to 0.2 at 125px
-		// Linear interpolation for sizes 500px down to 125px, then clamp at 0.2 for smaller
-		const scaledWavePropagation = Math.max(
-			0.2,
-			Math.min(2.0, 2.0 - ((500 - elementSize) / (500 - 125)) * 1.5)
-		);
+		const resolution = !ripplesElement
+			? SCALING_CONSTANTS.MAX_RESOLUTION
+			: calculateResolution(elementSize);
+		const scaledDropRadius = calculateDropRadius(elementSize);
+		const scaledWavePropagation = calculateWavePropagation(elementSize);
 
 		const DEFAULT_RIPPLES_OPTIONS = {
 			resolution,
@@ -135,77 +218,77 @@
 		};
 		const rippleOptions = { ...DEFAULT_RIPPLES_OPTIONS, ...ripplesOptionsProp };
 
-		// Set up ResizeObserver to handle component resizing
-		let resizeObserver: ResizeObserver | null = null;
+		// Use Svelte dimension bindings for resize handling
 		let lastWidth = ripplesElement?.offsetWidth;
-		let lastHeight = ripplesElement?.offsetHeight;
 		let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+		let hasExecutedLeading = $state(false);
 
-		if (ripplesElement && typeof ResizeObserver !== 'undefined') {
-			resizeObserver = new ResizeObserver(() => {
-				const currentWidth = ripplesElement.offsetWidth;
-				const currentHeight = ripplesElement.offsetHeight;
+		// Extract ripples recreation logic for reuse
+		function recreateRipples(currentWidth: number) {
+			if (animated && ripplesElement) {
+				// Destroy old instance first
+				if (ripples) {
+					try {
+						ripples.destroy();
+					} catch (e) {
+						console.error('Error destroying ripples:', e);
+					}
+					ripples = null;
+				}
 
-				// Only recreate if size actually changed significantly (more than 5px)
+				// Wait a frame before creating new instance to ensure cleanup
+				requestAnimationFrame(() => {
+					if (!ripples && animated && ripplesElement) {
+						// Calculate scaled values using utility functions
+						const newResolution = calculateResolution(currentWidth);
+						const newScaledDropRadius = calculateDropRadius(currentWidth);
+						const newScaledWavePropagation = calculateWavePropagation(currentWidth);
+						const newRippleOptions = {
+							...rippleOptions,
+							resolution: newResolution,
+							dropRadius: newScaledDropRadius,
+							wavePropagation: newScaledWavePropagation
+						};
+
+						try {
+							ripples = new Ripples(ripplesElement, newRippleOptions);
+						} catch (e) {
+							console.error('Error creating ripples:', e);
+						}
+					}
+				});
+			}
+		}
+
+		// Reactive effect to handle dimension changes with leading + trailing edge debouncing
+		$effect(() => {
+			if (ripplesWidth && animated && ripplesElement) {
+				const currentWidth = ripplesWidth;
+
+				// Only recreate if width actually changed significantly (more than 5px)
 				const widthChanged = Math.abs(currentWidth - (lastWidth || 0)) > 5;
-				const heightChanged = Math.abs(currentHeight - (lastHeight || 0)) > 5;
 
-				if (widthChanged || heightChanged) {
+				if (widthChanged) {
 					lastWidth = currentWidth;
-					lastHeight = currentHeight;
 
-					// Debounce the recreation to avoid too many WebGL contexts
+					// LEADING EDGE: Execute immediately on first change in sequence
+					if (!hasExecutedLeading) {
+						hasExecutedLeading = true;
+						recreateRipples(currentWidth);
+					}
+
+					// TRAILING EDGE: Debounced execution to handle rapid changes
 					if (resizeTimeout) {
 						clearTimeout(resizeTimeout);
 					}
 
 					resizeTimeout = setTimeout(() => {
-						if (animated && ripplesElement) {
-							// Destroy old instance first
-							if (ripples) {
-								try {
-									ripples.destroy();
-								} catch (e) {
-									console.error('Error destroying ripples:', e);
-								}
-								ripples = null;
-							}
-
-							// Wait a frame before creating new instance to ensure cleanup
-							requestAnimationFrame(() => {
-								if (!ripples && animated && ripplesElement) {
-									// Higher resolution for smaller sizes to avoid blurriness
-									const newResolution = Math.min(512, Math.max(128, currentWidth * 0.8));
-									// Scale drop radius and wave propagation for new size
-									// Linear interpolation from 62px:2px to 800px:23.36px, capped at 20px
-									const newScaledDropRadius = Math.min(
-										20,
-										Math.max(2, 2 + ((currentWidth - 62) / (800 - 62)) * 21.36)
-									);
-									const newScaledWavePropagation = Math.max(
-										0.2,
-										Math.min(2.0, 2.0 - ((500 - currentWidth) / (500 - 125)) * 1.5)
-									);
-									const newRippleOptions = {
-										...rippleOptions,
-										resolution: newResolution,
-										dropRadius: newScaledDropRadius,
-										wavePropagation: newScaledWavePropagation
-									};
-
-									try {
-										ripples = new Ripples(ripplesElement, newRippleOptions);
-									} catch (e) {
-										console.error('Error creating ripples:', e);
-									}
-								}
-							});
-						}
+						recreateRipples(currentWidth);
+						hasExecutedLeading = false; // Reset for next change sequence
 					}, 100); // 100ms debounce
 				}
-			});
-			resizeObserver.observe(ripplesElement);
-		}
+			}
+		});
 
 		let angle = $state(0);
 		let lastDropTime = $state(0);
@@ -236,10 +319,7 @@
 					const y = Math.random() * ripplesElement.offsetHeight;
 					// Use scaled drop radius for automatic drops
 					const currentSize = ripplesElement.offsetWidth;
-					const autoDropRadius = Math.min(
-						20,
-						Math.max(2, 2 + ((currentSize - 62) / (800 - 62)) * 21.36)
-					);
+					const autoDropRadius = calculateDropRadius(currentSize);
 					// Scale strength based on size - ensure minimum visibility for small sizes
 					const sizeFactor = Math.max(0.7, Math.min(1, currentSize / 200)); // Never below 70%
 					const baseStrength = 0.1 + Math.random() * 0.04;
@@ -263,16 +343,14 @@
 			// Now we need to scale them for each element's actual size
 			for (const el of animatedElements) {
 				if (el.classList.contains('shadow')) {
-					// Shadow is 540x766, need to scale movement to match original animation
-					// Original: 4% of 800px = 32px. For shadow: 32px / 540px = 5.93%
-					const scaleX = 800 / 540;
-					const scaleY = 800 / 766;
+					// Shadow is 510.1x723.6 (scaled 94.46% for squircle)
+					const scaleX = 800 / 510.1;
+					const scaleY = 800 / 723.6;
 					(el as HTMLElement).style.transform = `translate(${dx * scaleX}%, ${dy * scaleY}%)`;
 				} else if (el.classList.contains('ligature')) {
-					// Ligature is 440x666, need to scale movement to match original animation
-					// Original: 4% of 800px = 32px. For ligature: 32px / 440px = 7.27%
-					const scaleX = 800 / 440;
-					const scaleY = 800 / 666;
+					// Ligature is 415.6x629.1 (scaled 94.46% for squircle)
+					const scaleX = 800 / 415.6;
+					const scaleY = 800 / 629.1;
 					(el as HTMLElement).style.transform = `translate(${dx * scaleX}%, ${dy * scaleY}%)`;
 				} else {
 					// Default for any other animated elements
@@ -302,9 +380,7 @@
 					console.error('Error destroying ripples on cleanup:', e);
 				}
 			}
-			if (resizeObserver) {
-				resizeObserver.disconnect();
-			}
+			hasExecutedLeading = false; // Reset leading edge state
 		};
 	};
 
@@ -330,20 +406,38 @@
 	}
 </script>
 
-<logo-container style:--size={size} class="{boundingBox} {className}" role="none" {...restProps}>
+<logo-container
+	style:--size={size}
+	class="{boundingBox} {className}"
+	class:squircle
+	role="none"
+	{...restProps}
+>
 	<grid-logo {@attach logoAnimation}>
-		<img class="animate shadow" alt="" src={logoShadow} />
-		<img class="glow" alt="" src={logoGlow} />
-		<div
-			class="ripples square"
+		<img
+			class="animate shadow"
+			alt=""
+			src={logoShadow}
+			style="width:calc(100% * {shadW} / 532);height:calc(100% * {shadH} / 532);left:calc(100% * {shadL} / 532);top:calc(100% * {shadT} / 532)"
+		/>
+		<img class="glow" alt="" src={squircle ? logoGlowSquircle : logoGlow} />
+		<d-ripple
+			class="square"
 			style:background-image={`url("${logoSquare}")`}
+			style:clip-path={squircle ? SQUIRCLE_CLIP : 'none'}
+			bind:offsetWidth={ripplesWidth}
 			onclick={handleClick}
 			onkeydown={handleClick}
 			role="button"
 			tabindex="0"
 			aria-label="Toggle logo animation"
-		></div>
-		<img class="animate ligature" alt="" src={logoLigature} />
+		></d-ripple>
+		<img
+			class="animate ligature"
+			alt=""
+			src={logoLigature}
+			style="width:calc(100% * {ligW} / 532);height:calc(100% * {ligH} / 532);left:calc(100% * {ligL} / 532);top:calc(100% * {ligT} / 532)"
+		/>
 	</grid-logo>
 </logo-container>
 
@@ -359,26 +453,55 @@
 		-moz-user-select: none;
 		-ms-user-select: none;
 		overflow: visible;
-	}
 
-	/* Square mode - square container */
-	logo-container.square {
-		aspect-ratio: 1;
-	}
+		/* Cropped mode - match ellipse aspect ratio: 723.08875/812.58868 ≈ 0.8906 */
+		&.cropped {
+			aspect-ratio: 0.8906;
+		}
 
-	/* Default mode - square container */
-	logo-container.default {
-		aspect-ratio: 1;
-	}
+		/* Square bounding box mode - grid fills the container */
+		&.square grid-logo {
+			width: 100%;
+			left: 0;
+			top: 0;
+		}
 
-	/* Encircled mode - square container */
-	logo-container.encircled {
-		aspect-ratio: 1;
-	}
+		/* Default bounding box mode - grid is scaled down to leave some padding */
+		&.default grid-logo {
+			/* Grid is 1/1.2519 = 79.88% of container to account for padding */
+			width: calc(100% / 1.2519);
+			/* Center within container */
+			left: calc((100% - 100% / 1.2519) / 2);
+			top: calc((100% - 100% / 1.2519) / 2);
+		}
 
-	/* Cropped mode - match ellipse aspect ratio: 723.08875/812.58868 ≈ 0.8906 */
-	logo-container.cropped {
-		aspect-ratio: 0.8906;
+		/* Encircled bounding box mode - grid is scaled down more to leave full padding */
+		&.encircled grid-logo {
+			/* Grid is 1/1.5037 = 66.5% of container (532/800) */
+			width: calc(100% / 1.5037);
+			/* Center within container */
+			left: calc((100% - 100% / 1.5037) / 2);
+			top: calc((100% - 100% / 1.5037) / 2);
+		}
+
+		/* Squircle + encircled: scale up 1.04x to compensate for smaller ligature */
+		&.encircled.squircle grid-logo {
+			width: calc(100% / 1.5037 * 1.04);
+			left: calc((100% - 100% / 1.5037 * 1.04) / 2);
+			top: calc((100% - 100% / 1.5037 * 1.04) / 2);
+		}
+
+		/* Cropped bounding box mode - grid scaled and positioned to match reference SVG */
+		&.cropped grid-logo {
+			/* Square is 1131.371px in a 1447px wide container = 78.2% */
+			width: 78.2%;
+			/* Position calculations from SVG transforms */
+			/* Final square position after transforms: x=122.18, y=247.73 */
+			/* Left offset: 122.18/1447 = 8.44% */
+			left: 8.44%;
+			/* Top offset: 247.73/1626.9 = 15.23% */
+			top: 15.23%;
+		}
 	}
 
 	/* Grid that holds all the logo elements */
@@ -390,58 +513,23 @@
 		aspect-ratio: 1;
 
 		img {
-			/* Prevent PicoCSS styles. */
-			max-width: unset !important;
+			max-width: unset;
 		}
-	}
-
-	/* Square bounding box mode - grid fills the container */
-	logo-container.square grid-logo {
-		width: 100%;
-		left: 0;
-		top: 0;
-	}
-
-	/* Default bounding box mode - grid is scaled down to leave some padding */
-	logo-container.default grid-logo {
-		/* Grid is 1/1.2519 = 79.88% of container to account for padding */
-		width: calc(100% / 1.2519);
-		/* Center within container */
-		left: calc((100% - 100% / 1.2519) / 2);
-		top: calc((100% - 100% / 1.2519) / 2);
-	}
-
-	/* Encircled bounding box mode - grid is scaled down more to leave full padding */
-	logo-container.encircled grid-logo {
-		/* Grid is 1/1.5037 = 66.5% of container (532/800) */
-		width: calc(100% / 1.5037);
-		/* Center within container */
-		left: calc((100% - 100% / 1.5037) / 2);
-		top: calc((100% - 100% / 1.5037) / 2);
-	}
-
-	/* Cropped bounding box mode - grid scaled and positioned to match reference SVG */
-	logo-container.cropped grid-logo {
-		/* Square is 1131.371px in a 1447px wide container = 78.2% */
-		width: 78.2%;
-		/* Position calculations from SVG transforms */
-		/* Final square position after transforms: x=122.18, y=247.73 */
-		/* Left offset: 122.18/1447 = 8.44% */
-		left: 8.44%;
-		/* Top offset: 247.73/1626.9 = 15.23% */
-		top: 15.23%;
-	}
 
-	/* Individual logo elements positioned relative to the square */
-	grid-logo > * {
-		position: absolute;
-		grid-column: 1 / 2;
-		grid-row: 1 / 2;
-		will-change: auto;
+		/* Individual logo elements positioned relative to the square */
+		> * {
+			position: absolute;
+			grid-column: 1 / 2;
+			grid-row: 1 / 2;
+			will-change: auto;
+		}
 	}
 
 	/* Square image - base element at 532x532 */
-	.ripples.square {
+	/* Uses <d-ripple> custom element to avoid classless CSS library interference */
+	/* Still needs resets for [role="button"] targeting by classless CSS libraries */
+	d-ripple.square {
+		display: block;
 		width: 100%;
 		aspect-ratio: 1;
 		background-size: contain;
@@ -451,16 +539,23 @@
 		cursor: pointer;
 		outline: none;
 
-		/* Prevent PicoCSS [role=button] styles. */
-		padding: 0 !important;
-		border: none !important;
-		border-radius: 0 !important;
-		outline: none !important;
-		box-shadow: none !important;
-	}
-
-	.ripples.square:focus {
-		outline: none;
+		/* Reset [role="button"] styles from classless CSS libraries */
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+		background-color: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: inherit;
+		text-decoration: none;
+		line-height: inherit;
+
+		&:focus {
+			outline: none;
+			box-shadow: none;
+		}
 	}
 
 	/* Glow - 647x647, centered on square */
@@ -475,28 +570,14 @@
 		pointer-events: none;
 	}
 
-	/* Shadow - 540x766, positioned to outline the ligature */
+	/* Shadow - dimensions/position set via inline style for dynamic ligature adjustment */
 	.shadow {
-		width: calc(100% * 540 / 532);
-		height: calc(100% * 766 / 532);
-		/* Shadow should be centered on ligature */
-		/* Ligature is 440x666, shadow is 540x766 */
-		/* Shadow is (540-440)/2 = 50px wider on each side, (766-666)/2 = 50px taller on each side */
-		left: calc(100% * (133 - 50) / 532); /* Center shadow on ligature */
-		top: calc(100% * (-66 - 50) / 532);
 		z-index: 0;
-		/* Shadow should not capture clicks */
 		pointer-events: none;
 	}
 
-	/* Ligature - 440x666, positioned based on SVG */
+	/* Ligature - dimensions/position set via inline style */
 	.ligature {
-		width: calc(100% * 440 / 532);
-		height: calc(100% * 666 / 532);
-		/* Ligature extends to the right and below the square */
-		/* Looking at the SVG path, the ligature starts at top-left and extends right and down */
-		left: calc(100% * 133.5 / 532);
-		top: calc(100% * -65.75 / 532);
 		z-index: 3;
 		pointer-events: none;
 	}

package/dist/LeftiumLogo.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     toggleAnimationWithShift?: boolean;
     ripplesOptions?: RipplesOptions;
     boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
+    squircle?: boolean;
     class?: string;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     [key: string]: unknown;

package/dist/app-logo/color-transform.d.ts

@@ -0,0 +1,40 @@
+/**
+ * OKLCH-based color transforms for icon color modes.
+ *
+ * Uses culori for perceptually uniform color manipulation.
+ * All transforms operate on individual CSS color strings.
+ */
+import type { IconColorMode } from './types.js';
+/**
+ * Transform a single CSS color to grayscale using OKLCH.
+ * Sets chroma to 0, preserving perceptual lightness.
+ * @param lightness Optional lightness multiplier (0-200), default 100 = no change
+ */
+export declare function toGrayscale(color: string, lightness?: number): string;
+/**
+ * Transform a single CSS color to grayscale, then tint toward a target color.
+ *
+ * The tint color's hue and chroma influence the result, while the original
+ * color's lightness is preserved. This unifies a palette while keeping contrast.
+ * @param lightness Optional lightness multiplier (0-200), default 100 = no change
+ */
+export declare function toGrayscaleTint(color: string, tintColor: string, lightness?: number): string;
+/**
+ * Remap a single CSS color to a target hue, optionally overriding saturation.
+ *
+ * Preserves the original lightness. If saturation is provided, it's used as
+ * a percentage of the maximum chroma; otherwise, the original chroma is preserved.
+ */
+export declare function remapHue(color: string, targetHue: number, targetSaturation?: number): string;
+/**
+ * Apply a full IconColorMode transformation to SVG content.
+ *
+ * Handles all modes: 'auto', 'original', 'monochrome', 'grayscale',
+ * 'grayscale-tint', and { hue, saturation? }.
+ *
+ * Color transforms operate on fill/stroke attribute values and style properties,
+ * replacing each color with its transformed equivalent.
+ *
+ * @param grayscaleLightness Lightness multiplier for grayscale modes (0-200), default 100
+ */
+export declare function applyColorMode(svgContent: string, isMonochrome: boolean, colorMode: IconColorMode, iconColor: string, grayscaleLightness?: number): string;