@r2digisolutions/components 0.17.11 → 0.19.0

package/dist/components/atoms/Barcode/Barcode.svelte

@@ -1,75 +1,51 @@
 <script lang="ts">
-	/**
-	 * Lightweight visual barcode (Code 39–style pattern from the value string).
-	 * For real scanning/printing use a dedicated encoder; this is UI-friendly.
-	 */
+	import { encodeBarcode, type BarcodeSymbology } from '../../../utils/barcode.js';
+
 	interface BarcodeProps {
 		value: string;
 		height?: number;
 		showValue?: boolean;
+		/** Force a symbology. `auto` picks EAN/UPC when the value is a valid GTIN. */
+		format?: 'auto' | BarcodeSymbology;
 		class?: string;
 	}
 
 	const {
 		value,
-		height = 56,
+		height = 72,
 		showValue = true,
+		format = 'auto',
 		class: className = ''
 	}: BarcodeProps = $props();
 
-	/** Map chars to bar/space widths (narrow=1, wide=2) — simplified Code 39 subset */
-	const WIDTHS: Record<string, number[]> = {
-		'0': [1, 1, 1, 2, 2, 1, 2, 1, 1],
-		'1': [2, 1, 1, 2, 1, 1, 1, 1, 2],
-		'2': [1, 1, 2, 2, 1, 1, 1, 1, 2],
-		'3': [2, 1, 2, 2, 1, 1, 1, 1, 1],
-		'4': [1, 1, 1, 2, 2, 1, 1, 1, 2],
-		'5': [2, 1, 1, 2, 2, 1, 1, 1, 1],
-		'6': [1, 1, 2, 2, 2, 1, 1, 1, 1],
-		'7': [1, 1, 1, 2, 1, 1, 2, 1, 2],
-		'8': [2, 1, 1, 2, 1, 1, 2, 1, 1],
-		'9': [1, 1, 2, 2, 1, 1, 2, 1, 1],
-		A: [2, 1, 1, 1, 1, 2, 1, 1, 2],
-		B: [1, 1, 2, 1, 1, 2, 1, 1, 2],
-		C: [2, 1, 2, 1, 1, 2, 1, 1, 1],
-		D: [1, 1, 1, 1, 2, 2, 1, 1, 2],
-		E: [2, 1, 1, 1, 2, 2, 1, 1, 1],
-		F: [1, 1, 2, 1, 2, 2, 1, 1, 1],
-		'*': [1, 2, 1, 1, 2, 1, 2, 1, 1]
-	};
-
-	const bars = $derived.by(() => {
-		const raw = value.toUpperCase().replace(/[^0-9A-Z]/g, '') || '0';
-		const chars = ['*', ...raw.split(''), '*'];
-		const out: { w: number; black: boolean }[] = [];
-		for (const ch of chars) {
-			const pattern = WIDTHS[ch] ?? WIDTHS['0'];
-			pattern.forEach((w, i) => out.push({ w, black: i % 2 === 0 }));
-			out.push({ w: 1, black: false }); // gap
-		}
-		return out;
-	});
-
-	const totalUnits = $derived(bars.reduce((s, b) => s + b.w, 0));
+	const encoded = $derived(encodeBarcode(value, format));
+	const label = $derived(encoded?.text || value);
 </script>
 
