@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/lib/cart-count-context.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+
+interface CartCountContextType {
+    count: number;
+    setCount: (count: number) => void;
+    increment: () => void;
+    decrement: () => void;
+    awaitingApprovalOrderCode: string | null;
+    setAwaitingApprovalOrderCode: (code: string | null) => void;
+}
+
+const CartCountContext = createContext<CartCountContextType | null>(null);
+
+export function CartCountProvider({ initialCount, children }: { initialCount: number; children: React.ReactNode }) {
+    const [count, setCount] = useState(initialCount);
+    const [awaitingApprovalOrderCode, setAwaitingApprovalOrderCode] = useState<string | null>(null);
+    const increment = useCallback(() => setCount(c => c + 1), []);
+    const decrement = useCallback(() => setCount(c => Math.max(0, c - 1)), []);
+
+    return (
+        <CartCountContext.Provider
+            value={{
+                count,
+                setCount,
+                increment,
+                decrement,
+                awaitingApprovalOrderCode,
+                setAwaitingApprovalOrderCode,
+            }}
+        >
+            {children}
+        </CartCountContext.Provider>
+    );
+}
+
+export function CartStatusSync({
+    count,
+    awaitingApprovalOrderCode,
+}: {
+    count: number;
+    awaitingApprovalOrderCode: string | null;
+}) {
+    const { setCount, setAwaitingApprovalOrderCode } = useCartCount();
+    useEffect(() => {
+        setCount(count);
+    }, [count, setCount]);
+    useEffect(() => {
+        setAwaitingApprovalOrderCode(awaitingApprovalOrderCode);
+    }, [awaitingApprovalOrderCode, setAwaitingApprovalOrderCode]);
+    return null;
+}
+
+export function useCartCount() {
+    const ctx = useContext(CartCountContext);
+    if (!ctx) throw new Error('useCartCount must be used within CartCountProvider');
+    return ctx;
+}

package/dist/assets/storefront/src/lib/cart-guard-utils.ts

@@ -0,0 +1,10 @@
+import type { CartGuardResult } from './cart-guard';
+
+/**
+ * Returns a user-facing error message if the guard indicates the order
+ * cannot be modified, or undefined if modifications are allowed.
+ */
+export function getGuardError(guard: CartGuardResult): string | undefined {
+    if (guard.blocked) return 'Order is awaiting approval and cannot be modified';
+    if (guard.quoteLocked) return 'You have a quote checkout in progress. Complete checkout or cancel the quote checkout to modify your cart.';
+}

package/dist/assets/storefront/src/lib/cart-guard.ts

