@x33025/sveltely 0.1.23 → 0.1.25

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

@@ -1,21 +1,51 @@
-<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 &
 		LoaderProps;
 
-	let { children, columns = 1, rows, autoRows, dense = false, ...restProps }: Props = $props();
+	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();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -26,7 +56,7 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const templateColumns = $derived(
 		typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns
 	);
@@ -40,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};` : '',
@@ -51,33 +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}
-	{...props}
-	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;
+	.grid-engine-item {
+		position: absolute;
+		left: 0;
+		top: 0;
 		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

@@ -2,13 +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;
-declare const Grid: import("svelte").Component<Props, {}, "">;
-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

@@ -16,7 +16,15 @@
 		StyleProps &
 		LoaderProps;
 
-	let { children, column, row, columnSpan, rowSpan, area, ...restProps }: Props = $props();
+	let {
+		children,
+		column,
+		row,
+		columnSpan,
+		rowSpan,
+		area,
+		...restProps
+	}: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -27,9 +35,16 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	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
@@ -47,19 +62,8 @@
 	);
 </script>
 
-<div class="grid-item" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#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/Grid/GridItem.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     rowSpan?: number;
     area?: string;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const GridItem: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const GridItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type GridItem = ReturnType<typeof GridItem>;
 export default GridItem;

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

@@ -11,7 +11,7 @@
 		StyleProps &
 		LoaderProps;
 
-	let { children, ...restProps }: Props = $props();
+	let { children, ...restProps }: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -22,13 +22,13 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'hstack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="hstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div class="hstack" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -41,7 +41,7 @@
 		--hstack-padding-x: 0px;
 		--hstack-padding-y: 0px;
 		--hstack-font-size: inherit;
-		display: flex;
+		display: inline-flex;
 		min-width: 0;
 		min-height: 0;
 		flex-direction: row;

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

@@ -5,6 +5,7 @@ import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const HStack: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const HStack: import("svelte").Component<$$ComponentProps, {}, "">;
 type HStack = ReturnType<typeof HStack>;
 export default HStack;

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

@@ -1,7 +1,9 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Image',
-		description: 'Responsive image display with icon placeholder and busy states.'
+		description: 'Responsive image display with icon placeholder and busy states.',
+		columnSpan: 3,
+		rowSpan: 2
 	};
 </script>
 

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

@@ -1,6 +1,8 @@
 export declare const demo: {
     name: string;
     description: string;
+    columnSpan: number;
+    rowSpan: number;
 };
 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> {

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

@@ -9,7 +9,9 @@
 
 <script lang="ts">
 	import { Brush, Eraser, X } from '@lucide/svelte';
+	import Grid from '../Grid';
 	import Slider from '../Slider';
+	import VStack from '../VStack';
 	import ImageMask from './ImageMask.svelte';
 	import type { ImageMaskValue, MaskTool } from './types';
 
@@ -19,7 +21,7 @@
 	let clearRevision = $state(0);
 </script>
 
-<div class="grid items-start gap-3 md:grid-cols-[minmax(0,18rem)_minmax(8rem,1fr)]">
+<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"
@@ -30,14 +32,14 @@
 		fit="cover"
 		aspectRatio="1 / 1"
 	/>
-	<div class="vstack gap-2 text-sm text-[var(--sveltely-text-secondary-color)]">
+	<VStack gap={5} fontSize={8.75} color="var(--sveltely-text-secondary-color)">
 		<div class="font-medium text-[var(--sveltely-text-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">
+		<VStack gap={5} background="white" paddingX={7.5} paddingY={7.5}>
 			<span class="font-medium text-[var(--sveltely-text-primary-color)]"
 				>Brush size {brushSize}px</span
 			>
@@ -78,9 +80,9 @@
 					<X size={16} />
 				</button>
 			</div>
-		</label>
-	</div>
-</div>
+		</VStack>
+	</VStack>
+</Grid>
 
 <style>
 	.image-mask-controls {

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

@@ -19,20 +19,20 @@
 	let enabled = $state(true);
 </script>
 
-<HStack gap={10} align="center">
-	<Label label="Name" icon={UserIcon} orientation="top" width="fit">
+<HStack gap={10}>
+	<Label label="Name" icon={UserIcon} orientation="top">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>
 
-	<Label label="Amount" icon={HashIcon} orientation="leading" width="fit">
+	<Label label="Amount" icon={HashIcon} orientation="leading">
 		<NumberField bind:value={amount} min={0} max={100} />
 	</Label>
 
-	<Label label="Enabled" orientation="trailing" width="fit">
+	<Label label="Enabled" orientation="trailing">
 		<Switch bind:checked={enabled} />
 	</Label>
 
-	<Label orientation="leading" width="fit">
+	<Label orientation="leading">
 		{#snippet labelContent()}
 			<span>Name <span class="text-[var(--sveltely-text-tertiary-color)]">optional</span></span>
 		{/snippet}

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

@@ -23,44 +23,27 @@
 		iconSize,
 		iconColor,
 		orientation = 'top',
-		size,
+		grow,
+		fit,
 		width,
 		height,
-		minWidth,
-		minHeight,
-		maxWidth,
-		maxHeight,
-		grow,
-		shrink,
-		basis,
-		border,
-		align,
-		justify,
 		fontSize,
 		paddingX,
 		paddingY,
 		gap,
 		borderRadius,
 		inset,
+		border,
 		background,
 		borderColor,
 		color
 	}: Props = $props();
 
 	const layoutProps = $derived({
-		size,
-		width,
-		height,
-		minWidth,
-		minHeight,
-		maxWidth,
-		maxHeight,
 		grow,
-		shrink,
-		basis,
-		border,
-		align,
-		justify
+		fit,
+		width,
+		height
 	});
 	const styleProps = $derived({
 		fontSize,
@@ -69,6 +52,7 @@
 		gap,
 		borderRadius,
 		inset,
+		border,
 		background,
 		borderColor,
 		color
@@ -126,9 +110,9 @@
 		--label-font-size: var(--sveltely-font-size);
 		--label-icon-size: calc(var(--label-font-size) * 1.143);
 		display: inline-flex;
-		width: 100%;
-		min-width: min-content;
-		min-height: min-content;
+		width: fit-content;
+		min-width: 0;
+		min-height: 0;
 		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
 		border-radius: var(--label-border-radius, 0px);
 		color: var(--label-color, var(--sveltely-text-primary-color));

package/dist/components/Library/NavigationStack/Link.svelte

@@ -48,12 +48,9 @@
 				calc(var(--sveltely-padding-x) * var(--navigation-link-scale))
 			);
 		text-decoration: none;
-		transition:
-			color 150ms,
-			background-color 150ms;
+		transition: color 150ms;
 	}
 
-	.navigation-link:hover,
 	.navigation-link-active {
 		background: var(
 			--navigation-link-active-background,

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;