docs: remove decorative separator comments

Strip box-drawing (──) section dividers and ===/banner headers — visual
noise with no information. Where a divider label carried a non-obvious
why (VirtualList owns scrolling; mobile footer is md:hidden because header
stats take over) it is kept as a plain one-line comment; pure restatements
of the markup (Header bar, Red hover line, Bottom: fixed controls) are
dropped. Single comment style, no fluff.
This commit is contained in:
Ilia Mashkov
2026-06-03 08:45:36 +03:00
parent 09869aed00
commit a428eac309
7 changed files with 11 additions and 25 deletions
+1 -5
View File
@@ -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. * Used in Storybook stories, tests, and development.
* *
* ## Usage * ## Usage
+1 -4
View File
@@ -1,8 +1,5 @@
/** /**
* ============================================================================ * Mock data helpers (main export).
* MOCK DATA HELPERS - MAIN EXPORT
* ============================================================================
*
* Comprehensive mock data for Storybook stories, tests, and development. * Comprehensive mock data for Storybook stories, tests, and development.
* *
* ## Quick Start * ## Quick Start
@@ -102,7 +102,6 @@ const stats = $derived([
" "
style:font-weight={typography.weight} style:font-weight={typography.weight}
> >
<!-- ── Header bar ─────────────────────────────────────────────────── -->
<div <div
class=" class="
flex items-center justify-between flex items-center justify-between
@@ -163,7 +162,6 @@ const stats = $derived([
</div> </div>
</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"> <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}> <FontApplicator {font} {status}>
<ContentEditable <ContentEditable
@@ -175,7 +173,7 @@ const stats = $derived([
</FontApplicator> </FontApplicator>
</div> </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"> <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} {#each stats as stat, i}
<Footnote class="text-5xs sm:text-4xs tracking-wider {i === 0 ? 'ml-auto' : ''}"> <Footnote class="text-5xs sm:text-4xs tracking-wider {i === 0 ? 'ml-auto' : ''}">
@@ -187,7 +185,6 @@ const stats = $derived([
{/each} {/each}
</div> </div>
<!-- ── Red hover line ─────────────────────────────────────────────── -->
<div <div
class=" class="
absolute bottom-0 left-0 right-0 absolute bottom-0 left-0 right-0
+1 -5
View File
@@ -1,9 +1,5 @@
/** /**
* ============================================================================ * Storybook helpers: components and utilities for stories.
* STORYBOOK HELPERS
* ============================================================================
*
* Helper components and utilities for Storybook stories.
* *
* ## Usage * ## Usage
* *
@@ -84,9 +84,11 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
{formattedValue()} {formattedValue()}
</span> </span>
</div> </div>
<!-- ── FULL MODE ──────────────────────────────────────────────────────────────── -->
{:else} {:else}
<!--
FULL MODE
+/- buttons flanking a slider popover.
-->
<div class={cn('flex items-center px-1 relative', className)}> <div class={cn('flex items-center px-1 relative', className)}>
<!-- Decrease button --> <!-- Decrease button -->
<Button <Button
@@ -43,7 +43,7 @@ function close() {
{#if responsive.isMobile} {#if responsive.isMobile}
<!-- <!--
── MOBILE: fixed overlay ───────────────────────────────────────────── MOBILE: fixed overlay.
Only rendered when open. Both backdrop and panel use Svelte transitions Only rendered when open. Both backdrop and panel use Svelte transitions
so they animate in and out independently. so they animate in and out independently.
--> -->
@@ -70,7 +70,7 @@ function close() {
{/if} {/if}
{:else} {:else}
<!-- <!--
── DESKTOP: collapsible column ─────────────────────────────────────── DESKTOP: collapsible column.
Always in the DOM — width transitions between 320px and 0. Always in the DOM — width transitions between 320px and 0.
overflow-hidden clips the w-80 inner div during the collapse. overflow-hidden clips the w-80 inner div during the collapse.
@@ -52,7 +52,6 @@ const side = $derived<Side>(comparisonStore.side);
className, className,
)} )}
> >
<!-- ── Header: title + A/B toggle ────────────────────────────────── -->
<div <div
class=" class="
p-6 shrink-0 p-6 shrink-0
@@ -96,14 +95,13 @@ const side = $derived<Side>(comparisonStore.side);
</ButtonGroup> </ButtonGroup>
</div> </div>
<!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── --> <!-- No scroll here; VirtualList handles scrolling -->
<div class="flex-1 min-h-0 surface-canvas"> <div class="flex-1 min-h-0 surface-canvas">
{#if main} {#if main}
{@render main()} {@render main()}
{/if} {/if}
</div> </div>
<!-- ── Bottom: fixed controls ─────────────────────────────────────── -->
{#if controls} {#if controls}
<div <div
class=" class="