@@ -0,0 +1,104 @@
+'use server';
+
+import { client } from '@/lib/vendure/api';
+import { GetActiveOrderQuery, GetApprovalHistoryForEntityQuery } from '@/lib/vendure/queries';
+import { TransitionOrderToStateMutation } from '@/lib/vendure/mutations';
+
+export interface CartGuardResult {
+    /** Whether the order was in a non-AddingItems state and had to be transitioned */
+    transitioned: boolean;
+    /** Whether this modification will invalidate a prior approval */
+    requiresReapproval: boolean;
+    /** Whether the order is awaiting approval and cannot be modified */
+    blocked: boolean;
+    /** Whether the order is locked because it was created from an accepted quote */
+    quoteLocked: boolean;
+    /** The source quote ID if the order is quote-locked */
+    sourceQuoteId?: string;
+}
+
+/**
+ * Check whether the latest approval-history entry for the given order
+ * has status APPROVED. Used by both the lightweight reapproval check
+ * and the full cart guard.
+ */
+async function checkOrderApprovalStatus(orderId: string): Promise<boolean> {
+    const [approvalResult] = await client.query(
+        GetApprovalHistoryForEntityQuery,
+        { entityType: 'Order', entityId: orderId },
+    );
+    const history = [...(approvalResult?.data?.approvalHistoryForEntity ?? [])]
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    const latestApproval = history[0] ?? null;
+    return latestApproval?.status === 'APPROVED';
+}
+
+/**
+ * Lightweight check (no state transition) for whether the active order
+ * was previously approved. Use this to decide whether to show a confirmation
+ * dialog before calling cartGuard() + the actual mutation.
+ */
+export async function checkCartRequiresReapproval(): Promise<boolean> {
+    const [queryResult, queryError] = await client.query(GetActiveOrderQuery, {});
+    if (queryError) return false;
+    const order = queryResult.data.activeOrder;
+    if (!order || order.state !== 'ArrangingPayment') return false;
+
+    return checkOrderApprovalStatus(order.id);
+}
+
+/**
+ * Single guard that all cart-modifying operations should call before mutating.
+ *
+ * - Ensures the order is in AddingItems state (transitions if needed)
+ * - Detects whether the order was previously approved (so the caller/UI can warn)
+ * - Blocks modifications to orders in AwaitingApproval state
+ * - Blocks modifications to quote-locked orders (accepted quote in checkout)
+ */
+export async function cartGuard(): Promise<CartGuardResult> {
+    const [queryResult, queryError] = await client.query(GetActiveOrderQuery, {});
+    if (queryError) throw queryError;
+    const order = queryResult.data.activeOrder;
+
+    if (!order) {
+        return { transitioned: false, requiresReapproval: false, blocked: false, quoteLocked: false };
+    }
+
+    // Orders awaiting approval cannot be modified
+    if (order.state === 'AwaitingApproval') {
+        return { transitioned: false, requiresReapproval: false, blocked: true, quoteLocked: false };
+    }
+
+    // Quote-locked orders cannot be modified via the normal cart flow
+    const sourceQuoteId = order.customFields?.sourceQuoteId;
+    if (sourceQuoteId) {
+        return {
+            transitioned: false,
+            requiresReapproval: false,
+            blocked: false,
+            quoteLocked: true,
+            sourceQuoteId: String(sourceQuoteId),
+        };
+    }
+
+    // Check if a prior approval exists for this order
+    let requiresReapproval = false;
+    if (order.state === 'ArrangingPayment') {
+        requiresReapproval = await checkOrderApprovalStatus(order.id);
+    }
+
+    // Transition to AddingItems if needed
+    let transitioned = false;
+    if (order.state !== 'AddingItems') {
+        const [res, error] = await client.mutate(TransitionOrderToStateMutation, { state: 'AddingItems' });
+        if (error) throw error;
+        if (res.data.transitionOrderToState?.__typename === 'OrderStateTransitionError') {
+            throw new Error(
+                `Cannot modify order: unable to transition from ${res.data.transitionOrderToState.fromState} to AddingItems`,
+            );
+        }
+        transitioned = true;
+    }
+
+    return { transitioned, requiresReapproval, blocked: false, quoteLocked: false };
+}

package/dist/assets/storefront/src/lib/channel-server.ts

@@ -0,0 +1,28 @@
+import {cookies} from 'next/headers';
+import {CHANNEL_COOKIE} from './channel';
+import {getChannelsConfig} from '@/config/scenario';
+
+const FALLBACK_TOKEN = process.env.VENDURE_CHANNEL_TOKEN || process.env.NEXT_PUBLIC_VENDURE_CHANNEL_TOKEN;
+
+/**
+ * Resolve the active channel token:
+ * 1. Cookie value (user's explicit choice, validated against scenario config)
+ * 2. Scenario default (channels.defaultToken)
+ * 3. VENDURE_CHANNEL_TOKEN env var (non-channel-switching scenarios)
+ */
+export async function getActiveChannelToken(): Promise<string | undefined> {
+    const channelsConfig = getChannelsConfig();
+
+    // No channel-switching configured — fall through to static env var
+    if (!channelsConfig) return FALLBACK_TOKEN;
+
+    const jar = await cookies();
+    const cookie = jar.get(CHANNEL_COOKIE)?.value;
+
+    // Validate: cookie token must be one of the declared available tokens
+    if (cookie && channelsConfig.available.some(c => c.token === cookie)) {
+        return cookie;
+    }
+
+    return channelsConfig.defaultToken;
+}

package/dist/assets/storefront/src/lib/channel.ts

