@x33025/sveltely 0.1.1 → 0.1.3

package/dist/components/Library/Image/ImagePlaceholder.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let {
+		class: className = '',
+		seed = 'default'
+	}: {
+		class?: string;
+		seed?: string;
+	} = $props();
+
+	const fps = 24;
+	const scale = 3.2;
+	const speed = 0.18;
+	const contrast = 1.6;
+	let canvas: HTMLCanvasElement | null = null;
+	let context2d: CanvasRenderingContext2D | null = null;
+	let resizeObserver: ResizeObserver | null = null;
+	let animationFrame = 0;
+	let lastUpdate = 0;
+	let startTime = 0;
+	let viewportWidth = 1;
+	let viewportHeight = 1;
+	let devicePixelRatio = 1;
+	let canvasPixelWidth = 0;
+	let canvasPixelHeight = 0;
+
+	function hashString(value: string): number {
+		let hash = 2_166_136_261;
+
+		for (let i = 0; i < value.length; i += 1) {
+			hash ^= value.charCodeAt(i);
+			hash = Math.imul(hash, 16_777_619);
+		}
+
+		return hash >>> 0;
+	}
+
+	const seedValue = $derived(hashString(seed));
+	const seedX = $derived(seedValue % 10_000);
+	const seedY = $derived((seedValue >>> 8) % 10_000);
+	const seedZ = $derived((seedValue >>> 16) % 10_000);
+
+	function fade(t: number): number {
+		return t * t * t * (t * (t * 6 - 15) + 10);
+	}
+
+	function lerp(a: number, b: number, t: number): number {
+		return a + (b - a) * t;
+	}
+
+	function clamp01(value: number): number {
+		return Math.max(0, Math.min(1, value));
+	}
+
+	function hash3D(x: number, y: number, z: number): number {
+		let n = Math.imul(x, 374_761_393) ^ Math.imul(y, 668_265_263) ^ Math.imul(z, 2_147_483_647);
+		n = (n ^ (n >>> 13)) >>> 0;
+		n = Math.imul(n, 1_274_126_177) >>> 0;
+		return ((n ^ (n >>> 16)) >>> 0) / 4_294_967_295;
+	}
+
+	function valueNoise3D(x: number, y: number, z: number): number {
+		const x0 = Math.floor(x);
+		const y0 = Math.floor(y);
+		const z0 = Math.floor(z);
+		const x1 = x0 + 1;
+		const y1 = y0 + 1;
+		const z1 = z0 + 1;
+		const sx = fade(x - x0);
+		const sy = fade(y - y0);
+		const sz = fade(z - z0);
+		const z00 = lerp(hash3D(x0, y0, z0), hash3D(x1, y0, z0), sx);
+		const z10 = lerp(hash3D(x0, y1, z0), hash3D(x1, y1, z0), sx);
+		const z01 = lerp(hash3D(x0, y0, z1), hash3D(x1, y0, z1), sx);
+		const z11 = lerp(hash3D(x0, y1, z1), hash3D(x1, y1, z1), sx);
+		return lerp(lerp(z00, z10, sy), lerp(z01, z11, sy), sz);
+	}
+
+	function fbm3D(x: number, y: number, z: number): number {
+		let total = 0;
+		let amplitude = 0.5;
+		let frequency = 1;
+		let amplitudeSum = 0;
+
+		for (let i = 0; i < 3; i += 1) {
+			total += valueNoise3D(x * frequency, y * frequency, z * frequency) * amplitude;
+			amplitudeSum += amplitude;
+			amplitude *= 0.5;
+			frequency *= 2;
+		}
+
+		return total / amplitudeSum;
+	}
+
+	function updateCanvasDimensions() {
+		if (!canvas) return;
+		const rect = canvas.parentElement?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
+		const dpr = window.devicePixelRatio || 1;
+		devicePixelRatio = dpr;
+		viewportWidth = Math.max(1, rect.width);
+		viewportHeight = Math.max(1, rect.height);
+		const nextCanvasPixelWidth = Math.max(1, Math.round(viewportWidth * dpr));
+		const nextCanvasPixelHeight = Math.max(1, Math.round(viewportHeight * dpr));
+
+		if (
+			nextCanvasPixelWidth === canvasPixelWidth &&
+			nextCanvasPixelHeight === canvasPixelHeight &&
+			context2d
+		) {
+			return;
+		}
+
+		canvasPixelWidth = nextCanvasPixelWidth;
+		canvasPixelHeight = nextCanvasPixelHeight;
+		canvas.width = nextCanvasPixelWidth;
+		canvas.height = nextCanvasPixelHeight;
+		canvas.style.width = `${viewportWidth}px`;
+		canvas.style.height = `${viewportHeight}px`;
+		context2d = canvas.getContext('2d', { alpha: true });
+		context2d?.setTransform(dpr, 0, 0, dpr, 0, 0);
+	}
+
+	function toChannel(value: number, low: number, high: number): number {
+		return Math.round(lerp(low, high, clamp01(value)));
+	}
+
+	function drawFrame(time: number) {
+		if (!context2d) return;
+		context2d.clearRect(0, 0, viewportWidth, viewportHeight);
+
+		const phase = time * speed;
+		const background = context2d.createLinearGradient(0, 0, viewportWidth, viewportHeight);
+		background.addColorStop(0, 'rgb(248 248 249)');
+		background.addColorStop(0.45, 'rgb(241 241 243)');
+		background.addColorStop(1, 'rgb(232 232 235)');
+		context2d.fillStyle = background;
+		context2d.fillRect(0, 0, viewportWidth, viewportHeight);
+
+		const columns = Math.max(10, Math.ceil(viewportWidth / 22));
+		const rows = Math.max(10, Math.ceil(viewportHeight / 22));
+		const cellWidth = viewportWidth / columns;
+		const cellHeight = viewportHeight / rows;
+
+		for (let row = 0; row < rows; row += 1) {
+			for (let col = 0; col < columns; col += 1) {
+				const nx = col / Math.max(1, columns - 1);
+				const ny = row / Math.max(1, rows - 1);
+				const noise = fbm3D(
+					nx * scale + seedX + Math.cos(phase + ny * 2.4) * 0.22,
+					ny * scale + seedY + Math.sin(phase * 1.2 + nx * 2.1) * 0.22,
+					phase + seedZ
+				);
+				const centered = (noise - 0.5) * 2;
+				const remapped = Math.tanh(centered * contrast) * 0.5 + 0.5;
+				const shimmer = 0.5 + 0.5 * Math.sin(phase * 2.2 + nx * 7 + ny * 5);
+				const grayscale = toChannel(remapped * 0.8 + shimmer * 0.2, 148, 248);
+				const x = col * cellWidth;
+				const y = row * cellHeight;
+
+				context2d.fillStyle = `rgb(${grayscale} ${grayscale} ${grayscale})`;
+				context2d.fillRect(x, y, cellWidth, cellHeight);
+				context2d.strokeStyle = 'rgba(255 255 255 / 0.36)';
+				context2d.lineWidth = 1 / devicePixelRatio;
+				context2d.strokeRect(
+					x + 0.5 / devicePixelRatio,
+					y + 0.5 / devicePixelRatio,
+					Math.max(0, cellWidth - 1 / devicePixelRatio),
+					Math.max(0, cellHeight - 1 / devicePixelRatio)
+				);
+			}
+		}
+	}
+
+	function tick(timestamp: number) {
+		if (startTime === 0) startTime = timestamp;
+		if (timestamp - lastUpdate >= 1000 / fps) {
+			drawFrame((timestamp - startTime) / 1000);
+			lastUpdate = timestamp;
+		}
+		animationFrame = requestAnimationFrame(tick);
+	}
+
+	onMount(() => {
+		updateCanvasDimensions();
+		resizeObserver = new ResizeObserver(() => {
+			updateCanvasDimensions();
+			drawFrame((performance.now() - startTime) / 1000);
+		});
+		if (canvas?.parentElement) resizeObserver.observe(canvas.parentElement);
+		animationFrame = requestAnimationFrame(tick);
+		window.addEventListener('resize', updateCanvasDimensions);
+
+		return () => {
+			cancelAnimationFrame(animationFrame);
+			resizeObserver?.disconnect();
+			window.removeEventListener('resize', updateCanvasDimensions);
+		};
+	});
+</script>
+
+<canvas bind:this={canvas} class={`block size-full ${className}`}></canvas>

