@jelinek/ui 0.5.3 → 0.9.1

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 font-secondary font-light 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,13 @@
+<script lang="ts">
+	interface Props {
+		/** Rozměry placeholderu — sám je jen plocha. */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<!-- Shimmer místo pulzu (majitel, 14. 8. 2026) — projíždějící gradient,
+     definovaný v theme/extras.css (.skeleton-shimmer); tam je i klidová
+     varianta pro prefers-reduced-motion. -->
+<div class="skeleton-shimmer rounded-card {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-bar (40) keeps it
+     BELOW the header (--z-header, 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-(--z-bar) 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 font-secondary font-light">
+		{@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 font-secondary 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 font-secondary 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,38 @@
+<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>
+
+<!-- Škála vrstev (jelinek.css :root): hlavička --z-header (50), Drawer/Modal
+     --z-overlay (1200), toasty nade vším — --z-toast (1500; potvrzení
+     o přidání do košíku nesmí zmizet pod drawerem). role="status"
+     + aria-live="polite": kontejner tu je trvale, takže čtečky ohlásí každý
+     toast, který do něj přibude — dřív byly hlášky pro čtečky němé (EAA). -->
+<div
+	role="status"
+	aria-live="polite"
+	class="pointer-events-none fixed inset-x-0 bottom-6 z-(--z-toast) 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 font-secondary 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 font-secondary 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,26 @@
+/**
+ * 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;
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export declare function rememberFocus(): () => void;

package/dist/components/commerce/overlay.js

@@ -0,0 +1,69 @@
+// 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;
+    };
+}
+// Co se v překryvu dá zaostřit tabulátorem. Bez filtru viditelnosti —
+// otevřený overlay svůj obsah zobrazuje celý a jsdom (unit testy)
+// offsetParent nezná.
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), ' +
+    'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export function trapFocus(container) {
+    const onKey = (e) => {
+        if (e.key !== 'Tab')
+            return;
+        const items = Array.from(container.querySelectorAll(FOCUSABLE));
+        if (items.length === 0) {
+            e.preventDefault();
+            container.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey && (active === first || active === container)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    container.addEventListener('keydown', onKey);
+    return () => container.removeEventListener('keydown', onKey);
+}
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export function rememberFocus() {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    return () => {
+        if (opener && document.contains(opener))
+            opener.focus();
+    };
+}

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 {};

package/dist/components/commerce/toast.js

@@ -0,0 +1,44 @@
+class ToastStore {
+    #items = [];
+    #timers = new Map();
+    #listeners = new Set();
+    /** 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() {
+        return this.#items;
+    }
+    /** Show a toast. Passing an `id` that's already showing replaces its message and resets its timer. */
+    show(message, opts = {}) {
+        const id = opts.id ?? crypto.randomUUID();
+        const existing = this.#timers.get(id);
+        if (existing)
+            clearTimeout(existing);
+        this.#items = [...this.#items.filter((t) => t.id !== id), { id, message }];
+        this.#notify();
+        this.#timers.set(id, setTimeout(() => this.dismiss(id), opts.duration ?? 3000));
+    }
+    dismiss(id) {
+        const existing = this.#timers.get(id);
+        if (existing)
+            clearTimeout(existing);
+        this.#items = this.#items.filter((t) => t.id !== id);
+        this.#timers.delete(id);
+        this.#notify();
+    }
+    /**
+     * 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) {
+        this.#listeners.add(listener);
+        listener(this.#items);
+        return () => this.#listeners.delete(listener);
+    }
+    #notify() {
+        for (const listener of this.#listeners)
+            listener(this.#items);
+    }
+}
+export const toasts = new ToastStore();

package/dist/index.d.ts

@@ -1,39 +1,80 @@
 export { cn } from './utils/cn.js';
 export { createChapterNavDock } from './utils/chapter-nav-dock.svelte.js';
 export { default as Alert } from './components/Alert.svelte';
+export { default as Breadcrumbs } from './components/commerce/Breadcrumbs.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
+export { default as CartDrawer } from './components/commerce/CartDrawer.svelte';
+export { default as CartLineItem } from './components/commerce/CartLineItem.svelte';
+export { type CartLine } from './components/commerce/cart-types.js';
 export { default as ChapterNav } from './components/ChapterNav.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckoutProgress } from './components/commerce/CheckoutProgress.svelte';
+export { default as CmsButton } from './components/blocks/CmsButton.svelte';
+export { default as CmsColumns } from './components/blocks/CmsColumns.svelte';
+export { default as CmsCover } from './components/blocks/CmsCover.svelte';
+export { default as CmsHeading } from './components/blocks/CmsHeading.svelte';
+export { default as CmsImage } from './components/blocks/CmsImage.svelte';
+export { default as CmsMediaText } from './components/blocks/CmsMediaText.svelte';
+export { default as CmsText } from './components/blocks/CmsText.svelte';
 export { default as CodeCopy } from './components/CodeCopy.svelte';
+export { default as ConfigSection } from './components/commerce/ConfigSection.svelte';
 export { CONTAINER_CONTEXT } from './components/container-context.js';
 export { default as Container } from './components/Container.svelte';
 export { default as ContentLogo } from './components/ContentLogo.svelte';
 export { default as Demo } from './components/Demo.svelte';
+export { default as DimensionSlider } from './components/commerce/DimensionSlider.svelte';
+export { default as Drawer } from './components/commerce/Drawer.svelte';
+export { default as EmptyState } from './components/commerce/EmptyState.svelte';
 export { default as Eyebrow } from './components/Eyebrow.svelte';
+export { default as FilterChip } from './components/commerce/FilterChip.svelte';
+export { formatMoney, formatPrice } from './components/commerce/money.js';
+export { default as FreeShippingBar } from './components/commerce/FreeShippingBar.svelte';
+export { default as Gallery } from './components/commerce/Gallery.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as Grid } from './components/Grid.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListingToolbar } from './components/commerce/ListingToolbar.svelte';
+export { default as Modal } from './components/commerce/Modal.svelte';
 export { isActive, type NavItem, type NavGroup } from './components/nav.js';
 export { default as OptionTile } from './components/OptionTile.svelte';
+export { default as OrderSummary } from './components/commerce/OrderSummary.svelte';
 export { default as PageHero } from './components/PageHero.svelte';
 export { default as Pager } from './components/Pager.svelte';
+export { default as Pagination } from './components/commerce/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PhotoTile } from './components/PhotoTile.svelte';
+export { default as PriceDisplay } from './components/commerce/PriceDisplay.svelte';
 export { default as ProductCard } from './components/ProductCard.svelte';
+export { default as ProductHeader } from './components/commerce/ProductHeader.svelte';
+export { default as ProductStickyBar } from './components/commerce/ProductStickyBar.svelte';
+export { default as ProductTabs } from './components/commerce/ProductTabs.svelte';
+export { default as QuantityStepper } from './components/commerce/QuantityStepper.svelte';
 export { default as Radio } from './components/Radio.svelte';
+export { default as RatingStars } from './components/commerce/RatingStars.svelte';
 export { RADIO_CONTEXT, type RadioContext } from './components/radio-context.js';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchField } from './components/commerce/SearchField.svelte';
 export { default as Select } from './components/Select.svelte';
+export { portal } from './components/commerce/overlay.js';
+export { default as SideToggle } from './components/commerce/SideToggle.svelte';
 export { default as SiteFooter } from './components/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader.svelte';
+export { default as Skeleton } from './components/commerce/Skeleton.svelte';
 export { default as Slider } from './components/Slider.svelte';
+export { default as StickyBar } from './components/commerce/StickyBar.svelte';
+export { default as StockBadge } from './components/commerce/StockBadge.svelte';
 export { default as Swatch } from './components/Swatch.svelte';
+export { default as Switch } from './components/Switch.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { TABS_CONTEXT, type TabsContext } from './components/tabs-context.js';
 export { default as Tag } from './components/Tag.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
 export { default as TextField } from './components/TextField.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Tile } from './components/Tile.svelte';
+export { toasts, type ToastItem } from './components/commerce/toast.js';
+export { default as Toaster } from './components/commerce/Toaster.svelte';
+export { default as TrustBadges } from './components/commerce/TrustBadges.svelte';
 export { default as TileScroller } from './components/TileScroller.svelte';