@@ -0,0 +1,2 @@
+/** Cookie name for the user's preferred channel. */
+export const CHANNEL_COOKIE = 'vendure-channel';

package/dist/assets/storefront/src/lib/company-context.ts

@@ -0,0 +1,35 @@
+import {cookies} from 'next/headers';
+
+const COMPANY_ID_COOKIE = 'vendure-company-id';
+const BUSINESS_UNIT_ID_COOKIE = 'vendure-business-unit-id';
+
+export async function setCompanyId(companyId: string) {
+    const cookieStore = await cookies();
+    cookieStore.set(COMPANY_ID_COOKIE, companyId);
+}
+
+export async function getCompanyId(): Promise<string | undefined> {
+    const cookieStore = await cookies();
+    return cookieStore.get(COMPANY_ID_COOKIE)?.value;
+}
+
+export async function setBusinessUnitId(businessUnitId: string) {
+    const cookieStore = await cookies();
+    cookieStore.set(BUSINESS_UNIT_ID_COOKIE, businessUnitId);
+}
+
+export async function getBusinessUnitId(): Promise<string | undefined> {
+    const cookieStore = await cookies();
+    return cookieStore.get(BUSINESS_UNIT_ID_COOKIE)?.value;
+}
+
+export async function clearBusinessUnitId() {
+    const cookieStore = await cookies();
+    cookieStore.delete(BUSINESS_UNIT_ID_COOKIE);
+}
+
+export async function clearCompanyContext() {
+    const cookieStore = await cookies();
+    cookieStore.delete(COMPANY_ID_COOKIE);
+    cookieStore.delete(BUSINESS_UNIT_ID_COOKIE);
+}

package/dist/assets/storefront/src/lib/company-permissions-context.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+
+interface CompanyPermissionsContextValue {
+    permissions: string[];
+    hasPermission: (permission: string) => boolean;
+}
+
+const CompanyPermissionsContext = createContext<CompanyPermissionsContextValue>({
+    permissions: [],
+    hasPermission: () => true, // Default: allow for non-company users
+});
+
+export function CompanyPermissionsProvider({
+    permissions,
+    children,
+}: {
+    permissions: string[] | null;
+    children: ReactNode;
+}) {
+    const value: CompanyPermissionsContextValue = {
+        permissions: permissions ?? [],
+        hasPermission: (permission: string) => {
+            // If no company context (null), allow everything (B2C user)
+            if (permissions === null) return true;
+            return permissions.includes(permission);
+        },
+    };
+
+    return (
+        <CompanyPermissionsContext.Provider value={value}>
+            {children}
+        </CompanyPermissionsContext.Provider>
+    );
+}
+
+export function useCompanyPermissions() {
+    return useContext(CompanyPermissionsContext);
+}

package/dist/assets/storefront/src/lib/currency-server.ts

@@ -0,0 +1,20 @@
+import {cookies} from 'next/headers';
+import {CURRENCY_COOKIE} from './currency';
+import {getActiveChannelCached} from './vendure/cached';
+
+/**
+ * Resolve the active currency code from the cookie, falling back to the
+ * channel's default currency.
+ */
+export async function getActiveCurrencyCode(): Promise<string> {
+    const jar = await cookies();
+    const cookie = jar.get(CURRENCY_COOKIE)?.value;
+    if (cookie) return cookie;
+    // Dynamic import to avoid circular dependency: currencyMiddleware (api.ts)
+    // → getActiveCurrencyCode → channel-server → scenario.ts. Do NOT import
+    // anything from api.ts in channel-server.ts or this chain becomes circular.
+    const {getActiveChannelToken} = await import('./channel-server');
+    const channelToken = await getActiveChannelToken();
+    const channel = await getActiveChannelCached(channelToken);
+    return channel.defaultCurrencyCode;
+}

package/dist/assets/storefront/src/lib/currency.ts

@@ -0,0 +1,2 @@
+/** Cookie name for the user's preferred currency. */
+export const CURRENCY_COOKIE = 'vendure-currency';

package/dist/assets/storefront/src/lib/format.ts

