@x33025/sveltely 0.1.24 → 0.1.28

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

@@ -1,15 +1,30 @@
-<script lang="ts">
+<script lang="ts" generics="T">
 	import type { Snippet } from 'svelte';
 	import { loader as loaderAction } from '../../../actions/loader';
 	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import {
+		fixedGridLayout,
+		type LayoutKey,
+		type ViewportGeometry,
+		type ViewportOverscan
+	} from '../../../viewport';
+	import ScrollView from '../ScrollView';
 
 	type Props = {
 		children?: Snippet;
+		items?: T[];
+		item?: Snippet<[item: T, index: number]>;
 		columns?: number | string;
 		rows?: number | string;
 		autoRows?: number | string;
+		columnWidth?: number;
+		rowHeight?: number;
+		columnGap?: number;
+		rowGap?: number;
+		overscan?: ViewportOverscan;
+		key?: LayoutKey<T>;
 		dense?: boolean;
 	} & LayoutProps &
 		StyleProps &
@@ -17,9 +32,17 @@
 
 	let {
 		children,
+		items,
+		item,
 		columns = 1,
 		rows,
 		autoRows,
+		columnWidth,
+		rowHeight,
+		columnGap = 0,
+		rowGap = 0,
+		overscan = 0,
+		key,
 		dense = false,
 		...restProps
 	}: Props & Record<string, unknown> = $props();
@@ -47,8 +70,26 @@
 	const gridAutoRows = $derived(
 		autoRows === undefined ? undefined : typeof autoRows === 'number' ? `${autoRows}rem` : autoRows
 	);