-<figure class={['inline-flex flex-col items-center gap-1.5', className]}>
-	<svg
-		role="img"
-		aria-label={`Barcode ${value}`}
-		height={height}
-		viewBox={`0 0 ${totalUnits} ${height}`}
-		class="w-full max-w-xs text-primary"
-		preserveAspectRatio="none"
-	>
-		{#each bars as bar, i}
-			{@const x = bars.slice(0, i).reduce((s, b) => s + b.w, 0)}
-			{#if bar.black}
-				<rect x={x} y="0" width={bar.w} height={height} fill="currentColor" />
-			{/if}
-		{/each}
-	</svg>
-	{#if showValue}
-		<figcaption class="font-mono text-[11px] tracking-widest text-secondary">{value}</figcaption>
+<figure class={['max-w-sm gap-2 inline-flex w-full flex-col items-center', className]}>
+	{#if encoded}
+		<div class="rounded-lg bg-white px-2 py-3 w-full">
+			<svg
+				role="img"
+				aria-label={`Barcode ${label}`}
+				{height}
+				viewBox="0 0 {encoded.modules} {height}"
+				class="text-black block w-full"
+				preserveAspectRatio="none"
+			>
+				<title>{label}</title>
+				<rect width={encoded.modules} {height} fill="#fff" />
+				{#each encoded.runs as run (run.x)}
+					{#if run.black}
+						<rect x={run.x} y="0" width={run.w} {height} fill="#000" />
+					{/if}
+				{/each}
+			</svg>
+		</div>
+		{#if showValue}
+			<figcaption class="font-mono tracking-widest text-secondary text-[11px]">{label}</figcaption>
+		{/if}
+	{:else}
+		<figcaption class="font-mono tracking-widest text-secondary text-[11px]">{value}</figcaption>
 	{/if}
 </figure>

package/dist/components/atoms/Barcode/Barcode.svelte.d.ts

@@ -1,11 +1,10 @@
-/**
- * Lightweight visual barcode (Code 39–style pattern from the value string).
- * For real scanning/printing use a dedicated encoder; this is UI-friendly.
- */
+import { type BarcodeSymbology } from '../../../utils/barcode.js';
 interface BarcodeProps {
     value: string;
     height?: number;
     showValue?: boolean;
+    /** Force a symbology. `auto` picks EAN/UPC when the value is a valid GTIN. */
+    format?: 'auto' | BarcodeSymbology;
     class?: string;
 }
 declare const Barcode: import("svelte").Component<BarcodeProps, {}, "">;

package/dist/components/atoms/Barcode/BarcodeStory.svelte

@@ -2,4 +2,17 @@
 	import Barcode from './Barcode.svelte';
 </script>
 
-<Barcode value="R2DIGI2026" />
+<div class="gap-8 bg-surface p-6 flex flex-col">
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">Code 128 (SKU)</p>
+		<Barcode value="DEMO-SKU-001" />
+	</div>
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">EAN-13</p>
+		<Barcode value="4006381333931" />
+	</div>
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">Alphanumeric</p>
+		<Barcode value="R2DIGI2026" />
+	</div>
+</div>

package/dist/components/molecules/InfiniteScroll/InfiniteScroll.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "error" | "ended" | "manual" | "both" | "grid" | "list" | "chat" | "feed";
+        example?: "error" | "ended" | "manual" | "both" | "grid" | "feed" | "list" | "chat";
         mode?: import("./InfiniteScroll.svelte.ts").InfiniteScrollMode;
         rootMargin?: string;
         pageSize?: number;

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "error" | "success" | "card" | "stacked" | "inline" | "minimal" | "banner" | "consent";
+        example?: "error" | "success" | "banner" | "card" | "stacked" | "inline" | "minimal" | "consent";
         title?: string;
         description?: string;
         variant?: import("./NewsletterSignup.svelte.ts").NewsletterVariant;

package/dist/components/molecules/StoreProductTile/StoreProductTile.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        featured?: boolean;
+        installed?: boolean;
+        tags?: ("new" | "featured" | "popular")[];
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        featured: {
+            control: "boolean";
+        };
+        installed: {
+            control: "boolean";
+        };
+    };
+    args: {
+        featured: false;
+        installed: false;
+        tags: "new"[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Featured: Story;
+export declare const Installed: Story;

package/dist/components/molecules/StoreProductTile/StoreProductTile.stories.js

@@ -0,0 +1,23 @@
+import StoreProductTileStory from './StoreProductTileStory.svelte';
+const meta = {
+    title: 'Molecules/StoreProductTile',
+    component: StoreProductTileStory,
+    tags: ['autodocs'],
+    argTypes: {
+        featured: { control: 'boolean' },
+        installed: { control: 'boolean' }
+    },
+    args: {
+        featured: false,
+        installed: false,
+        tags: ['new']
+    }
+};
+export default meta;
+export const Default = {};
+export const Featured = {
+    args: { featured: true, tags: ['featured', 'new'] }
+};
+export const Installed = {
+    args: { installed: true, tags: ['popular'] }
+};

package/dist/components/molecules/StoreProductTile/StoreProductTile.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+
+	export type StoreProductTag = 'new' | 'featured' | 'popular';
+
+	const TAG_LABELS: Record<StoreProductTag, string> = {
+		new: 'Nuevo',
+		featured: 'Destacado',
+		popular: 'Popular'
+	};
+
+	type Props = {
+		name: string;
+		description?: string;
+		priceLabel: string;
+		categoryLabel?: string;
+		installed?: boolean;
+		/** landscape promotional card */
+		featured?: boolean;
+		tags?: StoreProductTag[];
+		icon: Component;
+		accentClass?: string;
+		onclick?: () => void;
+		/** Optional custom badge area */
+		badge?: Snippet;
+	};
+
+	let {
+		name,
+		description = '',
+		priceLabel,
+		categoryLabel = '',
+		installed = false,
+		featured = false,
+		tags = [],
+		icon: Icon,
+		accentClass = 'from-neutral-800 to-neutral-600',
+		onclick,
+		badge
+	}: Props = $props();
+
+	const visibleTags = $derived(
+		tags.filter((t): t is StoreProductTag => t === 'new' || t === 'featured' || t === 'popular')
+	);
+</script>
+
+<button
+	type="button"
+	class="group ms-tile"
+	class:ms-tile--featured={featured}
+	{onclick}
+>
+	{#if featured}
+		<div class="ms-tile__promo bg-gradient-to-br {accentClass}">
+			<div class="ms-tile__promo-mesh" aria-hidden="true"></div>
+			{#if visibleTags.length || installed || badge}
+				<div class="ms-tile__tags">
+					{#if badge}
+						{@render badge()}
+					{:else}
+						{#each visibleTags as tag (tag)}
+							<Badge
+								variant={tag === 'new' ? 'info' : tag === 'featured' ? 'primary' : 'secondary'}
+								size="sm"
+							>
+								{TAG_LABELS[tag]}
+							</Badge>
+						{/each}
+						{#if installed}
+							<Badge variant="success" size="sm">Instalado</Badge>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+			<div class="ms-tile__promo-copy">
+				{#if categoryLabel}
+					<span class="ms-tile__eyebrow">{categoryLabel}</span>
+				{/if}
+				<span class="ms-tile__promo-title">{name}</span>
+				{#if description}
+					<span class="ms-tile__promo-desc">{description}</span>
+				{/if}
+				<span class="ms-tile__promo-price">{priceLabel}</span>
+			</div>
+			<div class="ms-tile__promo-icon bg-gradient-to-br {accentClass}">
+				<Icon class="size-10 text-white drop-shadow" />
+			</div>
+		</div>
+	{:else}
+		<div class="ms-tile__icon-shell">
+			<div class="ms-tile__icon bg-gradient-to-br {accentClass}">
+				<div class="ms-tile__icon-shine" aria-hidden="true"></div>
+				<Icon class="relative size-9 text-white drop-shadow-sm sm:size-10" />
+			</div>
+			{#if visibleTags[0]}
+				<span class="ms-tile__corner">
+					<Badge
+						variant={visibleTags[0] === 'new'
+							? 'info'
+							: visibleTags[0] === 'featured'
+								? 'primary'
+								: 'secondary'}
+						size="sm"
+					>
+						{TAG_LABELS[visibleTags[0]]}
+					</Badge>
+				</span>
+			{:else if installed}
+				<span class="ms-tile__dot" title="Instalado" aria-label="Instalado"></span>
+			{/if}
+		</div>
+		<div class="ms-tile__meta">
+			<span class="ms-tile__name">{name}</span>
+			<span class="ms-tile__publisher">Evoteg</span>
+			<span class="ms-tile__price">{priceLabel}</span>
+		</div>
+	{/if}
+</button>
+
+<style>
+	.ms-tile {
+		display: flex;
+		flex-direction: column;
+		gap: 0.7rem;
+		width: 100%;
+		min-width: 0;
+		text-align: left;
+		border: 0;
+		background: transparent;
+		padding: 0;
+		cursor: pointer;
+		border-radius: 1rem;
+		transition:
+			transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
+			filter 200ms ease;
+	}
+	.ms-tile:hover {
+		transform: translateY(-3px);
+	}
+	.ms-tile:focus-visible {
+		outline: 2px solid var(--color-brand-500, #2563eb);
+		outline-offset: 4px;
+	}
+	.ms-tile__icon-shell {
+		position: relative;
+		width: 100%;
+		aspect-ratio: 1;
+		display: grid;
+		place-items: center;
+		border-radius: 1.35rem;
+		background: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(245 245 245 / 0.95));
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.8) inset,
+			0 1px 2px rgb(0 0 0 / 0.04),
+			0 10px 28px rgb(0 0 0 / 0.07);
+	}
+	:global(.dark) .ms-tile__icon-shell {
+		background: linear-gradient(180deg, rgb(38 38 38), rgb(28 28 28));
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.04) inset,
+			0 10px 28px rgb(0 0 0 / 0.35);
+	}
+	.ms-tile__icon {
+		position: relative;
+		display: grid;
+		place-items: center;
+		width: 58%;
+		aspect-ratio: 1;
+		border-radius: 22%;
+		overflow: hidden;
+		box-shadow:
+			0 8px 20px rgb(0 0 0 / 0.22),
+			0 1px 0 rgb(255 255 255 / 0.2) inset;
+		transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.ms-tile:hover .ms-tile__icon {
+		transform: scale(1.04);
+	}
+	.ms-tile__icon-shine {
+		position: absolute;
+		inset: 0;
+		background:
+			linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 42%),
+			radial-gradient(circle at 70% 80%, rgb(0 0 0 / 0.2), transparent 55%);
+	}
+	.ms-tile__corner {
+		position: absolute;
+		top: 0.45rem;
+		left: 0.45rem;
+		z-index: 2;
+	}
+	.ms-tile__dot {
+		position: absolute;
+		top: 0.55rem;
+		right: 0.55rem;
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 999px;
+		background: #16a34a;
+		box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
+	}
+	:global(.dark) .ms-tile__dot {
+		box-shadow: 0 0 0 3px rgb(28 28 28);
+	}
+	.ms-tile__meta {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		padding-inline: 0.2rem;
+	}
+	.ms-tile__name {
+		color: var(--color-neutral-900, #171717);
+		font-size: 0.875rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	:global(.dark) .ms-tile__name {
+		color: var(--color-neutral-50, #fafafa);
+	}
+	.ms-tile__publisher,
+	.ms-tile__price {
+		color: var(--color-neutral-500, #737373);
+		font-size: 0.75rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ms-tile__price {
+		font-weight: 550;
+		color: var(--color-neutral-700, #404040);
+	}
+	:global(.dark) .ms-tile__price {
+		color: var(--color-neutral-300, #d4d4d4);
+	}
+
+	.ms-tile--featured {
+		height: 100%;
+	}
+	.ms-tile__promo {
+		position: relative;
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 1rem;
+		min-height: 11.5rem;
+		padding: 1.15rem 1.15rem 1.2rem;
+		border-radius: 1.35rem;
+		overflow: hidden;
+		color: white;
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.12) inset,
+			0 16px 40px rgb(0 0 0 / 0.18);
+		transition: box-shadow 220ms ease;
+	}
+	.ms-tile:hover .ms-tile__promo {
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.16) inset,
+			0 22px 48px rgb(0 0 0 / 0.24);
+	}
+	.ms-tile__promo-mesh {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(circle at 12% 18%, rgb(255 255 255 / 0.28), transparent 40%),
+			radial-gradient(circle at 88% 78%, rgb(0 0 0 / 0.28), transparent 48%),
+			linear-gradient(120deg, transparent 40%, rgb(255 255 255 / 0.06) 100%);
+	}
+	.ms-tile__tags {
+		position: absolute;
+		top: 0.75rem;
+		left: 0.75rem;
+		z-index: 2;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.35rem;
+		max-width: calc(100% - 5.5rem);
+	}
+	.ms-tile__promo-copy {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+		min-width: 0;
+		max-width: 70%;
+	}
+	.ms-tile__eyebrow {
+		font-size: 0.65rem;
+		font-weight: 700;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		color: rgb(255 255 255 / 0.72);
+	}
+	.ms-tile__promo-title {
+		font-size: 1.15rem;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		line-height: 1.15;
+	}
+	.ms-tile__promo-desc {
+		font-size: 0.78rem;
+		line-height: 1.35;
+		color: rgb(255 255 255 / 0.82);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+	.ms-tile__promo-price {
+		margin-top: 0.25rem;
+		font-size: 0.78rem;
+		font-weight: 600;
+		color: rgb(255 255 255 / 0.92);
+	}
+	.ms-tile__promo-icon {
+		position: relative;
+		z-index: 1;
+		display: grid;
+		place-items: center;
+		width: 4.25rem;
+		height: 4.25rem;
+		border-radius: 22%;
+		flex-shrink: 0;
+		box-shadow:
+			0 12px 28px rgb(0 0 0 / 0.28),
+			0 1px 0 rgb(255 255 255 / 0.25) inset;
+		border: 1px solid rgb(255 255 255 / 0.18);
+		transform: translateY(-0.15rem);
+		transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.ms-tile:hover .ms-tile__promo-icon {
+		transform: translateY(-0.35rem) scale(1.03);
+	}
+</style>

package/dist/components/molecules/StoreProductTile/StoreProductTile.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from 'svelte';
+export type StoreProductTag = 'new' | 'featured' | 'popular';
+type Props = {
+    name: string;
+    description?: string;
+    priceLabel: string;
+    categoryLabel?: string;
+    installed?: boolean;
+    /** landscape promotional card */
+    featured?: boolean;
+    tags?: StoreProductTag[];
+    icon: Component;
+    accentClass?: string;
+    onclick?: () => void;
+    /** Optional custom badge area */
+    badge?: Snippet;
+};
+declare const StoreProductTile: Component<Props, {}, "">;
+type StoreProductTile = ReturnType<typeof StoreProductTile>;
+export default StoreProductTile;

package/dist/components/molecules/StoreProductTile/StoreProductTileStory.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import StoreProductTile from './StoreProductTile.svelte';
+	import Package from '@lucide/svelte/icons/package';
+	import Utensils from '@lucide/svelte/icons/utensils';
+
+	let {
+		featured = false,
+		installed = false,
+		tags = ['new'] as ('new' | 'featured' | 'popular')[]
+	} = $props();
+</script>
+
+<div class="max-w-sm p-6">
+	<StoreProductTile
+		name={featured ? 'TPV / POS' : 'Inventario'}
+		description="Punto de venta con mesas, KDS y caja."
+		priceLabel={featured ? '29 €/mes' : 'Gratis'}
+		categoryLabel="Comercial"
+		{featured}
+		{installed}
+		{tags}
+		icon={featured ? Utensils : Package}
+		accentClass={featured ? 'from-sky-700 via-sky-600 to-cyan-500' : 'from-emerald-800 to-teal-600'}
+	/>
+</div>

package/dist/components/molecules/StoreProductTile/StoreProductTileStory.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const StoreProductTileStory: import("svelte").Component<{
+    featured?: boolean;
+    installed?: boolean;
+    tags?: ("new" | "featured" | "popular")[];
+}, {}, "">;
+type StoreProductTileStory = ReturnType<typeof StoreProductTileStory>;
+export default StoreProductTileStory;

package/dist/components/molecules/StoreRail/StoreRail.stories.js

@@ -0,0 +1,8 @@
+import StoreRailStory from './StoreRailStory.svelte';
+const meta = {
+    title: 'Molecules/StoreRail',
+    component: StoreRailStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/StoreRail/StoreRail.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+
+	type Props = {
+		title: string;
+		subtitle?: string;
+		children: Snippet;
+		wide?: boolean;
+		/** Soft edge fades (narrow by default). */
+		fade?: boolean;
+		class?: string;
+	};
+
+	let {
+		title,
+		subtitle = '',
+		children,
+		wide = false,
+		fade = true,
+		class: className = ''
+	}: Props = $props();
+
+	let track = $state<HTMLDivElement | null>(null);
+
+	function scrollByDir(dir: -1 | 1) {
+		if (!track) return;
+		const amount = Math.max(240, track.clientWidth * 0.72) * dir;
+		track.scrollBy({ left: amount, behavior: 'smooth' });
+	}
+</script>
+
+<section class="ms-rail {className}">
+	<div class="ms-rail__head">
+		<div class="min-w-0">
+			<h2 class="ms-rail__title">{title}</h2>
+			{#if subtitle}
+				<p class="ms-rail__subtitle">{subtitle}</p>
+			{/if}
+		</div>
+		<div class="ms-rail__controls">
+			<Button
+				variant="secondary"
+				size="sm"
+				onclick={() => scrollByDir(-1)}
+				aria-label="Desplazar a la izquierda"
+			>
+				<ChevronLeft class="size-4" />
+			</Button>
+			<Button
+				variant="secondary"
+				size="sm"
+				onclick={() => scrollByDir(1)}
+				aria-label="Desplazar a la derecha"
+			>
+				<ChevronRight class="size-4" />
+			</Button>
+		</div>
+	</div>
+
+	<div class="ms-rail__viewport">
+		<div class="ms-rail__track" class:ms-rail__track--wide={wide} bind:this={track}>
+			{@render children()}
+		</div>
+		{#if fade}
+			<div class="ms-rail__fade ms-rail__fade--left" aria-hidden="true"></div>
+			<div class="ms-rail__fade ms-rail__fade--right" aria-hidden="true"></div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.ms-rail {
+		display: flex;
+		flex-direction: column;
+		gap: 0.9rem;
+	}
+	.ms-rail__head {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 1rem;
+		padding-inline: 0.1rem;
+	}
+	.ms-rail__title {
+		margin: 0;
+		font-size: 1.35rem;
+		font-weight: 700;
+		letter-spacing: -0.03em;
+		color: var(--color-neutral-900, #171717);
+	}
+	:global(.dark) .ms-rail__title {
+		color: var(--color-neutral-50, #fafafa);
+	}
+	.ms-rail__subtitle {
+		margin: 0.15rem 0 0;
+		font-size: 0.8125rem;
+		color: var(--color-neutral-500, #737373);
+	}
+	.ms-rail__controls {
+		display: flex;
+		gap: 0.4rem;
+		flex-shrink: 0;
+	}
+	.ms-rail__viewport {
+		position: relative;
+	}
+	.ms-rail__track {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(8.75rem, 9.75rem);
+		gap: 1rem;
+		overflow-x: auto;
+		padding: 0.35rem 0.15rem 0.85rem;
+		scroll-snap-type: x mandatory;
+		scrollbar-width: none;
+	}
+	.ms-rail__track::-webkit-scrollbar {
+		display: none;
+	}
+	.ms-rail__track--wide {
+		grid-auto-columns: minmax(17rem, 19rem);
+	}
+	.ms-rail__track > :global(*) {
+		scroll-snap-align: start;
+	}
+	.ms-rail__fade {
+		pointer-events: none;
+		position: absolute;
+		top: 0;
+		bottom: 0.85rem;
+		width: 0.85rem;
+		z-index: 1;
+		opacity: 0.55;
+	}
+	.ms-rail__fade--left {
+		left: 0;
+		background: linear-gradient(90deg, var(--store-bg, #fafafa), transparent);
+	}
+	.ms-rail__fade--right {
+		right: 0;
+		background: linear-gradient(270deg, var(--store-bg, #fafafa), transparent);
+	}
+	:global(.dark) .ms-rail__fade--left {
+		background: linear-gradient(90deg, var(--store-bg-dark, #0a0a0a), transparent);
+	}
+	:global(.dark) .ms-rail__fade--right {
+		background: linear-gradient(270deg, var(--store-bg-dark, #0a0a0a), transparent);
+	}
+</style>

package/dist/components/molecules/StoreRail/StoreRail.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    subtitle?: string;
+    children: Snippet;
+    wide?: boolean;
+    /** Soft edge fades (narrow by default). */
+    fade?: boolean;
+    class?: string;
+};
+declare const StoreRail: import("svelte").Component<Props, {}, "">;
+type StoreRail = ReturnType<typeof StoreRail>;
+export default StoreRail;

package/dist/components/molecules/StoreRail/StoreRailStory.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import StoreRail from './StoreRail.svelte';
+	import StoreProductTile from '../StoreProductTile/StoreProductTile.svelte';
+	import Package from '@lucide/svelte/icons/package';
+	import Utensils from '@lucide/svelte/icons/utensils';
+	import Wallet from '@lucide/svelte/icons/wallet';
+	import Users from '@lucide/svelte/icons/users';
+	import Briefcase from '@lucide/svelte/icons/briefcase';
+
+	const items = [
+		{ name: 'Inventario', price: '15 €/mes', icon: Package, accent: 'from-emerald-800 to-teal-600', tags: ['new'] as const },
+		{ name: 'TPV', price: '29 €/mes', icon: Utensils, accent: 'from-sky-700 to-cyan-500', tags: ['featured'] as const },
+		{ name: 'VeriFactu', price: '9 €/mes', icon: Wallet, accent: 'from-amber-800 to-orange-500', tags: [] as const },
+		{ name: 'Portal', price: 'Gratis', icon: Users, accent: 'from-stone-700 to-neutral-500', tags: ['popular'] as const },
+		{ name: 'Proyectos', price: '19 €/mes', icon: Briefcase, accent: 'from-teal-800 to-emerald-500', tags: ['new'] as const }
+	];
+</script>
+
+<div class="bg-neutral-50 p-6 dark:bg-neutral-950" style="--store-bg: #fafafa; --store-bg-dark: #0a0a0a">
+	<StoreRail title="Destacados" subtitle="Ejemplo de rail" wide={false}>
+		{#each items as item (item.name)}
+			<StoreProductTile
+				name={item.name}
+				priceLabel={item.price}
+				icon={item.icon}
+				accentClass={item.accent}
+				tags={[...item.tags]}
+			/>
+		{/each}
+	</StoreRail>
+</div>

package/dist/components/molecules/StoreRail/StoreRailStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const StoreRailStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type StoreRailStory = InstanceType<typeof StoreRailStory>;
+export default StoreRailStory;

package/dist/index.d.ts

@@ -599,6 +599,9 @@ export { default as DateGroupedList } from './components/molecules/DateGroupedLi
 export type { DateGroupedListItem, DateGroupedListGroup, DateGroupedAccent } from './components/molecules/DateGroupedList/DateGroupedList.svelte';
 export { default as BentoGrid } from './components/molecules/BentoGrid/BentoGrid.svelte';
 export type { BentoItem, BentoGridCols, BentoGridGap } from './components/molecules/BentoGrid/BentoGrid.svelte';
+export { default as StoreProductTile } from './components/molecules/StoreProductTile/StoreProductTile.svelte';
+export type { StoreProductTag } from './components/molecules/StoreProductTile/StoreProductTile.svelte';
+export { default as StoreRail } from './components/molecules/StoreRail/StoreRail.svelte';
 export { default as WidgetFrame } from './components/molecules/WidgetFrame/WidgetFrame.svelte';
 export type { WidgetResizeEdge, WidgetRect, WidgetHandleStyle } from './components/molecules/WidgetFrame/WidgetFrame.svelte';
 export { default as DashboardGridToolbar } from './components/molecules/DashboardGridToolbar/DashboardGridToolbar.svelte';

package/dist/index.js

@@ -412,6 +412,8 @@ export { default as ShippingEstimate } from './components/molecules/ShippingEsti
 export { default as SmartSuggestion } from './components/molecules/SmartSuggestion/SmartSuggestion.svelte';
 export { default as DateGroupedList } from './components/molecules/DateGroupedList/DateGroupedList.svelte';
 export { default as BentoGrid } from './components/molecules/BentoGrid/BentoGrid.svelte';
+export { default as StoreProductTile } from './components/molecules/StoreProductTile/StoreProductTile.svelte';
+export { default as StoreRail } from './components/molecules/StoreRail/StoreRail.svelte';
 export { default as WidgetFrame } from './components/molecules/WidgetFrame/WidgetFrame.svelte';
 export { default as DashboardGridToolbar } from './components/molecules/DashboardGridToolbar/DashboardGridToolbar.svelte';
 export { default as WidgetCanvas } from './components/molecules/WidgetCanvas/WidgetCanvas.svelte';

package/dist/utils/barcode.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Standards-compliant 1D barcode encoder (Code 128, EAN-13, EAN-8, UPC-A).
+ * Generates module runs suitable for SVG rendering. No external deps.
+ */
+export type BarcodeSymbology = 'code128' | 'ean13' | 'ean8' | 'upc_a';
+export type BarcodeRun = {
+    x: number;
+    w: number;
+    black: boolean;
+};
+export type EncodedBarcode = {
+    format: BarcodeSymbology;
+    text: string;
+    runs: BarcodeRun[];
+    modules: number;
+};
+/** GS1 check digit for a payload without the check (odd positions from the right × 3). */
+export declare function gs1CheckDigit(payload: string): number;
+export declare function isValidGs1(digits: string): boolean;
+export declare function encodeBarcode(value: string, format?: 'auto' | BarcodeSymbology): EncodedBarcode | null;

package/dist/utils/barcode.js

@@ -0,0 +1,273 @@
+/**
+ * Standards-compliant 1D barcode encoder (Code 128, EAN-13, EAN-8, UPC-A).
+ * Generates module runs suitable for SVG rendering. No external deps.
+ */
+const QUIET = 10;
+/** Code 128 patterns 0–106 (11 modules). Stop is 106 + terminal bar `11`. */
+const CODE128 = [
+    '11011001100',
+    '11001101100',
+    '11001100110',
+    '10010011000',
+    '10010001100',
+    '10001001100',
+    '10011001000',
+    '10011000100',
+    '10001100100',
+    '11001001000',
+    '11001000100',
+    '11000100100',
+    '10110011100',
+    '10011011100',
+    '10011001110',
+    '10111001100',
+    '10011101100',
+    '10011100110',
+    '11001110010',
+    '11001011100',
+    '11001001110',
+    '11011100100',
+    '11001110100',
+    '11101101110',
+    '11101001100',
+    '11100101100',
+    '11100100110',
+    '11101100100',
+    '11100110100',
+    '11100110010',
+    '11011011000',
+    '11011000110',
+    '11000110110',
+    '10100011000',
+    '10001011000',
+    '10001000110',
+    '10110001000',
+    '10001101000',
+    '10001100010',
+    '11010001000',
+    '11000101000',
+    '11000100010',
+    '10110111000',
+    '10110001110',
+    '10001101110',
+    '10111011000',
+    '10111000110',
+    '10001110110',
+    '11101110110',
+    '11010001110',
+    '11000101110',
+    '11011101000',
+    '11011100010',
+    '11011101110',
+    '11101011000',
+    '11101000110',
+    '11100010110',
+    '11101101000',
+    '11101100010',
+    '11100011010',
+    '11101111010',
+    '11001000010',
+    '11110001010',
+    '10100110000',
+    '10100001100',
+    '10010110000',
+    '10010000110',
+    '10000101100',
+    '10000100110',
+    '10110010000',
+    '10110000100',
+    '10011010000',
+    '10011000010',
+    '10000110100',
+    '10000110010',
+    '11000010010',
+    '11001010000',
+    '11110111010',
+    '11000010100',
+    '10001111010',
+    '10100111100',
+    '10010111100',
+    '10010011110',
+    '10111100100',
+    '10011110100',
+    '10011110010',
+    '11110100100',
+    '11110010100',
+    '11110010010',
+    '11011011110',
+    '11011110110',
+    '11110110110',
+    '10101111000',
+    '10100011110',
+    '10001011110',
+    '10111101000',
+    '10111100010',
+    '11110101000',
+    '11110100010',
+    '10111011110',
+    '10111101110',
+    '11101011110',
+    '11110101110',
+    '11010000100',
+    '11010010000',
+    '11010011100',
+    '11000111010'
+];
+const EAN_L = [
+    '0001101',
+    '0011001',
+    '0010011',
+    '0111101',
+    '0100011',
+    '0110001',
+    '0101111',
+    '0111011',
+    '0110111',
+    '0001011'
+];
+const EAN_G = [
+    '0100111',
+    '0110011',
+    '0011011',
+    '0100001',
+    '0011101',
+    '0111001',
+    '0000101',
+    '0010001',
+    '0001001',
+    '0010111'
+];
+const EAN_R = [
+    '1110010',
+    '1100110',
+    '1101100',
+    '1000010',
+    '1011100',
+    '1001110',
+    '1010000',
+    '1000100',
+    '1001000',
+    '1110100'
+];
+/** First-digit parity for the left half of EAN-13 (L/G). */
+const EAN13_PARITY = [
+    'LLLLLL',
+    'LLGLGG',
+    'LLGGLG',
+    'LLGGGL',
+    'LGLLGG',
+    'LGGLLG',
+    'LGGGLL',
+    'LGLGLG',
+    'LGLGGL',
+    'LGGLGL'
+];
+function bitsToRuns(bits) {
+    const runs = [];
+    for (const ch of bits) {
+        const black = ch === '1';
+        const last = runs.at(-1);
+        if (last && last.black === black)
+            last.w += 1;
+        else
+            runs.push({ x: last ? last.x + last.w : 0, w: 1, black });
+    }
+    return runs;
+}
+function withQuiet(bits, left = QUIET, right = QUIET) {
+    return `${'0'.repeat(left)}${bits}${'0'.repeat(right)}`;
+}
+function encoded(format, text, bits) {
+    const padded = withQuiet(bits);
+    return { format, text, runs: bitsToRuns(padded), modules: padded.length };
+}
+/** GS1 check digit for a payload without the check (odd positions from the right × 3). */
+export function gs1CheckDigit(payload) {
+    let sum = 0;
+    for (let i = 0; i < payload.length; i++) {
+        const n = Number(payload[payload.length - 1 - i]);
+        sum += n * (i % 2 === 0 ? 3 : 1);
+    }
+    return (10 - (sum % 10)) % 10;
+}
+export function isValidGs1(digits) {
+    if (!/^\d{8}$|^\d{12}$|^\d{13}$/.test(digits))
+        return false;
+    return gs1CheckDigit(digits.slice(0, -1)) === Number(digits.at(-1));
+}
+function encodeCode128(text) {
+    if (!text)
+        return null;
+    const codes = [104];
+    for (const ch of text) {
+        const code = ch.charCodeAt(0) - 32;
+        if (code < 0 || code > 94)
+            return null;
+        codes.push(code);
+    }
+    let sum = codes[0];
+    for (let i = 1; i < codes.length; i++)
+        sum += codes[i] * i;
+    codes.push(sum % 103);
+    let bits = '';
+    for (const code of codes)
+        bits += CODE128[code];
+    bits += `${CODE128[106]}11`;
+    return encoded('code128', text, bits);
+}
+function encodeEan13(digits) {
+    if (!/^\d{13}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    const first = Number(digits[0]);
+    const parity = EAN13_PARITY[first];
+    let bits = '101';
+    for (let i = 0; i < 6; i++) {
+        const d = Number(digits[i + 1]);
+        bits += parity[i] === 'G' ? EAN_G[d] : EAN_L[d];
+    }
+    bits += '01010';
+    for (let i = 7; i < 13; i++)
+        bits += EAN_R[Number(digits[i])];
+    bits += '101';
+    return encoded('ean13', digits, bits);
+}
+function encodeEan8(digits) {
+    if (!/^\d{8}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    let bits = '101';
+    for (let i = 0; i < 4; i++)
+        bits += EAN_L[Number(digits[i])];
+    bits += '01010';
+    for (let i = 4; i < 8; i++)
+        bits += EAN_R[Number(digits[i])];
+    bits += '101';
+    return encoded('ean8', digits, bits);
+}
+function encodeUpcA(digits) {
+    if (!/^\d{12}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    const ean = encodeEan13(`0${digits}`);
+    if (!ean)
+        return null;
+    return { ...ean, format: 'upc_a', text: digits };
+}
+export function encodeBarcode(value, format = 'auto') {
+    const text = value.trim();
+    if (!text)
+        return null;
+    if (format === 'code128')
+        return encodeCode128(text);
+    if (format === 'ean13')
+        return encodeEan13(text);
+    if (format === 'ean8')
+        return encodeEan8(text);
+    if (format === 'upc_a')
+        return encodeUpcA(text);
+    if (/^\d{13}$/.test(text) && isValidGs1(text))
+        return encodeEan13(text);
+    if (/^\d{12}$/.test(text) && isValidGs1(text))
+        return encodeUpcA(text);
+    if (/^\d{8}$/.test(text) && isValidGs1(text))
+        return encodeEan8(text);
+    return encodeCode128(text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.17.11",
+	"version": "0.19.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -66,8 +66,8 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@lucide/svelte": "^1.39.0",
-		"@playwright/test": "^1.62.1",
+		"@lucide/svelte": "^1.44.0",
+		"@playwright/test": "^1.63.0",
 		"@storybook/addon-a11y": "^10.6.0",
 		"@storybook/addon-docs": "^10.6.0",
 		"@storybook/addon-svelte-csf": "^5.1.3",
@@ -80,14 +80,14 @@
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/node": "^26.4.1",
-		"@vitest/browser-playwright": "^4.1.11",
+		"@vitest/browser-playwright": "^5.0.0",
 		"bumpp": "~12.3.0",
-		"eslint": "^10.9.1",
+		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
 		"globals": "^17.12.0",
 		"mdsvex": "^0.12.8",
-		"playwright": "^1.62.1",
+		"playwright": "^1.63.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
@@ -97,10 +97,10 @@
 		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"typescript": "6.0.3",
-		"typescript-eslint": "^8.69.0",
+		"typescript-eslint": "^8.70.0",
 		"vite": "^8.2.2",
-		"vitest": "^4.1.11",
-		"vitest-browser-svelte": "^3.0.0"
+		"vitest": "^5.0.0",
+		"vitest-browser-svelte": "^3.1.0"
 	},
 	"keywords": [
 		"svelte",