@@ -0,0 +1,48 @@
+import {toIntlLocale} from '@/i18n/locale-utils';
+
+/**
+ * Format a price value
+ * @param price Price in cents (smallest currency unit)
+ * @param locale Routing locale (e.g. 'en', 'de')
+ * @param currencyCode ISO 4217 currency code (e.g. 'EUR', 'USD')
+ */
+export function formatPrice(price: number, locale: string, currencyCode = 'EUR', options?: Intl.NumberFormatOptions): string {
+    return new Intl.NumberFormat(toIntlLocale(locale), {
+        style: 'currency',
+        currency: currencyCode,
+        ...options,
+    }).format(price / 100);
+}
+
+type DateFormat = 'short' | 'long';
+
+/**
+ * Format a date string
+ * @param dateString ISO date string
+ * @param locale Routing locale (e.g. 'en', 'de')
+ * @param format 'short' (Jan 15, 2024) or 'long' (January 15, 2024)
+ */
+export function formatDate(dateString: string, locale: string, format: DateFormat = 'short'): string {
+    const options: Intl.DateTimeFormatOptions = format === 'long'
+        ? { year: 'numeric', month: 'long', day: 'numeric' }
+        : { year: 'numeric', month: 'short', day: 'numeric' };
+
+    return new Date(dateString).toLocaleDateString(toIntlLocale(locale), options);
+}
+
+/**
+ * Format a date string with time
+ * @param dateString ISO date string
+ * @param locale Routing locale (e.g. 'en', 'de')
+ */
+export function formatDateTime(dateString: string, locale: string): string {
+    return new Date(dateString).toLocaleString(toIntlLocale(locale), {
+        month: 'short', day: 'numeric', year: 'numeric',
+        hour: 'numeric', minute: '2-digit',
+    });
+}
+
+export function maskCode(code: string): string {
+    if (code.length <= 8) return code;
+    return `${code.slice(0, 4)}····${code.slice(-4)}`;
+}

package/dist/assets/storefront/src/lib/metadata.ts

@@ -0,0 +1,85 @@
+import type { Metadata } from 'next';
+import { getBranding } from '@/config/branding';
+import { routing } from '@/i18n/routing';
+
+export const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME || getBranding().siteName;
+export const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+/**
+ * Truncate text to a maximum length, preserving word boundaries.
+ * Strips HTML tags and is ideal for meta descriptions (recommended 150-160 chars).
+ */
+export function truncateDescription(
+  text: string | null | undefined,
+  maxLength = 155
+): string {
+  if (!text) return '';
+
+  // Strip HTML tags if present
+  const cleanText = text.replace(/<[^>]*>/g, '').trim();
+
+  if (cleanText.length <= maxLength) return cleanText;
+
+  // Find the last space before maxLength to avoid cutting words
+  const truncated = cleanText.substring(0, maxLength);
+  const lastSpaceIndex = truncated.lastIndexOf(' ');
+
+  return lastSpaceIndex > 0
+    ? truncated.substring(0, lastSpaceIndex) + '...'
+    : truncated + '...';
+}
+
+/**
+ * Build a canonical URL for a given path, optionally prefixed with locale.
+ */
+export function buildCanonicalUrl(path: string, locale?: string): string {
+  const baseUrl = SITE_URL.replace(/\/$/, '');
+  const cleanPath = path.startsWith('/') ? path : `/${path}`;
+  const prefix = locale ? `/${locale}` : '';
+  return `${baseUrl}${prefix}${cleanPath}`;
+}
+
+/**
+ * Build hreflang alternates for all configured locales.
+ */
+export function buildAlternates(path: string, currentLocale?: string): Metadata['alternates'] {
+  const languages: Record<string, string> = {};
+  for (const loc of routing.locales) {
+    languages[loc] = buildCanonicalUrl(path, loc);
+  }
+  return {
+    canonical: buildCanonicalUrl(path, currentLocale),
+    languages,
+  };
+}
+
+/**
+ * Build Open Graph image array from an image URL.
+ */
+export function buildOgImages(
+  imageUrl: string | null | undefined,
+  alt?: string
+): NonNullable<Metadata['openGraph']>['images'] {
+  if (!imageUrl) return undefined;
+
+  return [
+    {
+      url: imageUrl,
+      alt: alt || 'Product image',
+    },
+  ];
+}
+
+/**
+ * Create noindex/nofollow robots config for protected pages.
+ */
+export function noIndexRobots(): Metadata['robots'] {
+  return {
+    index: false,
+    follow: false,
+    googleBot: {
+      index: false,
+      follow: false,
+    },
+  };
+}

