@jelinek/ui 0.5.2 → 0.9.0

package/dist/components/commerce/ProductTabs.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	// Description / parameters / benefits switcher for the PDP, on kit Tabs/Tab.
+	// Each tab renders only when its content exists — a product with no benefits
+	// never shows an empty „Benefity“ tab, and the whole component renders
+	// nothing when all three are empty.
+	import Tab from '../Tab.svelte';
+	import Tabs from '../Tabs.svelte';
+
+	interface Props {
+		/** Sanitized HTML (sanitize server-side!) — never author-controlled raw input. */
+		description?: string;
+		parameters?: { label: string; value: string }[];
+		benefits?: string[];
+		/** Localized tab captions; Czech defaults. */
+		labels?: { description?: string; parameters?: string; benefits?: string };
+	}
+
+	let { description, parameters, benefits, labels }: Props = $props();
+
+	type TabKey = 'description' | 'parameters' | 'benefits';
+
+	let availableTabs = $derived(
+		(
+			[
+				description ? 'description' : null,
+				parameters && parameters.length > 0 ? 'parameters' : null,
+				benefits && benefits.length > 0 ? 'benefits' : null
+			] as (TabKey | null)[]
+		).filter((tab): tab is TabKey => tab !== null)
+	);
+
+	// Tabs' `value` is a plain bindable string (not typed to our TabKey union),
+	// so the raw binding target stays a string and every read narrows it
+	// against availableTabs.
+	let active = $state('');
+
+	// Keep the active tab valid as content availability changes (e.g. the
+	// description loads after the initial render) — default to the first
+	// available tab whenever the current pick is gone.
+	$effect(() => {
+		if (!availableTabs.includes(active as TabKey)) {
+			active = availableTabs[0] ?? '';
+		}
+	});
+
+	const caption = $derived({
+		description: labels?.description ?? 'Popis',
+		parameters: labels?.parameters ?? 'Parametry',
+		benefits: labels?.benefits ?? 'Benefity'
+	});
+</script>
+
+{#if availableTabs.length > 0}
+	<div>
+		<Tabs bind:value={active}>
+			{#each availableTabs as tab (tab)}
+				<Tab value={tab}>{caption[tab]}</Tab>
+			{/each}
+		</Tabs>
+
+		<div class="mt-5">
+			{#if active === 'description' && description}
+				<!-- font-normal pinned: Archer has no 300 cut, and a font-light
+				     ancestor (the guide's Demo panel) would otherwise substitute. -->
+				<div class="font-(family-name:--font-serif) font-normal text-(length:--step1) leading-relaxed">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- documented prop contract: sanitized server-side, never author-controlled raw HTML. -->
+					{@html description}
+				</div>
+			{:else if active === 'parameters' && parameters}
+				<dl class="divide-border-subtle divide-y">
+					{#each parameters as parameter, index (`${index}-${parameter.label}-${parameter.value}`)}
+						<div class="flex items-baseline justify-between gap-4 py-2.5">
+							<dt class="text-fg-muted1 text-(length:--step-down1)">{parameter.label}</dt>
+							<dd class="text-right font-medium">{parameter.value}</dd>
+						</div>
+					{/each}
+				</dl>
+			{:else if active === 'benefits' && benefits}
+				<ul class="space-y-3 text-(length:--step-down1) leading-6">
+					{#each benefits as benefit (benefit)}
+						<li>{benefit}</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/components/commerce/ProductTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /** Sanitized HTML (sanitize server-side!) — never author-controlled raw input. */
+    description?: string;
+    parameters?: {
+        label: string;
+        value: string;
+    }[];
+    benefits?: string[];
+    /** Localized tab captions; Czech defaults. */
+    labels?: {
+        description?: string;
+        parameters?: string;
+        benefits?: string;
+    };
+}
+declare const ProductTabs: import("svelte").Component<Props, {}, "">;
+type ProductTabs = ReturnType<typeof ProductTabs>;
+export default ProductTabs;

package/dist/components/commerce/QuantityStepper.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+		min?: number;
+		max?: number;
+		disabled?: boolean;
+		onchange: (value: number) => void;
+		/** Accessible labels of the − / + buttons. */
+		decreaseLabel?: string;
+		increaseLabel?: string;
+	}
+
+	let {
+		value,
+		min = 1,
+		max,
+		disabled = false,
+		onchange,
+		decreaseLabel = 'Snížit množství',
+		increaseLabel = 'Zvýšit množství'
+	}: Props = $props();
+</script>
+
+<div class="rounded-button border-border-subtle inline-flex items-center border">
+	<button
+		type="button"
+		aria-label={decreaseLabel}
+		disabled={disabled || value <= min}
+		class="text-fg-muted1 hover:text-fg grid size-9 place-items-center disabled:opacity-40"
+		onclick={() => onchange(value - 1)}
+	>
+		<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14" /></svg>
+	</button>
+	<span class="min-w-8 text-center font-medium tabular-nums">{value}</span>
+	<button
+		type="button"
+		aria-label={increaseLabel}
+		disabled={disabled || (max !== undefined && value >= max)}
+		class="text-fg-muted1 hover:text-fg grid size-9 place-items-center disabled:opacity-40"
+		onclick={() => onchange(value + 1)}
+	>
+		<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+	</button>
+</div>

package/dist/components/commerce/QuantityStepper.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onchange: (value: number) => void;
+    /** Accessible labels of the − / + buttons. */
+    decreaseLabel?: string;
+    increaseLabel?: string;
+}
+declare const QuantityStepper: import("svelte").Component<Props, {}, "">;
+type QuantityStepper = ReturnType<typeof QuantityStepper>;
+export default QuantityStepper;

package/dist/components/commerce/RatingStars.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		/** 0–5, fractions paint a partial star. */
+		rating: number;
+		/** Review count printed after the stars. */
+		count?: number;
+	}
+
+	let { rating, count }: Props = $props();
+
+	// $props.id() instead of Math.random(): stable across SSR + hydration, so
+	// the gradient defs and their url(#…) references cannot mismatch.
+	const uid = $props.id();
+	const stars = $derived(
+		[1, 2, 3, 4, 5].map((i) => (rating >= i ? 1 : rating > i - 1 ? rating - (i - 1) : 0))
+	);
+</script>
+
+<span class="inline-flex items-center gap-1" role="img" aria-label="{rating.toFixed(1)} z 5">
+	{#each stars as fill, i (i)}
+		<svg viewBox="0 0 24 24" class="size-4">
+			<defs
+				><linearGradient id="{uid}-{i}"
+					><stop offset="{fill * 100}%" stop-color="var(--JELINEK-BROWN)" /><stop
+						offset="{fill * 100}%"
+						stop-color="var(--border-subtle)"
+					/></linearGradient
+				></defs
+			>
+			<path
+				fill="url(#{uid}-{i})"
+				d="M12 2l2.9 6.26 6.6.56-5 4.44 1.5 6.5L12 16.3 5.99 19.76l1.5-6.5-5-4.44 6.6-.56z"
+			/>
+		</svg>
+	{/each}
+	{#if count !== undefined}<span class="text-fg-muted1 text-(length:--step-down1) ml-1"
+			>({count})</span
+		>{/if}
+</span>

package/dist/components/commerce/RatingStars.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** 0–5, fractions paint a partial star. */
+    rating: number;
+    /** Review count printed after the stars. */
+    count?: number;
+}
+declare const RatingStars: import("svelte").Component<Props, {}, "">;
+type RatingStars = ReturnType<typeof RatingStars>;
+export default RatingStars;

package/dist/components/commerce/SideToggle.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	// Bed-side picker for dual-configuration products (matrace-fe's SideButton,
+	// genericized): the caller supplies the selection summary as children, the
+	// component owns the active/inactive chrome and the bed illustration.
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		side: 'left' | 'right';
+		/** Caption above the summary („Levá strana“). */
+		label: string;
+		active: boolean;
+		onclick: () => void;
+		/** Summary of that side's configuration (firmness, foam…). */
+		children?: Snippet;
+	}
+
+	let { side, label, active, onclick, children }: Props = $props();
+
+	// Illustration palette, not UI surface colors — the soft magenta highlight
+	// and wood headboard come from matrace-fe's artwork and deliberately stay
+	// literal (a division re-theme must not repaint a drawing of a bed).
+	const leftFill = $derived(side === 'left' && active ? '#fae6f1' : '#f2f4f3');
+	const leftStroke = $derived(side === 'left' && active ? '#f0b1d5' : '#cfd7d2');
+	const rightFill = $derived(side === 'right' && active ? '#fae6f1' : '#f2f4f3');
+	const rightStroke = $derived(side === 'right' && active ? '#f0b1d5' : '#cfd7d2');
+</script>
+
+<button
+	type="button"
+	class="rounded-card cursor-pointer border px-3 py-2.5 text-left transition-all duration-200 max-sm:px-2 max-sm:py-2 {active
+		? 'border-(--JELINEK-BROWN) bg-surface-gray shadow-resting'
+		: 'border-border-subtle bg-surface hover:border-(--text-muted2)'}"
+	aria-pressed={active}
+	{onclick}
+>
+	<div class="flex items-start justify-between gap-1 sm:gap-3">
+		<div class="flex min-w-0 flex-col">
+			<p
+				class="text-(--color-accent-text) truncate text-[0.65rem] font-bold tracking-[0.05em] uppercase sm:text-[0.7rem]"
+			>
+				{label}
+			</p>
+			{#if children}
+				<div class="mt-2 flex flex-col gap-2">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+		<svg
+			class="mt-0.5 h-20 w-15 shrink-0 max-sm:h-14 max-sm:w-10"
+			viewBox="0 0 100 135"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<!-- Headboard -->
+			<rect x="0" y="10" width="100" height="10" rx="3" fill="#D8B589" />
+			<!-- Left mattress -->
+			<path d="M 49 22 H 9 A 4 4 0 0 0 5 26 V 116 A 4 4 0 0 0 9 120 H 49 Z" fill={leftFill} />
+			<path
+				d="M 49 22 H 9 A 4 4 0 0 0 5 26 V 116 A 4 4 0 0 0 9 120 H 49"
+				stroke={leftStroke}
+				stroke-width="2"
+				fill="none"
+			/>
+			<!-- Right mattress -->
+			<path d="M 51 22 H 91 A 4 4 0 0 1 95 26 V 116 A 4 4 0 0 1 91 120 H 51 Z" fill={rightFill} />
+			<path
+				d="M 51 120 H 91 A 4 4 0 0 0 95 116 V 26 A 4 4 0 0 0 91 22 H 51"
+				stroke={rightStroke}
+				stroke-width="2"
+				fill="none"
+			/>
+			<!-- Pillows -->
+			<rect x="12" y="29" width="30" height="16" rx="4" fill="white" stroke="#c8d3cd" stroke-width="1.5" />
+			<rect x="57" y="29" width="30" height="16" rx="4" fill="white" stroke="#c8d3cd" stroke-width="1.5" />
+		</svg>
+	</div>
+</button>

package/dist/components/commerce/SideToggle.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    side: 'left' | 'right';
+    /** Caption above the summary („Levá strana“). */
+    label: string;
+    active: boolean;
+    onclick: () => void;
+    /** Summary of that side's configuration (firmness, foam…). */
+    children?: Snippet;
+}
+declare const SideToggle: import("svelte").Component<Props, {}, "">;
+type SideToggle = ReturnType<typeof SideToggle>;
+export default SideToggle;

package/dist/components/commerce/Skeleton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	interface Props {
+		/** Rozměry placeholderu — sám je jen plocha. */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class="animate-pulse rounded-card bg-surface-gray {className}" aria-hidden="true"></div>

package/dist/components/commerce/Skeleton.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    /** Rozměry placeholderu — sám je jen plocha. */
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/commerce/StickyBar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		visible: boolean;
+		children: Snippet;
+	}
+
+	let { visible, children }: Props = $props();
+</script>
+
+<!-- Glass strip under the kit's floating header card. z-40 keeps it BELOW the
+     header (SiteHeader is z-50) — any higher and the strip renders over the
+     card and its backdrop blur smears the whole top of the page. Top offset:
+     var(--header-h) from 640px up so the strip hangs under the fixed card;
+     top-0 on a phone, where the kit bar is absolute and has already scrolled
+     away by the time this strip appears (it only shows once the product header
+     left the viewport). -->
+<div
+	aria-hidden={!visible}
+	class="fixed inset-x-0 top-0 z-40 border-b border-(--glass-border) bg-(--glass-fill) backdrop-blur-[25px] backdrop-saturate-140 transition-transform duration-(--dur-base) min-[640px]:top-(--header-h)
+		{visible ? 'translate-y-0' : 'pointer-events-none -translate-y-[calc(100%+var(--header-h))]'}"
+>
+	<div class="max-w-page mx-auto flex w-full items-center gap-4 px-6 py-3">
+		{@render children()}
+	</div>
+</div>

package/dist/components/commerce/StickyBar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    visible: boolean;
+    children: Snippet;
+}
+declare const StickyBar: import("svelte").Component<Props, {}, "">;
+type StickyBar = ReturnType<typeof StickyBar>;
+export default StickyBar;

