@x33025/sveltely 0.1.0 → 0.1.2

package/dist/components/Library/ForEach/ForEach.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		children: Snippet<[item: T, index: number]>;
+	};
+
+	let { items, children }: Props = $props();
+</script>
+
+{#each items as item, index}
+	{@render children(item, index)}
+{/each}

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        children: Snippet<[item: T, index: number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ForEach: $$IsomorphicComponent;
+type ForEach<T> = InstanceType<typeof ForEach<T>>;
+export default ForEach;

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

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

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

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

package/dist/components/Library/Grid/Grid.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		columns?: number | string;
+		rows?: number | string;
+		autoRows?: number | string;
+		dense?: boolean;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		columns = 1,
+		rows,
+		autoRows,
+		dense = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const templateColumns = $derived(
+		typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns
+	);
+	const templateRows = $derived(
+		rows === undefined ? undefined : typeof rows === 'number' ? `repeat(${rows}, minmax(0, 1fr))` : rows
+	);
+	const gridAutoRows = $derived(
+		autoRows === undefined ? undefined : typeof autoRows === 'number' ? `${autoRows}rem` : autoRows
+	);
+	const rootStyle = $derived.by(() =>
+		[
+			`grid-template-columns: ${templateColumns};`,
+			templateRows ? `grid-template-rows: ${templateRows};` : '',
+			gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : '',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="grid" class:grid-dense={dense} style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		min-width: 0;
+		min-height: 0;
+		align-items: stretch;
+		gap: var(--grid-gap, 0px);
+		border-radius: var(--grid-border-radius, 0px);
+		padding:
+			var(--grid-padding-y, 0px)
+			var(--grid-padding-x, 0px);
+		font-size: var(--grid-font-size, inherit);
+	}
+
+	.grid-dense {
+		grid-auto-flow: dense;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    columns?: number | string;
+    rows?: number | string;
+    autoRows?: number | string;
+    dense?: boolean;
+} & LayoutProps & StyleProps;
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

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

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

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

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

package/dist/components/Library/GridItem/GridItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		column?: number | string;
+		row?: number | string;
+		columnSpan?: number;
+		rowSpan?: number;
+		area?: string;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		column,
+		row,
+		columnSpan,
+		rowSpan,
+		area,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() =>
+		[
+			column !== undefined ? `grid-column: ${column};` : '',
+			row !== undefined ? `grid-row: ${row};` : '',
+			column === undefined && columnSpan !== undefined
+				? `grid-column: span ${columnSpan} / span ${columnSpan};`
+				: '',
+			row === undefined && rowSpan !== undefined ? `grid-row: span ${rowSpan} / span ${rowSpan};` : '',
+			area !== undefined ? `grid-area: ${area};` : '',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid-item')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="grid-item" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid-item {
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+		border-radius: var(--grid-item-border-radius, 0px);
+		padding:
+			var(--grid-item-padding-y, 0px)
+			var(--grid-item-padding-x, 0px);
+		font-size: var(--grid-item-font-size, inherit);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    column?: number | string;
+    row?: number | string;
+    columnSpan?: number;
+    rowSpan?: number;
+    area?: string;
+} & LayoutProps & StyleProps;
+declare const GridItem: import("svelte").Component<Props, {}, "">;
+type GridItem = ReturnType<typeof GridItem>;
+export default GridItem;

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

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

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

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

package/dist/components/Library/HStack/HStack.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+	} & LayoutProps &
+		StyleProps;
+
+	let { children, ...restProps }: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+	);
+</script>
+
+<div class="hstack" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.hstack {
+		display: flex;
+		min-width: min-content;
+		min-height: min-content;
+		flex-direction: row;
+		gap: var(--stack-gap, 0px);
+		border-radius: var(--stack-border-radius, 0px);
+		padding:
+			var(--stack-padding-y, 0px)
+			var(--stack-padding-x, 0px);
+		font-size: var(--stack-font-size, inherit);
+		--divider-width: 1px;
+		--divider-height: auto;
+		--divider-align-self: stretch;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+} & LayoutProps & StyleProps;
+declare const HStack: import("svelte").Component<Props, {}, "">;
+type HStack = ReturnType<typeof HStack>;
+export default HStack;

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

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

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

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

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Image',
+		description: 'Responsive image display with generated placeholder and busy states.'
+	};
+</script>
+
+<script lang="ts">
+	import Image from './Image.svelte';
+</script>
+
+<Image
+	src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80"
+	alt="Red sneaker"
+	fit="cover"
+	class="aspect-square"
+/>
+<Image busy placeholderKey="image-demo-loading" class="aspect-square" />

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

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Image from './Image.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Image: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Image = InstanceType<typeof Image>;
+export default Image;

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { ImageFit, ImageLoading } from '../../../style/media';
+	import ImagePlaceholder from './ImagePlaceholder.svelte';
+
+	type Props = {
+		src?: string | null;
+		alt?: string;
+		fit?: ImageFit;
+		busy?: boolean;
+		placeholderKey?: string;
+		loading?: ImageLoading;
+		decoding?: HTMLImgAttributes['decoding'];
+		children?: Snippet;
+		class?: string;
+	};
+
+	let {
+		src = null,
+		alt = '',
+		fit = 'contain',
+		busy = false,
+		placeholderKey = 'default',
+		loading = 'lazy',
+		decoding = 'async',
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const showImage = $derived(Boolean(src) && !busy);
+</script>
+
+<div class={`image relative overflow-hidden bg-zinc-100 ${className}`}>
+	{#if showImage}
+		<img
+			{src}
+			{alt}
+			{loading}
+			{decoding}
+			draggable="false"
+			class="absolute inset-0 size-full {fit === 'cover' ? 'object-cover' : 'object-contain'}"
+		/>
+	{:else}
+		<ImagePlaceholder seed={placeholderKey} class="absolute inset-0" />
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.image {
+		border-radius: var(--image-border-radius, var(--sveltely-border-radius));
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { ImageFit, ImageLoading } from '../../../style/media';
+type Props = {
+    src?: string | null;
+    alt?: string;
+    fit?: ImageFit;
+    busy?: boolean;
+    placeholderKey?: string;
+    loading?: ImageLoading;
+    decoding?: HTMLImgAttributes['decoding'];
+    children?: Snippet;
+    class?: string;
+};
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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';