package/dist/assets/storefront/src/lib/quantity.test.js

@@ -0,0 +1,20 @@
+import {describe, expect, test} from 'bun:test';
+
+import {MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput} from './quantity.ts';
+
+describe('quantity helpers', () => {
+    test('sanitizeQuantityInput keeps only digits for client-side entry', () => {
+        expect(sanitizeQuantityInput('12ab-3')).toBe('123');
+    });
+
+    test('normalizeQuantity enforces the minimum quantity', () => {
+        expect(normalizeQuantity('')).toBe(MIN_ORDER_QUANTITY);
+        expect(normalizeQuantity(0)).toBe(MIN_ORDER_QUANTITY);
+        expect(normalizeQuantity(-5)).toBe(MIN_ORDER_QUANTITY);
+    });
+
+    test('normalizeQuantity preserves valid positive integers', () => {
+        expect(normalizeQuantity('7')).toBe(7);
+        expect(normalizeQuantity(3.9)).toBe(3);
+    });
+});

package/dist/assets/storefront/src/lib/quantity.ts

@@ -0,0 +1,20 @@
+export const MIN_ORDER_QUANTITY = 1;
+
+export function sanitizeQuantityInput(value: string) {
+    return value.replace(/[^0-9]/g, '');
+}
+
+export function normalizeQuantity(
+    value: number | string | null | undefined,
+    minimum: number = MIN_ORDER_QUANTITY,
+) {
+    const parsed = typeof value === 'number'
+        ? value
+        : Number.parseInt(value ?? '', 10);
+
+    if (!Number.isFinite(parsed)) {
+        return minimum;
+    }
+
+    return Math.max(minimum, Math.floor(parsed));
+}

