From f01299f3d13d788c9af464a2908862ac74380ba8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:15:39 +0300
Subject: [PATCH 01/73] feat(smoothScroll): add util to smoothly scroll to the
 id after anchor click

---
 .../lib/utils/smoothScroll/smoothScroll.ts    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/shared/lib/utils/smoothScroll/smoothScroll.ts

diff --git a/src/shared/lib/utils/smoothScroll/smoothScroll.ts b/src/shared/lib/utils/smoothScroll/smoothScroll.ts
new file mode 100644
index 0000000..9f3c616
--- /dev/null
+++ b/src/shared/lib/utils/smoothScroll/smoothScroll.ts
@@ -0,0 +1,32 @@
+/**
+ * Smoothly scrolls to the target element when an anchor element is clicked.
+ * @param node - The anchor element to listen for clicks on.
+ */
+export function smoothScroll(node: HTMLAnchorElement) {
+    const handleClick = (event: MouseEvent) => {
+        event.preventDefault();
+
+        const hash = node.getAttribute('href');
+        if (!hash || hash === '#') return;
+
+        const targetElement = document.querySelector(hash);
+
+        if (targetElement) {
+            targetElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+
+            // Update URL hash without jumping
+            history.pushState(null, '', hash);
+        }
+    };
+
+    node.addEventListener('click', handleClick);
+
+    return {
+        destroy() {
+            node.removeEventListener('click', handleClick);
+        },
+    };
+}

From a5b9238306c0ba8757bc8bcbd5daafb3152c1248 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:15:52 +0300
Subject: [PATCH 02/73] chore: add export/import

---
 src/shared/lib/index.ts       | 9 ++++++++-
 src/shared/lib/utils/index.ts | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 99ade48..e2f6b3f 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -24,7 +24,14 @@ export {
     type VirtualizerOptions,
 } from './helpers';
 
-export { splitArray } from './utils';
+export {
+    buildQueryString,
+    clampNumber,
+    getDecimalPlaces,
+    roundToStepPrecision,
+    smoothScroll,
+    splitArray,
+} from './utils';
 
 export { springySlideFade } from './transitions';
 
diff --git a/src/shared/lib/utils/index.ts b/src/shared/lib/utils/index.ts
index 08a788f..8bfc45f 100644
--- a/src/shared/lib/utils/index.ts
+++ b/src/shared/lib/utils/index.ts
@@ -11,4 +11,5 @@ export { clampNumber } from './clampNumber/clampNumber';
 export { debounce } from './debounce/debounce';
 export { getDecimalPlaces } from './getDecimalPlaces/getDecimalPlaces';
 export { roundToStepPrecision } from './roundToStepPrecision/roundToStepPrecision';
+export { smoothScroll } from './smoothScroll/smoothScroll';
 export { splitArray } from './splitArray/splitArray';

From a557e157592e300cc9442814790ecfba6ced1139 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:16:32 +0300
Subject: [PATCH 03/73] feat(scrollBreadcrumbStore): add id field and comments

---
 .../model/store/scrollBreadcrumbsStore.svelte.ts       | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts b/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
index f914c5e..35f474f 100644
--- a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
+++ b/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
@@ -1,7 +1,17 @@
 import type { Snippet } from 'svelte';
 
 export interface BreadcrumbItem {
+    /**
+     * Index of the item to display
+     */
     index: number;
+    /**
+     * ID of the item to navigate to
+     */
+    id?: string;
+    /**
+     * Title snippet to render
+     */
     title: Snippet<[{ className?: string }]>;
 }
 

From 2508168a3ebc3842fc0a2749b8f80560a772786a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:17:50 +0300
Subject: [PATCH 04/73] feat(Section): add id prop and pass it to
 onTitleStatusChange callback

---
 src/shared/ui/Section/Section.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index f8fa12c..9412495 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -14,6 +14,10 @@ import {
 import { Footnote } from '..';
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * ID of the section
+     */
+    id?: string;
     /**
      * Additional CSS classes to apply to the section container.
      */
@@ -40,16 +44,22 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * @param index - Index of the section
      * @param isPast - Whether the section is past the current scroll position
      * @param title - Snippet for a title itself
+     * @param id - ID of the section
      * @returns Cleanup callback
      */
-    onTitleStatusChange?: (index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) => () => void;
+    onTitleStatusChange?: (
+        index: number,
+        isPast: boolean,
+        title?: Snippet<[{ className?: string }]>,
+        id?: string,
+    ) => () => void;
     /**
      * Snippet for the section content
      */
     children?: Snippet;
 }
 
-const { class: className, title, icon, description, index = 0, onTitleStatusChange, children }: Props = $props();
+const { class: className, title, icon, description, index = 0, onTitleStatusChange, id, children }: Props = $props();
 
 let titleContainer = $state<HTMLElement>();
 const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
