svelte-kit-vice/src/uix/eidos/components/float/float.svelte

<script lang="ts">
	import './float.css';
	/**
	 * Eidos `<Float>` — pulls its child to the start or end of the text
	 * flow so adjacent inline content wraps around it. Composes through
	 * `<Box>` and writes a `--float-side` / `--float-gap` pair that the
	 * recipe consumes via `float: inline-{start | end}` + a logical
	 * margin against the text. Typical uses: inline images, pull-quotes,
	 * drop caps.
	 *
	 *   <p>
	 *     <Float side="start" maxWidth={120}>
	 *       <img src="…" alt="…" />
	 *     </Float>
	 *     Long paragraph that wraps around the float…
	 *   </p>
	 */
	import { ActiveEidos } from '$uix/eidos';
	import Box from '../box/box.svelte';
	import { composeStyle, formatLayoutSpace, pushStyleVar } from '$uix/eidos/lib/layout-helpers';
	import type { FloatProps } from './types';

	let {
		side = 'start',
		gap = 3,
		style,
		class: className,
		children,
		...restProps
	}: FloatProps = $props();

	const eidos = ActiveEidos.require();

	const resolvedSide = $derived(eidos.resolve(side) ?? 'start');
	const resolvedStyle = $derived.by(() => {
		const decls: string[] = [];
		pushStyleVar(decls, '--float-gap', formatLayoutSpace(eidos.resolve(gap)));
		return composeStyle(decls, style);
	});
</script>

<Box
	{...restProps}
	class={className}
	style={resolvedStyle}
	data-float=""
	data-side={resolvedSide}
>
	{@render children?.()}
</Box>