fundus 0.12.2 → 0.14.0

package/dist/runtime/components/SliceDom.svelte

@@ -1,161 +0,0 @@
-<!--
-	DOM slice backend using the entry-based API: the slicing arrives inline on the
-	`SliceManifestEntry` (no registry, no manifest lookup). One component covers
-	all modes (nine / three-horizontal / three-vertical / one) — the mode lives
-	in the entry. Private: hosts render `Slice.svelte`, which dispatches between
-	this and the canvas backend.
-
-	Fills its container and measures it (ResizeObserver), then paints the complete
-	slice through one CSS border-image. The browser still stretches the same source
-	regions computed by `computeRenderCells`, but rasterizes them as one border
-	image instead of separate clipped elements. Shared slice edges therefore cannot
-	expose the background under fractional transforms.
-	With overdraw the paint element extends past the container (negative offsets),
-	so the root switches to overflow: visible and the baked shadow/glow draws
-	outside the layout box.
--->
-<script lang="ts">
-	import type { SliceInsets, SliceManifestEntry } from '../../core/index.js';
-	import { computeRenderCells, effectiveInsets, effectiveOverdraw } from '../geometry.js';
-	import { observeBorderBoxSize } from '../observe-border-box-size.js';
-	import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-
-	interface Props {
-		snapshot: LoadedSliceSnapshot | null;
-		/** Accessible label for the rendered graphic. */
-		alt?: string;
-		class?: string;
-	}
-
-	let { snapshot, alt = '', class: className = '' }: Props = $props();
-
-	let root = $state<HTMLDivElement>();
-	let boxWidth = $state(0);
-	let boxHeight = $state(0);
-
-	interface BorderImagePaint {
-		left: number;
-		top: number;
-		width: number;
-		height: number;
-		slices: SliceInsets;
-		widths: SliceInsets;
-	}
-
-	function clamp(value: number, min: number, max: number): number {
-		return Math.max(min, Math.min(max, value));
-	}
-
-	function computeBorderImagePaint(
-		entry: SliceManifestEntry,
-		width: number,
-		height: number
-	): BorderImagePaint | null {
-		const cells = computeRenderCells(entry, width, height);
-		if (cells.length === 0) return null;
-
-		const effective = effectiveInsets(entry);
-		const leftSlice = clamp(effective.left, 0, entry.sourceWidth);
-		const rightSlice = clamp(effective.right, 0, entry.sourceWidth - leftSlice);
-		const topSlice = clamp(effective.top, 0, entry.sourceHeight);
-		const bottomSlice = clamp(effective.bottom, 0, entry.sourceHeight - topSlice);
-		const slices = {
-			top: topSlice,
-			right: rightSlice,
-			bottom: bottomSlice,
-			left: leftSlice
-		};
-		const left = Math.min(...cells.map((cell) => cell.dx));
-		const top = Math.min(...cells.map((cell) => cell.dy));
-		const right = Math.max(...cells.map((cell) => cell.dx + cell.dw));
-		const bottom = Math.max(...cells.map((cell) => cell.dy + cell.dh));
-
-		return {
-			left,
-			top,
-			width: right - left,
-			height: bottom - top,
-			slices,
-			widths: {
-				top: cells.find((cell) => topSlice > 0 && cell.sy === 0 && cell.sh === topSlice)?.dh ?? 0,
-				right:
-					cells.find(
-						(cell) =>
-							rightSlice > 0 && cell.sx === entry.sourceWidth - rightSlice && cell.sw === rightSlice
-					)?.dw ?? 0,
-				bottom:
-					cells.find(
-						(cell) =>
-							bottomSlice > 0 &&
-							cell.sy === entry.sourceHeight - bottomSlice &&
-							cell.sh === bottomSlice
-					)?.dh ?? 0,
-				left: cells.find((cell) => leftSlice > 0 && cell.sx === 0 && cell.sw === leftSlice)?.dw ?? 0
-			}
-		};
-	}
-
-	$effect(() => {
-		const element = root;
-		if (!element) return;
-		return observeBorderBoxSize(element, (width, height) => {
-			boxWidth = width;
-			boxHeight = height;
-		});
-	});
-
-	const entry = $derived(snapshot?.entry ?? null);
-	const paint = $derived(entry ? computeBorderImagePaint(entry, boxWidth, boxHeight) : null);
-	const hasOverdraw = $derived.by(() => {
-		if (!entry) return false;
-		const overdraw = effectiveOverdraw(entry);
-		return overdraw.top > 0 || overdraw.right > 0 || overdraw.bottom > 0 || overdraw.left > 0;
-	});
-</script>
-
-<div
-	bind:this={root}
-	class="fundus-slice {className}"
-	class:fundus-slice--overdraw={hasOverdraw}
-	role={alt ? 'img' : undefined}
-	aria-label={alt || undefined}
->
-	{#if entry && paint}
-		<div
-			class="fundus-slice__paint"
-			style:left="{paint.left}px"
-			style:top="{paint.top}px"
-			style:width="{paint.width}px"
-			style:height="{paint.height}px"
-			style:border-image-source={`url(${JSON.stringify(entry.src)})`}
-			style:border-image-slice={`${paint.slices.top} ${paint.slices.right} ${paint.slices.bottom} ${paint.slices.left} fill`}
-			style:border-image-width={`${paint.widths.top}px ${paint.widths.right}px ${paint.widths.bottom}px ${paint.widths.left}px`}
-		></div>
-	{/if}
-</div>
-
-<style>
-	.fundus-slice {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	/* Overdraw deliberately extends the paint past the box — don't clip it. */
-	.fundus-slice--overdraw {
-		overflow: visible;
-	}
-
-	.fundus-slice__paint {
-		position: absolute;
-		box-sizing: border-box;
-		border-width: 0;
-		border-style: solid;
-		border-image-repeat: stretch;
-		pointer-events: none;
-		/* Offload to the GPU so border-image edges don't pop as hairlines under
-		   fractional transforms. */
-		will-change: transform;
-	}
-</style>

package/dist/runtime/components/SliceDom.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
-interface Props {
-    snapshot: LoadedSliceSnapshot | null;
-    /** Accessible label for the rendered graphic. */
-    alt?: string;
-    class?: string;
-}
-declare const SliceDom: import("svelte").Component<Props, {}, "">;
-type SliceDom = ReturnType<typeof SliceDom>;
-export default SliceDom;