fix: add scrollMargin property since the IntersectionObserver has it

.gitignore

@@ -10,6 +10,9 @@ node_modules
 /build
 /dist
 
+# IDE settings
+.vscode
+
 # Git worktrees (isolated development branches)
 .worktrees
 

dprint.json

@@ -13,7 +13,7 @@
     "https://plugins.dprint.dev/typescript-0.93.0.wasm",
     "https://plugins.dprint.dev/json-0.19.3.wasm",
     "https://plugins.dprint.dev/markdown-0.17.8.wasm",
-    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm"
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.27.0.wasm"
   ],
   "typescript": {
     "lineWidth": 120,
@@ -57,9 +57,8 @@
     "quotes": "double",
     "scriptIndent": false,
     "styleIndent": false,
-
-    "vBindStyle": "short",
-    "vOnStyle": "short",
-    "formatComments": true
+    "formatComments": true,
+    "svelteAttrShorthand": true,
+    "svelteDirectiveShorthand": true
   }
 }

package.json

@@ -27,45 +27,45 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@internationalized/date": "^3.10.0",
-    "@lucide/svelte": "^0.561.0",
-    "@playwright/test": "^1.57.0",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addon-vitest": "^10.1.11",
-    "@storybook/svelte-vite": "^10.1.11",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/vite": "^4.1.18",
+    "@chromatic-com/storybook": "5.1.2",
+    "@internationalized/date": "3.12.1",
+    "@lucide/svelte": "^1.14.0",
+    "@playwright/test": "1.59.1",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-svelte-csf": "5.1.2",
+    "@storybook/addon-vitest": "10.3.6",
+    "@storybook/svelte-vite": "10.3.6",
+    "@sveltejs/vite-plugin-svelte": "7.1.0",
+    "@tailwindcss/vite": "4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
-    "@tsconfig/svelte": "^5.0.6",
-    "@types/jsdom": "^27",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-v8": "^4.0.16",
-    "bits-ui": "^2.14.4",
+    "@tsconfig/svelte": "5.0.8",
+    "@types/jsdom": "28.0.1",
+    "@vitest/browser-playwright": "4.1.5",
+    "@vitest/coverage-v8": "4.1.5",
+    "bits-ui": "2.18.1",
     "clsx": "^2.1.1",
-    "dprint": "^0.50.2",
-    "jsdom": "^27.4.0",
-    "lefthook": "^2.0.13",
-    "oxlint": "^1.35.0",
-    "playwright": "^1.57.0",
-    "storybook": "^10.1.11",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
-    "svelte-language-server": "^0.17.23",
-    "tailwind-merge": "^3.4.0",
+    "dprint": "0.54.0",
+    "jsdom": "29.1.1",
+    "lefthook": "2.1.6",
+    "oxlint": "1.62.0",
+    "playwright": "1.59.1",
+    "storybook": "10.3.6",
+    "svelte": "5.55.5",
+    "svelte-check": "4.4.8",
+    "svelte-language-server": "0.18.0",
+    "tailwind-merge": "3.5.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "4.2.4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.6",
-    "vitest": "^4.0.16",
-    "vitest-browser-svelte": "^2.0.1"
+    "typescript": "6.0.3",
+    "vite": "8.0.10",
+    "vitest": "4.1.5",
+    "vitest-browser-svelte": "2.1.1"
   },
   "dependencies": {
-    "@chenglou/pretext": "^0.0.5",
-    "@tanstack/svelte-query": "^6.0.14"
+    "@chenglou/pretext": "0.0.6",
+    "@tanstack/svelte-query": "6.1.28"
   }
 }

src/app/types/ambient.d.ts

@@ -36,6 +36,8 @@ declare module '*.jpg' {
     export default content;
 }
 
+declare module '*.css';
+
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {

src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts

@@ -20,6 +20,7 @@ let mockObserverInstances: MockIntersectionObserver[] = [];
 class MockIntersectionObserver implements IntersectionObserver {
     root = null;
     rootMargin = '';
+    scrollMargin = '';
     thresholds: number[] = [];
     readonly callbacks: Array<(entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void> = [];
     readonly observedElements = new Set<Element>();

src/entities/Font/model/store/appliedFontsStore/utils/yieldToMainThread/yieldToMainThread.ts

@@ -2,9 +2,7 @@
  * Yields to main thread during CPU-intensive parsing. Uses scheduler.yield() where available or MessageChannel fallback.
  */
 export async function yieldToMainThread(): 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 => {

src/shared/ui/Button/ToggleButton.stories.svelte

@@ -106,7 +106,7 @@ let selected = $state(false);
         <div class="flex items-center gap-4">
             <ToggleButton
                 {...args}
-                selected={selected}
+                {selected}
                 onclick={() => {
                     selected = !selected;
                 }}

src/shared/ui/Footnote/Footnote.svelte

@@ -30,7 +30,7 @@ const { children, class: className, render }: Props = $props();
             'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
             className,
         ),
-})}
+    })}
 {:else if children}
     <span
         class={cn(

src/shared/ui/Section/Section.svelte

@@ -93,7 +93,7 @@ const flyParams: FlyParams = {
     >
         <div>
             {#if headerTitle}
-                <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
+                <SectionHeader title={headerTitle} subtitle={headerSubtitle} {index} />
             {/if}
             <SectionTitle text={title} />
         </div>

src/shared/ui/VirtualList/VirtualList.svelte

@@ -293,7 +293,7 @@ $effect(() => {
                                     isFullyVisible: row.isFullyVisible,
                                     isPartiallyVisible: row.isPartiallyVisible,
                                     proximity: row.proximity,
-})}
+                                })}
                             {/if}
                         </div>
                     {:else}
@@ -305,7 +305,7 @@ $effect(() => {
                                     isFullyVisible: row.isFullyVisible,
                                     isPartiallyVisible: row.isPartiallyVisible,
                                     proximity: row.proximity,
-})}
+                                })}
                             {/if}
                         </div>
                     {/if}

src/widgets/ComparisonView/ui/FontList/FontList.svelte

@@ -101,6 +101,7 @@ function isFontReady(font: UnifiedFont): boolean {
             data-font-list
             weight={DEFAULT_FONT_WEIGHT}
             itemHeight={44}
+            gap={2}
             class="bg-transparent min-h-0 h-full scroll-stable py-2 pl-6 pr-4"
         >
             {#snippet skeleton()}

src/widgets/Footer/ui/Footer/Footer.svelte

@@ -22,7 +22,7 @@ const currentYear = new Date().getFullYear();
 >
     <!-- Project Name (Horizontal) -->
     {#if isVertical}
-        <div class="pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle">
+        <div class="flex flex-row pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 border border-subtle">
             <div class="w-1.5 h-1.5 bg-brand"></div>
             <span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
                 GlyphDiff © 2025 — {currentYear}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
+    "rootDir": ".",
     "module": "ESNext",
     "moduleResolution": "bundler",
     "target": "ESNext",
@@ -22,7 +23,6 @@
     "verbatimModuleSyntax": true,
 
     /* Path Aliases */
-    "baseUrl": ".",
     "paths": {
       "$lib/*": ["./src/lib/*"],
       "$app/*": ["./src/app/*"],