diff --git a/src/features/AdjustTypography/index.ts b/src/features/AdjustTypography/index.ts new file mode 100644 index 0000000..da1afb9 --- /dev/null +++ b/src/features/AdjustTypography/index.ts @@ -0,0 +1,6 @@ +export { + createTypographySettingsStore, + type TypographySettingsStore, + typographySettingsStore, +} from './model'; +export { TypographyMenu } from './ui'; diff --git a/src/features/AdjustTypography/model/index.ts b/src/features/AdjustTypography/model/index.ts new file mode 100644 index 0000000..67419fd --- /dev/null +++ b/src/features/AdjustTypography/model/index.ts @@ -0,0 +1,5 @@ +export { + createTypographySettingsStore, + type TypographySettingsStore, + typographySettingsStore, +} from './store/typographySettingsStore/typographySettingsStore.svelte'; diff --git a/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts similarity index 95% rename from src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts rename to src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts index 3702b2f..2365196 100644 --- a/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts +++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts @@ -16,6 +16,7 @@ import { DEFAULT_FONT_WEIGHT, DEFAULT_LETTER_SPACING, DEFAULT_LINE_HEIGHT, + DEFAULT_TYPOGRAPHY_CONTROLS_DATA, } from '$entities/Font'; import { type ControlDataModel, @@ -67,7 +68,7 @@ export interface TypographySettings { * Manages multiple typography controls with persistent storage and * responsive scaling support for font size. */ -export class TypographySettingsManager { +export class TypographySettingsStore { /** * Internal map of reactive controls keyed by their identifier */ @@ -303,7 +304,7 @@ export class TypographySettingsManager { * @param storageId - Persistent storage identifier * @returns Typography control manager instance */ -export function createTypographySettingsManager( +export function createTypographySettingsStore( configs: ControlModel[], storageId: string = 'glyphdiff:typography', ) { @@ -313,5 +314,13 @@ export function createTypographySettingsManager( lineHeight: DEFAULT_LINE_HEIGHT, letterSpacing: DEFAULT_LETTER_SPACING, }); - return new TypographySettingsManager(configs, storage); + return new TypographySettingsStore(configs, storage); } + +/** + * App-wide typography settings singleton, keyed for the comparison view. + */ +export const typographySettingsStore = createTypographySettingsStore( + DEFAULT_TYPOGRAPHY_CONTROLS_DATA, + 'glyphdiff:comparison:typography', +); diff --git a/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts similarity index 89% rename from src/features/SetupFont/lib/settingsManager/settingsManager.test.ts rename to src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts index 31d4c8d..094bf75 100644 --- a/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts +++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts @@ -17,13 +17,13 @@ import { } from 'vitest'; import { type TypographySettings, - TypographySettingsManager, -} from './settingsManager.svelte'; + TypographySettingsStore, +} from './typographySettingsStore.svelte'; /** - * Test Strategy for TypographySettingsManager + * Test Strategy for TypographySettingsStore * - * This test suite validates the TypographySettingsManager state management logic. + * This test suite validates the TypographySettingsStore state management logic. * These are unit tests for the manager logic, separate from component rendering. * * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects @@ -46,7 +46,7 @@ async function flushEffects() { await Promise.resolve(); } -describe('TypographySettingsManager - Unit Tests', () => { +describe('TypographySettingsStore - Unit Tests', () => { let mockStorage: TypographySettings; let mockPersistentStore: { value: TypographySettings; @@ -86,7 +86,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Initialization', () => { it('creates manager with default values from storage', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -106,7 +106,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -118,7 +118,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('initializes font size control with base size multiplied by current multiplier (1)', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -127,7 +127,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('returns all controls via controls getter', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -143,7 +143,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('returns individual controls via specific getters', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -161,7 +161,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('control instances have expected interface', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -180,7 +180,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Multiplier System', () => { it('has default multiplier of 1', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -189,7 +189,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates multiplier when set', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -202,7 +202,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('does not update multiplier if set to same value', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -218,7 +218,7 @@ describe('TypographySettingsManager - Unit Tests', () => { mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -242,7 +242,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates font size control display value when multiplier increases', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -263,7 +263,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Base Size Setter', () => { it('updates baseSize when set directly', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -274,7 +274,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates size control value when baseSize is set', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -285,7 +285,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('applies multiplier to size control when baseSize is set', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -299,7 +299,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Rendered Size Calculation', () => { it('calculates renderedSize as baseSize * multiplier', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -308,7 +308,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates renderedSize when multiplier changes', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -321,7 +321,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates renderedSize when baseSize changes', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -341,7 +341,7 @@ describe('TypographySettingsManager - Unit Tests', () => { // proxy effect behavior should be tested in E2E tests. it('does NOT immediately update baseSize from control change (effect is async)', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -356,7 +356,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('updates baseSize via direct setter (synchronous)', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -381,7 +381,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -394,7 +394,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('syncs to storage after effect flush (async)', async () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -410,7 +410,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('syncs control changes to storage after effect flush (async)', async () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -423,7 +423,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('syncs height control changes to storage after effect flush (async)', async () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -435,7 +435,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('syncs spacing control changes to storage after effect flush (async)', async () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -449,7 +449,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Control Value Getters', () => { it('returns current weight value', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -461,7 +461,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('returns current height value', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -473,7 +473,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('returns current spacing value', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -486,7 +486,7 @@ describe('TypographySettingsManager - Unit Tests', () => { it('returns default value when control is not found', () => { // Create a manager with empty configs (no controls) - const manager = new TypographySettingsManager([], mockPersistentStore); + const manager = new TypographySettingsStore([], mockPersistentStore); expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT); expect(manager.height).toBe(DEFAULT_LINE_HEIGHT); @@ -504,7 +504,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -537,7 +537,7 @@ describe('TypographySettingsManager - Unit Tests', () => { clear: clearSpy, }; - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -548,7 +548,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('respects multiplier when resetting font size control', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -566,7 +566,7 @@ describe('TypographySettingsManager - Unit Tests', () => { describe('Complex Scenarios', () => { it('handles changing multiplier then modifying baseSize', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -587,7 +587,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('maintains correct renderedSize throughout changes', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -609,7 +609,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles multiple control changes in sequence', async () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -634,7 +634,7 @@ describe('TypographySettingsManager - Unit Tests', () => { mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -646,7 +646,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles very small multiplier', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -659,7 +659,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles large base size with multiplier', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -672,7 +672,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles floating point precision in multiplier', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -691,7 +691,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles control methods (increase/decrease)', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -705,7 +705,7 @@ describe('TypographySettingsManager - Unit Tests', () => { }); it('handles control boundary conditions', () => { - const manager = new TypographySettingsManager( + const manager = new TypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.stories.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.stories.svelte similarity index 100% rename from src/features/SetupFont/ui/TypographyMenu/TypographyMenu.stories.svelte rename to src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.stories.svelte diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte similarity index 100% rename from src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte rename to src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte diff --git a/src/features/SetupFont/ui/index.ts b/src/features/AdjustTypography/ui/index.ts similarity index 100% rename from src/features/SetupFont/ui/index.ts rename to src/features/AdjustTypography/ui/index.ts diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte index 79b4e9c..7b362a4 100644 --- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte +++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte @@ -8,7 +8,7 @@ import { FontApplicator, type UnifiedFont, } from '$entities/Font'; -import { typographySettingsStore } from '$features/SetupFont/model'; +import { typographySettingsStore } from '$features/AdjustTypography/model'; import { Badge, ContentEditable, diff --git a/src/features/SetupFont/index.ts b/src/features/SetupFont/index.ts deleted file mode 100644 index c48f481..0000000 --- a/src/features/SetupFont/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - createTypographySettingsManager, - type TypographySettingsManager, -} from './lib'; -export { typographySettingsStore } from './model'; -export { TypographyMenu } from './ui'; diff --git a/src/features/SetupFont/lib/index.ts b/src/features/SetupFont/lib/index.ts deleted file mode 100644 index a05ed6e..0000000 --- a/src/features/SetupFont/lib/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - createTypographySettingsManager, - type TypographySettingsManager, -} from './settingsManager/settingsManager.svelte'; diff --git a/src/features/SetupFont/model/index.ts b/src/features/SetupFont/model/index.ts deleted file mode 100644 index 204e237..0000000 --- a/src/features/SetupFont/model/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { typographySettingsStore } from './state/typographySettingsStore'; diff --git a/src/features/SetupFont/model/state/typographySettingsStore.ts b/src/features/SetupFont/model/state/typographySettingsStore.ts deleted file mode 100644 index 592b355..0000000 --- a/src/features/SetupFont/model/state/typographySettingsStore.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '$entities/Font'; -import { createTypographySettingsManager } from '../../lib'; - -export const typographySettingsStore = createTypographySettingsManager( - DEFAULT_TYPOGRAPHY_CONTROLS_DATA, - 'glyphdiff:comparison:typography', -); diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts index 812976a..cf19174 100644 --- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts +++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts @@ -21,7 +21,7 @@ import { fontStore, getFontUrl, } from '$entities/Font'; -import { typographySettingsStore } from '$features/SetupFont/model'; +import { typographySettingsStore } from '$features/AdjustTypography/model'; import { createPersistentStore } from '$shared/lib'; import { untrack } from 'svelte'; import { getPretextFontString } from '../../lib'; diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts index 72a3cec..d42686d 100644 --- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts +++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts @@ -71,7 +71,7 @@ vi.mock('$entities/Font', async importOriginal => { }; }); -vi.mock('$features/SetupFont', () => ({ +vi.mock('$features/AdjustTypography', () => ({ DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [], createTypographyControlManager: vi.fn(() => ({ weight: 400, @@ -80,7 +80,7 @@ vi.mock('$features/SetupFont', () => ({ })), })); -vi.mock('$features/SetupFont/model', () => ({ +vi.mock('$features/AdjustTypography/model', () => ({ typographySettingsStore: { weight: 400, renderedSize: 48, diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte index c247f15..7261b16 100644 --- a/src/widgets/ComparisonView/ui/Character/Character.svelte +++ b/src/widgets/ComparisonView/ui/Character/Character.svelte @@ -3,7 +3,7 @@ Renders a single character with morphing animation -->