package/dist/components/Library/Image/ImagePlaceholder.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+    seed?: string;
+};
+declare const ImagePlaceholder: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImagePlaceholder = ReturnType<typeof ImagePlaceholder>;
+export default ImagePlaceholder;

package/dist/components/Library/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Image.svelte';

package/dist/components/Library/Image/index.js

@@ -0,0 +1 @@
+export { default } from './Image.svelte';

package/dist/components/Library/ImageMask/BrushPreview.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { MaskPoint, MaskTool } from './types';
+
+	let {
+		point = null,
+		visible = false,
+		brushSize = 24,
+		tool = 'paint',
+		sizeLabelVisible = false
+	}: {
+		point?: MaskPoint | null;
+		visible?: boolean;
+		brushSize?: number;
+		tool?: MaskTool;
+		sizeLabelVisible?: boolean;
+	} = $props();
+
+	const brushPreviewStyle = $derived.by(() => {
+		if (!point) return '';
+		return [
+			`width: ${brushSize}px;`,
+			`height: ${brushSize}px;`,
+			`transform: translate(${point.x - brushSize / 2}px, ${point.y - brushSize / 2}px);`
+		].join(' ');
+	});
+	const brushSizeLabel = $derived(`${Math.round(brushSize)}px`);
+	const brushSizePreviewStyle = $derived(`width: ${brushSize}px; height: ${brushSize}px;`);
+</script>
+
+{#if visible && point}
+	<div
+		class="brush-preview"
+		class:brush-preview-erase={tool === 'erase'}
+		style={brushPreviewStyle}
+	></div>
+{/if}
+
+{#if sizeLabelVisible}
+	<div
+		class="brush-size-preview"
+		class:brush-size-preview-erase={tool === 'erase'}
+		aria-hidden="true"
+	>
+		<div class="brush-size-preview-circle" style={brushSizePreviewStyle}></div>
+		<span class="brush-size-preview-label">{brushSizeLabel}</span>
+	</div>
+{/if}
+
+<style>
+	.brush-preview {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 11;
+		box-sizing: border-box;
+		pointer-events: none;
+		border: 1.5px solid rgb(255 255 255 / 0.95);
+		border-radius: 9999px;
+		background: color-mix(in oklab, var(--sveltely-active-color) 16%, transparent);
+		box-shadow:
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 90%, transparent),
+			0 1px 4px rgb(0 0 0 / 0.22);
+		will-change: transform, width, height;
+	}
+
+	.brush-preview-erase {
+		background: rgb(255 255 255 / 0.18);
+		box-shadow:
+			0 0 0 1px rgb(24 24 27 / 0.8),
+			0 1px 4px rgb(0 0 0 / 0.22);
+	}
+
+	.brush-size-preview {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		z-index: 12;
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		pointer-events: none;
+		transform: translate(-50%, -50%);
+	}
+
+	.brush-size-preview-circle {
+		box-sizing: border-box;
+		border-radius: 9999px;
+		border: 1.5px solid rgb(255 255 255 / 0.95);
+		background: color-mix(in oklab, var(--sveltely-active-color) 20%, transparent);
+		box-shadow:
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 95%, transparent),
+			0 8px 24px rgb(0 0 0 / 0.24);
+	}
+
+	.brush-size-preview-label {
+		border-radius: 9999px;
+		background: rgb(255 255 255 / 0.88);
+		color: var(--sveltely-primary-color);
+		font-size: 0.75rem;
+		font-weight: 650;
+		line-height: 1;
+		padding: 0.25rem 0.375rem;
+		box-shadow: 0 1px 6px rgb(0 0 0 / 0.16);
+		text-shadow:
+			0 1px 0 rgb(255 255 255 / 0.9),
+			0 -1px 0 rgb(255 255 255 / 0.9),
+			1px 0 0 rgb(255 255 255 / 0.9),
+			-1px 0 0 rgb(255 255 255 / 0.9);
+	}
+
+	.brush-size-preview-erase .brush-size-preview-circle {
+		background: rgb(255 255 255 / 0.2);
+		box-shadow:
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 85%, transparent),
+			0 8px 24px rgb(0 0 0 / 0.24);
+	}
+</style>

