feat: replace clsx with cn util

src/widgets/ComparisonView/ui/Character/Character.svelte

@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import { typographySettingsStore } from '$features/SetupFont';
-import clsx from 'clsx';
+import { cn } from '$shared/lib';
 import { comparisonStore } from '../../model';
 
 interface Props {
@@ -53,7 +53,7 @@ $effect(() => {
     >
         {#each [0, 1] as s (s)}
             <span
-                class={clsx(
+                class={cn(
                     'char-inner',
                     'transition-colors duration-300',
                     isPast

src/widgets/ComparisonView/ui/Header/Header.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
 import { ThemeSwitch } from '$features/ChangeAppTheme';
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/lib';
 import {
     Divider,
     IconButton,
@@ -15,7 +16,6 @@ import {
 } from '$shared/ui';
 import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
 import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
-import clsx from 'clsx';
 import { getContext } from 'svelte';
 import { comparisonStore } from '../../model';
 
@@ -48,7 +48,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
 </script>
 
 <header
-    class={clsx(
+    class={cn(
         'flex items-center justify-between',
         'px-4 md:px-8 py-4 md:py-6',
         'h-16 md:h-20 z-20',

src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte

@@ -5,12 +5,12 @@
     Content (font list, controls) is injected via snippets.
 -->
 <script lang="ts">
+import { cn } from '$shared/lib';
 import {
     ButtonGroup,
     Label,
     ToggleButton,
 } from '$shared/ui';
-import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import {
     type Side,
@@ -40,7 +40,7 @@ let {
 </script>
 
 <div
-    class={clsx(
+    class={cn(
         'flex flex-col h-full',
         'w-80',
         'bg-surface dark:bg-dark-bg',

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -14,11 +14,11 @@ import {
     type ResponsiveManager,
     debounce,
 } from '$shared/lib';
+import { cn } from '$shared/lib';
 import {
     CharacterComparisonEngine,
 } from '$shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte';
 import { Loader } from '$shared/ui';
-import clsx from 'clsx';
 import { getContext } from 'svelte';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
@@ -198,10 +198,10 @@ const scaleClass = $derived(
     Outer flex container — fills parent.
     The paper div inside scales down when the sidebar opens on desktop.
 -->
-<div class={clsx('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
+<div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
     <!-- Paper surface -->
     <div
-        class={clsx(
+        class={cn(
             'w-full h-full flex flex-col items-center justify-center relative',
             'bg-paper dark:bg-dark-card',
             'shadow-2xl shadow-black/5 dark:shadow-black/20',
@@ -270,7 +270,7 @@ const scaleClass = $derived(
 
     <TypographyMenu
         bind:open={isTypographyMenuOpen}
-        class={clsx(
+        class={cn(
             'absolute z-10',
             responsive.isMobileOrTablet
                 ? 'bottom-4 right-4 -translate-1/2'

src/widgets/ComparisonView/ui/Thumb/Thumb.svelte

@@ -4,7 +4,7 @@
     1px red vertical rule with square handles at top and bottom.
 -->
 <script lang="ts">
-import clsx from 'clsx';
+import { cn } from '$shared/lib';
 import { cubicOut } from 'svelte/easing';
 import { fade } from 'svelte/transition';
 
@@ -31,7 +31,7 @@ let { sliderPos, isDragging }: Props = $props();
 >
     <!-- Top handle -->
     <div
-        class={clsx(
+        class={cn(
             'w-5 h-5 md:w-6 md:h-6',
             '-ml-2.5 md:-ml-3',
             'mt-2 md:mt-4',
@@ -47,7 +47,7 @@ let { sliderPos, isDragging }: Props = $props();
 
     <!-- Bottom handle -->
     <div
-        class={clsx(
+        class={cn(
             'w-5 h-5 md:w-6 md:h-6',
             '-ml-2.5 md:-ml-3',
             'mb-2 md:mb-4',

src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte

@@ -5,8 +5,8 @@
 <script lang="ts">
 import { NavigationWrapper } from '$entities/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/lib';
 import { Section } from '$shared/ui';
-import clsx from 'clsx';
 import {
     getContext,
     untrack,
@@ -38,7 +38,7 @@ $effect(() => {
             headerAction={registerAction}
         >
             {#snippet content({ className })}
-                <div class={clsx(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
                     <FontSearch bind:showFilters={isExpanded} />
                 </div>
             {/snippet}

src/widgets/Footer/ui/Footer.svelte

@@ -4,9 +4,9 @@
     Visible only on desktop screens.
 -->
 <script lang="ts">
+import { cn } from '$shared/lib';
 import type { ResponsiveManager } from '$shared/lib/helpers';
 import { FooterLink } from '$shared/ui';
-import clsx from 'clsx';
 import { getContext } from 'svelte';
 
 const responsive = getContext<ResponsiveManager>('responsive');
@@ -15,14 +15,14 @@ const currentYear = new Date().getFullYear();
 </script>
 
 <footer
-    class={clsx(
+    class={cn(
         'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
         isVertical ? 'bottom-5 right-5 [writing-mode:vertical-rl] rotate-180' : ' bottom-2 left-1/2 -translate-x-1/2',
     )}
 >
     <!-- Project Name (Horizontal) -->
     <div
-        class={clsx(
+        class={cn(
             'pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle',
             isVertical ? 'flex' : 'hidden',
         )}
@@ -40,7 +40,7 @@ const currentYear = new Date().getFullYear();
             href="https://allmy.work/"
             target="_blank"
             rel="noopener noreferrer"
-            class={clsx('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
+            class={cn('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
         />
     </div>
 </footer>

src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte

@@ -6,11 +6,11 @@
 import { NavigationWrapper } from '$entities/Breadcrumb';
 import { fontStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/lib';
 import {
     Label,
     Section,
 } from '$shared/ui';
-import clsx from 'clsx';
 import { getContext } from 'svelte';
 import { layoutManager } from '../../model';
 import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
@@ -50,7 +50,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
             {/snippet}
 
             {#snippet content({ className })}
-                <div class={clsx(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
                     <SampleList />
                 </div>
             {/snippet}