@@ -68,7 +78,7 @@ $effect(() => {
 
         if (isPast !== isScrolledPast) {
             isScrolledPast = isPast;
-            cleanup = onTitleStatusChange?.(index, isPast, title);
+            cleanup = onTitleStatusChange?.(index, isPast, title, id);
         }
     }, {
         // Set threshold to 0 to trigger exactly when the last pixel leaves
@@ -84,6 +94,7 @@ $effect(() => {
 </script>
 
 <section
+    id={id}
     class={cn(
         'flex flex-col',
         className,

From 0eebe03bf8c2c21d51bf213dd454f5142b742c25 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:18:49 +0300
Subject: [PATCH 05/73] feat(Page): add id and pass it to scrollBreadcrumbStore

---
 src/routes/Page.svelte | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index bd5f546..d6b6bcb 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -23,9 +23,14 @@ let searchContainer: HTMLElement;
 
 let isExpanded = $state(false);
 
-function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) {
+function handleTitleStatusChanged(
+    index: number,
+    isPast: boolean,
+    title?: Snippet<[{ className?: string }]>,
+    id?: string,
+) {
     if (isPast && title) {
-        scrollBreadcrumbsStore.add({ index, title });
+        scrollBreadcrumbsStore.add({ index, title, id });
     } else {
         scrollBreadcrumbsStore.remove(index);
     }
@@ -50,7 +55,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
     class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <CodeIcon class={className} />
         {/snippet}
@@ -62,7 +67,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <Logo />
     </Section>
 
-    <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        index={1}
+        id="optical_comparator"
+        onTitleStatusChange={handleTitleStatusChanged}
+    >
         {#snippet icon({ className })}
             <EyeIcon class={className} />
         {/snippet}
@@ -74,7 +84,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <ComparisonSlider />
     </Section>
 
-    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        index={2}
+        id="query_module"
+        onTitleStatusChange={handleTitleStatusChanged}
+    >
         {#snippet icon({ className })}
             <ScanSearchIcon class={className} />
         {/snippet}
@@ -86,7 +101,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <FontSearch bind:showFilters={isExpanded} />
     </Section>
 
-    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        index={3}
+        id="sample_set"
+        onTitleStatusChange={handleTitleStatusChanged}
+    >
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
         {/snippet}

From 8aad8942fcb3eafe45e6f7c4c2f666e3b2160207 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 21:19:30 +0300
Subject: [PATCH 06/73] feat(BreadcrumbHeader): add anchor to scroll to the
 section from the breadcrumb

---
 .../Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index 1398d23..84352e4 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
+++ b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
@@ -3,6 +3,7 @@
     Fixed header for breadcrumbs navigation for sections in the page
 -->
 <script lang="ts">
+import { smoothScroll } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     fly,
@@ -39,10 +40,10 @@ import { scrollBreadcrumbsStore } from '../../model';
                         <span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
                             {String(item.index).padStart(2, '0')}
                         </span>
-
-                        {@render item.title({
+                        <a href={`#${item.id}`} use:smoothScroll>
+                            {@render item.title({
     className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
-})}
+})}</a>
 
                         {#if idx < scrollBreadcrumbsStore.items.length - 1}
                             <div class="flex items-center gap-0.5 opacity-40">

From d749f86edcb441c88e9e9ca1ff84ae403666f905 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 23:19:27 +0300
Subject: [PATCH 07/73] feat: add color variables and use them acros the
 project

---
 src/app/styles/app.css                        | 56 +++++++++++++++++++
 .../BreadcrumbHeader/BreadcrumbHeader.svelte  | 20 +++----
 .../ui/FontVirtualList/FontVirtualList.svelte |  2 +-
 .../ui/FontSampler/FontSampler.svelte         | 18 +++---
 src/shared/shadcn/ui/slider/slider.svelte     |  2 +-
 .../ui/ComboControl/ComboControl.svelte       |  2 +-
 .../ui/ComboControlV2/ComboControlV2.svelte   | 14 ++---
 .../ExpandableWrapper.svelte                  |  4 +-
 src/shared/ui/Footnote/Footnote.svelte        |  3 +-
 src/shared/ui/IconButton/IconButton.svelte    |  4 +-
 src/shared/ui/Input/Input.svelte              | 20 +++----
 src/shared/ui/Loader/Loader.svelte            |  6 +-
 src/shared/ui/Section/Section.svelte          |  6 +-
 .../ui/Skeleton/Skeleton.stories.svelte       |  2 +-
 src/shared/ui/Skeleton/Skeleton.svelte        |  2 +-
 src/shared/ui/Slider/Slider.svelte            | 12 ++--
 .../ComparisonSlider/ComparisonSlider.svelte  |  2 +-
 .../components/SelectComparedFonts.svelte     | 20 +++----
 .../components/SliderLine.svelte              |  2 +-
 .../ui/FontSearch/FontSearch.svelte           | 14 ++---
 20 files changed, 134 insertions(+), 77 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 61d38c6..63251f0 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -37,6 +37,26 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.705 0.015 286.067);
+
+  --background-20: oklch(1 0 0 / 20%);
+  --background-40: oklch(1 0 0 / 40%);
+  --background-60: oklch(1 0 0 / 60%);
+  --background-80: oklch(1 0 0 / 80%);
+  --background-95: oklch(1 0 0 / 95%);
+  --background-subtle: oklch(0.98 0 0);
+  --background-muted: oklch(0.97 0.002 286.375);
+
+  --text-muted: oklch(0.552 0.016 285.938);
+  --text-subtle: oklch(0.705 0.015 286.067);
+  --text-soft: oklch(0.5 0.01 286);
+
+  --border-subtle: oklch(0.95 0.003 286.32);
+  --border-muted: oklch(0.92 0.004 286.32);
+  --border-soft: oklch(0.88 0.005 286.32);
+
+  --gradient-from: oklch(0.98 0.002 286.32);
+  --gradient-via: oklch(1 0 0);
+  --gradient-to: oklch(0.98 0.002 286.32);
 }
 
 .dark {
@@ -71,6 +91,26 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.552 0.016 285.938);
+
+  --background-20: oklch(0.21 0.006 285.885 / 20%);
+  --background-40: oklch(0.21 0.006 285.885 / 40%);
+  --background-60: oklch(0.21 0.006 285.885 / 60%);
+  --background-80: oklch(0.21 0.006 285.885 / 80%);
+  --background-95: oklch(0.21 0.006 285.885 / 95%);
+  --background-subtle: oklch(0.18 0.005 285.823);
+  --background-muted: oklch(0.274 0.006 286.033);
+
+  --text-muted: oklch(0.705 0.015 286.067);
+  --text-subtle: oklch(0.552 0.016 285.938);
+  --text-soft: oklch(0.8 0.01 286);
+
+  --border-subtle: oklch(1 0 0 / 8%);
+  --border-muted: oklch(1 0 0 / 10%);
+  --border-soft: oklch(1 0 0 / 15%);
+
+  --gradient-from: oklch(0.25 0.005 285.885);
+  --gradient-via: oklch(0.21 0.006 285.885);
+  --gradient-to: oklch(0.25 0.005 285.885);
 }
 
 @theme inline {
@@ -109,6 +149,22 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-background-20: var(--background-20);
+  --color-background-40: var(--background-40);
+  --color-background-60: var(--background-60);
+  --color-background-80: var(--background-80);
+  --color-background-95: var(--background-95);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-muted: var(--background-muted);
+  --color-text-muted: var(--text-muted);
+  --color-text-subtle: var(--text-subtle);
+  --color-text-soft: var(--text-soft);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-muted: var(--border-muted);
+  --color-border-soft: var(--border-soft);
+  --color-gradient-from: var(--gradient-from);
+  --color-gradient-via: var(--gradient-via);
+  --color-gradient-to: var(--gradient-to);
 }
 
 @layer base {
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index 84352e4..4aa6fd6 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
+++ b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
@@ -17,8 +17,8 @@ import { scrollBreadcrumbsStore } from '../../model';
         transition:slide={{ duration: 200 }}
         class="
             fixed top-0 left-0 right-0 z-100
-            backdrop-blur-lg bg-white/20
-            border-b border-gray-300/50
+            backdrop-blur-lg bg-background-20
+            border-b border-border-muted
             shadow-[0_1px_3px_rgba(0,0,0,0.04)]
             h-10 sm:h-12
         "
@@ -28,7 +28,7 @@ import { scrollBreadcrumbsStore } from '../../model';
                 GLYPHDIFF
             </h1>
 
-            <div class="h-3.5 sm:h-4 w-px bg-gray-300/60 hidden sm:block"></div>
+            <div class="h-3.5 sm:h-4 w-px bg-border-subtle hidden sm:block"></div>
 
             <nav class="flex items-center gap-2 sm:gap-3 overflow-x-auto scrollbar-hide flex-1">
                 {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
@@ -37,19 +37,19 @@ import { scrollBreadcrumbsStore } from '../../model';
                         out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
                         class="flex items-center gap-2 sm:gap-3 whitespace-nowrap shrink-0"
                     >
-                        <span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
+                        <span class="font-mono text-[8px] sm:text-[9px] text-text-muted tracking-wider">
                             {String(item.index).padStart(2, '0')}
                         </span>
                         <a href={`#${item.id}`} use:smoothScroll>
                             {@render item.title({
-    className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
+    className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-foreground',
 })}</a>
 
                         {#if idx < scrollBreadcrumbsStore.items.length - 1}
                             <div class="flex items-center gap-0.5 opacity-40">
-                                <div class="w-1 h-px bg-gray-400"></div>
-                                <div class="w-1 h-px bg-gray-400"></div>
-                                <div class="w-1 h-px bg-gray-400"></div>
+                                <div class="w-1 h-px bg-text-muted"></div>
+                                <div class="w-1 h-px bg-text-muted"></div>
+                                <div class="w-1 h-px bg-text-muted"></div>
                             </div>
                         {/if}
                     </div>
@@ -57,8 +57,8 @@ import { scrollBreadcrumbsStore } from '../../model';
             </nav>
 
             <div class="flex items-center gap-1.5 sm:gap-2 opacity-50 ml-auto">
-                <div class="w-px h-2 sm:h-2.5 bg-gray-300/60 hidden sm:block"></div>
-                <span class="font-mono text-[7px] sm:text-[8px] text-gray-400 tracking-wider">
+                <div class="w-px h-2 sm:h-2.5 bg-border-subtle hidden sm:block"></div>
+                <span class="font-mono text-[7px] sm:text-[8px] text-text-muted tracking-wider">
                     [{scrollBreadcrumbsStore.items.length}]
                 </span>
             </div>
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 0cf1834..f615c6e 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -88,7 +88,7 @@ function handleNearBottom(lastVisibleIndex: number) {
         {#if isLoading}
             <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
                 {#each Array(5) as _, i}
-                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-gray-200/50 bg-white/40">
+                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
                         <div class="flex items-center justify-between mb-3 sm:mb-4">
                             <Skeleton class="h-6 sm:h-8 w-1/3" />
                             <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index d1a41ed..8c4c520 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -53,20 +53,20 @@ const letterSpacing = $derived(controlManager.spacing);
     class="
         w-full h-full rounded-xl sm:rounded-2xl
         flex flex-col
-        backdrop-blur-md bg-white/80
-        border border-gray-300/50
+        backdrop-blur-md bg-background-80
+        border border-border-muted
         shadow-[0_1px_3px_rgba(0,0,0,0.04)]
         relative overflow-hidden
     "
     style:font-weight={fontWeight}
 >
-    <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
+    <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-border-subtle flex items-center justify-between">
         <div class="flex items-center gap-2 sm:gap-2.5">
             <Footnote>
                 typeface_{String(index).padStart(3, '0')}
             </Footnote>
-            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
-            <Footnote class="tracking-[0.15em] font-bold text-gray-900">
+            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
+            <Footnote class="tracking-[0.15em] font-bold text-foreground">
                 {font.name}
             </Footnote>
         </div>
@@ -95,19 +95,19 @@ const letterSpacing = $derived(controlManager.spacing);
         </FontApplicator>
     </div>
 
-    <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
+    <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-border-subtle w-full flex flex-row gap-2 sm:gap-4 bg-background mt-auto">
         <Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
             SZ:{fontSize}PX
         </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
         <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
             WGT:{fontWeight}
         </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
         <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
             LH:{lineHeight?.toFixed(2)}
         </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
+        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
         <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
             LTR:{letterSpacing}
         </Footnote>
diff --git a/src/shared/shadcn/ui/slider/slider.svelte b/src/shared/shadcn/ui/slider/slider.svelte
index 49e30bc..c3c0de4 100644
--- a/src/shared/shadcn/ui/slider/slider.svelte
+++ b/src/shared/shadcn/ui/slider/slider.svelte
@@ -44,7 +44,7 @@ let {
             <SliderPrimitive.Thumb
                 data-slot="slider-thumb"
                 index={thumb}
-                class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+                class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
             />
         {/each}
     {/snippet}
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 78eeb7d..080380c 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -103,7 +103,7 @@ const handleSliderChange = (newValue: number) => {
                         <Button
                             {...props}
                             variant="ghost"
-                            class="hover:bg-white/50 hover:font-bold bg-white/20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
+                            class="hover:bg-background-50 hover:font-bold bg-background-20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
                             size="icon"
                             aria-label={controlLabel}
                         >
diff --git a/src/shared/ui/ComboControlV2/ComboControlV2.svelte b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
index b59a064..1bce1a9 100644
--- a/src/shared/ui/ComboControlV2/ComboControlV2.svelte
+++ b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
@@ -110,7 +110,7 @@ function calculateScale(index: number): number | string {
     <div
         class={cn(
             'flex gap-4 sm:py-4 sm:px-1 rounded-xl transition-all duration-300',
-            'backdrop-blur-md',
+            '',
             orientation === 'horizontal' ? 'flex-row items-end w-full' : 'flex-col items-center h-full',
             className,
         )}
@@ -130,10 +130,10 @@ function calculateScale(index: number): number | string {
                                 orientation === 'horizontal' ? 'flex-col' : 'flex-row',
                             )}
                         >
-                            <span class="font-mono text-[0.375rem] text-gray-400 tabular-nums">
+                            <span class="font-mono text-[0.375rem] text-text-muted tabular-nums">
                                 {calculateScale(i)}
                             </span>
-                            <div class={cn('bg-gray-300', orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1')}>
+                            <div class={cn('bg-border-muted', orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1')}>
                             </div>
                         </div>
                     {/each}
@@ -163,9 +163,9 @@ function calculateScale(index: number): number | string {
 
         {#if label}
             <div class="flex items-center gap-2 opacity-70">
-                <div class="w-1 h-1 rounded-full bg-gray-900"></div>
-                <div class="w-px h-2 bg-gray-400/50"></div>
-                <span class="font-mono text-[8px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+                <div class="w-1 h-1 rounded-full bg-foreground"></div>
+                <div class="w-px h-2 bg-text-muted/50"></div>
+                <span class="font-mono text-[8px] uppercase tracking-[0.2em] text-text-subtle font-medium">
                     {label}
                 </span>
             </div>
@@ -195,7 +195,7 @@ function calculateScale(index: number): number | string {
                             <Button
                                 {...props}
                                 variant="ghost"
-                                class="hover:bg-white/50 hover:font-bold bg-white/20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
+                                class="hover:bg-background-50 hover:font-bold bg-background-20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
                                 size="icon"
                                 aria-label={controlLabel}
                             >
diff --git a/src/shared/ui/ExpandableWrapper/ExpandableWrapper.svelte b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.svelte
index aed2d34..a06f891 100644
--- a/src/shared/ui/ExpandableWrapper/ExpandableWrapper.svelte
+++ b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.svelte
@@ -199,8 +199,8 @@ $effect(() => {
         class={cn(
             'relative p-0.5 sm:p-2 rounded-lg sm:rounded-2xl border transition-all duration-250 ease-out flex flex-col gap-1.5 backdrop-blur-lg',
             expanded
-                ? 'bg-white/5 border-indigo-400/40 shadow-[0_30px_70px_-10px_rgba(99,102,241,0.25)]'
-                : ' bg-white/25 border-white/40 shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)]',
+                ? 'bg-background-20 border-indigo-400/40 shadow-[0_30px_70px_-10px_rgba(99,102,241,0.25)]'
+                : 'bg-background-40 border-background-40 shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)]',
             disabled && 'opacity-80 grayscale-[0.2]',
             containerClassName,
         )}
diff --git a/src/shared/ui/Footnote/Footnote.svelte b/src/shared/ui/Footnote/Footnote.svelte
index 8cd096c..2db1a50 100644
--- a/src/shared/ui/Footnote/Footnote.svelte
+++ b/src/shared/ui/Footnote/Footnote.svelte
@@ -17,7 +17,8 @@ interface Props {
 
 const { children, class: className, render }: Props = $props();
 
-const baseClasses = 'font-mono text-[0.5625rem] sm:text-[0.625rem] uppercase tracking-[0.2em] text-gray-500 opacity-60';
+const baseClasses =
+    'font-mono text-[0.5625rem] sm:text-[0.625rem] uppercase tracking-[0.2em] text-text-soft opacity-60';
 const combinedClasses = cn(baseClasses, className);
 </script>
 
diff --git a/src/shared/ui/IconButton/IconButton.svelte b/src/shared/ui/IconButton/IconButton.svelte
index 6f7a6e2..0649394 100644
--- a/src/shared/ui/IconButton/IconButton.svelte
+++ b/src/shared/ui/IconButton/IconButton.svelte
@@ -29,7 +29,7 @@ let { rotation = 'clockwise', icon, ...rest }: Props = $props();
     variant="ghost"
     class="
         group relative border-none size-9
-        bg-white/20 hover:bg-white/60
+        bg-background-20 hover:bg-background-60
         backdrop-blur-3xl
         transition-all duration-200 ease-out
         will-change-transform
@@ -43,7 +43,7 @@ let { rotation = 'clockwise', icon, ...rest }: Props = $props();
 >
     {@render icon({
     className: cn(
-        'size-4 transition-all duration-200 stroke-[1.5] stroke-gray-500 group-hover:stroke-gray-900 group-hover:scale-110 group-hover:stroke-3 group-active:scale-90 group-disabled:stroke-transparent',
+        'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-3 group-active:scale-90 group-disabled:stroke-transparent',
         rotation === 'clockwise' ? 'group-active:rotate-6' : 'group-active:-rotate-6',
     ),
 })}
diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index da1e393..73e7a50 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -35,19 +35,19 @@ const isGhost = $derived(variant === 'ghost');
     class={cn(
         'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
         'backdrop-blur-md',
-        isGhost ? 'bg-transparent' : 'bg-white/80',
-        'border border-gray-300/50',
-        isGhost ? 'border-transparent' : 'border-gray-300/50',
+        isGhost ? 'bg-transparent' : 'bg-background-80',
+        'border border-border-muted',
+        isGhost ? 'border-transparent' : 'border-border-muted',
         isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
-        'focus-visible:border-gray-400/60',
+        'focus-visible:border-border-soft',
         'focus-visible:outline-none',
         'focus-visible:ring-1',
-        'focus-visible:ring-gray-400/30',
-        'focus-visible:bg-white/90',
-        'hover:bg-white/90',
-        'hover:border-gray-400/60',
-        'text-gray-900',
-        'placeholder:text-gray-400',
+        'focus-visible:ring-border-muted/30',
+        'focus-visible:bg-background-95',
+        'hover:bg-background-95',
+        'hover:border-border-soft',
+        'text-foreground',
+        'placeholder:text-text-muted',
         'placeholder:font-mono',
         'placeholder:text-xs sm:placeholder:text-sm',
         'placeholder:tracking-wide',
diff --git a/src/shared/ui/Loader/Loader.svelte b/src/shared/ui/Loader/Loader.svelte
index 2789f74..2b976d6 100644
--- a/src/shared/ui/Loader/Loader.svelte
+++ b/src/shared/ui/Loader/Loader.svelte
@@ -31,7 +31,7 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
     out:fade={{ duration: 300 }}
 >
     <div style:width="{size}px" style:height="{size}px">
-        <svg class="stroke-gray-900 stroke-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="stroke-foreground stroke-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g transform="translate(12, 12)">
                 <!-- Four corner brackets rotating -->
                 <g>
@@ -68,10 +68,10 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
         </svg>
     </div>
     <!-- Divider -->
-    <div class="w-px h-3 bg-gray-400/50"></div>
+    <div class="w-px h-3 bg-text-muted/50"></div>
 
     <!-- Message -->
-    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600 font-medium">
+    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-text-subtle font-medium">
         {message}
     </span>
 </div>
diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index 9412495..6e63940 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -105,8 +105,8 @@ $effect(() => {
     <div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
         <div class="flex items-center gap-2 sm:gap-3">
             {#if icon}
-                {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1 opacity-60' })}
-                <div class="w-px h-2.5 sm:h-3 bg-gray-300/60"></div>
+                {@render icon({ className: 'size-3 sm:size-4 stroke-foreground stroke-1 opacity-60' })}
+                <div class="w-px h-2.5 sm:h-3 bg-border-subtle"></div>
             {/if}
             {#if description}
                 <Footnote>
@@ -124,7 +124,7 @@ $effect(() => {
         {#if title}
             {@render title({
     className:
-        'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-gray-900 leading-[0.9]',
+        'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-foreground leading-[0.9]',
 })}
         {/if}
     </div>
diff --git a/src/shared/ui/Skeleton/Skeleton.stories.svelte b/src/shared/ui/Skeleton/Skeleton.stories.svelte
index 426efb8..24c3635 100644
--- a/src/shared/ui/Skeleton/Skeleton.stories.svelte
+++ b/src/shared/ui/Skeleton/Skeleton.stories.svelte
@@ -30,7 +30,7 @@ const { Story } = defineMeta({
     }}
 >
     <div class="flex flex-col gap-4 p-4 w-full">
-        <div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
+        <div class="flex flex-col gap-2 p-4 border rounded-xl border-border-subtle bg-background-40">
             <div class="flex items-center justify-between mb-4">
                 <Skeleton class="h-8 w-1/3" />
                 <Skeleton class="h-8 w-8 rounded-full" />
diff --git a/src/shared/ui/Skeleton/Skeleton.svelte b/src/shared/ui/Skeleton/Skeleton.svelte
index 0e28399..0cf9bd1 100644
--- a/src/shared/ui/Skeleton/Skeleton.svelte
+++ b/src/shared/ui/Skeleton/Skeleton.svelte
@@ -18,7 +18,7 @@ let { class: className, animate = true, ...rest }: Props = $props();
 
 <div
     class={cn(
-        'rounded-md bg-gray-100/50 backdrop-blur-sm',
+        'rounded-md bg-background-subtle/50 backdrop-blur-sm',
         animate && 'animate-pulse',
         className,
     )}
diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 263a8d2..d89db16 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -43,11 +43,11 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
     {#snippet children(props)}
         <span
             {...props}
-            class={cn('relative bg-gray-200 rounded-full', orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px')}
+            class={cn('relative bg-background-muted rounded-full', orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px')}
         >
             <!-- Filled range with NO transition -->
             <Slider.Range
-                class={cn('absolute bg-gray-900 rounded-full', orientation === 'horizontal' ? 'h-full' : 'w-full')}
+                class={cn('absolute bg-foreground rounded-full', orientation === 'horizontal' ? 'h-full' : 'w-full')}
             />
 
             <Slider.Thumb
@@ -56,7 +56,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                     'group/thumb relative block',
                     orientation === 'horizontal' ? '-top-1 w-2 h-2.25' : '-left-1 h-2 w-2.25',
                     'rounded-sm',
-                    'bg-gray-900',
+                    'bg-foreground',
                     // Glow shadow
                     'shadow-[0_0_6px_rgba(0,0,0,0.4)]',
                     // Smooth transitions only for size/position
@@ -76,7 +76,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                 <div
                     class="
                         absolute inset-0 rounded-sm
-                        bg-white/20
+                        bg-background-20
                         opacity-0 group-hover/thumb:opacity-100
                         transition-opacity duration-200
                     "
@@ -89,8 +89,8 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                         'absolute',
                         orientation === 'horizontal' ? '-top-8 left-1/2 -translate-x-1/2' : 'left-5 top-1/2 -translate-y-1/2',
                         'px-1.5 py-0.5 rounded-md',
-                        'bg-gray-900/90 backdrop-blur-sm',
-                        'font-mono text-[0.625rem] font-medium text-white ',
+                        'bg-foreground/90 backdrop-blur-sm',
+                        'font-mono text-[0.625rem] font-medium text-background',
                         'opacity-0 group-hover/thumb:opacity-100',
                         'transition-all duration-300',
                         'pointer-events-none',
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
index 8e22e3a..642c58d 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
@@ -189,7 +189,7 @@ $effect(() => {
             rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
             select-none touch-none cursor-ew-resize min-h-72 sm:min-h-96 flex flex-col justify-center
             backdrop-blur-lg bg-linear-to-br from-gray-100/70 via-white/50 to-gray-100/60
-            border border-gray-300/40
+            border border-border-muted
             shadow-[inset_0_4px_12px_0_rgba(0,0,0,0.12),inset_0_2px_4px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(255,255,255,0.8)]
             before:absolute before:inset-0 before:rounded-xl sm:before:rounded-2xl md:before:rounded-[2.5rem] before:p-px
             before:bg-linear-to-br before:from-black/5 before:via-black/2 before:to-transparent
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
index 379776b..45c494a 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
@@ -63,10 +63,10 @@ function selectFontB(font: UnifiedFont) {
         <SelectRoot type="single" disabled={!fontList.length}>
             <SelectTrigger
                 class={cn(
-                    'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
+                    'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-border-muted bg-background-60 backdrop-blur-sm',
                     'px-2 sm:px-3 rounded-lg transition-all flex items-center justify-between gap-2',
-                    'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-gray-900',
-                    'hover:bg-white/80 hover:border-gray-400/60 hover:shadow-sm',
+                    'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-foreground',
+                    'hover:bg-background-80 hover:border-border-soft hover:shadow-sm',
                 )}
             >
                 <div class="text-left flex-1 min-w-0">
@@ -77,7 +77,7 @@ function selectFontB(font: UnifiedFont) {
             </SelectTrigger>
             <SelectContent
                 class={cn(
-                    'bg-white/95 backdrop-blur-xl border border-gray-300/50 shadow-xl',
+                    'bg-background-95 backdrop-blur-xl border border-border-muted shadow-xl',
                     'w-44 sm:w-52 max-h-60 sm:max-h-64 overflow-hidden rounded-lg',
                 )}
                 side="top"
@@ -91,7 +91,7 @@ function selectFontB(font: UnifiedFont) {
                             {@const handleClick = () => onSelect(fontListItem)}
                             <SelectItem
                                 value={fontListItem.id}
-                                class="data-highlighted:bg-gray-100 font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
+                                class="data-highlighted:bg-background-muted font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
                                 onclick={handleClick}
                             >
                                 <FontApplicator
@@ -117,8 +117,8 @@ function selectFontB(font: UnifiedFont) {
     >
         <div class="flex items-center gap-2 sm:gap-2.5 px-1">
             <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
-            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
-            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
+            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
                 ch_01
             </span>
         </div>
@@ -133,11 +133,11 @@ function selectFontB(font: UnifiedFont) {
         style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
     >
         <div class="flex items-center gap-2 sm:gap-2.5 px-1">
-            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
                 ch_02
             </span>
-            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
-            <div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
+            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
+            <div class="w-1.5 h-1.5 rounded-full bg-foreground shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
         </div>
         {#if fontA && fontAUrl}
             {@render fontSelector(fontA, fontList, fontAUrl, selectFontA, 'end')}
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index 53805c1..f05a53e 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -51,7 +51,7 @@ let { sliderPos, isDragging }: Props = $props();
     <div
         class={cn(
             'relative h-full rounded-sm transition-all duration-300',
-            'bg-white/3 ',
+            'bg-background-3 ',
             // These are the visible "edges" of the glass
             'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
             'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 0db0b23..e9bf1e0 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -77,14 +77,14 @@ function toggleFilters() {
 
         <div class="absolute right-4 top-1/2 translate-y-[-50%] z-10">
             <div class="flex items-center gap-2">
-                <div class="w-px h-5 bg-gray-300/60"></div>
+                <div class="w-px h-5 bg-border-subtle"></div>
                 <div style:transform="scale({transform.current.scale})">
                     <IconButton onclick={toggleFilters}>
                         {#snippet icon({ className })}
                             <SlidersHorizontalIcon
                                 class={cn(
                                     className,
-                                    showFilters ? 'stroke-gray-900 stroke-3' : 'stroke-gray-500',
+                                    showFilters ? 'stroke-foreground stroke-3' : 'stroke-text-muted',
                                 )}
                             />
                         {/snippet}
@@ -102,14 +102,14 @@ function toggleFilters() {
             <div
                 class="
                     p-3 sm:p-4 md:p-5 rounded-xl
-                    backdrop-blur-md bg-white/80
-                    border border-gray-300/50
+                    backdrop-blur-md bg-background-80
+                    border border-border-muted
                     shadow-[0_1px_3px_rgba(0,0,0,0.04)]
                 "
             >
                 <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
-                    <div class="w-1 h-1 rounded-full bg-gray-900 opacity-70"></div>
-                    <div class="w-px h-2.5 bg-gray-300/60"></div>
+                    <div class="w-1 h-1 rounded-full bg-foreground opacity-70"></div>
+                    <div class="w-px h-2.5 bg-border-subtle"></div>
                     <Footnote>
                         filter_params
                     </Footnote>
@@ -119,7 +119,7 @@ function toggleFilters() {
                     <Filters />
                 </div>
 
-                <div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-gray-300/40">
+                <div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-border-subtle">
                     <FilterControls class="m-auto w-fit" />
                 </div>
             </div>

From 173816b5c097f778afcb8db8d496319215f21f13 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:29:08 +0300
Subject: [PATCH 08/73] feat(lenis): add smooth scroll solution

---
 .../createScrollContext.svelte.ts             | 32 ++++++++
 src/shared/lib/helpers/index.ts               |  6 ++
 .../ui/SmoothScroll/SmoothScroll.svelte       | 78 +++++++++++++++++++
 3 files changed, 116 insertions(+)
 create mode 100644 src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
 create mode 100644 src/shared/ui/SmoothScroll/SmoothScroll.svelte

diff --git a/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts b/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
new file mode 100644
index 0000000..87703d2
--- /dev/null
+++ b/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
@@ -0,0 +1,32 @@
+import Lenis from 'lenis';
+import {
+    getContext,
+    setContext,
+} from 'svelte';
+
+const LENIS_KEY = Symbol('lenis');
+
+export function createLenisContext() {
+    let lenis = $state<Lenis | null>(null);
+
+    return {
+        get lenis() {
+            return lenis;
+        },
+        setLenis(instance: Lenis) {
+            lenis = instance;
+        },
+        destroyLenis() {
+            lenis?.destroy();
+            lenis = null;
+        },
+    };
+}
+
+export function setLenisContext(context: ReturnType<typeof createLenisContext>) {
+    setContext(LENIS_KEY, context);
+}
+
+export function getLenisContext() {
+    return getContext<ReturnType<typeof createLenisContext>>(LENIS_KEY);
+}
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 41139b0..63890d1 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -42,3 +42,9 @@ export {
     type ResponsiveManager,
     responsiveManager,
 } from './createResponsiveManager/createResponsiveManager.svelte';
+
+export {
+    createLenisContext,
+    getLenisContext,
+    setLenisContext,
+} from './createScrollContext/createScrollContext.svelte';
diff --git a/src/shared/ui/SmoothScroll/SmoothScroll.svelte b/src/shared/ui/SmoothScroll/SmoothScroll.svelte
new file mode 100644
index 0000000..6fe199e
--- /dev/null
+++ b/src/shared/ui/SmoothScroll/SmoothScroll.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+import {
+    createLenisContext,
+    setLenisContext,
+} from '$shared/lib';
+import Lenis from 'lenis';
+import type { LenisOptions } from 'lenis';
+import { onMount } from 'svelte';
+
+interface Props {
+    children?: import('svelte').Snippet;
+    // Lenis options - all optional with sensible defaults
+    duration?: number;
+    easing?: (t: number) => number;
+    smoothWheel?: boolean;
+    wheelMultiplier?: number;
+    touchMultiplier?: number;
+    infinite?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    gestureOrientation?: 'vertical' | 'horizontal' | 'both';
+}
+
+let {
+    children,
+    duration = 1.2,
+    easing = t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+    smoothWheel = true,
+    wheelMultiplier = 1,
+    touchMultiplier = 2,
+    infinite = false,
+    orientation = 'vertical',
+    gestureOrientation = 'vertical',
+}: Props = $props();
+
+const lenisContext = createLenisContext();
+setLenisContext(lenisContext);
+
+onMount(() => {
+    const lenisOptions: LenisOptions = {
+        duration,
+        easing,
+        smoothWheel,
+        wheelMultiplier,
+        touchMultiplier,
+        infinite,
+        orientation,
+        gestureOrientation,
+        // Prevent jitter with virtual scroll
+        prevent: (node: HTMLElement) => {
+            // Don't smooth scroll inside elements with data-lenis-prevent
+            return node.hasAttribute('data-lenis-prevent');
+        },
+    };
+
+    const lenis = new Lenis(lenisOptions);
+
+    lenisContext.setLenis(lenis);
+
+    // RAF loop
+    function raf(time: number) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    // Expose to window for debugging (only in dev)
+    if (import.meta.env?.DEV) {
+        (window as any).lenis = lenis;
+    }
+
+    return () => {
+        lenisContext.destroyLenis();
+    };
+});
+</script>
+
+{@render children?.()}

From 2e6fc0e858d8352c425774236e8f87dbed460b04 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:29:52 +0300
Subject: [PATCH 09/73] feat(throttle): add tohrottling util

---
 src/shared/lib/utils/throttle/throttle.ts | 32 +++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/shared/lib/utils/throttle/throttle.ts

diff --git a/src/shared/lib/utils/throttle/throttle.ts b/src/shared/lib/utils/throttle/throttle.ts
new file mode 100644
index 0000000..4bb0c90
--- /dev/null
+++ b/src/shared/lib/utils/throttle/throttle.ts
@@ -0,0 +1,32 @@
+/**
+ * Throttle function execution to a maximum frequency.
+ *
+ * @param fn Function to throttle.
+ * @param wait Maximum time between function calls.
+ * @returns Throttled function.
+ */
+export function throttle<T extends (...args: any[]) => any>(
+    fn: T,
+    wait: number,
+): (...args: Parameters<T>) => void {
+    let lastCall = 0;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    return (...args: Parameters<T>) => {
+        const now = Date.now();
+        const timeSinceLastCall = now - lastCall;
+
+        if (timeSinceLastCall >= wait) {
+            lastCall = now;
+            fn(...args);
+        } else {
+            // Schedule for end of wait period
+            if (timeoutId) clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                lastCall = Date.now();
+                fn(...args);
+                timeoutId = null;
+            }, wait - timeSinceLastCall);
+        }
+    };
+}

From 08d474289b586c40ab065c7e8882787938d5efb0 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:30:43 +0300
Subject: [PATCH 10/73] chore: add export/import

---
 src/shared/lib/index.ts       | 5 +++++
 src/shared/lib/utils/index.ts | 1 +
 src/shared/ui/index.ts        | 1 +
 3 files changed, 7 insertions(+)

diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index e2f6b3f..4effc6f 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,6 +5,7 @@ export {
     createDebouncedState,
     createEntityStore,
     createFilter,
+    createLenisContext,
     createPersistentStore,
     createResponsiveManager,
     createTypographyControl,
@@ -13,11 +14,13 @@ export {
     type EntityStore,
     type Filter,
     type FilterModel,
+    getLenisContext,
     type LineData,
     type PersistentStore,
     type Property,
     type ResponsiveManager,
     responsiveManager,
+    setLenisContext,
     type TypographyControl,
     type VirtualItem,
     type Virtualizer,
@@ -27,10 +30,12 @@ export {
 export {
     buildQueryString,
     clampNumber,
+    debounce,
     getDecimalPlaces,
     roundToStepPrecision,
     smoothScroll,
     splitArray,
+    throttle,
 } from './utils';
 
 export { springySlideFade } from './transitions';
diff --git a/src/shared/lib/utils/index.ts b/src/shared/lib/utils/index.ts
index 8bfc45f..904d58c 100644
--- a/src/shared/lib/utils/index.ts
+++ b/src/shared/lib/utils/index.ts
@@ -13,3 +13,4 @@ export { getDecimalPlaces } from './getDecimalPlaces/getDecimalPlaces';
 export { roundToStepPrecision } from './roundToStepPrecision/roundToStepPrecision';
 export { smoothScroll } from './smoothScroll/smoothScroll';
 export { splitArray } from './splitArray/splitArray';
+export { throttle } from './throttle/throttle';
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 0adbb94..d1e57cf 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -13,4 +13,5 @@ export { default as SearchBar } from './SearchBar/SearchBar.svelte';
 export { default as Section } from './Section/Section.svelte';
 export { default as Skeleton } from './Skeleton/Skeleton.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
+export { default as SmoothScroll } from './SmoothScroll/SmoothScroll.svelte';
 export { default as VirtualList } from './VirtualList/VirtualList.svelte';

From 3423eebf77b3b810f4e64853940a67bb978b4d3c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:31:02 +0300
Subject: [PATCH 11/73] feat: install lenis

---
 package.json |  3 ++-
 yarn.lock    | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c98f54b..95903f8 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "vitest-browser-svelte": "^2.0.1"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^6.0.14"
+    "@tanstack/svelte-query": "^6.0.14",
+    "lenis": "^1.3.17"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 84894cd..5b0112b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2459,6 +2459,7 @@ __metadata:
     dprint: "npm:^0.50.2"
     jsdom: "npm:^27.4.0"
     lefthook: "npm:^2.0.13"
+    lenis: "npm:^1.3.17"
     oxlint: "npm:^1.35.0"
     playwright: "npm:^1.57.0"
     storybook: "npm:^10.1.11"
@@ -2849,6 +2850,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lenis@npm:^1.3.17":
+  version: 1.3.17
+  resolution: "lenis@npm:1.3.17"
+  peerDependencies:
+    "@nuxt/kit": ">=3.0.0"
+    react: ">=17.0.0"
+    vue: ">=3.0.0"
+  peerDependenciesMeta:
+    "@nuxt/kit":
+      optional: true
+    react:
+      optional: true
+    vue:
+      optional: true
+  checksum: 10c0/c268da36d5711677b239c7d173bc52775276df08f86f7f89f305c4e02ba4055d8c50ea69125d16c94bb1e1999ccd95f654237d11c6647dc5fdf63aa90515fbfb
+  languageName: node
+  linkType: hard
+
 "lightningcss-android-arm64@npm:1.30.2":
   version: 1.30.2
   resolution: "lightningcss-android-arm64@npm:1.30.2"

From cdb2c355c02808200d895291e7905e279ab9eb13 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:31:23 +0300
Subject: [PATCH 12/73] fix: add types for env variables

---
 src/app/types/ambient.d.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/app/types/ambient.d.ts b/src/app/types/ambient.d.ts
index d2f5b6e..4700e35 100644
--- a/src/app/types/ambient.d.ts
+++ b/src/app/types/ambient.d.ts
@@ -35,3 +35,16 @@ declare module '*.jpg' {
     const content: string;
     export default content;
 }
+
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly DEV: boolean;
+    readonly PROD: boolean;
+    readonly MODE: string;
+    // Add other env variables you use
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

From 21d8273967d3cafa1030429d1daadf01868267c4 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:32:25 +0300
Subject: [PATCH 13/73] feat(VirtualList): add throttling

---
 src/shared/ui/VirtualList/VirtualList.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index ff833b4..71d066a 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -10,6 +10,7 @@
 -->
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
+import { throttle } from '$shared/lib/utils';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
@@ -154,10 +155,20 @@ $effect(() => {
     }
 });
 
+const throttledVisibleChange = throttle((visibleItems: T[]) => {
+    onVisibleItemsChange?.(visibleItems);
+}, 150); // 150ms debounce
+
+const throttledNearBottom = throttle((lastVisibleIndex: number) => {
+    onNearBottom?.(lastVisibleIndex);
+}, 200); // 200ms debounce
+
 $effect(() => {
     const visibleItems = virtualizer.items.map(item => items[item.index]);
-    onVisibleItemsChange?.(visibleItems);
+    throttledVisibleChange(visibleItems);
+});
 
+$effect(() => {
     // Trigger onNearBottom when user scrolls near the end of loaded items (within 5 items)
     if (virtualizer.items.length > 0 && onNearBottom) {
         const lastVisibleItem = virtualizer.items[virtualizer.items.length - 1];
@@ -165,7 +176,7 @@ $effect(() => {
         const itemsRemaining = items.length - lastVisibleItem.index;
 
         if (itemsRemaining <= 5) {
-            onNearBottom(lastVisibleItem.index);
+            throttledNearBottom(lastVisibleItem.index);
         }
     }
 });
@@ -180,6 +191,7 @@ $effect(() => {
                     data-index={item.index}
                     class="absolute top-0 left-0 w-full will-change-transform"
                     style:transform="translateY({item.start}px)"
+                    data-lenis-prevent
                 >
                     {#if item.index < items.length}
                         {@render children({
@@ -212,7 +224,6 @@ $effect(() => {
                     data-index={item.index}
                     class="absolute top-0 left-0 w-full will-change-transform"
                     style:transform="translateY({item.start}px)"
-                    animate:flip={{ delay: 0, duration: 300, easing: quintOut }}
                 >
                     {#if item.index < items.length}
                         {@render children({

From d3297d519f28c669952c940ebec2dde057e2089c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:11:22 +0300
Subject: [PATCH 14/73] feat(SampleList): add throttling to the checkPosition
 function

---
 .../SampleList/ui/SampleList/SampleList.svelte   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 1d48041..7c2d4d4 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -15,6 +15,7 @@ import {
     TypographyMenu,
     controlManager,
 } from '$features/SetupFont';
+import { throttle } from '$shared/lib/utils';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
@@ -23,7 +24,9 @@ let innerHeight = $state(0);
 // Is the component above the middle of the viewport?
 let isAboveMiddle = $state(false);
 
-const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
+const isLoading = $derived(
+    unifiedFontStore.isFetching || unifiedFontStore.isLoading,
+);
 
 /**
  * Load more fonts by moving to the next page
@@ -62,14 +65,14 @@ const displayRange = $derived.by(() => {
     return `Showing ${loadedCount} of ${total} fonts`;
 });
 
-function checkPosition() {
+const checkPosition = throttle(() => {
     if (!wrapper) return;
 
     const rect = wrapper.getBoundingClientRect();
     const viewportMiddle = innerHeight / 2;
 
     isAboveMiddle = rect.top < viewportMiddle;
-}
+}, 100);
 </script>
 
 <svelte:window
@@ -95,7 +98,12 @@ function checkPosition() {
     proximity,
     index,
 })}
-            <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
+            <FontListItem
+                {font}
+                {isFullyVisible}
+                {isPartiallyVisible}
+                {proximity}
+            >
                 <FontSampler {font} bind:text {index} />
             </FontListItem>
         {/snippet}

From 5e3929575d764168954f5b095d76f9561051046e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:14:22 +0300
Subject: [PATCH 15/73] feat(FontApplicator): remove IntersectionObserver to
 ease the product, font applying logic is entirely in the VirtualList

---
 .../ui/FontApplicator/FontApplicator.svelte   | 65 +++++++------------
 1 file changed, 23 insertions(+), 42 deletions(-)

diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
index a6076ec..4126522 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -2,11 +2,10 @@
     Component: FontApplicator
     Loads fonts from fontshare with link tag
     - Loads font only if it's not already applied
-    - Uses IntersectionObserver to detect when font is visible
+    - Reacts to font load status to show/hide content
     - Adds smooth transition when font appears
 -->
 <script lang="ts">
-import { getFontUrl } from '$entities/Font/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
 import { prefersReducedMotion } from 'svelte/motion';
@@ -34,47 +33,27 @@ interface Props {
     children?: Snippet;
 }
 
-let { font, weight = 400, className, children }: Props = $props();
-let element: Element;
+let {
+    font,
+    weight = 400,
+    className,
+    children,
+}: Props = $props();
 
-// Track if the user has actually scrolled this into view
-let hasEnteredViewport = $state(false);
-const status = $derived(appliedFontsManager.getFontStatus(font.id, weight, font.features.isVariable));
+const status = $derived(
+    appliedFontsManager.getFontStatus(
+        font.id,
+        weight,
+        font.features.isVariable,
+    ),
+);
 
-$effect(() => {
-    if (status === 'loaded' || status === 'error') {
-        hasEnteredViewport = true;
-        return;
-    }
-
-    const observer = new IntersectionObserver(entries => {
-        if (entries[0].isIntersecting) {
-            hasEnteredViewport = true;
-            const url = getFontUrl(font, weight);
-            // Touch ensures it's in the queue.
-            // It's safe to call this even if VirtualList called it
-            // (Manager dedupes based on key)
-            if (url) {
-                appliedFontsManager.touch([{
-                    id: font.id,
-                    weight,
-                    name: font.name,
-                    url,
-                    isVariable: font.features.isVariable,
-                }]);
-            }
-
-            observer.unobserve(element);
-        }
-    });
-
-    if (element) observer.observe(element);
-    return () => observer.disconnect();
+// The "Show" condition: Font is loaded OR it errored out OR it's a noTouch preview (like in search)
+const shouldReveal = $derived.by(() => {
+    if (noTouch) return true;
+    return status === 'loaded' || status === 'error';
 });
 
-// The "Show" condition: Element is in view AND (Font is ready OR it errored out)
-const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded'));
-
 const transitionClasses = $derived(
     prefersReducedMotion.current
         ? 'transition-none' // Disable CSS transitions if motion is reduced
@@ -83,12 +62,14 @@ const transitionClasses = $derived(
 </script>
 
 <div
-    bind:this={element}
-    style:font-family={shouldReveal ? `'${font.name}'` : 'system-ui, -apple-system, sans-serif'}
+    style:font-family={shouldReveal
+    ? `'${font.name}'`
+    : 'system-ui, -apple-system, sans-serif'}
     class={cn(
         transitionClasses,
         // If reduced motion is on, we skip the transform/blur entirely
-        !shouldReveal && !prefersReducedMotion.current
+        !shouldReveal
+            && !prefersReducedMotion.current
             && 'opacity-50 scale-[0.95] blur-sm',
         !shouldReveal && prefersReducedMotion.current && 'opacity-0', // Still hide until font is ready, but no movement
         shouldReveal && 'opacity-100 scale-100 blur-0',

From 7dce7911c05e820e002039cbaa18496bbc2a16bc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:16:01 +0300
Subject: [PATCH 16/73] feat(FontSampler): remove backdrop filter since it's
 not being used and bad for performance

---
 src/features/DisplayFont/ui/FontSampler/FontSampler.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 8c4c520..a2ede04 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -53,7 +53,7 @@ const letterSpacing = $derived(controlManager.spacing);
     class="
         w-full h-full rounded-xl sm:rounded-2xl
         flex flex-col
-        backdrop-blur-md bg-background-80
+        bg-background-80
         border border-border-muted
         shadow-[0_1px_3px_rgba(0,0,0,0.04)]
         relative overflow-hidden

From 0e85851cfd76bab43ed860b28a6bdeac8ee99ecc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:21:04 +0300
Subject: [PATCH 17/73] fix(FontApplicator): remove unused prop

---
 src/entities/Font/ui/FontApplicator/FontApplicator.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
index 4126522..7c0fb0b 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -49,10 +49,7 @@ const status = $derived(
 );
 
 // The "Show" condition: Font is loaded OR it errored out OR it's a noTouch preview (like in search)
-const shouldReveal = $derived.by(() => {
-    if (noTouch) return true;
-    return status === 'loaded' || status === 'error';
-});
+const shouldReveal = $derived(status === 'loaded' || status === 'error');
 
 const transitionClasses = $derived(
     prefersReducedMotion.current

From 8b02333c01ba6f936ab7085cb23fdd4507a5e552 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:23:27 +0300
Subject: [PATCH 18/73] feat(createVirtualizer): slidthly improve batching with
 version trigger

---
 .../createVirtualizer.svelte.ts               | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index 4b92eb3..9fabb92 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -120,9 +120,11 @@ export function createVirtualizer<T>(
     // By wrapping the getter in $derived, we track everything inside it
     const options = $derived(optionsGetter());
 
-    // This derivation now tracks: count, measuredSizes, AND the data array itself
+    // This derivation now tracks: count, _version (for measuredSizes updates), AND the data array itself
     const offsets = $derived.by(() => {
         const count = options.count;
+        // Implicit dependency on version signal
+        const v = _version;
         const result = new Float64Array(count);
         let accumulated = 0;
         for (let i = 0; i < count; i++) {
@@ -144,6 +146,8 @@ export function createVirtualizer<T>(
         // We MUST read options.data here so Svelte knows to re-run
         // this derivation when the items array is replaced!
         const { count, data } = options;
+        // Implicit dependency
+        const v = _version;
         if (count === 0 || containerHeight === 0 || !data) return [];
 
         const overscan = options.overscan ?? 5;
@@ -318,6 +322,9 @@ export function createVirtualizer<T>(
 
     let measurementBuffer: Record<number, number> = {};
     let frameId: number | null = null;
+    // Signal to trigger updates when mutating measuredSizes in place
+    let _version = $state(0);
+
     /**
      * Svelte action to measure individual item elements for dynamic height support.
      *
@@ -334,18 +341,25 @@ export function createVirtualizer<T>(
             const height = entry.borderBoxSize[0]?.blockSize ?? node.offsetHeight;
 
             if (!isNaN(index)) {
+                // Accessing the version ensures we have the latest state if needed,
+                // though here we just read the raw object.
                 const oldHeight = measuredSizes[index];
+
                 // Only update if the height difference is significant (> 0.5px)
-                // This prevents "jitter" from focus rings or sub-pixel border changes
                 if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
-                    // Stuff the measurement into a temporary buffer
+                    // Stuff the measurement into a temporary buffer to batch updates
                     measurementBuffer[index] = height;
 
                     // Schedule a single update for the next animation frame
                     if (frameId === null) {
                         frameId = requestAnimationFrame(() => {
-                            measuredSizes = { ...measuredSizes, ...measurementBuffer };
-                            // Reset the buffer
+                            // Mutation in place for performance
+                            Object.assign(measuredSizes, measurementBuffer);
+
+                            // Trigger reactivity
+                            _version += 1;
+
+                            // Reset buffer
                             measurementBuffer = {};
                             frameId = null;
                         });

From cee2a80c4106376cdd05cbdf077ae496addf547a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:24:16 +0300
Subject: [PATCH 19/73] feat(FontListItem): delete springs to imrove
 performance

---
 .../Font/ui/FontListItem/FontListItem.svelte  | 52 ++-----------------
 1 file changed, 5 insertions(+), 47 deletions(-)

diff --git a/src/entities/Font/ui/FontListItem/FontListItem.svelte b/src/entities/Font/ui/FontListItem/FontListItem.svelte
index b958d69..9ea82c1 100644
--- a/src/entities/Font/ui/FontListItem/FontListItem.svelte
+++ b/src/entities/Font/ui/FontListItem/FontListItem.svelte
@@ -1,11 +1,6 @@
-<!--
-    Component: FontListItem
-    Displays a font item and manages its animations
--->
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
-import { Spring } from 'svelte/motion';
 import { type UnifiedFont } from '../../model';
 
 interface Props {
@@ -31,51 +26,14 @@ interface Props {
     children: Snippet<[font: UnifiedFont]>;
 }
 
-const { font, isFullyVisible, isPartiallyVisible, proximity, children }: Props = $props();
-
-let timeoutId = $state<NodeJS.Timeout | null>(null);
-
-// Create a spring for smooth scale animation
-const scale = new Spring(1, {
-    stiffness: 0.3,
-    damping: 0.7,
-});
-
-// Springs react to the virtualizer's computed state
-const bloom = new Spring(0, {
-    stiffness: 0.15,
-    damping: 0.6,
-});
-
-// Sync spring to proximity for a "Lens" effect
-$effect(() => {
-    bloom.target = isPartiallyVisible ? 1 : 0;
-});
-
-$effect(() => {
-    return () => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-    };
-});
-
-function animateSelection() {
-    scale.target = 0.98;
-
-    timeoutId = setTimeout(() => {
-        scale.target = 1;
-    }, 150);
-}
+const { font, children }: Props = $props();
 </script>
 
 <div
-    class={cn('pb-1 will-change-transform')}
-    style:opacity={bloom.current}
-    style:transform="
-		scale({0.92 + (bloom.current * 0.08)})
-		translateY({(1 - bloom.current) * 10}px)
-	"
+    class={cn(
+        'pb-1 will-change-transform transition-transform duration-200 ease-out',
+        'hover:scale-[0.98]', // Simple CSS hover effect
+    )}
 >
     {@render children?.(font)}
 </div>

From f2e8de1d1dd3831c5018468d15acbec36756d6eb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 12:19:11 +0300
Subject: [PATCH 20/73] feat(comparisonStore): add the check before loading

---
 .../model/stores/comparisonStore.svelte.ts    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/widgets/ComparisonSlider/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonSlider/model/stores/comparisonStore.svelte.ts
index d277e5f..270bb96 100644
--- a/src/widgets/ComparisonSlider/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonSlider/model/stores/comparisonStore.svelte.ts
@@ -78,8 +78,6 @@ class ComparisonStore {
             return;
         }
 
-        this.#fontsReady = false;
-
         const weight = this.#typography.weight;
         const size = this.#typography.renderedSize;
         const fontAName = this.#fontA?.name;
@@ -87,11 +85,25 @@ class ComparisonStore {
 
         if (!fontAName || !fontBName) return;
 
+        const fontAString = `${weight} ${size}px "${fontAName}"`;
+        const fontBString = `${weight} ${size}px "${fontBName}"`;
+
+        // Check if already loaded to avoid UI flash
+        const isALoaded = document.fonts.check(fontAString);
+        const isBLoaded = document.fonts.check(fontBString);
+
+        if (isALoaded && isBLoaded) {
+            this.#fontsReady = true;
+            return;
+        }
+
+        this.#fontsReady = false;
+
         try {
             // Step 1: Load fonts into memory
             await Promise.all([
-                document.fonts.load(`${weight} ${size}px "${fontAName}"`),
-                document.fonts.load(`${weight} ${size}px "${fontBName}"`),
+                document.fonts.load(fontAString),
+                document.fonts.load(fontBString),
             ]);
 
             // Step 2: Wait for browser to be ready to render

From d282448c532b6a81eb927b88e874b3124947417f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 12:20:06 +0300
Subject: [PATCH 21/73] feat(CharacterSlot): remove touch from characters

---
 .../components/CharacterSlot.svelte           | 54 ++++++-------------
 1 file changed, 15 insertions(+), 39 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
index 3f174f1..3c6ce24 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
@@ -3,8 +3,6 @@
     Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
 -->
 <script lang="ts">
-import { appliedFontsManager } from '$entities/Font';
-import { getFontUrl } from '$entities/Font/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { comparisonStore } from '../../../model';
 
@@ -28,33 +26,6 @@ let { char, proximity, isPast }: Props = $props();
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const typography = $derived(comparisonStore.typography);
-
-$effect(() => {
-    if (!fontA || !fontB) {
-        return;
-    }
-
-    const urlA = getFontUrl(fontA, typography.weight);
-    const urlB = getFontUrl(fontB, typography.weight);
-
-    if (!urlA || !urlB) {
-        return;
-    }
-
-    appliedFontsManager.touch([{
-        id: fontA.id,
-        weight: typography.weight,
-        name: fontA.name,
-        url: urlA,
-        isVariable: fontA.features.isVariable,
-    }, {
-        id: fontB.id,
-        weight: typography.weight,
-        name: fontB.name,
-        url: urlB,
-        isVariable: fontB.features.isVariable,
-    }]);
-});
 </script>
 
 {#if fontA && fontB}
@@ -67,13 +38,18 @@ $effect(() => {
         style:font-weight={typography.weight}
         style:font-size={`${typography.renderedSize}px`}
         style:transform="
-        scale({1 + proximity * 0.3})
-        translateY({-proximity * 12}px)
-        rotateY({proximity * 25 * (isPast ? -1 : 1)}deg)
-    "
-        style:filter="brightness({1 + proximity * 0.2}) contrast({1 + proximity * 0.1})"
-        style:text-shadow={proximity > 0.5 ? '0 0 15px rgba(99,102,241,0.3)' : 'none'}
-        style:will-change={proximity > 0 ? 'transform, font-family, color' : 'auto'}
+        scale({1 + proximity * 0.3}) translateY({-proximity * 12}px) rotateY({proximity *
+            25 *
+            (isPast ? -1 : 1)}deg)
+        "
+        style:filter="brightness({1 + proximity * 0.2}) contrast({1 +
+            proximity * 0.1})"
+        style:text-shadow={proximity > 0.5
+        ? '0 0 15px rgba(99,102,241,0.3)'
+        : 'none'}
+        style:will-change={proximity > 0
+        ? 'transform, font-family, color'
+        : 'auto'}
     >
         {char === ' ' ? '\u00A0' : char}
     </span>
@@ -82,9 +58,9 @@ $effect(() => {
 <style>
 span {
     /*
-       Optimize for performance and smooth transitions.
-       step-end logic is effectively handled by binary font switching in JS.
-    */
+   Optimize for performance and smooth transitions.
+   step-end logic is effectively handled by binary font switching in JS.
+*/
     transition:
         font-family 0.15s ease-out,
         color 0.2s ease-out,

From 2f45dc3620c178ee621ae2a61b60056209321ce3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 12:20:52 +0300
Subject: [PATCH 22/73] feat(Controls): remove isLoading flag

---
 .../components/Controls.svelte                | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 61ffbb8..609cd02 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -20,11 +20,16 @@ interface Props {
     container: HTMLElement;
 }
 
-let { sliderPos, isDragging, typographyControls = $bindable<HTMLDivElement | null>(null), container }: Props = $props();
+let {
+    sliderPos,
+    isDragging,
+    typographyControls = $bindable<HTMLDivElement | null>(null),
+    container,
+}: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
+
 const weight = $derived(comparisonStore.typography.weight);
 
 const responsive = getContext<ResponsiveManager>('responsive');
@@ -41,8 +46,18 @@ $effect(() => {
         return;
     }
 
-    const fontAConfig = { id: fontA.id, name: fontA.name, url: fontAUrl, weight: weight };
-    const fontBConfig = { id: fontB.id, name: fontB.name, url: fontBUrl, weight: weight };
+    const fontAConfig = {
+        id: fontA.id,
+        name: fontA.name,
+        url: fontAUrl,
+        weight: weight,
+    };
+    const fontBConfig = {
+        id: fontB.id,
+        name: fontB.name,
+        url: fontBUrl,
+        weight: weight,
+    };
 
     appliedFontsManager.touch([fontAConfig, fontBConfig]);
 });
@@ -73,20 +88,16 @@ $effect(() => {
         {/snippet}
     </Drawer>
 {:else}
-    {#if !isLoading}
-        <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
-            <TypographyControls
-                {sliderPos}
-                {isDragging}
-                bind:wrapper={typographyControls}
-                containerWidth={container?.clientWidth}
-            />
-        </div>
-    {/if}
+    <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
+        <TypographyControls
+            {sliderPos}
+            {isDragging}
+            bind:wrapper={typographyControls}
+            containerWidth={container?.clientWidth}
+        />
+    </div>
 
-    {#if !isLoading}
-        <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
-            <SelectComparedFonts {sliderPos} />
-        </div>
-    {/if}
+    <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
+        <SelectComparedFonts {sliderPos} />
+    </div>
 {/if}

From bc562657174f8334cc385d9fbb45e139b1058d01 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 22:54:07 +0300
Subject: [PATCH 23/73] feat(ComparisonSlider): add out animation for
 SliderLine

---
 .../ui/ComparisonSlider/components/SliderLine.svelte            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index f05a53e..853ac32 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -19,6 +19,7 @@ interface Props {
 }
 let { sliderPos, isDragging }: Props = $props();
 </script>
+
 <div
     class={cn(
         'absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 flex flex-col justify-center items-center',
@@ -30,6 +31,7 @@ let { sliderPos, isDragging }: Props = $props();
     style:left="{sliderPos}%"
     style:will-change={isDragging ? 'left' : 'auto'}
     in:fade={{ duration: 300, delay: 150, easing: cubicOut }}
+    out:fade={{ duration: 150, easing: cubicOut }}
 >
     <!-- We use part of lucide cursor svg icon as a handle -->
     <svg

From c2d099201533f5962d432cb0b4ab3fb56c790f34 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 22:56:37 +0300
Subject: [PATCH 24/73] feat(FontVirtualList): move logic related to loading
 next batch of fonts to the FontVirtualContainer

---
 .../ui/FontVirtualList/FontVirtualList.svelte | 62 ++++++++++++-------
 .../ui/SampleList/SampleList.svelte           | 36 -----------
 2 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index f615c6e..d9761bd 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -3,7 +3,7 @@
     - Renders a virtualized list of fonts
     - Handles font registration with the manager
 -->
-<script lang="ts" generics="T extends UnifiedFont">
+<script lang="ts">
 import {
     Skeleton,
     VirtualList,
@@ -11,26 +11,23 @@ import {
 import type { ComponentProps } from 'svelte';
 import { fade } from 'svelte/transition';
 import { getFontUrl } from '../../lib';
-import type { FontConfigRequest } from '../../model';
 import {
+    type FontConfigRequest,
     type UnifiedFont,
     appliedFontsManager,
+    unifiedFontStore,
 } from '../../model';
 
 interface Props extends
     Omit<
-        ComponentProps<typeof VirtualList<T>>,
-        'onVisibleItemsChange'
+        ComponentProps<typeof VirtualList<UnifiedFont>>,
+        'items' | 'total' | 'isLoading' | 'onVisibleItemsChange' | 'onNearBottom'
     >
 {
     /**
      * Callback for when visible items change
      */
-    onVisibleItemsChange?: (items: T[]) => void;
-    /**
-     * Callback for when near bottom is reached
-     */
-    onNearBottom?: (lastVisibleIndex: number) => void;
+    onVisibleItemsChange?: (items: UnifiedFont[]) => void;
     /**
      * Weight of the font
      */
@@ -38,23 +35,20 @@ interface Props extends
      * Weight of the font
      */
     weight: number;
-    /**
-     * Whether the list is in a loading state
-     */
-    isLoading?: boolean;
 }
 
 let {
-    items,
     children,
     onVisibleItemsChange,
-    onNearBottom,
     weight,
-    isLoading = false,
     ...rest
 }: Props = $props();
 
-function handleInternalVisibleChange(visibleItems: T[]) {
+const isLoading = $derived(
+    unifiedFontStore.isFetching || unifiedFontStore.isLoading,
+);
+
+function handleInternalVisibleChange(visibleItems: UnifiedFont[]) {
     const configs: FontConfigRequest[] = [];
 
     visibleItems.forEach(item => {
@@ -77,9 +71,32 @@ function handleInternalVisibleChange(visibleItems: T[]) {
     // onVisibleItemsChange?.(visibleItems);
 }
 
-function handleNearBottom(lastVisibleIndex: number) {
-    // Forward the call to any external listener
-    onNearBottom?.(lastVisibleIndex);
+/**
+ * Load more fonts by moving to the next page
+ */
+function loadMore() {
+    if (
+        !unifiedFontStore.pagination.hasMore
+        || unifiedFontStore.isFetching
+    ) {
+        return;
+    }
+    unifiedFontStore.nextPage();
+}
+
+/**
+ * Handle scroll near bottom - auto-load next page
+ *
+ * Triggered by VirtualList when the user scrolls within 5 items of the end
+ * of the loaded items. Only fetches if there are more pages available.
+ */
+function handleNearBottom(_lastVisibleIndex: number) {
+    const { hasMore } = unifiedFontStore.pagination;
+
+    // VirtualList already checks if we're near the bottom of loaded items
+    if (hasMore && !unifiedFontStore.isFetching) {
+        loadMore();
+    }
 }
 </script>
 
@@ -99,10 +116,11 @@ function handleNearBottom(lastVisibleIndex: number) {
             </div>
         {:else}
             <VirtualList
-                {items}
-                {...rest}
+                items={unifiedFontStore.fonts}
+                total={unifiedFontStore.pagination.total}
                 onVisibleItemsChange={handleInternalVisibleChange}
                 onNearBottom={handleNearBottom}
+                {...rest}
             >
                 {#snippet children(scope)}
                     {@render children(scope)}
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 7c2d4d4..7b36ccf 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -24,38 +24,6 @@ let innerHeight = $state(0);
 // Is the component above the middle of the viewport?
 let isAboveMiddle = $state(false);
 
-const isLoading = $derived(
-    unifiedFontStore.isFetching || unifiedFontStore.isLoading,
-);
-
-/**
- * Load more fonts by moving to the next page
- */
-function loadMore() {
-    if (
-        !unifiedFontStore.pagination.hasMore
-        || unifiedFontStore.isFetching
-    ) {
-        return;
-    }
-    unifiedFontStore.nextPage();
-}
-
-/**
- * Handle scroll near bottom - auto-load next page
- *
- * Triggered by VirtualList when the user scrolls within 5 items of the end
- * of the loaded items. Only fetches if there are more pages available.
- */
-function handleNearBottom(_lastVisibleIndex: number) {
-    const { hasMore } = unifiedFontStore.pagination;
-
-    // VirtualList already checks if we're near the bottom of loaded items
-    if (hasMore && !unifiedFontStore.isFetching) {
-        loadMore();
-    }
-}
-
 /**
  * Calculate display range for pagination info
  */
@@ -83,13 +51,9 @@ const checkPosition = throttle(() => {
 
 <div bind:this={wrapper}>
     <FontVirtualList
-        items={unifiedFontStore.fonts}
-        total={unifiedFontStore.pagination.total}
-        onNearBottom={handleNearBottom}
         itemHeight={220}
         useWindowScroll={true}
         weight={controlManager.weight}
-        {isLoading}
     >
         {#snippet children({
     item: font,

From 6001f50cf551bcd1256464073d5af9534e9fc772 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 22:57:29 +0300
Subject: [PATCH 25/73] feat(Slider): change thumb shape to circle

---
 src/shared/ui/Slider/Slider.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index d89db16..b03ec6c 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -54,7 +54,8 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                 index={0}
                 class={cn(
                     'group/thumb relative block',
-                    orientation === 'horizontal' ? '-top-1 w-2 h-2.25' : '-left-1 h-2 w-2.25',
+                    'size-2',
+                    orientation === 'horizontal' ? '-top-1' : '-left-1',
                     'rounded-sm',
                     'bg-foreground',
                     // Glow shadow
@@ -64,7 +65,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                     orientation === 'horizontal' ? 'transition-[height,top,left,box-shadow]' : 'transition-[width,top,left,box-shadow]',
                     // Hover: bigger glow
                     'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]',
-                    orientation === 'horizontal' ? 'hover:h-3 hover:-top-[5.5px]' : 'hover:w-3 hover:-left-[5.5px]',
+                    orientation === 'horizontal' ? 'hover:size-3 hover:-top-[5.5px]' : 'hover:size-3 hover:-left-[5.5px]',
                     // Active: smaller glow
                     'active:shadow-[0_0_4px_rgba(0,0,0,0.3)]',
                     orientation === 'horizontal' ? 'active:h-2.5 active:-top-[4.5px]' : 'active:w-2.5 active:-left-[4.5px]',

From aa3f46782169edbe32ddb2808dd0db5db88944a1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:00:12 +0300
Subject: [PATCH 26/73] feat(Input): add tailwind variants with sizes, update
 stories

---
 src/shared/ui/Input/Input.stories.svelte |  76 ++++++++++++++---
 src/shared/ui/Input/Input.svelte         | 101 +++++++++++++++--------
 2 files changed, 131 insertions(+), 46 deletions(-)

diff --git a/src/shared/ui/Input/Input.stories.svelte b/src/shared/ui/Input/Input.stories.svelte
index 7ad789b..ed7fbd1 100644
--- a/src/shared/ui/Input/Input.stories.svelte
+++ b/src/shared/ui/Input/Input.stories.svelte
@@ -8,10 +8,11 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component: 'Styles Input component',
+                component: 'Styled input component with size and variant options',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
+        layout: 'centered',
     },
     argTypes: {
         placeholder: {
@@ -22,21 +23,76 @@ const { Story } = defineMeta({
             control: 'text',
             description: "input's value",
         },
+        variant: {
+            control: 'select',
+            options: ['default', 'ghost'],
+            description: 'Visual style variant',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Size variant',
+        },
     },
 });
 </script>
 
 <script lang="ts">
-let value = $state('Initial value');
+let valueDefault = $state('Initial value');
+let valueSm = $state('');
+let valueMd = $state('');
+let valueLg = $state('');
+let valueGhostSm = $state('');
+let valueGhostMd = $state('');
+let valueGhostLg = $state('');
 const placeholder = 'Enter text';
 </script>
 
-<Story
-    name="Default"
-    args={{
-        placeholder,
-        value,
-    }}
->
-    <Input value={value} placeholder={placeholder} />
+<!-- Default Story -->
+<Story name="Default" args={{ placeholder }}>
+    <Input bind:value={valueDefault} {placeholder} />
+</Story>
+
+<!-- Size Variants -->
+<Story name="Small" args={{ placeholder }}>
+    <Input bind:value={valueSm} {placeholder} size="sm" />
+</Story>
+
+<Story name="Medium" args={{ placeholder }}>
+    <Input bind:value={valueMd} {placeholder} size="md" />
+</Story>
+
+<Story name="Large" args={{ placeholder }}>
+    <Input bind:value={valueLg} {placeholder} size="lg" />
+</Story>
+
+<!-- Ghost Variant with Sizes -->
+<Story name="Ghost Small" args={{ placeholder }}>
+    <Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" />
+</Story>
+
+<Story name="Ghost Medium" args={{ placeholder }}>
+    <Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" />
+</Story>
+
+<Story name="Ghost Large" args={{ placeholder }}>
+    <Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" />
+</Story>
+
+<!-- Size Comparison -->
+<Story name="All Sizes" tags={['!autodocs']}>
+    <div class="flex flex-col gap-4 w-full max-w-md p-8">
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Small</span>
+            <Input placeholder="Small input" size="sm" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Medium</span>
+            <Input placeholder="Medium input" size="md" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Large</span>
+            <Input placeholder="Large input" size="lg" />
+        </div>
+    </div>
 </Story>
diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index 73e7a50..3e62d23 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -2,60 +2,89 @@
     Component: Input
     Provides styled input component with all the shadcn input props
 -->
-<script lang="ts">
-import { Input } from '$shared/shadcn/ui/input';
+<script lang="ts" module>
+import { Input as BaseInput } from '$shared/shadcn/ui/input';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import type { ComponentProps } from 'svelte';
+import {
+    type VariantProps,
+    tv,
+} from 'tailwind-variants';
 
-type Props = ComponentProps<typeof Input> & {
+export const inputVariants = tv({
+    base: [
+        'w-full backdrop-blur-md border font-medium transition-all duration-200',
+        'focus-visible:border-border-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-muted/30 focus-visible:bg-background-95',
+        'hover:bg-background-95 hover:border-border-soft',
+        'text-foreground placeholder:text-text-muted placeholder:font-mono placeholder:tracking-wide',
+    ],
+    variants: {
+        variant: {
+            default: 'bg-background-80 border-border-muted shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
+            ghost: 'bg-transparent border-transparent shadow-none',
+        },
+        size: {
+            sm: [
+                'h-9 sm:h-10 md:h-11 rounded-lg',
+                'px-3 sm:px-3.5 md:px-4',
+                'text-xs sm:text-sm md:text-base',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+            md: [
+                'h-10 sm:h-12 md:h-14 rounded-xl',
+                'px-3.5 sm:px-4 md:px-5',
+                'text-sm sm:text-base md:text-lg',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+            lg: [
+                'h-12 sm:h-14 md:h-16 rounded-2xl',
+                'px-4 sm:px-5 md:px-6',
+                'text-sm sm:text-base md:text-lg',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'lg',
+    },
+});
+
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+export type InputSize = VariantProps<typeof inputVariants>['size'];
+
+export type InputProps = {
     /**
      * Current search value (bindable)
      */
-    value: string;
+    value?: string;
     /**
      * Additional CSS classes for the container
      */
     class?: string;
-
-    variant?: 'default' | 'ghost';
+    /**
+     * Visual style variant
+     */
+    variant?: InputVariant;
+    /**
+     * Size variant
+     */
+    size?: InputSize;
+    [key: string]: any;
 };
+</script>
 
+<script lang="ts">
 let {
     value = $bindable(''),
     class: className,
     variant = 'default',
+    size = 'lg',
     ...rest
-}: Props = $props();
-
-const isGhost = $derived(variant === 'ghost');
+}: InputProps = $props();
 </script>
 
-<Input
+<BaseInput
     bind:value={value}
-    class={cn(
-        'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
-        'backdrop-blur-md',
-        isGhost ? 'bg-transparent' : 'bg-background-80',
-        'border border-border-muted',
-        isGhost ? 'border-transparent' : 'border-border-muted',
-        isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
-        'focus-visible:border-border-soft',
-        'focus-visible:outline-none',
-        'focus-visible:ring-1',
-        'focus-visible:ring-border-muted/30',
-        'focus-visible:bg-background-95',
-        'hover:bg-background-95',
-        'hover:border-border-soft',
-        'text-foreground',
-        'placeholder:text-text-muted',
-        'placeholder:font-mono',
-        'placeholder:text-xs sm:placeholder:text-sm',
-        'placeholder:tracking-wide',
-        'pl-4 sm:pl-6 pr-4 sm:pr-6',
-        'rounded-xl',
-        'transition-all duration-200',
-        'font-medium',
-        className,
-    )}
+    class={cn(inputVariants({ variant, size }), className)}
     {...rest}
 />

From 9e74a2c2c679a1ad232ba2413b4b4ecfb4c71bd7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:01:43 +0300
Subject: [PATCH 27/73] feat(createCharacterComparison): create type
 CharacterComparison and export it

---
 .../createCharacterComparison.svelte.ts                         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
index 8abb64c..832d3a2 100644
--- a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
+++ b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
@@ -276,3 +276,5 @@ export function createCharacterComparison<
         getCharState,
     };
 }
+
+export type CharacterComparison = ReturnType<typeof createCharacterComparison>;

From 4fdc99a15a7dce4af647fbb3c7ee673470a24ad9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:02:49 +0300
Subject: [PATCH 28/73] feat(createPerspectiveManager): create perspective
 manager to work with perspective, moving objects along the z axis

---
 .../createPerspectiveManager.svelte.ts        | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts

diff --git a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
new file mode 100644
index 0000000..4a98ca8
--- /dev/null
+++ b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
@@ -0,0 +1,130 @@
+import { Spring } from 'svelte/motion';
+
+export interface PerspectiveConfig {
+    /**
+     * How many px to move back per level
+     */
+    depthStep?: number;
+    /**
+     * Scale reduction per level
+     */
+    scaleStep?: number;
+    /**
+     * Blur amount per level
+     */
+    blurStep?: number;
+    /**
+     * Opacity reduction per level
+     */
+    opacityStep?: number;
+    /**
+     * Parallax intensity per level
+     */
+    parallaxIntensity?: number;
+    /**
+     * Horizontal offset for each plan (x-axis positioning)
+     * Positive = right, Negative = left
+     */
+    horizontalOffset?: number;
+    /**
+     * Layout mode: 'center' (default) or 'split' for Swiss-style side-by-side
+     */
+    layoutMode?: 'center' | 'split';
+}
+
+/**
+ * Manages perspective state with a simple boolean flag.
+ *
+ * Drastically simplified from the complex camera/index system.
+ * Just manages whether content is in "back" or "front" state.
+ *
+ * @example
+ * ```typescript
+ * const perspective = createPerspectiveManager({
+ *     depthStep: 100,
+ *     scaleStep: 0.5,
+ *     blurStep: 4,
+ * });
+ *
+ * // Toggle back/front
+ * perspective.toggle();
+ *
+ * // Check state
+ * const isBack = perspective.isBack; // reactive boolean
+ * ```
+ */
+export class PerspectiveManager {
+    /**
+     * Spring for smooth back/front transitions
+     */
+    spring = new Spring(0, {
+        stiffness: 0.2,
+        damping: 0.8,
+    });
+
+    /**
+     * Reactive boolean: true when in back position (blurred, scaled down)
+     */
+    isBack = $derived(this.spring.current > 0.5);
+
+    /**
+     * Reactive boolean: true when in front position (fully visible, interactive)
+     */
+    isFront = $derived(this.spring.current < 0.5);
+
+    /**
+     * Configuration values for style computation
+     */
+    private config: Required<PerspectiveConfig>;
+
+    constructor(config: PerspectiveConfig = {}) {
+        this.config = {
+            depthStep: config.depthStep ?? 100,
+            scaleStep: config.scaleStep ?? 0.5,
+            blurStep: config.blurStep ?? 4,
+            opacityStep: config.opacityStep ?? 0.5,
+            parallaxIntensity: config.parallaxIntensity ?? 0,
+            horizontalOffset: config.horizontalOffset ?? 0,
+            layoutMode: config.layoutMode ?? 'center',
+        };
+    }
+
+    /**
+     * Toggle between front (0) and back (1) positions.
+     * Smooth spring animation handles the transition.
+     */
+    toggle = () => {
+        const target = this.spring.current < 0.5 ? 1 : 0;
+        this.spring.target = target;
+    };
+
+    /**
+     * Force to back position
+     */
+    setBack = () => {
+        this.spring.target = 1;
+    };
+
+    /**
+     * Force to front position
+     */
+    setFront = () => {
+        this.spring.target = 0;
+    };
+
+    /**
+     * Get configuration for style computation
+     * @internal
+     */
+    getConfig = () => this.config;
+}
+
+/**
+ * Factory function to create a PerspectiveManager instance.
+ *
+ * @param config - Configuration options
+ * @returns Configured PerspectiveManager instance
+ */
+export function createPerspectiveManager(config: PerspectiveConfig = {}) {
+    return new PerspectiveManager(config);
+}

From 1031b96ec503fbac7d9280c1541c6c77dda31f74 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:03:09 +0300
Subject: [PATCH 29/73] chore: add exports/imports

---
 src/shared/lib/helpers/index.ts | 6 ++++++
 src/shared/lib/index.ts         | 3 +++
 src/shared/ui/index.ts          | 7 +++++++
 3 files changed, 16 insertions(+)

diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 63890d1..78fcbe6 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -28,6 +28,7 @@ export {
 } from './createEntityStore/createEntityStore.svelte';
 
 export {
+    type CharacterComparison,
     createCharacterComparison,
     type LineData,
 } from './createCharacterComparison/createCharacterComparison.svelte';
@@ -48,3 +49,8 @@ export {
     getLenisContext,
     setLenisContext,
 } from './createScrollContext/createScrollContext.svelte';
+
+export {
+    createPerspectiveManager,
+    type PerspectiveManager,
+} from './createPerspectiveManager/createPerspectiveManager.svelte';
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 4effc6f..2ceace4 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -1,4 +1,5 @@
 export {
+    type CharacterComparison,
     type ControlDataModel,
     type ControlModel,
     createCharacterComparison,
@@ -7,6 +8,7 @@ export {
     createFilter,
     createLenisContext,
     createPersistentStore,
+    createPerspectiveManager,
     createResponsiveManager,
     createTypographyControl,
     createVirtualizer,
@@ -17,6 +19,7 @@ export {
     getLenisContext,
     type LineData,
     type PersistentStore,
+    type PerspectiveManager,
     type Property,
     type ResponsiveManager,
     responsiveManager,
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index d1e57cf..a8108e9 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -7,10 +7,17 @@ export { default as ExpandableWrapper } from './ExpandableWrapper/ExpandableWrap
 export { default as Footnote } from './Footnote/Footnote.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Input } from './Input/Input.svelte';
+export type {
+    InputProps,
+    InputSize,
+    InputVariant,
+} from './Input/Input.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Logo } from './Logo/Logo.svelte';
+export { default as PerspectivePlan } from './PerspectivePlan/PerspectivePlan.svelte';
 export { default as SearchBar } from './SearchBar/SearchBar.svelte';
 export { default as Section } from './Section/Section.svelte';
+export { default as SidebarMenu } from './SidebarMenu/SidebarMenu.svelte';
 export { default as Skeleton } from './Skeleton/Skeleton.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SmoothScroll } from './SmoothScroll/SmoothScroll.svelte';

From 5d2c05e1922c540a74272573d47b446373168016 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:04:24 +0300
Subject: [PATCH 30/73] feat(PerspectivePlan): add a wrapper to work with
 perspective manager styles

---
 .../ui/PerspectivePlan/PerspectivePlan.svelte | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/shared/ui/PerspectivePlan/PerspectivePlan.svelte

diff --git a/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte b/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte
new file mode 100644
index 0000000..ceb200e
--- /dev/null
+++ b/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte
@@ -0,0 +1,83 @@
+<!--
+    Component: PerspectivePlan
+    Wrapper that applies perspective transformations based on back/front state.
+    Style computation moved from manager to component for simpler architecture.
+-->
+<script lang="ts">
+import type { PerspectiveManager } from '$shared/lib';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { type Snippet } from 'svelte';
+
+interface Props {
+    /**
+     * Perspective manager
+     */
+    manager: PerspectiveManager;
+    /**
+     * Additional classes
+     */
+    class?: string;
+    /**
+     * Children
+     */
+    children: Snippet<[{ className?: string }]>;
+    /**
+     * Constrain plan to a horizontal region
+     * 'left' | 'right' | 'full' (default)
+     */
+    region?: 'left' | 'right' | 'full';
+    /**
+     * Width percentage when using left/right region (default 50)
+     */
+    regionWidth?: number;
+}
+
+let { manager, children, class: className = '', region = 'full', regionWidth = 50 }: Props = $props();
+
+const config = $derived(manager.getConfig());
+
+// Computed style based on spring position (0 = front, 1 = back)
+const style = $derived.by(() => {
+    const distance = manager.spring.current;
+    const baseX = config.horizontalOffset ?? 0;
+
+    // Back state: blurred, scaled down, pushed back
+    // Front state: fully visible, in focus
+    const scale = 1 - distance * (config.scaleStep ?? 0.5);
+    const blur = distance * (config.blurStep ?? 4);
+    const opacity = Math.max(0, 1 - distance * (config.opacityStep ?? 0.5));
+    const zIndex = 10;
+    const pointerEvents = distance < 0.4 ? 'auto' : ('none' as const);
+
+    return {
+        transform: `translate3d(${baseX}px, 0px, ${-distance * (config.depthStep ?? 100)}px) scale(${scale})`,
+        filter: `blur(${blur}px)`,
+        opacity,
+        pointerEvents,
+        zIndex,
+    };
+});
+
+// Calculate horizontal constraints based on region
+const regionStyleStr = $derived(() => {
+    if (region === 'full') return '';
+    const side = region === 'left' ? 'left' : 'right';
+    return `position: absolute; ${side}: 0; width: ${regionWidth}%; top: 0; bottom: 0;`;
+});
+
+// Visibility: front = visible, back = hidden
+const isVisible = $derived(manager.isFront);
+</script>
+
+<div
+    class={cn('will-change-transform', className)}
+    style:transform-style="preserve-3d"
+    style:transform={style?.transform}
+    style:filter={style?.filter}
+    style:opacity={style?.opacity}
+    style:pointer-events={style?.pointerEvents}
+    style:z-index={style?.zIndex}
+    style:custom={regionStyleStr()}
+>
+    {@render children({ className: isVisible ? 'visible' : 'hidden' })}
+</div>

From 8780b6932c872d538ff252b9a9d8f5c89321fb71 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:04:47 +0300
Subject: [PATCH 31/73] chore: formatting

---
 src/shared/ui/IconButton/IconButton.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/IconButton/IconButton.svelte b/src/shared/ui/IconButton/IconButton.svelte
index 0649394..54e0d9d 100644
--- a/src/shared/ui/IconButton/IconButton.svelte
+++ b/src/shared/ui/IconButton/IconButton.svelte
@@ -43,8 +43,10 @@ let { rotation = 'clockwise', icon, ...rest }: Props = $props();
 >
     {@render icon({
     className: cn(
-        'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-3 group-active:scale-90 group-disabled:stroke-transparent',
-        rotation === 'clockwise' ? 'group-active:rotate-6' : 'group-active:-rotate-6',
+        'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-2 group-active:scale-90 group-disabled:stroke-transparent',
+        rotation === 'clockwise'
+            ? 'group-active:rotate-6'
+            : 'group-active:-rotate-6',
     ),
 })}
 </Button>

From 72334a3d05d100941bd759c3c928c476cc1f5957 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:05:58 +0300
Subject: [PATCH 32/73] feat(ComboControlV2): hide input when control is
 reduced

---
 .../ui/ComboControlV2/ComboControlV2.svelte   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/shared/ui/ComboControlV2/ComboControlV2.svelte b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
index 1bce1a9..a7ad0cb 100644
--- a/src/shared/ui/ComboControlV2/ComboControlV2.svelte
+++ b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
@@ -150,16 +150,18 @@ function calculateScale(index: number): number | string {
             />
         </div>
 
-        <Input
-            class="h-10 rounded-lg w-12 pl-1 pr-1 sm:pr-1 md:pr-1 sm:pl-1 md:pl-1 text-center"
-            value={inputValue}
-            onchange={handleInputChange}
-            min={control.min}
-            max={control.max}
-            step={control.step}
-            pattern={REGEXP_ONLY_DIGITS}
-            variant="ghost"
-        />
+        {#if !reduced}
+            <Input
+                class="h-10 rounded-lg w-12 pl-1 pr-1 sm:pr-1 md:pr-1 sm:pl-1 md:pl-1 text-center"
+                value={inputValue}
+                onchange={handleInputChange}
+                min={control.min}
+                max={control.max}
+                step={control.step}
+                pattern={REGEXP_ONLY_DIGITS}
+                variant="ghost"
+            />
+        {/if}
 
         {#if label}
             <div class="flex items-center gap-2 opacity-70">

From 99966d2de9dcd0bf3b2d7fdad057889e14bd31f6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:07:23 +0300
Subject: [PATCH 33/73] feat(TypographyControls): drasticaly reduce animations,
 keep only the container functional

---
 .../components/TypographyControls.svelte      | 219 +++---------------
 1 file changed, 36 insertions(+), 183 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
index dcaa6d1..2238bd6 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
@@ -1,198 +1,51 @@
 <!--
     Component: TypographyControls
-    Wrapper for the controls of the slider.
-    - Input to change the text
-    - Three combo controls with inputs and sliders for font-weight, font-size, and line-height
+    Controls for text input and typography settings (size, weight, height).
+    Simplified version for static positioning in settings mode.
 -->
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     ComboControlV2,
-    ExpandableWrapper,
     Input,
 } from '$shared/ui';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
-import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
-import { type Orientation } from 'bits-ui';
-import { untrack } from 'svelte';
-import { Spring } from 'svelte/motion';
-import { fade } from 'svelte/transition';
-
-interface Props {
-    /**
-     * Ref
-     */
-    wrapper?: HTMLDivElement | null;
-    /**
-     * Slider position
-     */
-    sliderPos: number;
-    /**
-     * Whether slider is being dragged
-     */
-    isDragging: boolean;
-    /** */
-    isActive?: boolean;
-    /**
-     * Container width
-     */
-    containerWidth: number;
-    /**
-     * Reduced animations flag
-     */
-    staticPosition?: boolean;
-}
-
-let {
-    sliderPos,
-    isDragging,
-    isActive = $bindable(false),
-    wrapper = $bindable(null),
-    containerWidth = 0,
-    staticPosition = false,
-}: Props = $props();
 
 const typography = $derived(comparisonStore.typography);
-const panelWidth = $derived(wrapper?.clientWidth ?? 0);
-const margin = 24;
-let side = $state<'left' | 'right'>('left');
-// Unified active state for the entire wrapper
-let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
-
-const xSpring = new Spring(0, {
-    stiffness: 0.14, // Lower is slower
-    damping: 0.5, // Settle
-});
-
-const rotateSpring = new Spring(0, {
-    stiffness: 0.12,
-    damping: 0.55,
-});
-
-function handleInputFocus() {
-    isActive = true;
-}
-
-// Movement Logic
-$effect(() => {
-    if (containerWidth === 0 || panelWidth === 0 || staticPosition) {
-        return;
-    }
-
-    const sliderX = (sliderPos / 100) * containerWidth;
-    const buffer = 40;
-    const leftTrigger = margin + panelWidth + buffer;
-    const rightTrigger = containerWidth - (margin + panelWidth + buffer);
-
-    if (side === 'left' && sliderX < leftTrigger) {
-        side = 'right';
-    } else if (side === 'right' && sliderX > rightTrigger) {
-        side = 'left';
-    }
-});
-
-$effect(() => {
-    // Trigger only when side changes
-    const currentSide = side;
-
-    untrack(() => {
-        if (containerWidth > 0 && panelWidth > 0) {
-            const targetX = currentSide === 'right'
-                ? containerWidth - panelWidth - margin * 2
-                : 0;
-
-            // On side change set the position and the rotation
-            xSpring.target = targetX;
-            rotateSpring.target = currentSide === 'right' ? 3.5 : -3.5;
-
-            if (timeoutId) clearTimeout(timeoutId);
-
-            timeoutId = setTimeout(() => {
-                rotateSpring.target = 0;
-            }, 600);
-        }
-    });
-
-    return () => {
-        if (timeoutId) clearTimeout(timeoutId);
-    };
-});
 </script>
 
-{#snippet InputComponent(className: string)}
-    <Input
-        class={className}
-        bind:value={comparisonStore.text}
-        disabled={isDragging}
-        onfocusin={handleInputFocus}
-        placeholder="The quick brown fox..."
-    />
-{/snippet}
+<!-- Text input -->
+<Input
+    bind:value={comparisonStore.text}
+    size="sm"
+    label="Text"
+    placeholder="The quick brown fox..."
+    class="w-full px-3 py-2 h-10 rounded-lg border border-border-muted bg-background-60 backdrop-blur-sm mr-4"
+/>
 
-{#snippet Controls(className: string, orientation: Orientation)}
-    {#if typography.weightControl && typography.sizeControl && typography.heightControl}
-        <div class={className}>
-            <ComboControlV2 control={typography.weightControl} {orientation} reduced />
-            <ComboControlV2 control={typography.sizeControl} {orientation} reduced />
-            <ComboControlV2 control={typography.heightControl} {orientation} reduced />
-        </div>
-    {/if}
-{/snippet}
-
-<div
-    class="z-50 will-change-transform"
-    style:transform="
-        translateX({xSpring.current}px)
-        rotateZ({rotateSpring.current}deg)
-    "
-    in:fade={{ duration: 300, delay: 300 }}
-    out:fade={{ duration: 300, delay: 300 }}
->
-    {#if staticPosition}
-        <div class="flex flex-col gap-6">
-            {@render InputComponent?.('p-6')}
-            {@render Controls?.('flex flex-col justify-between items-center-safe gap-6', 'horizontal')}
-        </div>
-    {:else}
-        <ExpandableWrapper
-            bind:element={wrapper}
-            bind:expanded={isActive}
-            disabled={isDragging}
-            aria-label="Font controls"
-            rotation={side === 'right' ? 'counterclockwise' : 'clockwise'}
-            class={cn(
-                'transition-opacity flex items-top gap-1.5',
-                panelWidth === 0 ? 'opacity-0' : 'opacity-100',
-            )}
-            containerClassName={cn(!isActive && 'p-2 sm:p-0')}
-        >
-            {#snippet badge()}
-                <div
-                    class={cn(
-                        'animate-nudge relative transition-all',
-                        side === 'left' ? 'order-2' : 'order-0',
-                        isActive ? 'opacity-0' : 'opacity-100',
-                        isDragging && 'opacity-80 grayscale-[0.2]',
-                    )}
-                >
-                    <AArrowUP class={cn('size-3', 'stroke-indigo-600')} />
-                </div>
-            {/snippet}
-
-            {#snippet visibleContent()}
-                {@render InputComponent(cn(
-    'pl-1 sm:pl-3 pr-1 sm:pr-3',
-    'h-6 sm:h-8 md:h-10',
-    'rounded-lg',
-    isActive
-        ? 'h-7 sm:h-8 text-[0.825rem]'
-        : 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
-))}
-            {/snippet}
-
-            {#snippet hiddenContent()}
-                {@render Controls?.('flex flex-row justify-between items-center-safe gap-2 sm:gap-0 h-64', 'vertical')}
-            {/snippet}
-        </ExpandableWrapper>
-    {/if}
-</div>
+<!-- Typography controls -->
+{#if typography.weightControl && typography.sizeControl && typography.heightControl}
+    <div class="flex flex-col gap-1.5 mt-1.5">
+        <ComboControlV2
+            control={typography.weightControl}
+            orientation="horizontal"
+            class="sm:py-0"
+            showScale={false}
+            reduced
+        />
+        <ComboControlV2
+            control={typography.sizeControl}
+            orientation="horizontal"
+            class="sm:py-0"
+            showScale={false}
+            reduced
+        />
+        <ComboControlV2
+            control={typography.heightControl}
+            orientation="horizontal"
+            class="sm:py-0"
+            showScale={false}
+            reduced
+        />
+    </div>
+{/if}

From a0ac52a3489e81b3dd9bc42515ebb23ebafe8af7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:08:22 +0300
Subject: [PATCH 34/73] feat(SidebarMenu): create a shared sidebar menu that
 slides to the screen

---
 src/shared/ui/SidebarMenu/SidebarMenu.svelte | 99 ++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/shared/ui/SidebarMenu/SidebarMenu.svelte

diff --git a/src/shared/ui/SidebarMenu/SidebarMenu.svelte b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
new file mode 100644
index 0000000..08b6db6
--- /dev/null
+++ b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
@@ -0,0 +1,99 @@
+<!--
+    Component: SidebarMenu
+    Slides out from the right, closes on click outside
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+import { cubicOut } from 'svelte/easing';
+import {
+    fade,
+    slide,
+} from 'svelte/transition';
+
+interface Props {
+    /**
+     * Children to render conditionally
+     */
+    children?: Snippet;
+    /**
+     * Action (always visible) to render
+     */
+    action?: Snippet;
+    /**
+     * Wrapper reference to bind
+     */
+    wrapper?: HTMLElement | null;
+    /**
+     * Class to add to the wrapper
+     */
+    class?: string;
+    /**
+     * Bindable visibility flag
+     */
+    visible?: boolean;
+    /**
+     * Handler for click outside
+     */
+    onClickOutside?: () => void;
+}
+
+let {
+    children,
+    action,
+    wrapper = $bindable<HTMLElement | null>(null),
+    class: className,
+    visible = $bindable(false),
+    onClickOutside,
+}: Props = $props();
+
+/**
+ * Closes menu on click outside
+ */
+function handleClick(event: MouseEvent) {
+    if (!wrapper || !visible) {
+        return;
+    }
+    if (!wrapper.contains(event.target as Node)) {
+        visible = false;
+        onClickOutside?.();
+    }
+}
+</script>
+
+<svelte:window on:click={handleClick} />
+
+<div
+    class={cn(
+        'transition-all duration-300 delay-200 cubic-bezier-out',
+        className,
+    )}
+    bind:this={wrapper}
+>
+    {@render action?.()}
+    {#if visible}
+        <div
+            class="relative z-20 h-full w-auto flex flex-col gap-4"
+            in:fade={{ duration: 300, delay: 400, easing: cubicOut }}
+            out:fade={{ duration: 150, easing: cubicOut }}
+        >
+            {@render children?.()}
+        </div>
+
+        <!-- Background Gradient -->
+        <div
+            class="
+                absolute inset-0 z-10 h-full transition-all duration-700
+                bg-linear-to-r from-white/75 via-white/45 to-white/10
+                bg-[radial-gradient(ellipse_at_left,_rgba(255,252,245,0.4)_0%,_transparent_70%)]
+                shadow-[_inset_-1px_0_0_rgba(0,0,0,0.04)]
+                border-r border-white/90
+                after:absolute after:right-[-1px] after:top-0 after:h-full after:w-[1px] after:bg-black/[0.05]
+                backdrop-blur-md
+            "
+            in:slide={{ axis: 'x', duration: 250, delay: 100, easing: cubicOut }}
+            out:slide={{ axis: 'x', duration: 150, easing: cubicOut }}
+        >
+        </div>
+    {/if}
+</div>

From 17de544bdb7dae205ba105085e37f74cdda26638 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:09:21 +0300
Subject: [PATCH 35/73] feat(ComparisonSlider): add a toggle button that shows
 selected fonts and opens the sidebar menu with settings

---
 .../components/ToggleMenuButton.svelte        | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
new file mode 100644
index 0000000..c887456
--- /dev/null
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
@@ -0,0 +1,74 @@
+<!--
+    Component: ToggleMenuButton
+    Toggles menu sidebar, displays selected fonts names
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import { cubicOut } from 'svelte/easing';
+import { draw } from 'svelte/transition';
+
+interface Props {
+    isActive?: boolean;
+    onClick?: () => void;
+}
+
+let { isActive = $bindable(false), onClick }: Props = $props();
+
+// Handle click and toggle
+const toggle = () => {
+    onClick?.();
+    isActive = !isActive;
+};
+
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+</script>
+
+{#snippet icon(className?: string)}
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn('lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right', className)}
+    >
+        <circle cx="12" cy="12" r="10" />
+        {#if isActive}
+            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m15 9-6 6" /><path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m9 9 6 6"
+            />
+        {:else}
+            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m12 16 4-4-4-4" /><path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="M8 12h8"
+            />
+        {/if}
+    </svg>
+{/snippet}
+
+<button
+    onclick={toggle}
+    aria-pressed={isActive}
+    class={cn(
+        'group relative flex items-center justify-center gap-2 sm:gap-3 px-4 sm:px-6 py-2',
+        'cursor-pointer select-none overflow-hidden',
+        'transition-transform duration-150 active:scale-98',
+    )}
+>
+    {@render icon('size-4 stroke-[1.5] stroke-gray-500')}
+    <div class="w-px h-2.5 bg-gray-400/50"></div>
+    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-indigo-500 text-right">
+        {fontB?.name}
+    </div>
+    <div class="w-px h-2.5 bg-gray-400/50"></div>
+    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-neural-950 text-left">
+        {fontA?.name}
+    </div>
+</button>

From b7f54b503c58e6eb54f2c0a3392f92fbe685aea7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:10:07 +0300
Subject: [PATCH 36/73] feat(Controls): rework component to use SidebarMenu

---
 .../components/Controls.svelte                | 104 ++++++++----------
 1 file changed, 46 insertions(+), 58 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 609cd02..8e59753 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -1,44 +1,45 @@
+<!--
+    Component: Controls
+    Uses SidebarMenu to show ComparisonSlider's controls:
+    - List of fonts to pick
+    - Input to change text
+    - Sliders for font-weight, font-width, line-height
+-->
 <script lang="ts">
 import { appliedFontsManager } from '$entities/Font';
 import { getFontUrl } from '$entities/Font/lib';
-import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    Drawer,
-    IconButton,
-} from '$shared/ui';
-import SlidersIcon from '@lucide/svelte/icons/sliders-vertical';
-import { getContext } from 'svelte';
-import { comparisonStore } from '../../../model';
-import SelectComparedFonts from './SelectComparedFonts.svelte';
+import { SidebarMenu } from '$shared/ui';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import ComparisonList from './FontList.svelte';
+import ToggleMenuButton from './ToggleMenuButton.svelte';
 import TypographyControls from './TypographyControls.svelte';
 
 interface Props {
-    sliderPos: number;
-    isDragging: boolean;
-    typographyControls?: HTMLDivElement | null;
-    container: HTMLElement;
+    /**
+     * Additional class
+     */
+    class?: string;
+    /**
+     * Handler to trigger when menu opens/closes
+     */
+    handleToggle?: () => void;
 }
 
-let {
-    sliderPos,
-    isDragging,
-    typographyControls = $bindable<HTMLDivElement | null>(null),
-    container,
-}: Props = $props();
+let { class: className, handleToggle }: Props = $props();
 
+let visible = $state(false);
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-
-const weight = $derived(comparisonStore.typography.weight);
-
-const responsive = getContext<ResponsiveManager>('responsive');
+const typography = $derived(comparisonStore.typography);
+let menuWrapper = $state<HTMLElement | null>(null);
 
 $effect(() => {
     if (!fontA || !fontB) {
         return;
     }
 
+    const weight = typography.weight;
     const fontAUrl = getFontUrl(fontA, weight);
     const fontBUrl = getFontUrl(fontB, weight);
 
@@ -63,41 +64,28 @@ $effect(() => {
 });
 </script>
 
-{#if responsive.isMobile}
-    <Drawer>
-        {#snippet trigger({ isOpen, onClick })}
-            <IconButton class="absolute right-3 top-3" onclick={onClick}>
-                {#snippet icon({ className })}
-                    <SlidersIcon class={className} />
-                {/snippet}
-            </IconButton>
-        {/snippet}
-
-        {#snippet content({ isOpen, className })}
-            <div class={cn(className, 'flex flex-col gap-6')}>
-                <SelectComparedFonts {sliderPos} />
-                <TypographyControls
-                    {sliderPos}
-                    {isDragging}
-                    isActive={isOpen}
-                    bind:wrapper={typographyControls}
-                    containerWidth={container?.clientWidth}
-                    staticPosition
-                />
-            </div>
-        {/snippet}
-    </Drawer>
-{:else}
-    <div class="absolute top-3 sm:top-6 left-3 sm:left-6 z-50">
-        <TypographyControls
-            {sliderPos}
-            {isDragging}
-            bind:wrapper={typographyControls}
-            containerWidth={container?.clientWidth}
-        />
+<SidebarMenu
+    class={cn(
+        'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
+        'relative h-full transition-all duration-700 ease-out',
+        className,
+    )}
+    bind:visible
+    bind:wrapper={menuWrapper}
+    onClickOutside={handleToggle}
+>
+    {#snippet action()}
+        <!-- Always-visible mode switch -->
+        <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
+            <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
+        </div>
+    {/snippet}
+    <div class="h-2/3 overflow-hidden">
+        <ComparisonList />
     </div>
 
-    <div class="absolute bottom-3 sm:bottom-6 md:bottom-8 inset-x-3 sm:inset-x-6 md:inset-x-12">
-        <SelectComparedFonts {sliderPos} />
+    <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
+    <div class="mr-4 sm:mr-6">
+        <TypographyControls />
     </div>
-{/if}
+</SidebarMenu>

From 858daff860eca9f9800371e2cd7216702f6672d1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:11:10 +0300
Subject: [PATCH 37/73] feat(ComparisonSlider): create a scrollable list of
 fonts with clever controls

---
 .../components/FontList.svelte                | 202 ++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
new file mode 100644
index 0000000..bcbf0cc
--- /dev/null
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
@@ -0,0 +1,202 @@
+<!--
+    Component: FontList
+    A scrollable list of fonts with dual selection buttons for fontA and fontB.
+-->
+<script lang="ts">
+import {
+    FontVirtualList,
+    type UnifiedFont,
+} from '$entities/Font';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import { cubicOut } from 'svelte/easing';
+import { draw } from 'svelte/transition';
+
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+const typography = $derived(comparisonStore.typography);
+
+/**
+ * Select a font as fontA (right slot - compare_to)
+ */
+function selectFontA(font: UnifiedFont) {
+    comparisonStore.fontA = font;
+}
+
+/**
+ * Select a font as fontB (left slot - compare_from)
+ */
+function selectFontB(font: UnifiedFont) {
+    comparisonStore.fontB = font;
+}
+
+/**
+ * Check if a font is selected as fontA
+ */
+function isFontA(font: UnifiedFont): boolean {
+    return fontA?.id === font.id;
+}
+
+/**
+ * Check if a font is selected as fontB
+ */
+function isFontB(font: UnifiedFont): boolean {
+    return fontB?.id === font.id;
+}
+</script>
+
+{#snippet rightBrackets(className?: string)}
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus right-0 top-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M17 3h2a2 2 0 0 1 2 2v2"
+        />
+    </svg>
+
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus right-0 bottom-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M21 17v2a2 2 0 0 1-2 2h-2"
+        />
+    </svg>
+{/snippet}
+
+{#snippet leftBrackets(className?: string)}
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus left-0 top-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M3 7V5a2 2 0 0 1 2-2h2"
+        />
+    </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus left-0 bottom-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M7 21H5a2 2 0 0 1-2-2v-2"
+        />
+    </svg>
+{/snippet}
+
+{#snippet brackets(renderLeft?: boolean, renderRight?: boolean, className?: string)}
+    {#if renderLeft}
+        {@render leftBrackets(className)}
+    {/if}
+    {#if renderRight}
+        {@render rightBrackets(className)}
+    {/if}
+{/snippet}
+
+<div class="flex flex-col h-full min-h-0 bg-transparent">
+    <div class="flex-1 min-h-0">
+        <FontVirtualList
+            weight={typography.weight}
+            itemHeight={36}
+            class="bg-transparent"
+        >
+            {#snippet children({ item: font })}
+                {@const isSelectedA = isFontA(font)}
+                {@const isSelectedB = isFontB(font)}
+                {@const isEither = isSelectedA || isSelectedB}
+                {@const isBoth = isSelectedA && isSelectedB}
+                {@const handleSelectFontA = () => selectFontA(font)}
+                {@const handleSelectFontB = () => selectFontB(font)}
+
+                <div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden mr-4 lg:mr-6">
+                    <div
+                        class={cn(
+                            'absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-all duration-500 cubic-bezier-out',
+                            isSelectedB && !isBoth && '-translate-x-1/4',
+                            isSelectedA && !isBoth && 'translate-x-1/4',
+                            isBoth && 'translate-x-0',
+                        )}
+                    >
+                        <div class="relative flex items-center px-6">
+                            <span
+                                class={cn(
+                                    'font-mono text-[10px] sm:text-[11px] uppercase tracking-tighter select-none transition-all duration-300',
+                                    isEither
+                                        ? 'opacity-100 font-bold'
+                                        : 'opacity-30 group-hover:opacity-100',
+                                    isSelectedB && 'text-indigo-500',
+                                    isSelectedA && 'text-normal-950',
+                                    isBoth && 'text-indigo-600',
+                                )}
+                            >
+                                --- {font.name} ---
+                            </span>
+                        </div>
+                    </div>
+
+                    <button
+                        onclick={handleSelectFontB}
+                        class="flex-1 relative flex items-center justify-between transition-all duration-200 cursor-pointer hover:bg-indigo-500/[0.03]"
+                    >
+                        {@render brackets(isSelectedB, isSelectedB && !isBoth, 'stroke-1 size-7 stroke-indigo-600')}
+                    </button>
+
+                    <button
+                        onclick={handleSelectFontA}
+                        class="flex-1 relative flex items-center justify-end transition-all duration-200 cursor-pointer hover:bg-black/[0.02]"
+                    >
+                        {@render brackets(isSelectedA && !isBoth, isSelectedA, 'stroke-1 size-7 stroke-normal-950')}
+                    </button>
+                </div>
+            {/snippet}
+        </FontVirtualList>
+    </div>
+</div>

From 6ba37c9e4a2af275bf31e6cc9ced530849296169 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:15:50 +0300
Subject: [PATCH 38/73] feat(ComparisonSlider): add perspective manager and
 tweak styles

---
 .../ComparisonSlider/ComparisonSlider.svelte  | 192 +++++++++++-------
 1 file changed, 118 insertions(+), 74 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
index 642c58d..ada646f 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
@@ -8,17 +8,23 @@
     - Character-level morphing: Font changes exactly when the slider passes the character's global position.
     - Responsive layout with Tailwind breakpoints for font sizing.
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
+
+    Modes:
+    - Slider mode: Text centered in 1st plan, controls hidden
+    - Settings mode: Text moves to left (2nd plan), controls appear on right (1st plan)
 -->
 <script lang="ts">
 import {
+    type CharacterComparison,
+    type LineData,
+    type ResponsiveManager,
     createCharacterComparison,
-    createTypographyControl,
+    createPerspectiveManager,
 } from '$shared/lib';
-import type {
-    LineData,
-    ResponsiveManager,
-} from '$shared/lib';
-import { Loader } from '$shared/ui';
+import {
+    Loader,
+    PerspectivePlan,
+} from '$shared/ui';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import { getContext } from 'svelte';
 import { Spring } from 'svelte/motion';
@@ -31,10 +37,11 @@ import SliderLine from './components/SliderLine.svelte';
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 
-const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
+const isLoading = $derived(
+    comparisonStore.isLoading || !comparisonStore.isReady,
+);
 
 let container = $state<HTMLElement>();
-let typographyControls = $state<HTMLDivElement | null>(null);
 let measureCanvas = $state<HTMLCanvasElement>();
 let isDragging = $state(false);
 const typography = $derived(comparisonStore.typography);
@@ -45,7 +52,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
  * Encapsulated helper for text splitting, measuring, and character proximity calculations.
  * Manages line breaking and character state based on fonts and container dimensions.
  */
-const charComparison = createCharacterComparison(
+const charComparison: CharacterComparison = createCharacterComparison(
     () => comparisonStore.text,
     () => fontA,
     () => fontB,
@@ -53,6 +60,22 @@ const charComparison = createCharacterComparison(
     () => typography.renderedSize,
 );
 
+/**
+ * Perspective manager for back/front state toggling:
+ * - Front (slider mode): Text fully visible, interactive
+ * - Back (settings mode): Text blurred, scaled down, shifted left, controls visible
+ *
+ * Uses simple boolean flag for smooth transitions between states.
+ */
+const perspective = createPerspectiveManager({
+    parallaxIntensity: 0, // Disabled to not interfere with slider
+    horizontalOffset: 0, // Text shifts left when in back position
+    scaleStep: 0.5,
+    blurStep: 2,
+    depthStep: 100,
+    opacityStep: 0.3,
+});
+
 let lineElements = $state<(HTMLElement | undefined)[]>([]);
 
 /** Physics-based spring for smooth handle movement */
@@ -64,7 +87,10 @@ const sliderPos = $derived(sliderSpring.current);
 
 /** Updates spring target based on pointer position */
 function handleMove(e: PointerEvent) {
-    if (!isDragging || !container) return;
+    if (!isDragging || !container) {
+        return;
+    }
+
     const rect = container.getBoundingClientRect();
     const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
     const percentage = (x / rect.width) * 100;
@@ -72,18 +98,15 @@ function handleMove(e: PointerEvent) {
 }
 
 function startDragging(e: PointerEvent) {
-    if (
-        e.target === typographyControls
-        || typographyControls?.contains(e.target as Node)
-    ) {
-        e.stopPropagation();
-        return;
-    }
     e.preventDefault();
     isDragging = true;
     handleMove(e);
 }
 
+function togglePerspective() {
+    perspective.toggle();
+}
+
 /**
  * Sets the multiplier for slider font size based on the current responsive state
  */
@@ -146,28 +169,28 @@ $effect(() => {
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
 });
+
+const isInSettingsMode = $derived(perspective.isBack);
 </script>
 
 {#snippet renderLine(line: LineData, index: number)}
+    {@const pos = sliderPos}
+    {@const element = lineElements[index]}
     <div
         bind:this={lineElements[index]}
         class="relative flex w-full justify-center items-center whitespace-nowrap"
         style:height={`${typography.height}em`}
         style:line-height={`${typography.height}em`}
     >
-        {#each line.text.split('') as char, charIndex}
-            {@const { proximity, isPast } = charComparison.getCharState(charIndex, sliderPos, lineElements[index], container)}
+        {#each line.text.split('') as char, index}
+            {@const { proximity, isPast } = charComparison.getCharState(index, pos, element, container)}
             <!--
                 Single Character Span
                 - Font Family switches based on `isPast`
                 - Transitions/Transforms provide the "morph" feel
             -->
             {#if fontA && fontB}
-                <CharacterSlot
-                    {char}
-                    {proximity}
-                    {isPast}
-                />
+                <CharacterSlot {char} {proximity} {isPast} />
             {/if}
         {/each}
     </div>
@@ -176,59 +199,80 @@ $effect(() => {
 <!-- Hidden canvas used for text measurement by the helper -->
 <canvas bind:this={measureCanvas} class="hidden" width="1" height="1"></canvas>
 
-<div class="relative">
-    <div
-        bind:this={container}
-        role="slider"
-        tabindex="0"
-        aria-valuenow={Math.round(sliderPos)}
-        aria-label="Font comparison slider"
-        onpointerdown={startDragging}
-        class="
-            group relative w-full py-8 px-4 sm:py-12 sm:px-8 md:py-16 md:px-12 lg:py-20 lg:px-24 overflow-hidden
-            rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
-            select-none touch-none cursor-ew-resize min-h-72 sm:min-h-96 flex flex-col justify-center
-            backdrop-blur-lg bg-linear-to-br from-gray-100/70 via-white/50 to-gray-100/60
-            border border-border-muted
-            shadow-[inset_0_4px_12px_0_rgba(0,0,0,0.12),inset_0_2px_4px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(255,255,255,0.8)]
-            before:absolute before:inset-0 before:rounded-xl sm:before:rounded-2xl md:before:rounded-[2.5rem] before:p-px
-            before:bg-linear-to-br before:from-black/5 before:via-black/2 before:to-transparent
-            before:-z-10 before:blur-sm
-        "
-    >
-        <!-- Text Rendering Container -->
-        {#if isLoading}
-            <div out:fade={{ duration: 300 }}>
-                <Loader size={24} />
-            </div>
-        {:else}
+<!-- Main container with perspective and fixed height -->
+<div
+    class="
+        relative w-full flex justify-center items-center
+        perspective-distant perspective-origin-center transform-3d
+        rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
+        min-h-72 sm:min-h-96
+        backdrop-blur-lg bg-linear-to-br from-gray-200/40 via-white/80 to-gray-100/60
+        border border-border-muted
+        shadow-[inset_2px_0_8px_rgba(0,0,0,0.05)]
+        before:absolute before:inset-0 before:rounded-xl sm:before:rounded-2xl md:before:rounded-[2.5rem] before:p-px
+        before:bg-linear-to-br before:from-black/5 before:via-black/2 before:to-transparent
+        before:-z-10 before:blur-sm
+        overflow-hidden
+        [perspective:1500px] perspective-origin-center transform-3d
+    "
+>
+    {#if isLoading}
+        <div out:fade={{ duration: 300 }}>
+            <Loader size={24} />
+        </div>
+    {:else}
+        <!-- Text Plan -->
+        <PerspectivePlan
+            manager={perspective}
+            class="absolute inset-0 flex justify-center origin-right w-full h-full"
+        >
             <div
+                bind:this={container}
+                role="slider"
+                tabindex="0"
+                aria-valuenow={Math.round(sliderPos)}
+                aria-label="Font comparison slider"
+                onpointerdown={startDragging}
                 class="
-                    relative flex flex-col items-center gap-3 sm:gap-4
-                    text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.15]
-                    z-10 pointer-events-none text-center
-                    drop-shadow-[0_3px_6px_rgba(255,255,255,0.9)]
+                    relative w-full h-full flex justify-center
+                    py-8 px-4 sm:py-12 sm:px-8 md:py-16 md:px-12 lg:py-20 lg:px-24
+                    select-none touch-none cursor-ew-resize
                 "
-                style:perspective="1000px"
-                in:fade={{ duration: 300, delay: 300 }}
-                out:fade={{ duration: 300 }}
             >
-                {#each charComparison.lines as line, lineIndex}
-                    <div
-                        class="relative w-full whitespace-nowrap"
-                        style:height={`${typography.height}em`}
-                        style:display="flex"
-                        style:align-items="center"
-                        style:justify-content="center"
-                    >
-                        {@render renderLine(line, lineIndex)}
-                    </div>
-                {/each}
-            </div>
+                <div
+                    class="
+                        relative flex flex-col items-center gap-3 sm:gap-4
+                        text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.15]
+                        z-10 pointer-events-none text-center
+                        drop-shadow-[0_3px_6px_rgba(255,255,255,0.9)]
+                        my-auto
+                    "
+                    in:fade={{ duration: 300, delay: 300 }}
+                    out:fade={{ duration: 300 }}
+                >
+                    {#each charComparison.lines as line, lineIndex}
+                        <div
+                            class="relative w-full whitespace-nowrap"
+                            style:height={`${typography.height}em`}
+                            style:display="flex"
+                            style:align-items="center"
+                            style:justify-content="center"
+                        >
+                            {@render renderLine(line, lineIndex)}
+                        </div>
+                    {/each}
+                </div>
 
-            <SliderLine {sliderPos} {isDragging} />
-        {/if}
-    </div>
-    <!-- Since there're slider controls inside we put them outside the main one -->
-    <Controls {sliderPos} {isDragging} {typographyControls} {container} />
+                <!-- Slider Line - visible in slider mode -->
+                {#if !isInSettingsMode}
+                    <SliderLine {sliderPos} {isDragging} />
+                {/if}
+            </div>
+        </PerspectivePlan>
+
+        <Controls
+            class="absolute inset-y-0 left-0 transition-all duration-150"
+            handleToggle={togglePerspective}
+        />
+    {/if}
 </div>

From f15114a78bbbed34928ff7bbfb131a979fda7073 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:22:44 +0300
Subject: [PATCH 39/73] fix(Input): change the way input types are exporting

---
 src/shared/ui/Input/Input.svelte |  4 ++--
 src/shared/ui/index.ts           | 21 +++++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index 3e62d23..70bad8f 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -49,8 +49,8 @@ export const inputVariants = tv({
     },
 });
 
-export type InputVariant = VariantProps<typeof inputVariants>['variant'];
-export type InputSize = VariantProps<typeof inputVariants>['size'];
+type InputVariant = VariantProps<typeof inputVariants>['variant'];
+type InputSize = VariantProps<typeof inputVariants>['size'];
 
 export type InputProps = {
     /**
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index a8108e9..c80b5e2 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,3 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import Input from './Input/Input.svelte';
+
 export { default as CheckboxFilter } from './CheckboxFilter/CheckboxFilter.svelte';
 export { default as ComboControl } from './ComboControl/ComboControl.svelte';
 export { default as ComboControlV2 } from './ComboControlV2/ComboControlV2.svelte';
@@ -6,12 +9,7 @@ export { default as Drawer } from './Drawer/Drawer.svelte';
 export { default as ExpandableWrapper } from './ExpandableWrapper/ExpandableWrapper.svelte';
 export { default as Footnote } from './Footnote/Footnote.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
-export { default as Input } from './Input/Input.svelte';
-export type {
-    InputProps,
-    InputSize,
-    InputVariant,
-} from './Input/Input.svelte';
+
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Logo } from './Logo/Logo.svelte';
 export { default as PerspectivePlan } from './PerspectivePlan/PerspectivePlan.svelte';
@@ -22,3 +20,14 @@ export { default as Skeleton } from './Skeleton/Skeleton.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SmoothScroll } from './SmoothScroll/SmoothScroll.svelte';
 export { default as VirtualList } from './VirtualList/VirtualList.svelte';
+
+type InputProps = ComponentProps<typeof Input>;
+type InputSize = InputProps['size'];
+type InputVariant = InputProps['variant'];
+
+export {
+    Input,
+    type InputProps,
+    type InputSize,
+    type InputVariant,
+};

From 940e20515b45708fdd4a1eccbf54695f4d058303 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:23:52 +0300
Subject: [PATCH 40/73] chore: remove unused code

---
 .../components/SelectComparedFonts.svelte     | 146 ------------------
 1 file changed, 146 deletions(-)
 delete mode 100644 src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
deleted file mode 100644
index 45c494a..0000000
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SelectComparedFonts.svelte
+++ /dev/null
@@ -1,146 +0,0 @@
-<!--
-    Component: SelectComparedFonts
-    Displays selects that change the compared fonts
--->
-<script lang="ts">
-import {
-    FontVirtualList,
-    type UnifiedFont,
-    unifiedFontStore,
-} from '$entities/Font';
-import { getFontUrl } from '$entities/Font/lib';
-import FontApplicator from '$entities/Font/ui/FontApplicator/FontApplicator.svelte';
-import {
-    Content as SelectContent,
-    Item as SelectItem,
-    Root as SelectRoot,
-    Trigger as SelectTrigger,
-} from '$shared/shadcn/ui/select';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import { comparisonStore } from '$widgets/ComparisonSlider/model';
-import { fade } from 'svelte/transition';
-
-interface Props {
-    /**
-     * Position of the slider
-     */
-    sliderPos: number;
-}
-let { sliderPos }: Props = $props();
-
-const typography = $derived(comparisonStore.typography);
-const fontA = $derived(comparisonStore.fontA);
-const fontAUrl = $derived(fontA && getFontUrl(fontA, typography.weight));
-const fontB = $derived(comparisonStore.fontB);
-const fontBUrl = $derived(fontB && getFontUrl(fontB, typography.weight));
-
-const fontList = $derived(unifiedFontStore.fonts);
-
-function selectFontA(font: UnifiedFont) {
-    if (!font) return;
-    comparisonStore.fontA = font;
-}
-
-function selectFontB(font: UnifiedFont) {
-    if (!font) return;
-    comparisonStore.fontB = font;
-}
-</script>
-
-{#snippet fontSelector(
-    font: UnifiedFont,
-    fonts: UnifiedFont[],
-    url: string,
-    onSelect: (f: UnifiedFont) => void,
-    align: 'start' | 'end',
-)}
-    <div
-        class="z-50 pointer-events-auto"
-        onpointerdown={(e => e.stopPropagation())}
-        in:fade={{ duration: 300, delay: 300 }}
-        out:fade={{ duration: 300, delay: 300 }}
-    >
-        <SelectRoot type="single" disabled={!fontList.length}>
-            <SelectTrigger
-                class={cn(
-                    'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-border-muted bg-background-60 backdrop-blur-sm',
-                    'px-2 sm:px-3 rounded-lg transition-all flex items-center justify-between gap-2',
-                    'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-foreground',
-                    'hover:bg-background-80 hover:border-border-soft hover:shadow-sm',
-                )}
-            >
-                <div class="text-left flex-1 min-w-0">
-                    <FontApplicator {font} weight={typography.weight}>
-                        {font.name}
-                    </FontApplicator>
-                </div>
-            </SelectTrigger>
-            <SelectContent
-                class={cn(
-                    'bg-background-95 backdrop-blur-xl border border-border-muted shadow-xl',
-                    'w-44 sm:w-52 max-h-60 sm:max-h-64 overflow-hidden rounded-lg',
-                )}
-                side="top"
-                {align}
-                sideOffset={8}
-                size="small"
-            >
-                <div class="p-1 sm:p-1.5">
-                    <FontVirtualList items={fonts} weight={typography.weight}>
-                        {#snippet children({ item: fontListItem })}
-                            {@const handleClick = () => onSelect(fontListItem)}
-                            <SelectItem
-                                value={fontListItem.id}
-                                class="data-highlighted:bg-background-muted font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
-                                onclick={handleClick}
-                            >
-                                <FontApplicator
-                                    font={fontListItem}
-                                    weight={typography.weight}
-                                >
-                                    {fontListItem.name}
-                                </FontApplicator>
-                            </SelectItem>
-                        {/snippet}
-                    </FontVirtualList>
-                </div>
-            </SelectContent>
-        </SelectRoot>
-    </div>
-{/snippet}
-
-<div class="flex justify-between items-end pointer-events-none z-20">
-    <div
-        class="flex flex-col gap-1.5 sm:gap-2 transition-all duration-500 items-start"
-        style:opacity={sliderPos < 20 ? 0 : 1}
-        style:transform="translateY({sliderPos < 20 ? '8px' : '0px'})"
-    >
-        <div class="flex items-center gap-2 sm:gap-2.5 px-1">
-            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
-            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
-            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
-                ch_01
-            </span>
-        </div>
-        {#if fontB && fontBUrl}
-            {@render fontSelector(fontB, fontList, fontBUrl, selectFontB, 'start')}
-        {/if}
-    </div>
-
-    <div
-        class="flex flex-col items-end text-right gap-1.5 sm:gap-2 transition-all duration-500"
-        style:opacity={sliderPos > 80 ? 0 : 1}
-        style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
-    >
-        <div class="flex items-center gap-2 sm:gap-2.5 px-1">
-            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
-                ch_02
-            </span>
-            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
-            <div class="w-1.5 h-1.5 rounded-full bg-foreground shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
-        </div>
-        {#if fontA && fontAUrl}
-            {@render fontSelector(fontA, fontList, fontAUrl, selectFontA, 'end')}
-        {/if}
-    </div>
-</div>

From 4f76a03e33e2b68a2d933a2e7f09d1c94fa6abcf Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:11:29 +0300
Subject: [PATCH 41/73] feat(FontVirtualList): make skeleton a snippet prop

---
 .../ui/FontVirtualList/FontVirtualList.svelte | 64 +++++++++----------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index d9761bd..c0b6f45 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -8,7 +8,10 @@ import {
     Skeleton,
     VirtualList,
 } from '$shared/ui';
-import type { ComponentProps } from 'svelte';
+import type {
+    ComponentProps,
+    Snippet,
+} from 'svelte';
 import { fade } from 'svelte/transition';
 import { getFontUrl } from '../../lib';
 import {
@@ -28,19 +31,21 @@ interface Props extends
      * Callback for when visible items change
      */
     onVisibleItemsChange?: (items: UnifiedFont[]) => void;
-    /**
-     * Weight of the font
-     */
     /**
      * Weight of the font
      */
     weight: number;
+    /**
+     * Skeleton snippet
+     */
+    skeleton?: Snippet;
 }
 
 let {
     children,
     onVisibleItemsChange,
     weight,
+    skeleton,
     ...rest
 }: Props = $props();
 
@@ -100,32 +105,25 @@ function handleNearBottom(_lastVisibleIndex: number) {
 }
 </script>
 
-{#key isLoading}
-    <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
-        {#if isLoading}
-            <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
-                {#each Array(5) as _, i}
-                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
-                        <div class="flex items-center justify-between mb-3 sm:mb-4">
-                            <Skeleton class="h-6 sm:h-8 w-1/3" />
-                            <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
-                        </div>
-                        <Skeleton class="h-24 sm:h-32 w-full" />
-                    </div>
-                {/each}
-            </div>
-        {:else}
-            <VirtualList
-                items={unifiedFontStore.fonts}
-                total={unifiedFontStore.pagination.total}
-                onVisibleItemsChange={handleInternalVisibleChange}
-                onNearBottom={handleNearBottom}
-                {...rest}
-            >
-                {#snippet children(scope)}
-                    {@render children(scope)}
-                {/snippet}
-            </VirtualList>
-        {/if}
-    </div>
-{/key}
+<div class="relative w-full h-full">
+    {#if skeleton && isLoading && unifiedFontStore.fonts.length === 0}
+        <!-- Show skeleton only on initial load when no fonts are loaded yet -->
+        <div transition:fade={{ duration: 300 }}>
+            {@render skeleton()}
+        </div>
+    {:else}
+        <!-- VirtualList persists during pagination - no destruction/recreation -->
+        <VirtualList
+            items={unifiedFontStore.fonts}
+            total={unifiedFontStore.pagination.total}
+            isLoading={isLoading}
+            onVisibleItemsChange={handleInternalVisibleChange}
+            onNearBottom={handleNearBottom}
+            {...rest}
+        >
+            {#snippet children(scope)}
+                {@render children(scope)}
+            {/snippet}
+        </VirtualList>
+    {/if}
+</div>

From 1f793278d1e86613893d06414c236c30c116b888 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:12:00 +0300
Subject: [PATCH 42/73] chore: remove comment

---
 src/entities/Font/model/store/unifiedFontStore.svelte.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/entities/Font/model/store/unifiedFontStore.svelte.ts b/src/entities/Font/model/store/unifiedFontStore.svelte.ts
index da718c5..78b9536 100644
--- a/src/entities/Font/model/store/unifiedFontStore.svelte.ts
+++ b/src/entities/Font/model/store/unifiedFontStore.svelte.ts
@@ -215,7 +215,6 @@ export class UnifiedFontStore extends BaseFontStore<ProxyFontsParams> {
         // Note: For offset === 0, we rely on the $effect above to handle the reset/init
         // This prevents race conditions and double-setting.
         if (params.offset !== 0) {
-            // Append new fonts to existing ones only for pagination
             this.#accumulatedFonts = [...this.#accumulatedFonts, ...response.fonts];
         }
 

From bee529dff8874e5b6a05304a00bd0c6d88900c5f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:14:06 +0300
Subject: [PATCH 43/73] fix(createVirtualizer): fix scroll issues that make
 scroll position jump when new page of fonts loads. Add some optimizations
 e.g. common ResizeObserver

---
 .../createVirtualizer.svelte.ts               | 142 +++++++++++-------
 1 file changed, 89 insertions(+), 53 deletions(-)

diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index 9fabb92..9b8ea6a 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -3,6 +3,7 @@
  *
  * Used to render visible items with absolute positioning based on computed offsets.
  */
+
 export interface VirtualItem {
     /**
      * Index of the item in the data array
@@ -132,6 +133,7 @@ export function createVirtualizer<T>(
             // Accessing measuredSizes here creates the subscription
             accumulated += measuredSizes[i] ?? options.estimateSize(i);
         }
+
         return result;
     });
 
@@ -189,10 +191,13 @@ export function createVirtualizer<T>(
             const isFullyVisible = itemStart >= scrollOffset && itemEnd <= viewportEnd;
 
             // Proximity calculation: 1.0 at center, 0.0 at edges
+            // Guard against division by zero (containerHeight can be 0 on initial render)
             const itemCenter = itemStart + (itemSize / 2);
             const distanceToCenter = Math.abs(viewportCenter - itemCenter);
             const maxDistance = containerHeight / 2;
-            const proximity = Math.max(0, 1 - (distanceToCenter / maxDistance));
+            const proximity = maxDistance > 0
+                ? Math.max(0, 1 - (distanceToCenter / maxDistance))
+                : 0;
 
             result.push({
                 index: i,
@@ -206,16 +211,6 @@ export function createVirtualizer<T>(
             });
         }
 
-        // console.log('🎯 Virtual Items Calculation:', {
-        //     scrollOffset,
-        //     containerHeight,
-        //     viewportEnd,
-        //     startIdx,
-        //     endIdx,
-        //     withOverscan: { start, end },
-        //     itemCount: end - start,
-        // });
-
         return result;
     });
     // Svelte Actions (The DOM Interface)
@@ -256,25 +251,19 @@ export function createVirtualizer<T>(
                     scrollOffset = scrolledPastTop;
                     rafId = null;
                 });
-
-                // 🔍 DIAGNOSTIC
-                // console.log('📜 Scroll Event:', {
-                //     windowScrollY: window.scrollY,
-                //     elementRectTop: rect.top,
-                //     scrolledPastTop,
-                //     containerHeight
-                // });
             };
 
             const handleResize = () => {
                 containerHeight = window.innerHeight;
-                cachedOffsetTop = getElementOffset();
+                elementOffsetTop = getElementOffset();
+                cachedOffsetTop = elementOffsetTop;
                 handleScroll();
             };
 
             // Initial setup
             requestAnimationFrame(() => {
-                cachedOffsetTop = getElementOffset();
+                elementOffsetTop = getElementOffset();
+                cachedOffsetTop = elementOffsetTop;
                 handleScroll();
             });
 
@@ -293,6 +282,11 @@ export function createVirtualizer<T>(
                         cancelAnimationFrame(rafId);
                         rafId = null;
                     }
+                    // Disconnect shared ResizeObserver
+                    if (sharedResizeObserver) {
+                        sharedResizeObserver.disconnect();
+                        sharedResizeObserver = null;
+                    }
                     elementRef = null;
                 },
             };
@@ -314,6 +308,11 @@ export function createVirtualizer<T>(
                 destroy() {
                     node.removeEventListener('scroll', handleScroll);
                     resizeObserver.disconnect();
+                    // Disconnect shared ResizeObserver
+                    if (sharedResizeObserver) {
+                        sharedResizeObserver.disconnect();
+                        sharedResizeObserver = null;
+                    }
                     elementRef = null;
                 },
             };
@@ -325,51 +324,64 @@ export function createVirtualizer<T>(
     // Signal to trigger updates when mutating measuredSizes in place
     let _version = $state(0);
 
+    // Single shared ResizeObserver for all items (performance optimization)
+    let sharedResizeObserver: ResizeObserver | null = null;
+
     /**
      * Svelte action to measure individual item elements for dynamic height support.
      *
-     * Attaches a ResizeObserver to track actual element height and updates
-     * measured sizes when dimensions change. Requires `data-index` attribute on the element.
+     * Uses a single shared ResizeObserver for all items to track actual element heights.
+     * Requires `data-index` attribute on the element.
      *
      * @param node - The DOM element to measure (should have `data-index` attribute)
      * @returns Object with destroy method for cleanup
      */
     function measureElement(node: HTMLElement) {
-        const resizeObserver = new ResizeObserver(([entry]) => {
-            if (!entry) return;
-            const index = parseInt(node.dataset.index || '', 10);
-            const height = entry.borderBoxSize[0]?.blockSize ?? node.offsetHeight;
+        // Initialize shared observer on first use
+        if (!sharedResizeObserver) {
+            sharedResizeObserver = new ResizeObserver(entries => {
+                // Process all entries in a single batch
+                for (const entry of entries) {
+                    const target = entry.target as HTMLElement;
+                    const index = parseInt(target.dataset.index || '', 10);
+                    const height = entry.borderBoxSize[0]?.blockSize ?? target.offsetHeight;
 
-            if (!isNaN(index)) {
-                // Accessing the version ensures we have the latest state if needed,
-                // though here we just read the raw object.
-                const oldHeight = measuredSizes[index];
+                    if (!isNaN(index)) {
+                        const oldHeight = measuredSizes[index];
 
-                // Only update if the height difference is significant (> 0.5px)
-                if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
-                    // Stuff the measurement into a temporary buffer to batch updates
-                    measurementBuffer[index] = height;
-
-                    // Schedule a single update for the next animation frame
-                    if (frameId === null) {
-                        frameId = requestAnimationFrame(() => {
-                            // Mutation in place for performance
-                            Object.assign(measuredSizes, measurementBuffer);
-
-                            // Trigger reactivity
-                            _version += 1;
-
-                            // Reset buffer
-                            measurementBuffer = {};
-                            frameId = null;
-                        });
+                        // Only update if the height difference is significant (> 0.5px)
+                        if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
+                            measurementBuffer[index] = height;
+                        }
                     }
                 }
-            }
-        });
 
-        resizeObserver.observe(node);
-        return { destroy: () => resizeObserver.disconnect() };
+                // Schedule a single update for the next animation frame
+                if (frameId === null && Object.keys(measurementBuffer).length > 0) {
+                    frameId = requestAnimationFrame(() => {
+                        // Mutation in place for performance
+                        Object.assign(measuredSizes, measurementBuffer);
+
+                        // Trigger reactivity
+                        _version += 1;
+
+                        // Reset buffer
+                        measurementBuffer = {};
+                        frameId = null;
+                    });
+                }
+            });
+        }
+
+        // Observe this element with the shared observer
+        sharedResizeObserver.observe(node);
+
+        // Return cleanup that only unobserves this specific element
+        return {
+            destroy: () => {
+                sharedResizeObserver?.unobserve(node);
+            },
+        };
     }
 
     // Programmatic Scroll
@@ -409,6 +421,28 @@ export function createVirtualizer<T>(
         }
     }
 
+    /**
+     * Scrolls the container to a specific pixel offset.
+     * Used for preserving scroll position during data updates.
+     *
+     * @param offset - The scroll offset in pixels
+     * @param behavior - Scroll behavior: 'auto' for instant, 'smooth' for animated
+     *
+     * @example
+     * ```ts
+     * virtualizer.scrollToOffset(1000, 'auto'); // Instant scroll to 1000px
+     * ```
+     */
+    function scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto') {
+        const { useWindowScroll } = optionsGetter();
+
+        if (useWindowScroll) {
+            window.scrollTo({ top: offset + elementOffsetTop, behavior });
+        } else if (elementRef) {
+            elementRef.scrollTo({ top: offset, behavior });
+        }
+    }
+
     return {
         get scrollOffset() {
             return scrollOffset;
@@ -430,6 +464,8 @@ export function createVirtualizer<T>(
         measureElement,
         /** Programmatic scroll method to scroll to a specific item */
         scrollToIndex,
+        /** Programmatic scroll method to scroll to a specific pixel offset */
+        scrollToOffset,
     };
 }
 

From 4d57f2084c461b34ce9cc0bb354db9e0742615c3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:15:19 +0300
Subject: [PATCH 44/73] feat(VirtualList): add estimated total size calculation

---
 src/shared/ui/VirtualList/VirtualList.svelte | 59 +++++++++++++++-----
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index 71d066a..0c42845 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -6,12 +6,11 @@
     - Keyboard navigation (ArrowUp/Down, Home, End)
     - Fixed or dynamic item heights
     - ARIA listbox/option pattern with single tab stop
-    - Custom shadcn ScrollArea scrollbar
+    - Native browser scroll
 -->
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
 import { throttle } from '$shared/lib/utils';
-import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
 import { flip } from 'svelte/animate';
@@ -136,10 +135,13 @@ let {
     isLoading = false,
 }: Props = $props();
 
-// Reference to the ScrollArea viewport element for attaching the virtualizer
+// Reference to the scroll container element for attaching the virtualizer
 let viewportRef = $state<HTMLElement | null>(null);
 
+// Use items.length for count to keep existing item positions stable
+// But calculate a separate totalSize for scrollbar that accounts for unloaded items
 const virtualizer = createVirtualizer(() => ({
+    // Only virtualize loaded items - this keeps positions stable when new items load
     count: items.length,
     data: items,
     estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
@@ -147,6 +149,34 @@ const virtualizer = createVirtualizer(() => ({
     useWindowScroll,
 }));
 
+// Calculate total size including unloaded items for proper scrollbar sizing
+// Use estimateSize() for items that haven't been loaded yet
+const estimatedTotalSize = $derived.by(() => {
+    if (total === items.length) {
+        // No unloaded items, use virtualizer's totalSize
+        return virtualizer.totalSize;
+    }
+
+    // Start with the virtualized (loaded) items size
+    const loadedSize = virtualizer.totalSize;
+
+    // Add estimated size for unloaded items
+    const unloadedCount = total - items.length;
+    if (unloadedCount <= 0) return loadedSize;
+
+    // Estimate the size of unloaded items
+    // Get the average size of loaded items, or use the estimateSize function
+    const estimateFn = typeof itemHeight === 'function' ? itemHeight : () => itemHeight;
+
+    // Use estimateSize for unloaded items (index from items.length to total - 1)
+    let unloadedSize = 0;
+    for (let i = items.length; i < total; i++) {
+        unloadedSize += estimateFn(i);
+    }
+
+    return loadedSize + unloadedSize;
+});
+
 // Attach virtualizer.container action to the viewport when it becomes available
 $effect(() => {
     if (viewportRef) {
@@ -170,7 +200,8 @@ $effect(() => {
 
 $effect(() => {
     // Trigger onNearBottom when user scrolls near the end of loaded items (within 5 items)
-    if (virtualizer.items.length > 0 && onNearBottom) {
+    // Only trigger if container has sufficient height to avoid false positives
+    if (virtualizer.items.length > 0 && onNearBottom && virtualizer.containerHeight > 100) {
         const lastVisibleItem = virtualizer.items[virtualizer.items.length - 1];
         // Compare against loaded items length, not total
         const itemsRemaining = items.length - lastVisibleItem.index;
@@ -184,7 +215,7 @@ $effect(() => {
 
 {#if useWindowScroll}
     <div class={cn('relative w-full', className)} bind:this={viewportRef}>
-        <div style:height="{virtualizer.totalSize}px" class="relative w-full">
+        <div style:height="{estimatedTotalSize}px" class="relative w-full">
             {#each virtualizer.items as item (item.key)}
                 <div
                     use:virtualizer.measureElement
@@ -195,7 +226,7 @@ $effect(() => {
                 >
                     {#if item.index < items.length}
                         {@render children({
-    // TODO: Fix indenation rule for this case
+    // TODO: Fix indentation rule for this case
     item: items[item.index],
     index: item.index,
     isFullyVisible: item.isFullyVisible,
@@ -208,16 +239,16 @@ $effect(() => {
         </div>
     </div>
 {:else}
-    <ScrollArea
-        bind:viewportRef
+    <div
+        bind:this={viewportRef}
         class={cn(
-            'relative rounded-md bg-background',
-            'h-150 w-full',
+            'relative overflow-y-auto overflow-x-hidden',
+            'rounded-md bg-background',
+            'w-full min-h-[200px]',
             className,
         )}
-        orientation="vertical"
     >
-        <div style:height="{virtualizer.totalSize}px" class="relative w-full">
+        <div style:height="{estimatedTotalSize}px" class="relative w-full">
             {#each virtualizer.items as item (item.key)}
                 <div
                     use:virtualizer.measureElement
@@ -227,7 +258,7 @@ $effect(() => {
                 >
                     {#if item.index < items.length}
                         {@render children({
-    // TODO: Fix indenation rule for this case
+    // TODO: Fix indentation rule for this case
     item: items[item.index],
     index: item.index,
     isFullyVisible: item.isFullyVisible,
@@ -238,5 +269,5 @@ $effect(() => {
                 </div>
             {/each}
         </div>
-    </ScrollArea>
+    </div>
 {/if}

From c45429f38d894566d022ce5ceede18bef935f4d5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:15:47 +0300
Subject: [PATCH 45/73] feat(SampleList): add skeleton snippet

---
 .../SampleList/ui/SampleList/SampleList.svelte   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 7b36ccf..bcc29e3 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -16,6 +16,7 @@ import {
     controlManager,
 } from '$features/SetupFont';
 import { throttle } from '$shared/lib/utils';
+import { Skeleton } from '$shared/ui';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
@@ -43,6 +44,20 @@ const checkPosition = throttle(() => {
 }, 100);
 </script>
 
+{#snippet skeleton()}
+    <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
+        {#each Array(5) as _, i}
+            <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
+                <div class="flex items-center justify-between mb-3 sm:mb-4">
+                    <Skeleton class="h-6 sm:h-8 w-1/3" />
+                    <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
+                </div>
+                <Skeleton class="h-24 sm:h-32 w-full" />
+            </div>
+        {/each}
+    </div>
+{/snippet}
+
 <svelte:window
     bind:innerHeight
     onscroll={checkPosition}
@@ -54,6 +69,7 @@ const checkPosition = throttle(() => {
         itemHeight={220}
         useWindowScroll={true}
         weight={controlManager.weight}
+        {skeleton}
     >
         {#snippet children({
     item: font,

From 42854b49505001879fad01b23f87b3113531bb70 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:16:30 +0300
Subject: [PATCH 46/73] feat(FontList): tweak styles slightly

---
 .../ui/ComparisonSlider/components/FontList.svelte              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
index bcbf0cc..fcbff07 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
@@ -146,7 +146,7 @@ function isFontB(font: UnifiedFont): boolean {
         <FontVirtualList
             weight={typography.weight}
             itemHeight={36}
-            class="bg-transparent"
+            class="bg-transparent h-full"
         >
             {#snippet children({ item: font })}
                 {@const isSelectedA = isFontA(font)}

From 23831efbe6cf38eb687aa51cf25e8afeff95d78c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:16:52 +0300
Subject: [PATCH 47/73] feat(Controls): add Drawer wrapper for mobiles

---
 .../components/Controls.svelte                | 77 +++++++++++++------
 1 file changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 8e59753..7ca3f86 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -8,10 +8,13 @@
 <script lang="ts">
 import { appliedFontsManager } from '$entities/Font';
 import { getFontUrl } from '$entities/Font/lib';
+import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { SidebarMenu } from '$shared/ui';
+import Drawer from '$shared/ui/Drawer/Drawer.svelte';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
-import ComparisonList from './FontList.svelte';
+import { getContext } from 'svelte';
+import FontList from './FontList.svelte';
 import ToggleMenuButton from './ToggleMenuButton.svelte';
 import TypographyControls from './TypographyControls.svelte';
 
@@ -33,6 +36,7 @@ const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const typography = $derived(comparisonStore.typography);
 let menuWrapper = $state<HTMLElement | null>(null);
+const responsive = getContext<ResponsiveManager>('responsive');
 
 $effect(() => {
     if (!fontA || !fontB) {
@@ -64,28 +68,51 @@ $effect(() => {
 });
 </script>
 
-<SidebarMenu
-    class={cn(
-        'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
-        'relative h-full transition-all duration-700 ease-out',
-        className,
-    )}
-    bind:visible
-    bind:wrapper={menuWrapper}
-    onClickOutside={handleToggle}
->
-    {#snippet action()}
-        <!-- Always-visible mode switch -->
-        <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
-            <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
-        </div>
-    {/snippet}
-    <div class="h-2/3 overflow-hidden">
-        <ComparisonList />
-    </div>
+{#if responsive.isMobile}
+    <Drawer>
+        {#snippet trigger({ onClick })}
+            <div class={cn('absolute bottom-2 inset-x-0 z-50')}>
+                <ToggleMenuButton bind:isActive={visible} {onClick} />
+            </div>
+        {/snippet}
+        {#snippet content({ className })}
+            <div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
+                <div class="h-full overflow-hidden">
+                    <FontList />
+                </div>
 
-    <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
-    <div class="mr-4 sm:mr-6">
-        <TypographyControls />
-    </div>
-</SidebarMenu>
+                <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
+                </div>
+                <div class="mr-4 sm:mr-6 flex-shrink-0">
+                    <TypographyControls />
+                </div>
+            </div>
+        {/snippet}
+    </Drawer>
+{:else}
+    <SidebarMenu
+        class={cn(
+            'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
+            'relative h-full transition-all duration-700 ease-out',
+            className,
+        )}
+        bind:visible
+        bind:wrapper={menuWrapper}
+        onClickOutside={handleToggle}
+    >
+        {#snippet action()}
+            <!-- Always-visible mode switch -->
+            <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
+                <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
+            </div>
+        {/snippet}
+        <div class="h-2/3 overflow-hidden">
+            <FontList />
+        </div>
+
+        <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
+        <div class="mr-4 sm:mr-6">
+            <TypographyControls />
+        </div>
+    </SidebarMenu>
+{/if}

From 77668f507cde2f35dc3f216b9b0f15fbcf4bd630 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 15:06:49 +0300
Subject: [PATCH 48/73] feat(appliedFontsStore): add extensive documentation,
 implement optimization and usage of browser apis to ensure flawless ux and
 avoid ui freezing

---
 .../appliedFontsStore.svelte.ts               | 361 +++++++++++++-----
 1 file changed, 271 insertions(+), 90 deletions(-)

diff --git a/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts b/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts
index 6a6c61a..2032a52 100644
--- a/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts
+++ b/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts
@@ -1,67 +1,109 @@
 import { SvelteMap } from 'svelte/reactivity';
 
+/** Loading state of a font. Failed loads may be retried up to MAX_RETRIES. */
 export type FontStatus = 'loading' | 'loaded' | 'error';
 
+/** Configuration for a font load request. */
 export interface FontConfigRequest {
     /**
-     * Font id
+     * Unique identifier for the font (e.g., "lato", "roboto").
      */
     id: string;
     /**
-     * Real font name (e.g. "Lato")
+     * Actual font family name recognized by the browser (e.g., "Lato", "Roboto").
      */
     name: string;
     /**
-     * The .ttf URL
+     * URL pointing to the font file (typically .ttf or .woff2).
      */
     url: string;
     /**
-     * Font weight
+     * Numeric weight (100-900). Variable fonts load once per ID regardless of weight.
      */
     weight: number;
     /**
-     * Flag of the variable weight
+     * Variable fonts load once per ID; static fonts load per weight.
      */
     isVariable?: boolean;
 }
 
 /**
- * Manager that handles loading of fonts.
- * Logic:
- * - Variable fonts: Loaded once per id (covers all weights).
- * - Static fonts: Loaded per id + weight combination.
+ * Manages web font loading with caching, adaptive concurrency, and automatic cleanup.
+ *
+ * **Two-Phase Loading Strategy:**
+ * 1. *Concurrent Fetching*: Font files fetched in parallel (network I/O is non-blocking)
+ * 2. *Sequential Parsing*: Buffers parsed into FontFace objects one at a time with periodic yields
+ *
+ * **Yielding Strategy:**
+ * - Chromium: Yields only when user input is pending (via `scheduler.yield()` + `isInputPending()`)
+ * - Others: Time-based fallback, yields every 8ms
+ *
+ * **Network Adaptation:**
+ * - 2G: 1 concurrent request, 3G: 2, 4G+: 4 (via Network Information API)
+ * - Respects `saveData` mode to defer non-critical weights
+ *
+ * **Cache Integration:** Cache API with best-effort fallback (handles private browsing, quota limits)
+ *
+ * **Cleanup:** LRU-style eviction after 5 minutes of inactivity; cleanup runs every 60 seconds
+ *
+ * **Font Identity:** Variable fonts use `{id}@vf`, static fonts use `{id}@{weight}`
+ *
+ * **Browser APIs Used:** `scheduler.yield()`, `isInputPending()`, `requestIdleCallback`, Cache API, Network Information API
  */
 export class AppliedFontsManager {
-    // Stores the actual FontFace objects for cleanup
+    // Loaded FontFace instances registered with document.fonts. Key: `{id}@{weight}` or `{id}@vf`
     #loadedFonts = new Map<string, FontFace>();
-    // Optimization: Map<batchId, Set<fontKeys>> to avoid O(N^2) scans
-    #batchToKeys = new Map<string, Set<string>>();
-    // Optimization: Map<fontKey, batchId> for reverse lookup
-    #keyToBatch = new Map<string, string>();
 
+    // Last-used timestamps for LRU cleanup. Key: `{id}@{weight}` or `{id}@vf`, Value: unix timestamp (ms)
     #usageTracker = new Map<string, number>();
+
+    // Fonts queued for loading by `touch()`, processed by `#processQueue()`
     #queue = new Map<string, FontConfigRequest>();
+
+    // Handle for scheduled queue processing (requestIdleCallback or setTimeout)
     #timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-    readonly #PURGE_INTERVAL = 60000;
-    readonly #TTL = 5 * 60 * 1000;
-    readonly #CHUNK_SIZE = 5;
+    // Interval handle for periodic cleanup (runs every PURGE_INTERVAL)
+    #intervalId: ReturnType<typeof setInterval> | null = null;
 
+    // AbortController for canceling in-flight fetches on destroy
+    #abortController = new AbortController();
+
+    // Tracks which callback type is pending ('idle' | 'timeout' | null) for proper cancellation
+    #pendingType: 'idle' | 'timeout' | null = null;
+
+    // Retry counts for failed loads; fonts exceeding MAX_RETRIES are permanently skipped
+    #retryCounts = new Map<string, number>();
+
+    readonly #MAX_RETRIES = 3;
+    readonly #PURGE_INTERVAL = 60000; // 60 seconds
+    readonly #TTL = 5 * 60 * 1000; // 5 minutes
+    readonly #CACHE_NAME = 'font-cache-v1'; // Versioned for future invalidation
+
+    // Reactive status map for Svelte components to track font states
     statuses = new SvelteMap<string, FontStatus>();
 
+    // Starts periodic cleanup timer (browser-only).
     constructor() {
         if (typeof window !== 'undefined') {
-            // Using a weak reference style approach isn't possible for DOM,
-            // so we stick to the interval but make it highly efficient.
-            setInterval(() => this.#purgeUnused(), this.#PURGE_INTERVAL);
+            this.#intervalId = setInterval(() => this.#purgeUnused(), this.#PURGE_INTERVAL);
         }
     }
 
+    // Generates font key: `{id}@vf` for variable, `{id}@{weight}` for static.
     #getFontKey(id: string, weight: number, isVariable: boolean): string {
         return isVariable ? `${id.toLowerCase()}@vf` : `${id.toLowerCase()}@${weight}`;
     }
 
+    /**
+     * Requests fonts to be loaded. Updates usage tracking and queues new fonts.
+     *
+     * Retry behavior: 'loaded' and 'loading' fonts are skipped; 'error' fonts retry if count < MAX_RETRIES.
+     * Scheduling: Prefers requestIdleCallback (150ms timeout), falls back to setTimeout(16ms).
+     */
     touch(configs: FontConfigRequest[]) {
+        if (this.#abortController.signal.aborted) return;
+
         const now = Date.now();
         let hasNewItems = false;
 
@@ -69,105 +111,244 @@ export class AppliedFontsManager {
             const key = this.#getFontKey(config.id, config.weight, !!config.isVariable);
             this.#usageTracker.set(key, now);
 
-            if (this.statuses.get(key) === 'loaded' || this.statuses.get(key) === 'loading' || this.#queue.has(key)) {
-                continue;
-            }
+            const status = this.statuses.get(key);
+            if (status === 'loaded' || status === 'loading' || this.#queue.has(key)) continue;
+            if (status === 'error' && (this.#retryCounts.get(key) ?? 0) >= this.#MAX_RETRIES) continue;
 
             this.#queue.set(key, config);
             hasNewItems = true;
         }
 
-        // IMPROVEMENT: Only trigger timer if not already pending
         if (hasNewItems && !this.#timeoutId) {
-            this.#timeoutId = setTimeout(() => this.#processQueue(), 16); // ~1 frame delay
+            if (typeof requestIdleCallback !== 'undefined') {
+                this.#timeoutId = requestIdleCallback(
+                    () => this.#processQueue(),
+                    { timeout: 150 },
+                ) as unknown as ReturnType<typeof setTimeout>;
+                this.#pendingType = 'idle';
+            } else {
+                this.#timeoutId = setTimeout(() => this.#processQueue(), 16);
+                this.#pendingType = 'timeout';
+            }
         }
     }
 
-    #processQueue() {
-        this.#timeoutId = null;
-        const entries = Array.from(this.#queue.entries());
-        if (entries.length === 0) return;
+    /** Yields to main thread during CPU-intensive parsing. Uses scheduler.yield() (Chrome/Edge) or MessageChannel fallback. */
+    async #yieldToMain(): Promise<void> {
+        // @ts-expect-error - scheduler not in TypeScript lib yet
+        if (typeof scheduler !== 'undefined' && 'yield' in scheduler) {
+            // @ts-expect-error - scheduler.yield not in TypeScript lib yet
+            await scheduler.yield();
+        } else {
+            await new Promise<void>(resolve => {
+                const ch = new MessageChannel();
+                ch.port1.onmessage = () => resolve();
+                ch.port2.postMessage(null);
+            });
+        }
+    }
 
+    /** Returns optimal concurrent fetches based on Network Information API: 1 for 2G, 2 for 3G, 4 for 4G/default. */
+    #getEffectiveConcurrency(): number {
+        const nav = navigator as any;
+        const conn = nav.connection;
+        if (!conn) return 4;
+
+        switch (conn.effectiveType) {
+            case 'slow-2g':
+            case '2g':
+                return 1;
+            case '3g':
+                return 2;
+            default:
+                return 4;
+        }
+    }
+
+    /** Returns true if data-saver mode is enabled (defers non-critical weights). */
+    #shouldDeferNonCritical(): boolean {
+        const nav = navigator as any;
+        return nav.connection?.saveData === true;
+    }
+
+    /**
+     * Processes queued fonts in two phases:
+     * 1. Concurrent fetching (network I/O, non-blocking)
+     * 2. Sequential parsing with periodic yields (CPU-intensive, can block UI)
+     *
+     * Yielding: Chromium uses `isInputPending()` for optimal responsiveness; others yield every 8ms.
+     */
+    async #processQueue() {
+        this.#timeoutId = null;
+        this.#pendingType = null;
+
+        let entries = Array.from(this.#queue.entries());
+        if (!entries.length) return;
         this.#queue.clear();
 
-        // Process in chunks to keep the UI responsive
-        for (let i = 0; i < entries.length; i += this.#CHUNK_SIZE) {
-            this.#applyBatch(entries.slice(i, i + this.#CHUNK_SIZE));
+        if (this.#shouldDeferNonCritical()) {
+            entries = entries.filter(([, c]) => c.isVariable || [400, 700].includes(c.weight));
         }
-    }
 
-    async #applyBatch(batchEntries: [string, FontConfigRequest][]) {
-        if (typeof document === 'undefined') return;
+        // Phase 1: Concurrent fetching (I/O bound, non-blocking)
+        const concurrency = this.#getEffectiveConcurrency();
+        const buffers = new Map<string, ArrayBuffer>();
 
-        const batchId = crypto.randomUUID();
-        const keysInBatch = new Set<string>();
+        for (let i = 0; i < entries.length; i += concurrency) {
+            const chunk = entries.slice(i, i + concurrency);
+            const results = await Promise.allSettled(
+                chunk.map(async ([key, config]) => {
+                    this.statuses.set(key, 'loading');
+                    const buffer = await this.#fetchFontBuffer(
+                        config.url,
+                        this.#abortController.signal,
+                    );
+                    buffers.set(key, buffer);
+                }),
+            );
 
-        const loadPromises = batchEntries.map(([key, config]) => {
-            this.statuses.set(key, 'loading');
-            this.#keyToBatch.set(key, batchId);
-            keysInBatch.add(key);
-
-            // Use a unique internal family name to prevent collisions
-            // while keeping the "real" name for the browser to resolve weight/style.
-            const internalName = `f_${config.id}`;
-            const weightRange = config.isVariable ? '100 900' : `${config.weight}`;
-
-            const font = new FontFace(config.name, `url(${config.url}) format('woff2')`, {
-                weight: weightRange,
-                style: 'normal',
-                display: 'swap',
-            });
-
-            this.#loadedFonts.set(key, font);
-
-            return font.load()
-                .then(loadedFace => {
-                    document.fonts.add(loadedFace);
-                    this.statuses.set(key, 'loaded');
-                })
-                .catch(e => {
-                    console.error(`Font load failed: ${config.name}`, e);
+            for (let j = 0; j < results.length; j++) {
+                if (results[j].status === 'rejected') {
+                    const [key, config] = chunk[j];
+                    console.error(`Font fetch failed: ${config.name}`, (results[j] as PromiseRejectedResult).reason);
                     this.statuses.set(key, 'error');
-                });
-        });
-
-        this.#batchToKeys.set(batchId, keysInBatch);
-        await Promise.allSettled(loadPromises);
-    }
-
-    #purgeUnused() {
-        const now = Date.now();
-
-        // We iterate over batches, not individual fonts, to reduce loops
-        for (const [batchId, keys] of this.#batchToKeys.entries()) {
-            let canPurgeBatch = true;
-
-            for (const key of keys) {
-                const lastUsed = this.#usageTracker.get(key) || 0;
-                if (now - lastUsed < this.#TTL) {
-                    canPurgeBatch = false;
-                    break;
+                    this.#retryCounts.set(key, (this.#retryCounts.get(key) ?? 0) + 1);
                 }
             }
+        }
 
-            if (canPurgeBatch) {
-                keys.forEach(key => {
-                    const font = this.#loadedFonts.get(key);
-                    if (font) document.fonts.delete(font);
+        // Phase 2: Sequential parsing (CPU-intensive, yields periodically)
+        const hasInputPending = !!(navigator as any).scheduling?.isInputPending;
+        let lastYield = performance.now();
+        const YIELD_INTERVAL = 8; // ms
 
-                    this.#loadedFonts.delete(key);
-                    this.#keyToBatch.delete(key);
-                    this.#usageTracker.delete(key);
-                    this.statuses.delete(key);
+        for (const [key, config] of entries) {
+            const buffer = buffers.get(key);
+            if (!buffer) continue;
+
+            try {
+                const weightRange = config.isVariable ? '100 900' : `${config.weight}`;
+                const font = new FontFace(config.name, buffer, {
+                    weight: weightRange,
+                    style: 'normal',
+                    display: 'swap',
                 });
-                this.#batchToKeys.delete(batchId);
+                await font.load();
+                document.fonts.add(font);
+                this.#loadedFonts.set(key, font);
+                this.statuses.set(key, 'loaded');
+            } catch (e) {
+                if (e instanceof Error && e.name === 'AbortError') continue;
+                console.error(`Font parse failed: ${config.name}`, e);
+                this.statuses.set(key, 'error');
+                this.#retryCounts.set(key, (this.#retryCounts.get(key) ?? 0) + 1);
+            }
+
+            const shouldYield = hasInputPending
+                ? (navigator as any).scheduling.isInputPending({ includeContinuous: true })
+                : (performance.now() - lastYield > YIELD_INTERVAL);
+
+            if (shouldYield) {
+                await this.#yieldToMain();
+                lastYield = performance.now();
             }
         }
     }
 
+    /**
+     * Fetches font with cache-aside pattern: checks Cache API first, falls back to network.
+     * Cache failures (private browsing, quota limits) are silently ignored.
+     */
+    async #fetchFontBuffer(url: string, signal?: AbortSignal): Promise<ArrayBuffer> {
+        try {
+            if (typeof caches !== 'undefined') {
+                const cache = await caches.open(this.#CACHE_NAME);
+                const cached = await cache.match(url);
+                if (cached) return cached.arrayBuffer();
+            }
+        } catch {
+            // Cache unavailable (private browsing, security restrictions) — fall through to network
+        }
+
+        const response = await fetch(url, { signal });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        try {
+            if (typeof caches !== 'undefined') {
+                const cache = await caches.open(this.#CACHE_NAME);
+                await cache.put(url, response.clone());
+            }
+        } catch {
+            // Cache write failed (quota, storage pressure) — return font anyway
+        }
+
+        return response.arrayBuffer();
+    }
+
+    /** Removes fonts unused within TTL (LRU-style cleanup). Runs every PURGE_INTERVAL. */
+    #purgeUnused() {
+        const now = Date.now();
+        for (const [key, lastUsed] of this.#usageTracker) {
+            if (now - lastUsed < this.#TTL) continue;
+
+            const font = this.#loadedFonts.get(key);
+            if (font) document.fonts.delete(font);
+
+            this.#loadedFonts.delete(key);
+            this.#usageTracker.delete(key);
+            this.statuses.delete(key);
+            this.#retryCounts.delete(key);
+        }
+    }
+
+    /** Returns current loading status for a font, or undefined if never requested. */
     getFontStatus(id: string, weight: number, isVariable = false) {
         return this.statuses.get(this.#getFontKey(id, weight, isVariable));
     }
+
+    /** Waits for all fonts to finish loading using document.fonts.ready. */
+    async ready(): Promise<void> {
+        if (typeof document === 'undefined') return;
+        try {
+            await document.fonts.ready;
+        } catch {
+            // document.fonts.ready can reject in some edge cases
+            // (e.g., document unloaded). Silently resolve.
+        }
+    }
+
+    /** Aborts all operations, removes fonts from document, and clears state. Manager cannot be reused after. */
+    destroy() {
+        this.#abortController.abort();
+
+        if (this.#timeoutId !== null) {
+            if (this.#pendingType === 'idle' && typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(this.#timeoutId as unknown as number);
+            } else {
+                clearTimeout(this.#timeoutId);
+            }
+            this.#timeoutId = null;
+            this.#pendingType = null;
+        }
+
+        if (this.#intervalId) {
+            clearInterval(this.#intervalId);
+            this.#intervalId = null;
+        }
+
+        if (typeof document !== 'undefined') {
+            for (const font of this.#loadedFonts.values()) {
+                document.fonts.delete(font);
+            }
+        }
+
+        this.#loadedFonts.clear();
+        this.#usageTracker.clear();
+        this.#retryCounts.clear();
+        this.statuses.clear();
+        this.#queue.clear();
+    }
 }
 
+/** Singleton instance — use throughout the application for unified font loading state. */
 export const appliedFontsManager = new AppliedFontsManager();

From ac8f0456b00c5eb3af6ae2ddeb3eec34e40b5d55 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 15:07:19 +0300
Subject: [PATCH 49/73] chore(VirtualLisr): remove unused imports and change
 comment

---
 src/shared/ui/VirtualList/VirtualList.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index 0c42845..82c5a85 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -13,8 +13,6 @@ import { createVirtualizer } from '$shared/lib';
 import { throttle } from '$shared/lib/utils';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
-import { flip } from 'svelte/animate';
-import { quintOut } from 'svelte/easing';
 
 interface Props {
     /**
@@ -187,7 +185,7 @@ $effect(() => {
 
 const throttledVisibleChange = throttle((visibleItems: T[]) => {
     onVisibleItemsChange?.(visibleItems);
-}, 150); // 150ms debounce
+}, 150); // 150ms throttle
 
 const throttledNearBottom = throttle((lastVisibleIndex: number) => {
     onNearBottom?.(lastVisibleIndex);

From ad6e1da292700742dcf8acf8448d0ae8c5c54966 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 15:30:00 +0300
Subject: [PATCH 50/73] fix(ComparisonSlider): change the way width is
 calculated to avoid transform:scale issues

---
 .../createCharacterComparison.svelte.ts       | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
index 832d3a2..d3d426d 100644
--- a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
+++ b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
@@ -2,7 +2,13 @@
  * Interface representing a line of text with its measured width.
  */
 export interface LineData {
+    /**
+     * Line's text
+     */
     text: string;
+    /**
+     * It's width
+     */
     width: number;
 }
 
@@ -80,16 +86,23 @@ export function createCharacterComparison<
         container: HTMLElement | undefined,
         measureCanvas: HTMLCanvasElement | undefined,
     ) {
-        if (!container || !measureCanvas || !fontA() || !fontB()) return;
+        if (!container || !measureCanvas || !fontA() || !fontB()) {
+            return;
+        }
 
-        const rect = container.getBoundingClientRect();
-        containerWidth = rect.width;
+        // Use offsetWidth instead of getBoundingClientRect() to avoid CSS transform scaling issues
+        // getBoundingClientRect() returns transformed dimensions, which causes incorrect line breaking
+        // when PerspectivePlan applies scale() transforms (e.g., scale(0.5) in settings mode)
+        const width = container.offsetWidth;
+        containerWidth = width;
 
         // Padding considerations - matches the container padding
         const padding = window.innerWidth < 640 ? 48 : 96;
-        const availableWidth = rect.width - padding;
+        const availableWidth = width - padding;
         const ctx = measureCanvas.getContext('2d');
-        if (!ctx) return;
+        if (!ctx) {
+            return;
+        }
 
         const controlledFontSize = size();
         const fontSize = getFontSize();

From 3330f132283aa6d44f18ed5cc98b3c1af3a4764b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 11:18:17 +0300
Subject: [PATCH 51/73] fix(SearchBar): restore proper padding

---
 src/shared/ui/SearchBar/SearchBar.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index caf91ac..9af1cd5 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -35,5 +35,10 @@ let {
     <div class="absolute left-4 sm:left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
         <AsteriskIcon class="size-3 sm:size-4 stroke-gray-400 stroke-[1.5]" />
     </div>
-    <Input {id} class={cn('pl-11 sm:pl-14', className)} bind:value={value} placeholder={placeholder} />
+    <Input
+        {id}
+        class={cn('pl-11 sm:pl-14 md:pl-14 lg:pl-14', className)}
+        bind:value
+        {placeholder}
+    />
 </div>

From a65d692139a56ab9dd497397309f3935c83ec3be Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 11:18:54 +0300
Subject: [PATCH 52/73] feat(app): style default scrollbar

---
 src/app/styles/app.css | 79 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 63251f0..26560ae 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -222,3 +222,82 @@
 .barlow {
     font-family: "Barlow", system-ui, Inter, Roboto, "Segoe UI", Arial, sans-serif;
 }
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0 0% 70% / 0.4) transparent;
+}
+
+.dark * {
+    scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
+}
+
+/* ---- Webkit / Blink ---- */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 70% / 0);
+    border-radius: 3px;
+    transition: background 0.2s ease;
+}
+
+/* Show thumb when container is hovered or actively scrolling */
+:hover > ::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover,
+*:hover::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 70% / 0.4);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 50% / 0.6);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: hsl(0 0% 40% / 0.8);
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+/* Dark mode */
+.dark ::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 40% / 0);
+}
+
+.dark :hover > ::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb:hover,
+.dark *:hover::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 40% / 0.5);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 55% / 0.6);
+}
+
+.dark ::-webkit-scrollbar-thumb:active {
+    background: hsl(0 0% 65% / 0.7);
+}
+
+/* ---- Behavior ---- */
+html {
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+body {
+    overscroll-behavior-y: none;
+}
\ No newline at end of file

From 411dbfefcb78e9a205b361e258048913681f61c3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:52:50 +0300
Subject: [PATCH 53/73] feat(ComparisonSlider): rotate icon for the mobile and
 slightly tweak styles

---
 .../components/ToggleMenuButton.svelte        | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
index c887456..733450d 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
@@ -36,16 +36,25 @@ const fontB = $derived(comparisonStore.fontB);
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        class={cn('lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right', className)}
+        class={cn(
+            'lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right',
+            className,
+        )}
     >
         <circle cx="12" cy="12" r="10" />
         {#if isActive}
-            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m15 9-6 6" /><path
+            <path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m15 9-6 6"
+            /><path
                 transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
                 d="m9 9 6 6"
             />
         {:else}
-            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m12 16 4-4-4-4" /><path
+            <path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m12 16 4-4-4-4"
+            /><path
                 transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
                 d="M8 12h8"
             />
@@ -62,13 +71,18 @@ const fontB = $derived(comparisonStore.fontB);
         'transition-transform duration-150 active:scale-98',
     )}
 >
-    {@render icon('size-4 stroke-[1.5] stroke-gray-500')}
+    {@render icon(
+    cn(
+        'size-4 stroke-[1.5] stroke-gray-500',
+        !isActive && 'rotate-90 sm:rotate-0',
+    ),
+)}
     <div class="w-px h-2.5 bg-gray-400/50"></div>
-    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-indigo-500 text-right">
+    <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-indigo-500 text-right whitespace-nowrap">
         {fontB?.name}
     </div>
     <div class="w-px h-2.5 bg-gray-400/50"></div>
-    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-neural-950 text-left">
+    <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-neural-950 text-left whitespace-nowrap">
         {fontA?.name}
     </div>
 </button>

From f356851d97f07401843d534c891cad9e948bf6fb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:53:40 +0300
Subject: [PATCH 54/73] chore: remove lenis package

---
 package.json                                  |  3 +-
 .../createScrollContext.svelte.ts             | 32 --------
 .../ui/SmoothScroll/SmoothScroll.svelte       | 78 -------------------
 yarn.lock                                     | 19 -----
 4 files changed, 1 insertion(+), 131 deletions(-)
 delete mode 100644 src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
 delete mode 100644 src/shared/ui/SmoothScroll/SmoothScroll.svelte

diff --git a/package.json b/package.json
index 95903f8..c98f54b 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "vitest-browser-svelte": "^2.0.1"
   },
   "dependencies": {
-    "@tanstack/svelte-query": "^6.0.14",
-    "lenis": "^1.3.17"
+    "@tanstack/svelte-query": "^6.0.14"
   }
 }
diff --git a/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts b/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
deleted file mode 100644
index 87703d2..0000000
--- a/src/shared/lib/helpers/createScrollContext/createScrollContext.svelte.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import Lenis from 'lenis';
-import {
-    getContext,
-    setContext,
-} from 'svelte';
-
-const LENIS_KEY = Symbol('lenis');
-
-export function createLenisContext() {
-    let lenis = $state<Lenis | null>(null);
-
-    return {
-        get lenis() {
-            return lenis;
-        },
-        setLenis(instance: Lenis) {
-            lenis = instance;
-        },
-        destroyLenis() {
-            lenis?.destroy();
-            lenis = null;
-        },
-    };
-}
-
-export function setLenisContext(context: ReturnType<typeof createLenisContext>) {
-    setContext(LENIS_KEY, context);
-}
-
-export function getLenisContext() {
-    return getContext<ReturnType<typeof createLenisContext>>(LENIS_KEY);
-}
diff --git a/src/shared/ui/SmoothScroll/SmoothScroll.svelte b/src/shared/ui/SmoothScroll/SmoothScroll.svelte
deleted file mode 100644
index 6fe199e..0000000
--- a/src/shared/ui/SmoothScroll/SmoothScroll.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-import {
-    createLenisContext,
-    setLenisContext,
-} from '$shared/lib';
-import Lenis from 'lenis';
-import type { LenisOptions } from 'lenis';
-import { onMount } from 'svelte';
-
-interface Props {
-    children?: import('svelte').Snippet;
-    // Lenis options - all optional with sensible defaults
-    duration?: number;
-    easing?: (t: number) => number;
-    smoothWheel?: boolean;
-    wheelMultiplier?: number;
-    touchMultiplier?: number;
-    infinite?: boolean;
-    orientation?: 'vertical' | 'horizontal';
-    gestureOrientation?: 'vertical' | 'horizontal' | 'both';
-}
-
-let {
-    children,
-    duration = 1.2,
-    easing = t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-    smoothWheel = true,
-    wheelMultiplier = 1,
-    touchMultiplier = 2,
-    infinite = false,
-    orientation = 'vertical',
-    gestureOrientation = 'vertical',
-}: Props = $props();
-
-const lenisContext = createLenisContext();
-setLenisContext(lenisContext);
-
-onMount(() => {
-    const lenisOptions: LenisOptions = {
-        duration,
-        easing,
-        smoothWheel,
-        wheelMultiplier,
-        touchMultiplier,
-        infinite,
-        orientation,
-        gestureOrientation,
-        // Prevent jitter with virtual scroll
-        prevent: (node: HTMLElement) => {
-            // Don't smooth scroll inside elements with data-lenis-prevent
-            return node.hasAttribute('data-lenis-prevent');
-        },
-    };
-
-    const lenis = new Lenis(lenisOptions);
-
-    lenisContext.setLenis(lenis);
-
-    // RAF loop
-    function raf(time: number) {
-        lenis.raf(time);
-        requestAnimationFrame(raf);
-    }
-
-    requestAnimationFrame(raf);
-
-    // Expose to window for debugging (only in dev)
-    if (import.meta.env?.DEV) {
-        (window as any).lenis = lenis;
-    }
-
-    return () => {
-        lenisContext.destroyLenis();
-    };
-});
-</script>
-
-{@render children?.()}
diff --git a/yarn.lock b/yarn.lock
index 5b0112b..84894cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2459,7 +2459,6 @@ __metadata:
     dprint: "npm:^0.50.2"
     jsdom: "npm:^27.4.0"
     lefthook: "npm:^2.0.13"
-    lenis: "npm:^1.3.17"
     oxlint: "npm:^1.35.0"
     playwright: "npm:^1.57.0"
     storybook: "npm:^10.1.11"
@@ -2850,24 +2849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lenis@npm:^1.3.17":
-  version: 1.3.17
-  resolution: "lenis@npm:1.3.17"
-  peerDependencies:
-    "@nuxt/kit": ">=3.0.0"
-    react: ">=17.0.0"
-    vue: ">=3.0.0"
-  peerDependenciesMeta:
-    "@nuxt/kit":
-      optional: true
-    react:
-      optional: true
-    vue:
-      optional: true
-  checksum: 10c0/c268da36d5711677b239c7d173bc52775276df08f86f7f89f305c4e02ba4055d8c50ea69125d16c94bb1e1999ccd95f654237d11c6647dc5fdf63aa90515fbfb
-  languageName: node
-  linkType: hard
-
 "lightningcss-android-arm64@npm:1.30.2":
   version: 1.30.2
   resolution: "lightningcss-android-arm64@npm:1.30.2"

From 147df04c229a9af85a85e0accf78716d37f4eb04 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:55:11 +0300
Subject: [PATCH 55/73] feat(Slider): tweak styles for a knob and add slider
 label

---
 .../ui/ComboControlV2/ComboControlV2.svelte   | 32 +++----
 src/shared/ui/Slider/Slider.svelte            | 89 +++++++++++++------
 2 files changed, 76 insertions(+), 45 deletions(-)

diff --git a/src/shared/ui/ComboControlV2/ComboControlV2.svelte b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
index a7ad0cb..efbbbc9 100644
--- a/src/shared/ui/ComboControlV2/ComboControlV2.svelte
+++ b/src/shared/ui/ComboControlV2/ComboControlV2.svelte
@@ -98,11 +98,11 @@ const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
 function calculateScale(index: number): number | string {
     const calculate = () =>
         orientation === 'horizontal'
-            ? (control.min + (index * (control.max - control.min) / 4))
-            : (control.max - (index * (control.max - control.min) / 4));
+            ? control.min + (index * (control.max - control.min)) / 4
+            : control.max - (index * (control.max - control.min)) / 4;
     return Number.isInteger(control.step)
         ? Math.round(calculate())
-        : (calculate()).toFixed(2);
+        : calculate().toFixed(2);
 }
 </script>
 
@@ -111,7 +111,9 @@ function calculateScale(index: number): number | string {
         class={cn(
             'flex gap-4 sm:py-4 sm:px-1 rounded-xl transition-all duration-300',
             '',
-            orientation === 'horizontal' ? 'flex-row items-end w-full' : 'flex-col items-center h-full',
+            orientation === 'horizontal'
+                ? 'flex-row items-end w-full'
+                : 'flex-col items-center h-full',
             className,
         )}
     >
@@ -120,7 +122,9 @@ function calculateScale(index: number): number | string {
                 <div
                     class={cn(
                         'absolute flex justify-between',
-                        orientation === 'horizontal' ? 'flex-row w-full -top-5 px-0.5' : 'flex-col h-full -left-5 py-0.5',
+                        orientation === 'horizontal'
+                            ? 'flex-row w-full -top-8 px-0.5'
+                            : 'flex-col h-full -left-5 py-0.5',
                     )}
                 >
                     {#each Array(5) as _, i}
@@ -133,7 +137,12 @@ function calculateScale(index: number): number | string {
                             <span class="font-mono text-[0.375rem] text-text-muted tabular-nums">
                                 {calculateScale(i)}
                             </span>
-                            <div class={cn('bg-border-muted', orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1')}>
+                            <div
+                                class={cn(
+                                    'bg-border-muted',
+                                    orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1',
+                                )}
+                            >
                             </div>
                         </div>
                     {/each}
@@ -146,6 +155,7 @@ function calculateScale(index: number): number | string {
                 min={control.min}
                 max={control.max}
                 step={control.step}
+                {label}
                 {orientation}
             />
         </div>
@@ -162,16 +172,6 @@ function calculateScale(index: number): number | string {
                 variant="ghost"
             />
         {/if}
-
-        {#if label}
-            <div class="flex items-center gap-2 opacity-70">
-                <div class="w-1 h-1 rounded-full bg-foreground"></div>
-                <div class="w-px h-2 bg-text-muted/50"></div>
-                <span class="font-mono text-[8px] uppercase tracking-[0.2em] text-text-subtle font-medium">
-                    {label}
-                </span>
-            </div>
-        {/if}
     </div>
 {/snippet}
 
diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index b03ec6c..20e68bb 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -9,28 +9,43 @@ import {
     type SliderRootProps,
 } from 'bits-ui';
 
-type Props = Omit<SliderRootProps, 'type' | 'onValueChange' | 'onValueCommit'> & {
-    /**
-     * Slider value, numeric.
-     */
-    value: number;
-    /**
-     * A callback function called when the value changes.
-     * @param newValue - number
-     */
-    onValueChange?: (newValue: number) => void;
-    /**
-     * A callback function called when the user stops dragging the thumb and the value is committed.
-     * @param newValue - number
-     */
-    onValueCommit?: (newValue: number) => void;
-};
+type Props =
+    & Omit<
+        SliderRootProps,
+        'type' | 'onValueChange' | 'onValueCommit'
+    >
+    & {
+        /**
+         * Slider value, numeric.
+         */
+        value: number;
+        /**
+         * Optional label displayed inline on the track before the filled range.
+         */
+        label?: string;
+        /**
+         * A callback function called when the value changes.
+         * @param newValue - number
+         */
+        onValueChange?: (newValue: number) => void;
+        /**
+         * A callback function called when the user stops dragging the thumb and the value is committed.
+         * @param newValue - number
+         */
+        onValueCommit?: (newValue: number) => void;
+    };
 
-let { value = $bindable(), orientation = 'horizontal', class: className, ...rest }: Props = $props();
+let {
+    value = $bindable(),
+    orientation = 'horizontal',
+    class: className,
+    label,
+    ...rest
+}: Props = $props();
 </script>
 
 <Slider.Root
-    bind:value={value}
+    bind:value
     class={cn(
         'relative flex h-full w-6 touch-none select-none items-center justify-center',
         orientation === 'horizontal' ? 'w-48 h-6' : 'w-6 h-48',
@@ -41,13 +56,23 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
     {...rest}
 >
     {#snippet children(props)}
+        {#if label && orientation === 'horizontal'}
+            <span class="absolute top-0 left-0 -translate-y-1/2 text-[0.5rem] uppercase text-gray-400">
+                {label}
+            </span>
+        {/if}
         <span
             {...props}
-            class={cn('relative bg-background-muted rounded-full', orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px')}
+            class={cn(
+                'relative bg-background-muted rounded-full',
+                orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px',
+            )}
         >
-            <!-- Filled range with NO transition -->
             <Slider.Range
-                class={cn('absolute bg-foreground rounded-full', orientation === 'horizontal' ? 'h-full' : 'w-full')}
+                class={cn(
+                    'absolute bg-foreground rounded-full',
+                    orientation === 'horizontal' ? 'h-full' : 'w-full',
+                )}
             />
 
             <Slider.Thumb
@@ -56,27 +81,32 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                     'group/thumb relative block',
                     'size-2',
                     orientation === 'horizontal' ? '-top-1' : '-left-1',
-                    'rounded-sm',
+                    'rounded-full',
                     'bg-foreground',
                     // Glow shadow
                     'shadow-[0_0_6px_rgba(0,0,0,0.4)]',
                     // Smooth transitions only for size/position
                     'duration-200 ease-out',
-                    orientation === 'horizontal' ? 'transition-[height,top,left,box-shadow]' : 'transition-[width,top,left,box-shadow]',
+                    orientation === 'horizontal'
+                        ? 'transition-[height,top,left,box-shadow]'
+                        : 'transition-[width,top,left,box-shadow]',
                     // Hover: bigger glow
                     'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]',
-                    orientation === 'horizontal' ? 'hover:size-3 hover:-top-[5.5px]' : 'hover:size-3 hover:-left-[5.5px]',
+                    orientation === 'horizontal'
+                        ? 'hover:size-3 hover:-top-[5.5px]'
+                        : 'hover:size-3 hover:-left-[5.5px]',
                     // Active: smaller glow
                     'active:shadow-[0_0_4px_rgba(0,0,0,0.3)]',
-                    orientation === 'horizontal' ? 'active:h-2.5 active:-top-[4.5px]' : 'active:w-2.5 active:-left-[4.5px]',
+                    orientation === 'horizontal'
+                        ? 'active:h-2.5 active:-top-[4.5px]'
+                        : 'active:w-2.5 active:-left-[4.5px]',
                     'focus:outline-none',
                     'cursor-grab active:cursor-grabbing',
                 )}
             >
-                <!-- Soft glow on hover -->
                 <div
                     class="
-                        absolute inset-0 rounded-sm
+                        absolute inset-0 rounded-full
                         bg-background-20
                         opacity-0 group-hover/thumb:opacity-100
                         transition-opacity duration-200
@@ -84,11 +114,12 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
                 >
                 </div>
 
-                <!-- Value label -->
                 <span
                     class={cn(
                         'absolute',
-                        orientation === 'horizontal' ? '-top-8 left-1/2 -translate-x-1/2' : 'left-5 top-1/2 -translate-y-1/2',
+                        orientation === 'horizontal'
+                            ? '-top-8 left-1/2 -translate-x-1/2'
+                            : 'left-5 top-1/2 -translate-y-1/2',
                         'px-1.5 py-0.5 rounded-md',
                         'bg-foreground/90 backdrop-blur-sm',
                         'font-mono text-[0.625rem] font-medium text-background',

From ce609728c3f2baa5414c70470daa5396243cddbd Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:55:57 +0300
Subject: [PATCH 56/73] feat(SidebarMenu): tweak styles

---
 src/shared/ui/SidebarMenu/SidebarMenu.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/SidebarMenu/SidebarMenu.svelte b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
index 08b6db6..0d7b5b7 100644
--- a/src/shared/ui/SidebarMenu/SidebarMenu.svelte
+++ b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
@@ -73,7 +73,7 @@ function handleClick(event: MouseEvent) {
     {@render action?.()}
     {#if visible}
         <div
-            class="relative z-20 h-full w-auto flex flex-col gap-4"
+            class="relative z-20 h-full w-auto flex flex-col"
             in:fade={{ duration: 300, delay: 400, easing: cubicOut }}
             out:fade={{ duration: 150, easing: cubicOut }}
         >

From ce1dcd92ab5344aab8eabb2baacecffd89274c43 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:56:26 +0300
Subject: [PATCH 57/73] feat(Label): create shared Label component

---
 src/shared/ui/Label/Label.svelte | 45 ++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/shared/ui/Label/Label.svelte

diff --git a/src/shared/ui/Label/Label.svelte b/src/shared/ui/Label/Label.svelte
new file mode 100644
index 0000000..6265b3a
--- /dev/null
+++ b/src/shared/ui/Label/Label.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+
+interface Props {
+    text?: string;
+    align?: 'left' | 'right' | 'center';
+    size?: 'sm' | 'md' | 'lg';
+    onlyText?: boolean;
+    class?: string;
+}
+const {
+    text,
+    align = 'left',
+    size = 'md',
+    onlyText = false,
+    class: className,
+}: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'grid grid-rows-1 gap-2 items-center w-auto',
+        align === 'left' && 'grid-cols-[max-content_1fr]',
+        align === 'center' && 'grid-cols-[1fr_max-content_1fr]',
+        align === 'right' && 'grig-cols-[1fr_max-content]',
+        className,
+    )}
+>
+    {#if align !== 'left'}
+        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+    {/if}
+    <div
+        class={cn(
+            'text-gray-400 uppercase',
+            size === 'sm' && 'text-[0.5rem]',
+            size === 'md' && 'text-[0.625rem]',
+            size === 'lg' && 'text-[0.75rem]',
+        )}
+    >
+        {text}
+    </div>
+    {#if align !== 'right'}
+        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+    {/if}
+</div>

From 010b8ad04bdcf337d77fd25f0c16e26ebe3782be Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:57:03 +0300
Subject: [PATCH 58/73] feat(FontSearch): make filters open by default

---
 src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index e9bf1e0..feb3882 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -33,7 +33,7 @@ interface Props {
     showFilters?: boolean;
 }
 
-let { showFilters = $bindable(false) }: Props = $props();
+let { showFilters = $bindable(true) }: Props = $props();
 
 onMount(() => {
     /**

From 20f65ee396771c5e95738dd14fcdc502e7b67263 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:57:52 +0300
Subject: [PATCH 59/73] feat(FontSampler): slight font style tweaks for font
 name

---
 .../ui/FontSampler/FontSampler.svelte         | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index a2ede04..0e43da1 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -36,12 +36,7 @@ interface Props {
     letterSpacing?: number;
 }
 
-let {
-    font,
-    text = $bindable(),
-    index = 0,
-    ...restProps
-}: Props = $props();
+let { font, text = $bindable(), index = 0, ...restProps }: Props = $props();
 
 const fontWeight = $derived(controlManager.weight);
 const fontSize = $derived(controlManager.renderedSize);
@@ -66,9 +61,9 @@ const letterSpacing = $derived(controlManager.spacing);
                 typeface_{String(index).padStart(3, '0')}
             </Footnote>
             <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
-            <Footnote class="tracking-[0.15em] font-bold text-foreground">
+            <div class="font-bold text-foreground">
                 {font.name}
-            </Footnote>
+            </div>
         </div>
 
         <!--
@@ -86,11 +81,11 @@ const letterSpacing = $derived(controlManager.spacing);
     <div class="p-4 sm:p-5 md:p-8 relative z-10">
         <FontApplicator {font} weight={fontWeight}>
             <ContentEditable
-                bind:text={text}
+                bind:text
                 {...restProps}
-                fontSize={fontSize}
-                lineHeight={lineHeight}
-                letterSpacing={letterSpacing}
+                {fontSize}
+                {lineHeight}
+                {letterSpacing}
             />
         </FontApplicator>
     </div>

From 5dae5fb7ea2bd579ac8694d9c5aaf6cf01e60166 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:58:31 +0300
Subject: [PATCH 60/73] feat(ComparisonSlider): increase minimal height for
 large screens

---
 .../ui/ComparisonSlider/ComparisonSlider.svelte                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
index ada646f..fd0ed45 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
@@ -205,7 +205,7 @@ const isInSettingsMode = $derived(perspective.isBack);
         relative w-full flex justify-center items-center
         perspective-distant perspective-origin-center transform-3d
         rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
-        min-h-72 sm:min-h-96
+        min-h-72 sm:min-h-96 lg:min-h-128
         backdrop-blur-lg bg-linear-to-br from-gray-200/40 via-white/80 to-gray-100/60
         border border-border-muted
         shadow-[inset_2px_0_8px_rgba(0,0,0,0.05)]

From ee0749e828257f9d003601bf1bc3931f23d8e2cb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:59:31 +0300
Subject: [PATCH 61/73] feat(ComparisonSlider): slightly tweak styles

---
 .../components/TypographyControls.svelte         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
index 2238bd6..68492fe 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
@@ -4,7 +4,6 @@
     Simplified version for static positioning in settings mode.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     ComboControlV2,
     Input,
@@ -20,30 +19,35 @@ const typography = $derived(comparisonStore.typography);
     size="sm"
     label="Text"
     placeholder="The quick brown fox..."
-    class="w-full px-3 py-2 h-10 rounded-lg border border-border-muted bg-background-60 backdrop-blur-sm mr-4"
+    class="w-full h-10 px-3 py-2 sm:mr-4 mb-8 sm:mb-4 rounded-lg border border-border-muted bg-background-60 backdrop-blur-sm"
 />
 
 <!-- Typography controls -->
 {#if typography.weightControl && typography.sizeControl && typography.heightControl}
-    <div class="flex flex-col gap-1.5 mt-1.5">
+    <div class="flex flex-col mt-1.5">
         <ComboControlV2
             control={typography.weightControl}
             orientation="horizontal"
-            class="sm:py-0"
+            class="sm:py-0 sm:px-0 mb-5 sm:mb-1.5"
+            label="font weight"
             showScale={false}
             reduced
         />
+
         <ComboControlV2
             control={typography.sizeControl}
             orientation="horizontal"
-            class="sm:py-0"
+            class="sm:py-0 sm:px-0 mb-5 sm:mb-1.5"
+            label="font size"
             showScale={false}
             reduced
         />
+
         <ComboControlV2
             control={typography.heightControl}
             orientation="horizontal"
-            class="sm:py-0"
+            class="sm:py-0 sm:px-0"
+            label="line height"
             showScale={false}
             reduced
         />

From 5fa79e06e94a0267ac4d99249c34adc33cecfbd8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:59:46 +0300
Subject: [PATCH 62/73] feat(ComparisonSlider): slightly tweak styles

---
 .../ui/ComparisonSlider/components/SliderLine.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index 853ac32..54c3ab8 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -22,7 +22,7 @@ let { sliderPos, isDragging }: Props = $props();
 
 <div
     class={cn(
-        'absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 flex flex-col justify-center items-center',
+        'absolute top-2 bottom-8 sm:top-4 sm:bottom-4 pointer-events-none -translate-x-1/2 z-50 flex flex-col justify-center items-center',
         // Force GPU layer with translateZ
         'translate-z-0',
         // Only transition left when NOT dragging

From 55b27973a2be259a550b8f667fb67f3853a86302 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:00:25 +0300
Subject: [PATCH 63/73] feat(ComparisonSlider): add selected fonts name for
 mobile controls and labels everywhere

---
 .../components/Controls.svelte                | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 7ca3f86..452f9ee 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -11,6 +11,7 @@ import { getFontUrl } from '$entities/Font/lib';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { SidebarMenu } from '$shared/ui';
+import { Label } from '$shared/ui';
 import Drawer from '$shared/ui/Drawer/Drawer.svelte';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import { getContext } from 'svelte';
@@ -71,19 +72,29 @@ $effect(() => {
 {#if responsive.isMobile}
     <Drawer>
         {#snippet trigger({ onClick })}
-            <div class={cn('absolute bottom-2 inset-x-0 z-50')}>
+            <div class={cn('absolute bottom-0.5 left-1/2 -translate-x-1/2 z-50')}>
                 <ToggleMenuButton bind:isActive={visible} {onClick} />
             </div>
         {/snippet}
         {#snippet content({ className })}
+            <div class="w-full pt-4 grid grid-cols-[1fr_min-content_1fr] gap-2 items-center justify-center">
+                <div class="uppercase text-indigo-500 ml-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
+                    {fontB?.name ?? 'typeface_01'}
+                </div>
+                <div class="w-px h-2.5 bg-gray-400/50"></div>
+                <div class="uppercase text-neutral-950 mr-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
+                    {fontA?.name ?? 'typeface_02'}
+                </div>
+            </div>
             <div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
+                <Label class="mb-2" text="Available Fonts" align="center" />
+
                 <div class="h-full overflow-hidden">
                     <FontList />
                 </div>
+                <Label class="mb-2" text="Typography Controls" align="center" />
 
-                <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
-                </div>
-                <div class="mr-4 sm:mr-6 flex-shrink-0">
+                <div class="mx-4 flex-shrink-0">
                     <TypographyControls />
                 </div>
             </div>
@@ -92,7 +103,7 @@ $effect(() => {
 {:else}
     <SidebarMenu
         class={cn(
-            'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
+            'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-0 sm:gap-0 pointer-events-auto overflow-hidden',
             'relative h-full transition-all duration-700 ease-out',
             className,
         )}
@@ -102,15 +113,17 @@ $effect(() => {
     >
         {#snippet action()}
             <!-- Always-visible mode switch -->
-            <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
+            <div class={cn('absolute top-2 left-0 z-50', visible && 'w-full')}>
                 <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
             </div>
         {/snippet}
-        <div class="h-2/3 overflow-hidden">
+        <Label class="mb-2 mr-4 lg:mr-6" text="Available Fonts" align="left" />
+
+        <div class="mb-2 h-2/3 overflow-hidden">
             <FontList />
         </div>
+        <Label class="mb-2 mr-4 lg:mr-6" text="Typography Controls" align="left" />
 
-        <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
         <div class="mr-4 sm:mr-6">
             <TypographyControls />
         </div>

From 201280093f0aea4b87cc279e0a55c9aa52f19bad Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:01:57 +0300
Subject: [PATCH 64/73] feat(ComparisonSlider): change color for selected font
 in font list

---
 .../components/FontList.svelte                | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
index fcbff07..db053b3 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
@@ -132,7 +132,11 @@ function isFontB(font: UnifiedFont): boolean {
     </svg>
 {/snippet}
 
-{#snippet brackets(renderLeft?: boolean, renderRight?: boolean, className?: string)}
+{#snippet brackets(
+    renderLeft?: boolean,
+    renderRight?: boolean,
+    className?: string,
+)}
     {#if renderLeft}
         {@render leftBrackets(className)}
     {/if}
@@ -156,7 +160,7 @@ function isFontB(font: UnifiedFont): boolean {
                 {@const handleSelectFontA = () => selectFontA(font)}
                 {@const handleSelectFontB = () => selectFontB(font)}
 
-                <div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden mr-4 lg:mr-6">
+                <div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden sm:mr-4 lg:mr-6">
                     <div
                         class={cn(
                             'absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-all duration-500 cubic-bezier-out',
@@ -168,13 +172,14 @@ function isFontB(font: UnifiedFont): boolean {
                         <div class="relative flex items-center px-6">
                             <span
                                 class={cn(
-                                    'font-mono text-[10px] sm:text-[11px] uppercase tracking-tighter select-none transition-all duration-300',
+                                    'text-[0.625rem] sm:text-[0.75rem] tracking-tighter select-none transition-all duration-300',
                                     isEither
                                         ? 'opacity-100 font-bold'
                                         : 'opacity-30 group-hover:opacity-100',
                                     isSelectedB && 'text-indigo-500',
                                     isSelectedA && 'text-normal-950',
-                                    isBoth && 'text-indigo-600',
+                                    isBoth
+                                        && 'bg-[linear-gradient(to_right,theme(colors.indigo.500)_50%,theme(colors.neutral.950)_50%)] bg-clip-text text-transparent',
                                 )}
                             >
                                 --- {font.name} ---
@@ -186,14 +191,22 @@ function isFontB(font: UnifiedFont): boolean {
                         onclick={handleSelectFontB}
                         class="flex-1 relative flex items-center justify-between transition-all duration-200 cursor-pointer hover:bg-indigo-500/[0.03]"
                     >
-                        {@render brackets(isSelectedB, isSelectedB && !isBoth, 'stroke-1 size-7 stroke-indigo-600')}
+                        {@render brackets(
+    isSelectedB,
+    isSelectedB && !isBoth,
+    'stroke-1 size-7 stroke-indigo-600',
+)}
                     </button>
 
                     <button
                         onclick={handleSelectFontA}
                         class="flex-1 relative flex items-center justify-end transition-all duration-200 cursor-pointer hover:bg-black/[0.02]"
                     >
-                        {@render brackets(isSelectedA && !isBoth, isSelectedA, 'stroke-1 size-7 stroke-normal-950')}
+                        {@render brackets(
+    isSelectedA && !isBoth,
+    isSelectedA,
+    'stroke-1 size-7 stroke-normal-950',
+)}
                     </button>
                 </div>
             {/snippet}

From 9f91fed692f8675804b58f983cd2f27b219999d9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:02:32 +0300
Subject: [PATCH 65/73] feat(Input): tweak styles

---
 src/shared/ui/Input/Input.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index 70bad8f..818331e 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -27,19 +27,19 @@ export const inputVariants = tv({
                 'h-9 sm:h-10 md:h-11 rounded-lg',
                 'px-3 sm:px-3.5 md:px-4',
                 'text-xs sm:text-sm md:text-base',
-                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+                'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
             ],
             md: [
                 'h-10 sm:h-12 md:h-14 rounded-xl',
                 'px-3.5 sm:px-4 md:px-5',
                 'text-sm sm:text-base md:text-lg',
-                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+                'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
             ],
             lg: [
                 'h-12 sm:h-14 md:h-16 rounded-2xl',
                 'px-4 sm:px-5 md:px-6',
                 'text-sm sm:text-base md:text-lg',
-                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+                'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
             ],
         },
     },
@@ -84,7 +84,7 @@ let {
 </script>
 
 <BaseInput
-    bind:value={value}
+    bind:value
     class={cn(inputVariants({ variant, size }), className)}
     {...rest}
 />

From 45ed0d5601cede312158fad4da2084d15e6eb999 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:03:17 +0300
Subject: [PATCH 66/73] fix(Footnote): use classes every time

---
 src/shared/ui/Footnote/Footnote.svelte | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/shared/ui/Footnote/Footnote.svelte b/src/shared/ui/Footnote/Footnote.svelte
index 2db1a50..cda14d6 100644
--- a/src/shared/ui/Footnote/Footnote.svelte
+++ b/src/shared/ui/Footnote/Footnote.svelte
@@ -16,16 +16,22 @@ interface Props {
 }
 
 const { children, class: className, render }: Props = $props();
-
-const baseClasses =
-    'font-mono text-[0.5625rem] sm:text-[0.625rem] uppercase tracking-[0.2em] text-text-soft opacity-60';
-const combinedClasses = cn(baseClasses, className);
 </script>
 
 {#if render}
-    {@render render({ class: combinedClasses })}
+    {@render render({
+    class: cn(
+        'font-mono text-[0.5625rem] sm:text-[0.625rem] lowercase tracking-[0.2em] text-text-soft',
+        className,
+    ),
+})}
 {:else if children}
-    <span class={combinedClasses}>
+    <span
+        class={cn(
+            'font-mono text-[0.5625rem] sm:text-[0.625rem] lowercase tracking-[0.2em] text-text-soft',
+            className,
+        )}
+    >
         {@render children()}
     </span>
 {/if}

From b8d019b824416e0f21b6357cf52f06fcf9985652 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:03:44 +0300
Subject: [PATCH 67/73] feat(ComparisonSlider): add labels

---
 src/features/SetupFont/ui/TypographyMenu.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index 631eff9..9d8d6ba 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu.svelte
@@ -15,6 +15,7 @@ import {
     Drawer,
     IconButton,
 } from '$shared/ui';
+import { Label } from '$shared/ui';
 import SlidersIcon from '@lucide/svelte/icons/sliders-vertical';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
@@ -72,7 +73,11 @@ $effect(() => {
 </script>
 
 <div
-    class={cn('w-auto max-screen z-10 flex justify-center', hidden && 'hidden', className)}
+    class={cn(
+        'w-auto max-screen z-10 flex justify-center',
+        hidden && 'hidden',
+        className,
+    )}
     in:receive={{ key: 'panel' }}
     out:send={{ key: 'panel' }}
 >
@@ -86,11 +91,17 @@ $effect(() => {
                 </IconButton>
             {/snippet}
             {#snippet content({ className })}
-                <div class={cn(className, 'flex flex-col gap-6')}>
+                <Label
+                    class="mt-6 mb-12 px-2"
+                    text="Typography Controls"
+                    align="center"
+                />
+                <div class={cn(className, 'flex flex-col gap-8')}>
                     {#each controlManager.controls as control (control.id)}
                         <ComboControlV2
                             control={control.instance}
                             orientation="horizontal"
+                            label={control.controlLabel}
                             reduced
                         />
                     {/each}
@@ -112,6 +123,7 @@ $effect(() => {
                                 decreaseLabel={control.decreaseLabel}
                                 controlLabel={control.controlLabel}
                                 orientation="vertical"
+                                showScale={false}
                             />
                         {/each}
                     </div>

From 5867028be65b39c94c811b97e5126ed9450f659d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:34:47 +0300
Subject: [PATCH 68/73] feat(app): add variable value for mono font

---
 src/app/styles/app.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 26560ae..9883313 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -57,6 +57,8 @@
   --gradient-from: oklch(0.98 0.002 286.32);
   --gradient-via: oklch(1 0 0);
   --gradient-to: oklch(0.98 0.002 286.32);
+
+  --font-mono: 'Major Mono Display';
 }
 
 .dark {
@@ -165,6 +167,7 @@
   --color-gradient-from: var(--gradient-from);
   --color-gradient-via: var(--gradient-via);
   --color-gradient-to: var(--gradient-to);
+  --font-mono: var(--font-mono);
 }
 
 @layer base {
@@ -287,7 +290,7 @@
 }
 
 /* ---- Behavior ---- */
-html {
+* {
     scroll-behavior: smooth;
     scrollbar-gutter: stable;
 }
@@ -300,4 +303,4 @@ html {
 
 body {
     overscroll-behavior-y: none;
-}
\ No newline at end of file
+}

From 8f4faa3328c08b896777ba4a6e972c36b8a54825 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:35:26 +0300
Subject: [PATCH 69/73] feat(Input): create index file with type exports

---
 src/shared/ui/Input/index.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/shared/ui/Input/index.ts

diff --git a/src/shared/ui/Input/index.ts b/src/shared/ui/Input/index.ts
new file mode 100644
index 0000000..68249c7
--- /dev/null
+++ b/src/shared/ui/Input/index.ts
@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'svelte';
+import Input from './Input.svelte';
+
+type InputProps = ComponentProps<typeof Input>;
+type InputSize = InputProps['size'];
+type InputVariant = InputProps['variant'];
+
+export {
+    Input,
+    type InputProps,
+    type InputSize,
+    type InputVariant,
+};

From 0f6a4d6587cb9e723eff13021f70ae2d1844f5d5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:35:53 +0300
Subject: [PATCH 70/73] chore: add/delete imports/exports

---
 src/shared/lib/helpers/index.ts |  6 ------
 src/shared/lib/index.ts         |  3 ---
 src/shared/ui/index.ts          | 22 ++++++----------------
 3 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 78fcbe6..d37eb5b 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -44,12 +44,6 @@ export {
     responsiveManager,
 } from './createResponsiveManager/createResponsiveManager.svelte';
 
-export {
-    createLenisContext,
-    getLenisContext,
-    setLenisContext,
-} from './createScrollContext/createScrollContext.svelte';
-
 export {
     createPerspectiveManager,
     type PerspectiveManager,
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 2ceace4..dc62fee 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -6,7 +6,6 @@ export {
     createDebouncedState,
     createEntityStore,
     createFilter,
-    createLenisContext,
     createPersistentStore,
     createPerspectiveManager,
     createResponsiveManager,
@@ -16,14 +15,12 @@ export {
     type EntityStore,
     type Filter,
     type FilterModel,
-    getLenisContext,
     type LineData,
     type PersistentStore,
     type PerspectiveManager,
     type Property,
     type ResponsiveManager,
     responsiveManager,
-    setLenisContext,
     type TypographyControl,
     type VirtualItem,
     type Virtualizer,
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index c80b5e2..4d7ba05 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,6 +1,3 @@
-import type { ComponentProps } from 'svelte';
-import Input from './Input/Input.svelte';
-
 export { default as CheckboxFilter } from './CheckboxFilter/CheckboxFilter.svelte';
 export { default as ComboControl } from './ComboControl/ComboControl.svelte';
 export { default as ComboControlV2 } from './ComboControlV2/ComboControlV2.svelte';
@@ -9,7 +6,12 @@ export { default as Drawer } from './Drawer/Drawer.svelte';
 export { default as ExpandableWrapper } from './ExpandableWrapper/ExpandableWrapper.svelte';
 export { default as Footnote } from './Footnote/Footnote.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
-
+export {
+    Input,
+    type InputSize,
+    type InputVariant,
+} from './Input';
+export { default as Label } from './Label/Label.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Logo } from './Logo/Logo.svelte';
 export { default as PerspectivePlan } from './PerspectivePlan/PerspectivePlan.svelte';
@@ -18,16 +20,4 @@ export { default as Section } from './Section/Section.svelte';
 export { default as SidebarMenu } from './SidebarMenu/SidebarMenu.svelte';
 export { default as Skeleton } from './Skeleton/Skeleton.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
-export { default as SmoothScroll } from './SmoothScroll/SmoothScroll.svelte';
 export { default as VirtualList } from './VirtualList/VirtualList.svelte';
-
-type InputProps = ComponentProps<typeof Input>;
-type InputSize = InputProps['size'];
-type InputVariant = InputProps['variant'];
-
-export {
-    Input,
-    type InputProps,
-    type InputSize,
-    type InputVariant,
-};

From e3924d43d831441d132aebad471b8c7703555c81 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:36:38 +0300
Subject: [PATCH 71/73] feat(Section): add a styickyTitle feature and change
 the section layout

---
 src/shared/ui/Section/Section.svelte | 84 +++++++++++++++++++++-------
 1 file changed, 65 insertions(+), 19 deletions(-)

diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index 6e63940..9d0c7fd 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -56,13 +56,40 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /**
      * Snippet for the section content
      */
-    children?: Snippet;
+    content?: Snippet<[{ className?: string }]>;
+    /**
+     * When true, the title stays fixed in view while
+     * scrolling through the section content.
+     */
+    stickyTitle?: boolean;
+    /**
+     * Top offset for sticky title (e.g. header height).
+     * @default '0px'
+     */
+    stickyOffset?: string;
 }
 
-const { class: className, title, icon, description, index = 0, onTitleStatusChange, id, children }: Props = $props();
+const {
+    class: className,
+    title,
+    icon,
+    description,
+    index = 0,
+    onTitleStatusChange,
+    id,
+    content,
+    stickyTitle = false,
+    stickyOffset = '0px',
+}: Props = $props();
 
 let titleContainer = $state<HTMLElement>();
-const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
+const flyParams: FlyParams = {
+    y: 0,
+    x: -50,
+    duration: 300,
+    easing: cubicOut,
+    opacity: 0.2,
+};
 
 // Track if the user has actually scrolled away from view
 let isScrolledPast = $state(false);
@@ -72,18 +99,21 @@ $effect(() => {
         return;
     }
     let cleanup: ((index: number) => void) | undefined;
-    const observer = new IntersectionObserver(entries => {
-        const entry = entries[0];
-        const isPast = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+    const observer = new IntersectionObserver(
+        entries => {
+            const entry = entries[0];
+            const isPast = !entry.isIntersecting && entry.boundingClientRect.top < 0;
 
-        if (isPast !== isScrolledPast) {
-            isScrolledPast = isPast;
-            cleanup = onTitleStatusChange?.(index, isPast, title, id);
-        }
-    }, {
-        // Set threshold to 0 to trigger exactly when the last pixel leaves
-        threshold: 0,
-    });
+            if (isPast !== isScrolledPast) {
+                isScrolledPast = isPast;
+                cleanup = onTitleStatusChange?.(index, isPast, title, id);
+            }
+        },
+        {
+            // Set threshold to 0 to trigger exactly when the last pixel leaves
+            threshold: 0,
+        },
+    );
 
     observer.observe(titleContainer);
     return () => {
@@ -94,20 +124,32 @@ $effect(() => {
 </script>
 
 <section
-    id={id}
+    {id}
     class={cn(
-        'flex flex-col',
+        'col-span-2 grid grid-cols-subgrid',
+        stickyTitle ? 'gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12' : 'grid-rows-[max-content_1fr]',
         className,
     )}
     in:fly={flyParams}
     out:fly={flyParams}
 >
-    <div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
+    <div
+        bind:this={titleContainer}
+        class={cn(
+            'flex flex-col gap-2 sm:gap-3',
+            stickyTitle && 'self-start',
+        )}
+        style:position={stickyTitle ? 'sticky' : undefined}
+        style:top={stickyTitle ? stickyOffset : undefined}
+    >
         <div class="flex items-center gap-2 sm:gap-3">
             {#if icon}
-                {@render icon({ className: 'size-3 sm:size-4 stroke-foreground stroke-1 opacity-60' })}
+                {@render icon({
+    className: 'size-3 sm:size-4 stroke-foreground stroke-1 opacity-60',
+})}
                 <div class="w-px h-2.5 sm:h-3 bg-border-subtle"></div>
             {/if}
+
             {#if description}
                 <Footnote>
                     {#snippet render({ class: className })}
@@ -129,5 +171,9 @@ $effect(() => {
         {/if}
     </div>
 
-    {@render children?.()}
+    {@render content?.({
+    className: stickyTitle
+        ? 'row-start-2 col-start-2'
+        : 'row-start-2 col-start-2',
+})}
 </section>

From f18454f9b374e0bcbbdf703a737edfc770086d78 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:39:24 +0300
Subject: [PATCH 72/73] feat(Layout): change fonts link and remove max-width
 for main

---
 src/app/ui/Layout.svelte | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 021c334..3eacbd1 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -55,30 +55,36 @@ onMount(async () => {
     <link rel="icon" href={GD} />
 
     <link rel="preconnect" href="https://api.fontshare.com" />
-    <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
+    <link
+        rel="preconnect"
+        href="https://cdn.fontshare.com"
+        crossorigin="anonymous"
+    />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossorigin="anonymous"
+    />
     <link
         rel="preload"
         as="style"
-        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
-    >
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
+    />
     <link
         rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
         media="print"
         onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
-    >
+    />
     <noscript>
         <link
             rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&display=swap"
-        >
+            href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
+        />
     </noscript>
-    <title>
-        Compare Typography & Typefaces | GlyphDiff
-    </title>
+    <title>Compare Typography & Typefaces | GlyphDiff</title>
 </svelte:head>
 
 <ResponsiveProvider>
@@ -88,7 +94,7 @@ onMount(async () => {
         </header>
 
         <!-- <ScrollArea class="h-screen w-screen"> -->
-        <main class="flex-1 h-full w-full max-w-6xl mx-auto px-0 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative overflow-x-hidden">
+        <main class="flex-1 w-full mx-auto px-4 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative">
             <TooltipProvider>
                 {#if fontsReady}
                     {@render children?.()}

From aa4796079a79b3449d56efb66b78ec5097f04417 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:40:20 +0300
Subject: [PATCH 73/73] feat(Page): add new Section props for sticky titles

---
 src/routes/Page.svelte | 78 ++++++++++++++++++++++++++----------------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index d6b6bcb..2343abf 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -4,6 +4,8 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     Logo,
     Section,
@@ -15,13 +17,17 @@ import CodeIcon from '@lucide/svelte/icons/code';
 import EyeIcon from '@lucide/svelte/icons/eye';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanSearchIcon from '@lucide/svelte/icons/search';
-import type { Snippet } from 'svelte';
+import {
+    type Snippet,
+    getContext,
+} from 'svelte';
 import { cubicIn } from 'svelte/easing';
 import { fade } from 'svelte/transition';
 
 let searchContainer: HTMLElement;
 
-let isExpanded = $state(false);
+let isExpanded = $state(true);
+const responsive = getContext<ResponsiveManager>('responsive');
 
 function handleTitleStatusChanged(
     index: number,
@@ -39,39 +45,37 @@ function handleTitleStatusChanged(
         scrollBreadcrumbsStore.remove(index);
     };
 }
-
-// $effect(() => {
-//     appliedFontsManager.touch(
-//         selectedFontsStore.all.map(font => ({
-//             slug: font.id,
-//             weight: controlManager.weight,
-//         })),
-//     );
-// });
 </script>
 
 <!-- Font List -->
 <div
-    class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
+    class="p-2 sm:p-3 md:p-4 h-full grid gap-3 sm:gap-4 grid-cols-[max-content_1fr]"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <Section class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
+    <Section
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        onTitleStatusChange={handleTitleStatusChanged}
+    >
         {#snippet icon({ className })}
             <CodeIcon class={className} />
         {/snippet}
         {#snippet description({ className })}
-            <span class={className}>
-                Project_Codename
-            </span>
+            <span class={className}> Project_Codename </span>
+        {/snippet}
+        {#snippet content({ className })}
+            <div class={cn(className, 'col-start-0 col-span-2')}>
+                <Logo />
+            </div>
         {/snippet}
-        <Logo />
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={1}
         id="optical_comparator"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <EyeIcon class={className} />
@@ -81,14 +85,20 @@ function handleTitleStatusChanged(
                 Optical<br />Comparator
             </h1>
         {/snippet}
-        <ComparisonSlider />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <ComparisonSlider />
+            </div>
+        {/snippet}
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={2}
         id="query_module"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <ScanSearchIcon class={className} />
@@ -98,14 +108,20 @@ function handleTitleStatusChanged(
                 Query<br />Module
             </h2>
         {/snippet}
-        <FontSearch bind:showFilters={isExpanded} />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <FontSearch bind:showFilters={isExpanded} />
+            </div>
+        {/snippet}
     </Section>
 
     <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
+        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
         index={3}
         id="sample_set"
         onTitleStatusChange={handleTitleStatusChanged}
+        stickyTitle={responsive.isDesktopLarge}
+        stickyOffset="4rem"
     >
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
@@ -115,18 +131,22 @@ function handleTitleStatusChanged(
                 Sample<br />Set
             </h2>
         {/snippet}
-        <SampleList />
+        {#snippet content({ className })}
+            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
+                <SampleList />
+            </div>
+        {/snippet}
     </Section>
 </div>
 
 <style>
 .content {
-    /* Tells the browser to skip rendering off-screen content */
-    content-visibility: auto;
-    /* Helps the browser reserve space without calculating everything */
-    contain-intrinsic-size: 1px 1000px;
+  /* Tells the browser to skip rendering off-screen content */
+  content-visibility: auto;
+  /* Helps the browser reserve space without calculating everything */
+  contain-intrinsic-size: 1px 1000px;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 </style>