package/dist/components/commerce/StockBadge.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	interface Props {
+		state: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+		/** Text override — a localized label or a concrete lead time („Do 3 týdnů“). */
+		label?: string;
+		compact?: boolean;
+	}
+
+	let { state, label, compact = false }: Props = $props();
+
+	const DEFAULTS: Record<Props['state'], string> = {
+		'in-stock': 'Skladem',
+		'on-order': 'Na objednávku',
+		'sold-out': 'Vyprodáno',
+		// `lead` has no meaningful default — the whole point of the state is a
+		// concrete lead time the caller computed. Empty keeps the dot alone.
+		lead: ''
+	};
+
+	const config = $derived(
+		{
+			'in-stock': {
+				cls: 'text-(--sem-success-strong)',
+				dot: 'bg-(--sem-success-strong)'
+			},
+			'on-order': { cls: 'text-(--color-stock-order)', dot: 'bg-(--color-stock-order)' },
+			'sold-out': { cls: 'text-fg-muted1', dot: 'bg-(--text-muted2)' },
+			lead: { cls: 'text-(--color-stock-order)', dot: 'bg-(--color-stock-order)' }
+		}[state]
+	);
+
+	const text = $derived(label ?? DEFAULTS[state]);
+</script>
+
+{#if compact}
+	<span class="inline-flex items-center gap-1.5 text-(length:--step-down1) font-medium {config.cls}">
+		<span class="size-2 rounded-pill {config.dot}"></span>{text}
+	</span>
+{:else}
+	<span
+		class="rounded-pill bg-surface-gray inline-flex items-center gap-2 px-3 py-1 text-(length:--step-down1) font-medium {config.cls}"
+	>
+		<span class="size-2 rounded-pill {config.dot}"></span>{text}
+	</span>
+{/if}

package/dist/components/commerce/StockBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    state: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+    /** Text override — a localized label or a concrete lead time („Do 3 týdnů“). */
+    label?: string;
+    compact?: boolean;
+}
+declare const StockBadge: import("svelte").Component<Props, {}, "">;
+type StockBadge = ReturnType<typeof StockBadge>;
+export default StockBadge;

