src/entities/Font/index.ts

@@ -19,6 +19,7 @@ export type { FontRowSizeResolverOptions } from './lib';
 
 export {
     FontApplicator,
+    FontSampler,
     FontVirtualList,
 } from './ui';
 

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>)}

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();
+let { font, status, text = $bindable(), index = 0, typography }: Props = $props();
-
-const typographySettingsStore = getTypographySettingsStore();
 
 // 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: 'SZ', value: `${typography.renderedSize}PX` },
-    { label: 'WGT', value: `${typographySettingsStore.weight}` },
+    { label: 'WGT', value: `${typography.weight}` },
-    { label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
+    { label: 'LH', value: typography.height.toFixed(2) },
-    { label: 'LTR', value: `${typographySettingsStore.spacing}` },
+    { 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}
+                fontSize={typography.renderedSize}
-                lineHeight={typographySettingsStore.height}
+                lineHeight={typography.height}
-                letterSpacing={typographySettingsStore.spacing}
+                letterSpacing={typography.spacing}
             />
         </FontApplicator>
     </div>

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,
 };

src/features/DisplayFont/index.ts

@@ -1 +0,0 @@
-export { FontSampler } from './ui';

src/features/DisplayFont/ui/index.ts

@@ -1,3 +0,0 @@
-import FontSampler from './FontSampler/FontSampler.svelte';
-
-export { FontSampler };

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>