package/dist/components/Library/ImageMask/BrushPreview.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MaskPoint, MaskTool } from './types';
+type $$ComponentProps = {
+    point?: MaskPoint | null;
+    visible?: boolean;
+    brushSize?: number;
+    tool?: MaskTool;
+    sizeLabelVisible?: boolean;
+};
+declare const BrushPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type BrushPreview = ReturnType<typeof BrushPreview>;
+export default BrushPreview;

package/dist/components/Library/ImageMask/ImageMask.demo.svelte

@@ -0,0 +1,117 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ImageMask',
+		description: 'Image mask editor that exposes the exported mask through bind:mask.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { Brush, Eraser, X } from '@lucide/svelte';
+	import Slider from '../Slider';
+	import ImageMask from './ImageMask.svelte';
+	import type { ImageMaskValue, MaskTool } from './types';
+
+	let mask = $state<ImageMaskValue | null>(null);
+	let brushSize = $state(24);
+	let tool = $state<MaskTool>('paint');
+	let clearRevision = $state(0);
+</script>
+
+<div class="grid items-start gap-3 md:grid-cols-[minmax(0,18rem)_minmax(8rem,1fr)]">
+	<ImageMask
+		src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=700&q=80"
+		alt="Red sneaker"
+		bind:mask
+		bind:brushSize
+		bind:tool
+		bind:clearRevision
+		fit="cover"
+		class="aspect-square"
+	/>
+	<div class="vstack gap-2 text-sm text-[var(--sveltely-secondary-color)]">
+		<div class="font-medium text-[var(--sveltely-primary-color)]">Mask</div>
+		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
+			{#if mask}
+				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
+			{/if}
+		</div>
+		<label class="vstack gap-2 bg-white p-3">
+			<span class="font-medium text-[var(--sveltely-primary-color)]">Brush size {brushSize}px</span>
+			<Slider bind:value={brushSize} min={6} max={72} step={1} />
+			<div class="image-mask-controls">
+				<button
+					type="button"
+					class:active={tool === 'paint'}
+					aria-label="Paint mask"
+					onclick={() => {
+						tool = 'paint';
+					}}
+				>
+					<Brush size={16} />
+				</button>
+				<button
+					type="button"
+					class:active={tool === 'erase'}
+					aria-label="Erase mask"
+					disabled={!mask}
+					onclick={() => {
+						tool = 'erase';
+					}}
+				>
+					<Eraser size={16} />
+				</button>
+				<div class="h-5 w-px bg-zinc-200"></div>
+				<button
+					type="button"
+					aria-label="Clear mask"
+					disabled={!mask}
+					onclick={() => {
+						mask = null;
+						clearRevision += 1;
+						tool = 'paint';
+					}}
+				>
+					<X size={16} />
+				</button>
+			</div>
+		</label>
+	</div>
+</div>
+
+<style>
+	.image-mask-controls {
+		display: inline-flex;
+		width: fit-content;
+		align-items: center;
+		gap: 0.25rem;
+		background: var(--sveltely-background-color);
+		padding: 0.25rem;
+	}
+
+	.image-mask-controls button {
+		display: inline-flex;
+		width: 2rem;
+		height: 2rem;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		color: var(--sveltely-secondary-color);
+		transition:
+			background-color 150ms,
+			color 150ms,
+			opacity 150ms;
+	}
+
+	.image-mask-controls button:hover:not(:disabled),
+	.image-mask-controls button.active {
+		background: var(--sveltely-active-color);
+		color: var(--sveltely-background-color);
+	}
+
+	.image-mask-controls button:disabled {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}
+</style>

package/dist/components/Library/ImageMask/ImageMask.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import ImageMask from './ImageMask.svelte';
+declare const ImageMask: import("svelte").Component<Record<string, never>, {}, "">;
+type ImageMask = ReturnType<typeof ImageMask>;
+export default ImageMask;

package/dist/components/Library/ImageMask/ImageMask.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Image from '../Image';
+	import type { ImageFit, ImageLoading } from '../../../style/media';
+	import MaskLayer from './MaskLayer.svelte';
+	import type { ImageMaskValue, MaskTool } from './types';
+
+	let {
+		src = null,
+		alt = '',
+		mask = $bindable<ImageMaskValue | null>(null),
+		fit = 'contain',
+		busy = false,
+		disabled = false,
+		placeholderKey = 'default',
+		loading = 'lazy',
+		brushSize = $bindable(24),
+		tool = $bindable<MaskTool>('paint'),
+		clearRevision = $bindable(0),
+		exportSize = 2048,
+		class: className = ''
+	}: {
+		src?: string | null;
+		alt?: string;
+		mask?: ImageMaskValue | null;
+		fit?: ImageFit;
+		busy?: boolean;
+		disabled?: boolean;
+		placeholderKey?: string;
+		loading?: ImageLoading;
+		brushSize?: number;
+		tool?: MaskTool;
+		clearRevision?: number;
+		exportSize?: number;
+		class?: string;
+	} = $props();
+
+	const canEdit = $derived(Boolean(src) && !busy && !disabled);
+</script>
+
+<div class={`image-mask relative ${className}`}>
+	<Image {src} {alt} {fit} {busy} {placeholderKey} {loading} class="size-full">
+		{#if canEdit}
+			<MaskLayer bind:mask {tool} {brushSize} {exportSize} {disabled} {clearRevision} />
+		{/if}
+	</Image>
+</div>

package/dist/components/Library/ImageMask/ImageMask.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ImageFit, ImageLoading } from '../../../style/media';
+import type { ImageMaskValue, MaskTool } from './types';
+type $$ComponentProps = {
+    src?: string | null;
+    alt?: string;
+    mask?: ImageMaskValue | null;
+    fit?: ImageFit;
+    busy?: boolean;
+    disabled?: boolean;
+    placeholderKey?: string;
+    loading?: ImageLoading;
+    brushSize?: number;
+    tool?: MaskTool;
+    clearRevision?: number;
+    exportSize?: number;
+    class?: string;
+};
+declare const ImageMask: import("svelte").Component<$$ComponentProps, {}, "mask" | "brushSize" | "tool" | "clearRevision">;
+type ImageMask = ReturnType<typeof ImageMask>;
+export default ImageMask;