Ilia Mashkov
fcd61be4fa
FontApplicator and FontSampler no longer read fontLifecycleManager. They take a `status` prop (FontLoadStatus | undefined) supplied by the composing widget; FontList and SampleList resolve status once per visible row and pass it down. FSD+ dependency inversion: the entity/feature UI depends on a value, not the lifecycle store. Removes FontApplicator's value-import of the store (one step toward an inert ./ui barrel) and drops the duplicate getFontStatus read per row in FontList. FontSampler is now status-decoupled and trivially relocatable to entities/Font/ui.
63 lines
1.6 KiB
Svelte
63 lines
1.6 KiB
Svelte
<!--
|
|
Component: FontApplicator
|
|
Applies a font to its children once the font file is loaded.
|
|
Shows the skeleton snippet while loading; falls back to system font if no skeleton is provided.
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/lib';
|
|
import type { Snippet } from 'svelte';
|
|
import type {
|
|
FontLoadStatus,
|
|
UnifiedFont,
|
|
} from '../../model/types';
|
|
|
|
interface Props {
|
|
/**
|
|
* Font to apply
|
|
*/
|
|
font: UnifiedFont;
|
|
/**
|
|
* Current load status for this font, supplied by the composing layer.
|
|
* Kept out of the component so it does not depend on (and import) the
|
|
* lifecycle store — the owning widget reads the manager and passes the
|
|
* resolved status down. `undefined` means the font is not tracked yet and
|
|
* is treated as not-yet-revealed (skeleton / system-font fallback).
|
|
*/
|
|
status: FontLoadStatus | undefined;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children?: Snippet;
|
|
/**
|
|
* Shown while the font file is loading.
|
|
* When omitted, children render in system font until ready.
|
|
*/
|
|
skeleton?: Snippet;
|
|
}
|
|
|
|
let {
|
|
font,
|
|
status,
|
|
className,
|
|
children,
|
|
skeleton,
|
|
}: Props = $props();
|
|
|
|
const shouldReveal = $derived(status === 'loaded' || status === 'error');
|
|
</script>
|
|
|
|
{#if !shouldReveal && skeleton}
|
|
{@render skeleton()}
|
|
{:else}
|
|
<div
|
|
style:font-family={shouldReveal ? `'${font.name}'` : 'system-ui, -apple-system, sans-serif'}
|
|
class={cn(className)}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
{/if}
|