@r2digisolutions/components 0.9.1 → 0.9.2

package/dist/components/atoms/Image/Image.svelte

@@ -28,28 +28,24 @@
 		class: className = ''
 	}: ImageProps = $props();
 
-	let isLoaded = $state(false);
 	let hasError = $state(false);
-	let activeSrc = $state(src);
+	let useFallback = $state(false);
+
+	const displaySrc = $derived(useFallback && fallbackSrc ? fallbackSrc : src);
 
 	$effect(() => {
-		activeSrc = src;
-		isLoaded = false;
+		void src;
+		useFallback = false;
 		hasError = false;
 	});
 
-	function handleLoad() {
-		isLoaded = true;
-		hasError = false;
-	}
-
-	function handleError() {
-		if (fallbackSrc && activeSrc !== fallbackSrc) {
-			activeSrc = fallbackSrc;
-		} else {
-			hasError = true;
-			isLoaded = true;
+	function onError() {
+		if (fallbackSrc && !useFallback) {
+			useFallback = true;
+			hasError = false;
+			return;
 		}
+		hasError = true;
 	}
 
 	const roundedClass = $derived(
@@ -78,51 +74,51 @@
 					: 'object-none'
 	);
 
-	const styleStr = $derived([
-		aspectRatio ? `aspect-ratio:${aspectRatio}` : '',
-		width ? `width:${typeof width === 'number' ? `${width}px` : width}` : '',
-		height ? `height:${typeof height === 'number' ? `${height}px` : height}` : ''
-	].filter(Boolean).join(';'));
+	const styleStr = $derived(
+		[
+			aspectRatio ? `aspect-ratio:${aspectRatio}` : '',
+			width ? `width:${typeof width === 'number' ? `${width}px` : width}` : '',
+			height ? `height:${typeof height === 'number' ? `${height}px` : height}` : ''
+		]
+			.filter(Boolean)
+			.join(';')
+	);
 </script>
 
 <div
 	class={['relative overflow-hidden bg-surface-overlay', roundedClass, className]}
 	style={styleStr || undefined}
 >
-	{#if !isLoaded && !hasError}
-		<!-- Skeleton shimmer -->
-		<div class="absolute inset-0 animate-pulse bg-surface-overlay">
-			<div class="h-full w-full bg-gradient-to-r from-surface-overlay via-border to-surface-overlay bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"></div>
-		</div>
-	{/if}
-
 	{#if hasError}
-		<!-- Error placeholder -->
-		<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-overlay text-muted">
-			<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M13.5 10.5h.008v.008H13.5V10.5zm-7.5 9h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 006 21.75z" />
+		<div
+			class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-overlay text-muted"
+		>
+			<svg
+				class="h-8 w-8"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M13.5 10.5h.008v.008H13.5V10.5zm-7.5 9h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 006 21.75z"
+				/>
 			</svg>
 			<span class="text-xs">{alt || 'Image not found'}</span>
 		</div>
 	{:else}
-		<img
-			src={activeSrc}
-			{alt}
-			{loading}
-			onload={handleLoad}
-			onerror={handleError}
-			class={[
-				'block h-full w-full transition-opacity duration-300',
-				objectFitClass,
-				isLoaded ? 'opacity-100' : 'opacity-0'
-			]}
-		/>
+		{#key displaySrc}
+			<img
+				src={displaySrc}
+				{alt}
+				{loading}
+				decoding="async"
+				onerror={onError}
+				class={['block h-full w-full', objectFitClass]}
+			/>
+		{/key}
 	{/if}
 </div>
-
-<style>
-	@keyframes shimmer {
-		0% { background-position: 200% 0; }
-		100% { background-position: -200% 0; }
-	}
-</style>

package/dist/components/atoms/SectionTitle/SectionTitle.svelte

@@ -24,8 +24,13 @@
 	}: SectionTitleProps = $props();
 </script>
 
-<div class={['flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between', className]}>
-	<div class="min-w-0 space-y-1">
+<div
+	class={[
+		'flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:justify-between',
+		className
+	]}
+>
+	<div class="min-w-0 flex-1 space-y-1">
 		{#if eyebrow}
 			<p class="text-xs font-semibold uppercase tracking-wider text-brand-600 dark:text-brand-400">
 				{eyebrow}
@@ -37,7 +42,7 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="flex shrink-0 items-center gap-2">
+		<div class="flex shrink-0 items-center justify-end gap-2 self-end sm:ml-auto sm:self-start">
 			{@render actions()}
 		</div>
 	{/if}

package/dist/components/molecules/Breadcrumb/Breadcrumb.svelte

@@ -20,7 +20,7 @@
 
 <nav class={['w-full', className]} aria-label="Breadcrumb">
 	<ol class="flex flex-wrap items-center gap-1.5 text-sm">
-		{#each items as item, index (item.id)}
+		{#each items as item, index (item.id ?? `breadcrumb-${index}`)}
 			<li class="inline-flex items-center gap-1.5">
 				{#if index > 0}
 					<svg class="h-3.5 w-3.5 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">

package/dist/components/molecules/Card/Card.svelte

@@ -67,7 +67,7 @@
 	{#if header}
 		<div
 			class={[
-				'border-b border-border',
+				'w-full border-b border-border',
 				chrome && 'bg-surface/40',
 				paddingClasses[padding]
 			]}
@@ -77,7 +77,12 @@
 	{/if}
 
 	{#if children}
-		<div class={['min-w-0 flex-1', padding !== 'none' ? paddingClasses[padding] : '']}>
+		<div
+			class={[
+				'flex min-w-0 flex-1 flex-col',
+				padding !== 'none' ? paddingClasses[padding] : ''
+			]}
+		>
 			{@render children()}
 		</div>
 	{/if}

package/dist/utils/i18n.svelte.js

@@ -14,8 +14,19 @@
  */
 import { UI_DICTIONARIES, formatMessage, getDictionary, resolveLocaleTag } from './i18n.js';
 const STORAGE_KEY = 'r2-locale';
+function canUseLocalStorage() {
+    try {
+        return (typeof localStorage !== 'undefined' &&
+            typeof localStorage.getItem === 'function' &&
+            typeof localStorage.setItem === 'function');
+    }
+    catch {
+        // Node / locked-down environments may throw on access
+        return false;
+    }
+}
 function getStoredLocale() {
-    if (typeof localStorage === 'undefined')
+    if (!canUseLocalStorage())
         return 'en';
     return localStorage.getItem(STORAGE_KEY) ?? 'en';
 }
@@ -52,7 +63,7 @@ class I18nStore {
     /** Change active locale (`es`, `en-US`, …). */
     set(locale) {
         this.#locale = locale;
-        if (typeof localStorage !== 'undefined') {
+        if (canUseLocalStorage()) {
             localStorage.setItem(STORAGE_KEY, locale);
         }
         applyDocumentLang(locale);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.9.1",
+	"version": "0.9.2",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -111,6 +111,6 @@
 		"atomic-design"
 	],
 	"dependencies": {
-		"@xyflow/svelte": "^1.6.3"
+		"@xyflow/svelte": "^1.6.5"
 	}
 }