+	const engineEnabled = $derived(
+		items !== undefined &&
+			item !== undefined &&
+			typeof columns === 'number' &&
+			columnWidth !== undefined &&
+			rowHeight !== undefined
+	);
 	const rootStyle = $derived.by(() =>
 		[
+			'display: grid;',
+			'width: 100%;',
+			'min-width: 0;',
+			'min-height: 100%;',
+			'align-self: stretch;',
+			'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);',
+			dense ? 'grid-auto-flow: dense;' : '',
 			`grid-template-columns: ${templateColumns};`,
 			templateRows ? `grid-template-rows: ${templateRows};` : '',
 			gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : '',
@@ -58,35 +99,88 @@
 			.filter(Boolean)
 			.join(' ')
 	);
+	const engineRootStyle = $derived.by(() =>
+		[
+			'width: 100%;',
+			'height: 100%;',
+			'min-width: 0;',
+			'min-height: 0;',
+			'align-self: stretch;',
+			'border-radius: var(--grid-border-radius, 0px);',
+			'font-size: var(--grid-font-size, inherit);',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+	let viewport = $state<ViewportGeometry>({
+		offset: { x: 0, y: 0 },
+		viewport: { width: 0, height: 0 }
+	});
+	const engineLayout = $derived.by(() =>
+		engineEnabled
+			? fixedGridLayout({
+					items: items ?? [],
+					viewport,
+					columnWidth: columnWidth ?? 1,
+					rowHeight: rowHeight ?? 1,
+					columns: typeof columns === 'number' ? columns : 1,
+					columnGap,
+					rowGap,
+					overscan,
+					key
+				})
+			: { content: { width: 0, height: 0 }, visible: [] }
+	);
+	const updateViewport = (geometry: {
+		offset: { x: number; y: number };
+		viewport: { width: number; height: number };
+	}) => {
+		viewport = {
+			offset: geometry.offset,
+			viewport: geometry.viewport
+		};
+	};
 </script>
 
-<div
-	class="grid"
-	class:grid-dense={dense}
-	style={rootStyle}
-	{...forwardedProps}
-	use:loaderAction={loaderOptions}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+{#if engineEnabled}
+	<div style={engineRootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
+		{#snippet layout()}
+			{#each engineLayout.visible as placed (placed.key)}
+				<div
+					class="grid-engine-item"
+					style:width={`${placed.rect.width}px`}
+					style:height={`${placed.rect.height}px`}
+					style:transform={`translate3d(${placed.rect.x}px, ${placed.rect.y}px, 0)`}
+				>
+					{@render item?.(placed.item, placed.index)}
+				</div>
+			{/each}
+		{/snippet}
+
+		<ScrollView
+			axis="both"
+			contentSize={engineLayout.content}
+			contentStyles={{ paddingX: 0, paddingY: 0 }}
+			onScroll={updateViewport}
+			{layout}
+		/>
+	</div>
+{:else}
+	<div style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}
 
 <style>
-	.grid {
-		display: grid;
-		width: 100%;
+	.grid-engine-item {
+		position: absolute;
+		left: 0;
+		top: 0;
 		min-width: 0;
-		min-height: 100%;
-		align-self: stretch;
-		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;
+		min-height: 0;
 	}
 </style>

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

@@ -2,14 +2,42 @@ import type { Snippet } from 'svelte';
 import { type LoaderProps } from '../../../style/loader';
 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 & LoaderProps;
-type $$ComponentProps = Props & Record<string, unknown>;
-declare const Grid: import("svelte").Component<$$ComponentProps, {}, "">;
-type Grid = ReturnType<typeof Grid>;
+import { type LayoutKey, type ViewportOverscan } from '../../../viewport';
+declare function $$render<T>(): {
+    props: {
+        children?: Snippet;
+        items?: T[];
+        item?: Snippet<[item: T, index: number]>;
+        columns?: number | string;
+        rows?: number | string;
+        autoRows?: number | string;
+        columnWidth?: number;
+        rowHeight?: number;
+        columnGap?: number;
+        rowGap?: number;
+        overscan?: ViewportOverscan;
+        key?: LayoutKey<T>;
+        dense?: boolean;
+    } & LayoutProps & StyleProps & LoaderProps & Record<string, unknown>;
+    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 Grid: $$IsomorphicComponent;
+type Grid<T> = InstanceType<typeof Grid<T>>;
 export default Grid;

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

@@ -38,6 +38,13 @@
 	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[
+			'width: 100%;',
+			'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);',
 			column !== undefined ? `grid-column: ${column};` : '',
 			row !== undefined ? `grid-row: ${row};` : '',
 			column === undefined && columnSpan !== undefined
@@ -55,20 +62,8 @@
 	);
 </script>
 
-<div class="grid-item" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
+<div style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
 </div>
-
-<style>
-	.grid-item {
-		width: 100%;
-		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/Image/Image.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+	const loadedImageSources = new Set<string>();
+</script>
+
 <script lang="ts">
 	import { ImageOffIcon } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
@@ -29,12 +33,28 @@
 
 	let imageLoaded = $state(false);
 	let imageFailed = $state(false);
+	let imageElement = $state<HTMLImageElement | null>(null);
+	let previousSrc = $state<string | null>(null);
 
 	$effect(() => {
-		src;
-		busy;
-		imageLoaded = false;
+		const nextSrc = src ?? null;
+		if (nextSrc === previousSrc) return;
+
+		previousSrc = nextSrc;
 		imageFailed = false;
+		imageLoaded = nextSrc ? loadedImageSources.has(nextSrc) : false;
+	});
+
+	const markImageLoaded = (loadedSrc: string | null | undefined) => {
+		if (loadedSrc) loadedImageSources.add(loadedSrc);
+		imageLoaded = true;
+	};
+
+	$effect(() => {
+		if (!imageElement || !src || imageLoaded || imageFailed) return;
+		if (imageElement.complete && imageElement.naturalWidth > 0) {
+			markImageLoaded(src);
+		}
 	});
 
 	const canRenderImage = $derived(Boolean(src) && !busy && !imageFailed);
@@ -53,6 +73,7 @@
 >
 	{#if canRenderImage}
 		<img
+			bind:this={imageElement}
 			{src}
 			{alt}
 			{loading}
@@ -63,7 +84,7 @@
 				: 'object-contain'} {imageLoaded
 				? 'opacity-100'
 				: 'opacity-0'} transition-opacity duration-150"
-			onload={() => (imageLoaded = true)}
+			onload={() => markImageLoaded(src)}
 			onerror={() => (imageFailed = true)}
 		/>
 	{/if}

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

@@ -21,7 +21,7 @@
 	let clearRevision = $state(0);
 </script>
 
-<Grid columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))" align="start" gap={7.5}>
+<Grid columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))" gap={7.5}>
 	<ImageMask
 		src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=700&q=80"
 		alt="Red sneaker"

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

@@ -19,7 +19,7 @@
 	let enabled = $state(true);
 </script>
 
-<HStack gap={10} align="center">
+<HStack gap={10}>
 	<Label label="Name" icon={UserIcon} orientation="top">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>

package/dist/components/Library/Label/Label.svelte

@@ -23,14 +23,10 @@
 		iconSize,
 		iconColor,
 		orientation = 'top',
+		grow,
+		fit,
 		width,
 		height,
-		minWidth,
-		minHeight,
-		maxWidth,
-		maxHeight,
-		align,
-		justify,
 		fontSize,
 		paddingX,
 		paddingY,
@@ -44,14 +40,10 @@
 	}: Props = $props();
 
 	const layoutProps = $derived({
+		grow,
+		fit,
 		width,
-		height,
-		minWidth,
-		minHeight,
-		maxWidth,
-		maxHeight,
-		align,
-		justify
+		height
 	});
 	const styleProps = $derived({
 		fontSize,

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

@@ -0,0 +1,63 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Notifications',
+		description: 'Animated notification stack driven by an items array.',
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Button from '../Button';
+	import HStack from '../HStack';
+	import VStack from '../VStack';
+	import Notifications, { type NotificationItem } from './index';
+
+	const tones: NotificationItem['tone'][] = ['info', 'success', 'warning'];
+
+	let nextId = 3;
+	let items = $state<NotificationItem[]>([
+		{
+			id: 1,
+			title: 'Build complete',
+			message: 'The package finished compiling.',
+			tone: 'success'
+		},
+		{
+			id: 2,
+			title: 'New deploy queued',
+			message: 'Production will update after checks pass.',
+			tone: 'info'
+		}
+	]);
+
+	function addNotification() {
+		const id = nextId++;
+		const tone = tones[id % tones.length];
+		items = [
+			{
+				id,
+				title: `Notification ${id}`,
+				message: 'Inserted at the top of the array.',
+				tone
+			},
+			...items
+		].slice(0, 4);
+	}
+
+	function clearNotifications() {
+		items = [];
+	}
+</script>
+
+<VStack width="100%" gap={7.5}>
+	<HStack gap={5}>
+		<Button label="Add" onclick={addNotification} />
+		<Button label="Clear" onclick={clearNotifications} />
+	</HStack>
+
+	<Notifications bind:items width="100%" animationDuration={220}>
+		{#snippet empty()}
+			No notifications
+		{/snippet}
+	</Notifications>
+</VStack>

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

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

package/dist/components/Library/Notifications/Notifications.svelte

@@ -0,0 +1,155 @@
+<script lang="ts" generics="TItem extends NotificationItem = NotificationItem">
+	import type { Snippet } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { fade, fly } from 'svelte/transition';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { NotificationItem } from './types';
+
+	type Props = {
+		items?: TItem[];
+		children?: Snippet<[TItem, number]>;
+		empty?: Snippet;
+		key?: (item: TItem, index: number) => string | number;
+		animationDuration?: number;
+	} & LayoutProps &
+		StyleProps &
+		Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+
+	let {
+		items = $bindable<TItem[]>([]),
+		children,
+		empty,
+		key,
+		animationDuration = 180,
+		...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 forwardedProps = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'notifications')].filter(Boolean).join(' ')
+	);
+
+	function itemKey(item: TItem, index: number) {
+		return key?.(item, index) ?? item.id ?? index;
+	}
+
+	function itemTitle(item: TItem) {
+		return item.title ?? String(item.id ?? 'Notification');
+	}
+
+	function itemMessage(item: TItem) {
+		return item.message ?? item.description ?? '';
+	}
+</script>
+
+<div class="notifications" style={rootStyle} {...forwardedProps}>
+	{#each items as item, index (itemKey(item, index))}
+		<div
+			class="notification"
+			data-tone={item.tone ?? 'default'}
+			in:fly={{ y: -8, duration: animationDuration }}
+			out:fade={{ duration: animationDuration * 0.75 }}
+			animate:flip={{ duration: animationDuration }}
+		>
+			{#if children}
+				{@render children(item, index)}
+			{:else}
+				<p class="notification-title">{itemTitle(item)}</p>
+				{#if itemMessage(item)}
+					<p class="notification-message">{itemMessage(item)}</p>
+				{/if}
+			{/if}
+		</div>
+	{:else}
+		{#if empty}
+		<div class="notifications-empty">
+			{@render empty()}
+		</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.notifications {
+		--notifications-font-size: var(--sveltely-font-size);
+		--notifications-padding-x: 0px;
+		--notifications-padding-y: 0px;
+		--notifications-gap: var(--sveltely-gap);
+		--notifications-border-radius: var(--sveltely-border-radius);
+		display: inline-flex;
+		min-width: 0;
+		min-height: 0;
+		flex-direction: column;
+		align-items: stretch;
+		gap: var(--notifications-gap);
+		border-radius: var(--notifications-border-radius);
+		padding: var(--notifications-padding-y) var(--notifications-padding-x);
+		font-size: var(--notifications-font-size);
+	}
+
+	.notification {
+		position: relative;
+		min-width: min(100%, 16rem);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--sveltely-background-color);
+		box-shadow: var(--sveltely-shadow);
+		color: var(--sveltely-text-primary-color);
+		padding: calc(var(--sveltely-padding-y) * 0.83) var(--sveltely-padding-x);
+		overflow: hidden;
+	}
+
+	.notification::before {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: 3px;
+		background: var(--notification-accent, var(--sveltely-control-active-color));
+		content: '';
+	}
+
+	.notification[data-tone='info'] {
+		--notification-accent: #2563eb;
+	}
+
+	.notification[data-tone='success'] {
+		--notification-accent: #16a34a;
+	}
+
+	.notification[data-tone='warning'] {
+		--notification-accent: #d97706;
+	}
+
+	.notification[data-tone='danger'] {
+		--notification-accent: #dc2626;
+	}
+
+	.notification-title,
+	.notification-message {
+		margin: 0;
+	}
+
+	.notification-title {
+		font-weight: 600;
+		line-height: 1.35;
+	}
+
+	.notification-message {
+		margin-top: 0.125rem;
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.875em;
+		line-height: 1.45;
+	}
+
+	.notifications-empty {
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.875em;
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+import type { NotificationItem } from './types';
+declare function $$render<TItem extends NotificationItem = NotificationItem>(): {
+    props: {
+        items?: TItem[];
+        children?: Snippet<[TItem, number]>;
+        empty?: Snippet;
+        key?: (item: TItem, index: number) => string | number;
+        animationDuration?: number;
+    } & LayoutProps & StyleProps & Omit<HTMLAttributes<HTMLDivElement>, "style" | "class" | "children">;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends NotificationItem = NotificationItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends NotificationItem = NotificationItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends NotificationItem = NotificationItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Notifications: $$IsomorphicComponent;
+type Notifications<TItem extends NotificationItem = NotificationItem> = InstanceType<typeof Notifications<TItem>>;
+export default Notifications;

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

@@ -0,0 +1,2 @@
+export { default } from './Notifications.svelte';
+export type { NotificationItem, NotificationTone } from './types';

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

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

package/dist/components/Library/Notifications/types.d.ts

@@ -0,0 +1,8 @@
+export type NotificationTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export type NotificationItem = {
+    id?: string | number;
+    title?: string;
+    message?: string;
+    description?: string;
+    tone?: NotificationTone;
+};

package/dist/components/Library/Notifications/types.js

@@ -0,0 +1 @@
+export {};