package/dist/assets/storefront/src/lib/search-bar-context.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+
+interface SearchBarContextType {
+    hasInlineSearch: boolean;
+    registerInlineSearch: () => void;
+    unregisterInlineSearch: () => void;
+    searchInputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+const SearchBarContext = createContext<SearchBarContextType | null>(null);
+
+export function SearchBarProvider({ children }: { children: React.ReactNode }) {
+    const [hasInlineSearch, setHasInlineSearch] = useState(false);
+    const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+    const registerInlineSearch = useCallback(() => setHasInlineSearch(true), []);
+    const unregisterInlineSearch = useCallback(() => setHasInlineSearch(false), []);
+
+    useEffect(() => {
+        function handleKeyDown(e: KeyboardEvent) {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                const input = searchInputRef.current
+                    ?? document.querySelector<HTMLInputElement>('input[type="search"]');
+                input?.focus();
+            }
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, []);
+
+    return (
+        <SearchBarContext.Provider value={{ hasInlineSearch, registerInlineSearch, unregisterInlineSearch, searchInputRef }}>
+            {children}
+        </SearchBarContext.Provider>
+    );
+}
+
+export function useSearchBar() {
+    const ctx = useContext(SearchBarContext);
+    if (!ctx) throw new Error('useSearchBar must be used within SearchBarProvider');
+    return ctx;
+}

package/dist/assets/storefront/src/lib/search-helpers.ts

@@ -0,0 +1,69 @@
+export const STRUCTURAL_PARAMS = new Set(['q', 'sort', 'view']);
+export const RESERVED_PARAMS = new Set([...STRUCTURAL_PARAMS, 'page', 'priceMin', 'priceMax', 'inStock']);
+
+export interface SearchInputParams {
+    term?: string;
+    collectionSlug?: string;
+    take: number;
+    skip: number;
+    groupByProduct: boolean;
+    sort: { name?: 'ASC' | 'DESC'; price?: 'ASC' | 'DESC' };
+    facetsFilter?: { facets: Array<{ code: string; facetValueCodes: string[] }> };
+    priceRange?: { min: number; max: number };
+    inStock?: boolean;
+    prefixMode?: boolean;
+}
+
+interface BuildSearchInputOptions {
+    searchParams: { [key: string]: string | string[] | undefined };
+    collectionSlug?: string;
+}
+
+export function buildSearchInput({
+    searchParams,
+    collectionSlug,
+}: BuildSearchInputOptions): SearchInputParams {
+    const page = Number(searchParams.page) || 1;
+    const take = 12;
+    const skip = (page - 1) * take;
+    const sort = (searchParams.sort as string) || 'name-asc';
+    const searchTerm = searchParams.q as string;
+
+    const facets: Array<{ code: string; facetValueCodes: string[] }> = [];
+    for (const [key, value] of Object.entries(searchParams)) {
+        if (RESERVED_PARAMS.has(key) || value == null) continue;
+        const strVal = Array.isArray(value) ? value[0] : value;
+        if (!strVal) continue;
+        facets.push({ code: key, facetValueCodes: strVal.split(',') });
+    }
+
+    const priceMin = Number(searchParams.priceMin);
+    const priceMax = Number(searchParams.priceMax);
+    const hasPriceRange = !isNaN(priceMin) && !isNaN(priceMax) && (priceMin > 0 || priceMax > 0);
+
+    const inStock = searchParams.inStock === 'true' ? true : undefined;
+
+    const sortMapping: Record<string, { name?: 'ASC' | 'DESC'; price?: 'ASC' | 'DESC' }> = {
+        'name-asc': { name: 'ASC' },
+        'name-desc': { name: 'DESC' },
+        'price-asc': { price: 'ASC' },
+        'price-desc': { price: 'DESC' },
+    };
+
+    return {
+        ...(searchTerm && { term: searchTerm }),
+        ...(collectionSlug && { collectionSlug }),
+        take,
+        skip,
+        groupByProduct: true,
+        prefixMode: true,
+        sort: sortMapping[sort] || sortMapping['name-asc'],
+        ...(facets.length > 0 && { facetsFilter: { facets } }),
+        ...(hasPriceRange && { priceRange: { min: priceMin, max: priceMax } }),
+        ...(inStock != null && { inStock }),
+    };
+}
+
+export function getCurrentPage(searchParams: { [key: string]: string | string[] | undefined }): number {
+    return Number(searchParams.page) || 1;
+}

package/dist/assets/storefront/src/lib/use-recent-searches.ts

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+const STORAGE_KEY = 'vendure-recent-searches';
+const MAX_RECENT = 5;
+
+function readFromStorage(): string[] {
+    if (typeof window === 'undefined') return [];
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.filter((s): s is string => typeof s === 'string').slice(0, MAX_RECENT) : [];
+    } catch {
+        return [];
+    }
+}
+
+function writeToStorage(searches: string[]) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(searches.slice(0, MAX_RECENT)));
+    } catch {
+        // localStorage full or unavailable
+    }
+}
+
+export function useRecentSearches() {
+    const [searches, setSearches] = useState<string[]>(readFromStorage);
+
+    const addSearch = useCallback((term: string) => {
+        const trimmed = term.trim();
+        if (!trimmed) return;
+        setSearches(prev => {
+            const next = [trimmed, ...prev.filter(s => s !== trimmed)].slice(0, MAX_RECENT);
+            writeToStorage(next);
+            return next;
+        });
+    }, []);
+
+    const removeSearch = useCallback((term: string) => {
+        setSearches(prev => {
+            const next = prev.filter(s => s !== term);
+            writeToStorage(next);
+            return next;
+        });
+    }, []);
+
+    const clearSearches = useCallback(() => {
+        setSearches([]);
+        writeToStorage([]);
+    }, []);
+
+    return { searches, addSearch, removeSearch, clearSearches };
+}

package/dist/assets/storefront/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}