From 09869aed00709a9315132ba5f57efe36e2f20950 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 08:34:49 +0300
Subject: [PATCH] refactor(entities/Font): relocate FontSampler from
 DisplayFont, invert typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DisplayFont was not a feature (FSD+ A-6): the whole slice was one
presentational component that renders a Font styled by typography, with no
model/domain/action. To get typography it reached sideways into a sibling
feature (`$features/AdjustTypography/model`) — a feature->feature edge
(C-1), the symptom of the mislayering, not the disease.

Fix by inversion, mirroring the existing `status` prop pattern:

- move FontSampler into entities/Font/ui (it now uses only entity siblings
  + $shared/ui)
- it accepts a `typography` prop typed to a minimal contract defined in the
  component; the AdjustTypography store satisfies it structurally, so the
  entity has no dependency on the feature
- SampleList (owns both) injects its typographySettingsStore as the prop
- delete the DisplayFont slice; export FontSampler from the Font barrel;
  relocate the story (now passes a mock typography)

Resolves A-6, A-7, and the FontSampler half of C-1. Verified: 0 type
errors, 0 lint (boundary rule satisfied), 905 unit + 213 component tests,
production build OK.
---
 src/entities/Font/index.ts                    |  1 +
 .../ui/FontSampler/FontSampler.stories.svelte | 14 ++++-
 .../Font}/ui/FontSampler/FontSampler.svelte   | 61 +++++++++++++------
 src/entities/Font/ui/index.ts                 |  2 +
 src/features/DisplayFont/index.ts             |  1 -
 src/features/DisplayFont/ui/index.ts          |  3 -
 .../ui/SampleList/SampleList.svelte           |  4 +-
 7 files changed, 61 insertions(+), 25 deletions(-)
 rename src/{features/DisplayFont => entities/Font}/ui/FontSampler/FontSampler.stories.svelte (90%)
 rename src/{features/DisplayFont => entities/Font}/ui/FontSampler/FontSampler.svelte (78%)
 delete mode 100644 src/features/DisplayFont/index.ts
 delete mode 100644 src/features/DisplayFont/ui/index.ts

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index af4d2b2..b93f0fc 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -19,6 +19,7 @@ export type { FontRowSizeResolverOptions } from './lib';
 
 export {
     FontApplicator,
+    FontSampler,
     FontVirtualList,
 } from './ui';
 
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte b/src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
similarity index 90%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
index 0a5dadb..b01a5c8 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
@@ -4,7 +4,7 @@ import { defineMeta } from '@storybook/addon-svelte-csf';
 import FontSampler from './FontSampler.svelte';
 
 const { Story } = defineMeta({
-    title: 'Features/FontSampler',
+    title: 'Entities/Font/FontSampler',
     component: FontSampler,
     tags: ['autodocs'],
     parameters: {
@@ -39,8 +39,8 @@ const { Story } = defineMeta({
 </script>
 
 <script lang="ts">
-import type { UnifiedFont } from '$entities/Font';
 import type { ComponentProps } from 'svelte';
+import type { UnifiedFont } from '../../model/types';
 
 // Mock fonts for testing
 const mockArial: UnifiedFont = {
@@ -84,6 +84,14 @@ const mockGeorgia: UnifiedFont = {
         isVariable: false,
     },
 };
+
+// Stand-in for the AdjustTypography store the composing widget injects.
+const mockTypography = {
+    renderedSize: 48,
+    weight: 400,
+    height: 1.5,
+    spacing: 0,
+};
 </script>
 
 <Story
@@ -93,6 +101,7 @@ const mockGeorgia: UnifiedFont = {
         status: 'loaded',
         text: 'The quick brown fox jumps over the lazy dog',
         index: 0,
+        typography: mockTypography,
     }}
 >
     {#snippet template(args: ComponentProps<typeof FontSampler>)}
@@ -111,6 +120,7 @@ const mockGeorgia: UnifiedFont = {
         text:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
         index: 1,
+        typography: mockTypography,
     }}
 >
     {#snippet template(args: ComponentProps<typeof FontSampler>)}
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/entities/Font/ui/FontSampler/FontSampler.svelte
similarity index 78%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.svelte
index 4d15486..bf019e8 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.svelte
@@ -4,12 +4,6 @@
     Visual design matches FontCard: sharp corners, red hover accent, header stats.
 -->
 <script lang="ts">
-import {
-    FontApplicator,
-    type FontLoadStatus,
-    type UnifiedFont,
-} from '$entities/Font';
-import { getTypographySettingsStore } from '$features/AdjustTypography/model';
 import {
     Badge,
     ContentEditable,
@@ -18,6 +12,35 @@ import {
     Stat,
 } from '$shared/ui';
 import { fly } from 'svelte/transition';
+import type {
+    FontLoadStatus,
+    UnifiedFont,
+} from '../../model/types';
+import FontApplicator from '../FontApplicator/FontApplicator.svelte';
+
+/**
+ * Minimal typography contract this view renders with. The AdjustTypography
+ * store satisfies it structurally; defining it here keeps the entity decoupled
+ * from that feature (no entity -> feature import).
+ */
+interface FontSampleTypography {
+    /**
+     * Rendered font size in px
+     */
+    renderedSize: number;
+    /**
+     * Numeric font weight
+     */
+    weight: number;
+    /**
+     * Line-height multiplier
+     */
+    height: number;
+    /**
+     * Letter spacing
+     */
+    spacing: number;
+}
 
 interface Props {
     /**
@@ -39,11 +62,15 @@ interface Props {
      * @default 0
      */
     index?: number;
+    /**
+     * Typography settings to render the sample with. Injected by the composing
+     * widget (which owns the AdjustTypography store) so this entity view stays
+     * decoupled from that feature — the same inversion as `status`.
+     */
+    typography: FontSampleTypography;
 }
 
-let { font, status, text = $bindable(), index = 0 }: Props = $props();
-
-const typographySettingsStore = getTypographySettingsStore();
+let { font, status, text = $bindable(), index = 0, typography }: Props = $props();
 
 // Extract provider badge with fallback
 const providerBadge = $derived(
@@ -52,10 +79,10 @@ const providerBadge = $derived(
 );
 
 const stats = $derived([
-    { label: 'SZ', value: `${typographySettingsStore.renderedSize}PX` },
-    { label: 'WGT', value: `${typographySettingsStore.weight}` },
-    { label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
-    { label: 'LTR', value: `${typographySettingsStore.spacing}` },
+    { label: 'SZ', value: `${typography.renderedSize}PX` },
+    { label: 'WGT', value: `${typography.weight}` },
+    { label: 'LH', value: typography.height.toFixed(2) },
+    { label: 'LTR', value: `${typography.spacing}` },
 ]);
 </script>
 
@@ -73,7 +100,7 @@ const stats = $derived([
         min-h-60
         rounded-none
     "
-    style:font-weight={typographySettingsStore.weight}
+    style:font-weight={typography.weight}
 >
     <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
@@ -141,9 +168,9 @@ const stats = $derived([
         <FontApplicator {font} {status}>
             <ContentEditable
                 bind:text
-                fontSize={typographySettingsStore.renderedSize}
-                lineHeight={typographySettingsStore.height}
-                letterSpacing={typographySettingsStore.spacing}
+                fontSize={typography.renderedSize}
+                lineHeight={typography.height}
+                letterSpacing={typography.spacing}
             />
         </FontApplicator>
     </div>
diff --git a/src/entities/Font/ui/index.ts b/src/entities/Font/ui/index.ts
index 7dae687..2ba384f 100644
--- a/src/entities/Font/ui/index.ts
+++ b/src/entities/Font/ui/index.ts
@@ -1,7 +1,9 @@
 import FontApplicator from './FontApplicator/FontApplicator.svelte';
+import FontSampler from './FontSampler/FontSampler.svelte';
 import FontVirtualList from './FontVirtualList/FontVirtualList.svelte';
 
 export {
     FontApplicator,
+    FontSampler,
     FontVirtualList,
 };
diff --git a/src/features/DisplayFont/index.ts b/src/features/DisplayFont/index.ts
deleted file mode 100644
index a15fd38..0000000
--- a/src/features/DisplayFont/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FontSampler } from './ui';
diff --git a/src/features/DisplayFont/ui/index.ts b/src/features/DisplayFont/ui/index.ts
deleted file mode 100644
index b055bdf..0000000
--- a/src/features/DisplayFont/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FontSampler from './FontSampler/FontSampler.svelte';
-
-export { FontSampler };
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index b6a63ed..4c16149 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
 import {
+    FontSampler,
     FontVirtualList,
     createFontRowSizeResolver,
     getFontCatalog,
@@ -15,7 +16,6 @@ import {
     TypographyMenu,
     getTypographySettingsStore,
 } from '$features/AdjustTypography';
-import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
 import { getLayoutManager } from '../../model';
@@ -127,7 +127,7 @@ const fontRowHeight = $derived.by(() =>
                 getFontStatus reads a $state SvelteMap, so the row stays reactive.
             -->
             {@const status = fontLifecycleManager.getFontStatus(font.id, typographySettingsStore.weight, font.features?.isVariable)}
-            <FontSampler bind:text {font} {index} {status} />
+            <FontSampler bind:text {font} {index} {status} typography={typographySettingsStore} />
         {/snippet}
     </FontVirtualList>