src/entities/Font/testing/fonts.mock.ts

@@ -1,9 +1,5 @@
 /**
- * ============================================================================
+ * Mock font data: factory functions and preset fixtures.
- * MOCK FONT DATA
- * ============================================================================
- *
- * Factory functions and preset mock data for fonts.
  * Used in Storybook stories, tests, and development.
  *
  * ## Usage

src/entities/Font/testing/index.ts

@@ -1,8 +1,5 @@
 /**
- * ============================================================================
+ * Mock data helpers (main export).
- * MOCK DATA HELPERS - MAIN EXPORT
- * ============================================================================
- *
  * Comprehensive mock data for Storybook stories, tests, and development.
  *
  * ## Quick Start

src/entities/Font/ui/FontSampler/FontSampler.svelte

@@ -102,7 +102,6 @@ const stats = $derived([
     "
     style:font-weight={typography.weight}
 >
-    <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
         class="
             flex items-center justify-between
@@ -163,7 +162,6 @@ const stats = $derived([
         </div>
     </div>
 
-    <!-- ── Main content area ──────────────────────────────────────────── -->
     <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
         <FontApplicator {font} {status}>
             <ContentEditable
@@ -175,7 +173,7 @@ const stats = $derived([
         </FontApplicator>
     </div>
 
-    <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
+    <!-- Mobile stats footer; md:hidden because the header stats take over above -->
     <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-subtle flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
         {#each stats as stat, i}
             <Footnote class="text-5xs sm:text-4xs tracking-wider {i === 0 ? 'ml-auto' : ''}">
@@ -187,7 +185,6 @@ const stats = $derived([
         {/each}
     </div>
 
-    <!-- ── Red hover line ─────────────────────────────────────────────── -->
     <div
         class="
             absolute bottom-0 left-0 right-0

src/shared/lib/storybook/index.ts

@@ -1,9 +1,5 @@
 /**
- * ============================================================================
+ * Storybook helpers: components and utilities for stories.
- * STORYBOOK HELPERS
- * ============================================================================
- *
- * Helper components and utilities for Storybook stories.
  *
  * ## Usage
  *

src/shared/ui/ComboControl/ComboControl.svelte

@@ -84,9 +84,11 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             {formattedValue()}
         </span>
     </div>
-
-    <!-- ── FULL MODE ──────────────────────────────────────────────────────────────── -->
 {:else}
+    <!--
+        FULL MODE
+        +/- buttons flanking a slider popover.
+    -->
     <div class={cn('flex items-center px-1 relative', className)}>
         <!-- Decrease button -->
         <Button

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -43,7 +43,7 @@ function close() {
 
 {#if responsive.isMobile}
     <!--
-        ── MOBILE: fixed overlay ─────────────────────────────────────────────
+        MOBILE: fixed overlay.
         Only rendered when open. Both backdrop and panel use Svelte transitions
         so they animate in and out independently.
     -->
@@ -70,7 +70,7 @@ function close() {
     {/if}
 {:else}
     <!--
-        ── DESKTOP: collapsible column ───────────────────────────────────────
+        DESKTOP: collapsible column.
         Always in the DOM — width transitions between 320px and 0.
         overflow-hidden clips the w-80 inner div during the collapse.
 

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

@@ -52,7 +52,6 @@ const side = $derived<Side>(comparisonStore.side);
         className,
     )}
 >
-    <!-- ── Header: title + A/B toggle ────────────────────────────────── -->
     <div
         class="
             p-6 shrink-0
@@ -96,14 +95,13 @@ const side = $derived<Side>(comparisonStore.side);
         </ButtonGroup>
     </div>
 
-    <!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
+    <!-- No scroll here; VirtualList handles scrolling -->
     <div class="flex-1 min-h-0 surface-canvas">
         {#if main}
             {@render main()}
         {/if}
     </div>
 
-    <!-- ── Bottom: fixed controls ─────────────────────────────────────── -->
     {#if controls}
         <div
             class="