package/dist/components/commerce/Toaster.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { onMount } from 'svelte';
+	import { toasts, type ToastItem } from './toast.js';
+
+	interface Props {
+		/** Extra classes on the fixed wrapper (e.g. a different bottom offset). */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	// toast.ts is a plain (non-runes) class — see the comment at its top for why — so this
+	// component mirrors it into its own `$state` via subscribe() rather than reading it directly.
+	let items: readonly ToastItem[] = $state([]);
+
+	onMount(() => toasts.subscribe((next) => (items = next)));
+</script>
+
+<!-- z-scale contract: header 1100, Drawer/Modal 1200+, search overlays 1400.
+     Toasts must clear all of it so an add-to-cart confirmation is never hidden
+     under a drawer/overlay — hence z-[1500]. -->
+<div
+	class="pointer-events-none fixed inset-x-0 bottom-6 z-[1500] flex flex-col items-center gap-2 {className}"
+>
+	{#each items as t (t.id)}
+		<div
+			transition:fly={{ y: 16, duration: 200 }}
+			class="rounded-pill text-fg-inverse shadow-interactive pointer-events-auto bg-(--bg-black) px-5 py-2.5 text-(length:--step-down1) font-medium"
+		>
+			{t.message}
+		</div>
+	{/each}
+</div>

package/dist/components/commerce/Toaster.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    /** Extra classes on the fixed wrapper (e.g. a different bottom offset). */
+    class?: string;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/commerce/TrustBadges.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		/**
+		 * Required on purpose — the kit ships no icon library, so the badges
+		 * (icon component + label) come from the app. Icons render at 14 px.
+		 */
+		items: { icon: Component; label: string }[];
+		/** Absolute glass strip over a photo's bottom edge instead of an inline row. */
+		overlay?: boolean;
+	}
+
+	let { items, overlay = false }: Props = $props();
+</script>
+
+<div class={overlay ? 'absolute inset-x-3 bottom-3 flex flex-wrap gap-2' : 'flex flex-wrap gap-2'}>
+	{#each items as item (item.label)}
+		<span
+			class="rounded-pill flex items-center gap-1.5 bg-(--glass-fill) px-3 py-1.5 text-(length:--step-down2) font-medium backdrop-blur-[25px]"
+		>
+			<item.icon class="size-3.5" />
+			{item.label}
+		</span>
+	{/each}
+</div>

package/dist/components/commerce/TrustBadges.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+interface Props {
+    /**
+     * Required on purpose — the kit ships no icon library, so the badges
+     * (icon component + label) come from the app. Icons render at 14 px.
+     */
+    items: {
+        icon: Component;
+        label: string;
+    }[];
+    /** Absolute glass strip over a photo's bottom edge instead of an inline row. */
+    overlay?: boolean;
+}
+declare const TrustBadges: Component<Props, {}, "">;
+type TrustBadges = ReturnType<typeof TrustBadges>;
+export default TrustBadges;

package/dist/components/commerce/cart-types.d.ts

@@ -0,0 +1,12 @@
+/** One cart row as the kit's cart components see it — plain data, no PIM types. */
+export type CartLine = {
+    id: number | string;
+    productName: string;
+    /** One-line configuration recap („180×200, dub, tvrdá“). Null and undefined
+     *  both mean „none“ — API rows often carry explicit nulls. */
+    configSummary?: string | null;
+    imageUrl?: string | null;
+    quantity: number;
+    /** Row total (quantity already included). */
+    lineTotal: number;
+};

package/dist/components/commerce/cart-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/commerce/money.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The kit's two money formatters, ported verbatim from the store so every
+ * consumer prints prices the same way.
+ *
+ * `formatPrice` — display surfaces (product cards, price tags, CTAs): whole
+ * CZK with non-breaking thousand separators, legibility first.
+ * `formatMoney` — cart/checkout amounts: EUR keeps 2-decimal precision, CZK
+ * rounds to whole crowns.
+ *
+ * @example formatPrice(18350) → "18 350 Kč"
+ * @example formatMoney(1234.5, "EUR") → "1 234,50 €"
+ */
+export declare function formatPrice(amount: number, currency?: string): string;
+export declare function formatMoney(amount: number, currency?: string): string;

package/dist/components/commerce/money.js

@@ -0,0 +1,26 @@
+/**
+ * The kit's two money formatters, ported verbatim from the store so every
+ * consumer prints prices the same way.
+ *
+ * `formatPrice` — display surfaces (product cards, price tags, CTAs): whole
+ * CZK with non-breaking thousand separators, legibility first.
+ * `formatMoney` — cart/checkout amounts: EUR keeps 2-decimal precision, CZK
+ * rounds to whole crowns.
+ *
+ * @example formatPrice(18350) → "18 350 Kč"
+ * @example formatMoney(1234.5, "EUR") → "1 234,50 €"
+ */
+export function formatPrice(amount, currency = 'CZK') {
+    return new Intl.NumberFormat('cs-CZ', {
+        style: 'currency',
+        currency,
+        maximumFractionDigits: 0
+    }).format(amount);
+}
+export function formatMoney(amount, currency = 'CZK') {
+    const rounded = currency === 'EUR' ? Math.round(amount * 100) / 100 : Math.round(amount);
+    if (currency === 'EUR') {
+        return `${rounded.toLocaleString('sk-SK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`;
+    }
+    return `${rounded.toLocaleString('cs-CZ')} Kč`;
+}

package/dist/components/commerce/overlay.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Svelte action: reparent the node to <body>. `fixed` + z-index is not enough
+ * when the overlay is mounted inside an ancestor that creates a stacking
+ * context (e.g. a PDP gallery's `lg:sticky` column) — the whole overlay then
+ * paints below later siblings regardless of z-index. Portaling out of the
+ * ancestor is the only robust fix.
+ */
+export declare function portal(node: HTMLElement): {
+    destroy: () => void;
+};
+/** Lock body scroll; returns the unlock function (for use inside $effect). */
+export declare function lockScroll(): () => void;

package/dist/components/commerce/overlay.js

@@ -0,0 +1,20 @@
+// Shared plumbing for overlay primitives (Modal, Drawer).
+/**
+ * Svelte action: reparent the node to <body>. `fixed` + z-index is not enough
+ * when the overlay is mounted inside an ancestor that creates a stacking
+ * context (e.g. a PDP gallery's `lg:sticky` column) — the whole overlay then
+ * paints below later siblings regardless of z-index. Portaling out of the
+ * ancestor is the only robust fix.
+ */
+export function portal(node) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+}
+/** Lock body scroll; returns the unlock function (for use inside $effect). */
+export function lockScroll() {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+        document.body.style.overflow = prev;
+    };
+}

package/dist/components/commerce/toast.d.ts

@@ -0,0 +1,26 @@
+export type ToastItem = {
+    id: string;
+    message: string;
+};
+type Listener = (items: readonly ToastItem[]) => void;
+declare class ToastStore {
+    #private;
+    /** Plain snapshot, not reactive — re-reading this getter after a mutation sees the update, but
+     *  nothing re-renders automatically outside a `subscribe()` listener (see below). */
+    get items(): readonly ToastItem[];
+    /** Show a toast. Passing an `id` that's already showing replaces its message and resets its timer. */
+    show(message: string, opts?: {
+        id?: string;
+        duration?: number;
+    }): void;
+    dismiss(id: string): void;
+    /**
+     * For Toaster.svelte to mirror `items` into its own reactive state. Returns an unsubscribe fn.
+     * Note: `items` is a plain getter, not a Svelte rune — it is NOT reactive outside a subscriber.
+     * Reading `toasts.items` directly from a component template will not update on show/dismiss;
+     * either call `subscribe()` yourself or route the UI through `<Toaster />`.
+     */
+    subscribe(listener: Listener): () => void;
+}
+export declare const toasts: ToastStore;
+export {};