@x33025/sveltely 0.1.24 → 0.1.25

package/dist/components/Local/ColorStyleControls.svelte

@@ -2,6 +2,7 @@
 	import Divider from '../Library/Divider';
 	import HStack from '../Library/HStack';
 	import Label from '../Library/Label';
+	import Spacer from '../Library/Spacer';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -29,14 +30,9 @@
 
 <VStack gap={5}>
 	<Label label="Text colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Text primary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text primary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textPrimaryColor}</span>
 			<input
 				bind:value={textPrimaryColor}
@@ -46,14 +42,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Text secondary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text secondary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textSecondaryColor}</span>
 			<input
 				bind:value={textSecondaryColor}
@@ -63,14 +54,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Text tertiary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text tertiary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textTertiaryColor}</span>
 			<input
 				bind:value={textTertiaryColor}
@@ -82,14 +68,9 @@
 	</Label>
 	<Divider />
 	<Label label="Surface colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Background color"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Background color" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{backgroundColor}</span>
 			<input
 				bind:value={backgroundColor}
@@ -99,28 +80,18 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Border color"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Border color" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{borderColor}</span>
 			<input bind:value={borderColor} type="color" aria-label="Border color" class="color-input" />
 		</HStack>
 	</Label>
 	<Divider />
 	<Label label="Control colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Control active"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control active" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlActiveColor}</span>
 			<input
 				bind:value={controlActiveColor}
@@ -130,14 +101,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Control background"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control background" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlBackgroundColor}</span>
 			<input
 				bind:value={controlBackgroundColor}
@@ -147,14 +113,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Control inactive"
-		orientation="leading"
-		width="100%"
-		align="center"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control inactive" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlInactiveColor}</span>
 			<input
 				bind:value={controlInactiveColor}

package/dist/components/Local/ComponentGrid.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Component } from 'svelte';
-	import Grid from '../Library/Grid';
-	import { GridItem } from '../Library/Grid';
-	import ScrollView from '../Library/ScrollView';
-	import HeroCard from './HeroCard.svelte';
+	import ScrollView, {
+		type ScrollGeometry,
+		type ScrollViewHandle
+	} from '../Library/ScrollView';
+	import ComponentPage, { type ComponentPageEntry } from './ComponentPage.svelte';
 
-	type DemoEntry = {
+	type DemoEntry = ComponentPageEntry & {
 		component: Component;
 		name: string;
 		description: string;
@@ -18,23 +20,102 @@
 	};
 
 	let { demos }: Props = $props();
+
+	let viewport = $state<ScrollViewHandle | null>(null);
+	let page = $state(1);
+	let pageHeight = $state(0);
+	let snapTimeout: ReturnType<typeof setTimeout> | null = null;
+	let snapReleaseTimeout: ReturnType<typeof setTimeout> | null = null;
+	let snapping = $state(false);
+
+	const totalPages = $derived(Math.max(1, demos.length));
+	const safePage = $derived(Math.min(Math.max(page, 1), totalPages));
+	const pagePeek = $derived(pageHeight <= 0 ? 0 : Math.min(72, Math.max(32, pageHeight * 0.08)));
+	const pageStep = $derived(Math.max(1, pageHeight - pagePeek * 2));
+
+	const clampPage = (nextPage: number) => Math.min(Math.max(nextPage, 1), totalPages);
+
+	const scrollToPage = async (nextPage: number) => {
+		const clamped = clampPage(nextPage);
+		if (snapTimeout) {
+			clearTimeout(snapTimeout);
+			snapTimeout = null;
+		}
+		page = clamped;
+		await tick();
+		const height = viewport?.clientHeight || pageHeight;
+		if (!viewport || height <= 0) return;
+		snapping = true;
+		viewport.scrollTo({ top: (clamped - 1) * pageStep, left: 0, behavior: 'smooth' });
+		if (snapReleaseTimeout) clearTimeout(snapReleaseTimeout);
+		snapReleaseTimeout = setTimeout(() => {
+			snapping = false;
+			snapReleaseTimeout = null;
+		}, 320);
+	};
+
+	const schedulePageSnap = (nextPage: number) => {
+		if (snapTimeout) clearTimeout(snapTimeout);
+		snapTimeout = setTimeout(() => {
+			snapTimeout = null;
+			void scrollToPage(nextPage);
+		}, 120);
+	};
+
+	const handleScroll = (geometry: ScrollGeometry) => {
+		pageHeight = geometry.viewport.height;
+		if (geometry.viewport.height <= 0) return;
+		const nextPage = clampPage(Math.round(geometry.offset.y / pageStep) + 1);
+		if (nextPage !== page) page = nextPage;
+		if (snapping) return;
+		const targetOffset = (nextPage - 1) * pageStep;
+		if (Math.abs(geometry.offset.y - targetOffset) > 1) {
+			schedulePageSnap(nextPage);
+		}
+	};
+
+	$effect(() => {
+		if (page === safePage) return;
+		page = safePage;
+	});
+
+	$effect(() => {
+		return () => {
+			if (snapTimeout) clearTimeout(snapTimeout);
+			if (snapReleaseTimeout) clearTimeout(snapReleaseTimeout);
+		};
+	});
 </script>
 
-<ScrollView width="100%" height="100%">
-	<Grid
-		columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
-		autoRows={14}
-		gap={10}
-		paddingX={15}
-		paddingY={15}
-	>
-		{#each demos as entry (entry.name)}
-			{@const DemoComponent = entry.component}
-			<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
-				<HeroCard title={entry.name} description={entry.description}>
-					<DemoComponent />
-				</HeroCard>
-			</GridItem>
-		{/each}
-	</Grid>
+<ScrollView
+	bind:viewport
+	width="100%"
+	height="100%"
+	onScroll={handleScroll}
+	contentStyles={{
+		paddingX: 0,
+		paddingY: 0
+	}}
+>
+	{#each demos as entry, index (entry.name)}
+		<div
+			class="component-page-slot"
+			class:component-page-slot-active={index + 1 === page}
+			style:height={`${index === demos.length - 1 ? pageHeight : pageStep}px`}
+		>
+			<ComponentPage {entry} height={pageHeight} />
+		</div>
+	{/each}
 </ScrollView>
+
+<style>
+	.component-page-slot {
+		position: relative;
+		z-index: 1;
+		min-width: 0;
+	}
+
+	.component-page-slot-active {
+		z-index: 2;
+	}
+</style>

package/dist/components/Local/ComponentGrid.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'svelte';
-type DemoEntry = {
+import { type ComponentPageEntry } from './ComponentPage.svelte';
+type DemoEntry = ComponentPageEntry & {
     component: Component;
     name: string;
     description: string;

package/dist/components/Local/ComponentPage.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	export type ComponentPageEntry = {
+		component: Component;
+		name: string;
+		description: string;
+	};
+
+	type Props = {
+		entry: ComponentPageEntry;
+		height?: number;
+	};
+
+	let { entry, height }: Props = $props();
+
+	const DemoComponent = $derived(entry.component);
+	const pageStyle = $derived(height ? `height: ${height}px;` : '');
+</script>
+
+<article class="component-page" style={pageStyle}>
+	<header class="component-page-header">
+		<h1>{entry.name}</h1>
+		{#if entry.description}
+			<p>{entry.description}</p>
+		{/if}
+	</header>
+
+	<section class="component-page-stage" aria-label={`${entry.name} demo`}>
+		<DemoComponent />
+	</section>
+</article>
+
+<style>
+	.component-page {
+		display: flex;
+		min-height: min(42rem, calc(100svh - 8rem));
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--sveltely-gap);
+		padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);
+	}
+
+	.component-page-header {
+		display: grid;
+		gap: calc(var(--sveltely-gap) * 0.5);
+		min-width: 0;
+	}
+
+	h1 {
+		color: var(--sveltely-text-primary-color);
+		font-size: calc(var(--sveltely-font-size) * 1.6);
+		font-weight: 650;
+		line-height: 1.1;
+	}
+
+	p {
+		max-width: 48rem;
+		color: var(--sveltely-text-secondary-color);
+		font-size: calc(var(--sveltely-font-size) * 0.95);
+		line-height: 1.45;
+	}
+
+	.component-page-stage {
+		display: grid;
+		min-width: 0;
+		min-height: 0;
+		flex: 1 1 0;
+		place-items: center;
+		overflow: auto;
+		background: var(--sveltely-background-color);
+		padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);
+	}
+</style>

package/dist/components/Local/ComponentPage.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+export type ComponentPageEntry = {
+    component: Component;
+    name: string;
+    description: string;
+};
+type Props = {
+    entry: ComponentPageEntry;
+    height?: number;
+};
+declare const ComponentPage: Component<Props, {}, "">;
+type ComponentPage = ReturnType<typeof ComponentPage>;
+export default ComponentPage;

package/dist/components/Local/HeroCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import HStack from '../Library/HStack';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -13,9 +12,7 @@
 </script>
 
 <VStack
-	minHeight={14}
 	height="100%"
-	align="stretch"
 	gap={5}
 	border="1px solid var(--sveltely-border-color)"
 	borderRadius={7.5}
@@ -33,9 +30,9 @@
 	{/if}
 	<div class="hero-card-content">
 		{#if children}
-			<HStack width="100%" height="100%" align="center" justify="center">
+			<div class="hero-card-inner">
 				{@render children()}
-			</HStack>
+			</div>
 		{/if}
 	</div>
 </VStack>
@@ -56,4 +53,12 @@
 		flex: 1 1 0;
 		overflow: hidden;
 	}
+
+	.hero-card-inner {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

package/dist/components/Local/LayoutStyleControls.svelte

@@ -25,7 +25,7 @@
 
 <VStack width="100%" gap={5}>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Font size</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{fontSize.toFixed(1)}</span>
@@ -33,7 +33,7 @@
 		<Slider bind:value={fontSize} min={5} max={20} step={0.5} />
 	</VStack>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Border radius</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{borderRadius.toFixed(1)}</span>
@@ -41,7 +41,7 @@
 		<Slider bind:value={borderRadius} min={0} max={30} step={0.5} />
 	</VStack>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Padding X</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingX.toFixed(1)}</span>
@@ -49,7 +49,7 @@
 		<Slider bind:value={paddingX} min={0} max={20} step="any" />
 	</VStack>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Padding Y</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingY.toFixed(1)}</span>
@@ -57,7 +57,7 @@
 		<Slider bind:value={paddingY} min={0} max={20} step="any" />
 	</VStack>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Gap</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{gap.toFixed(1)}</span>
@@ -65,7 +65,7 @@
 		<Slider bind:value={gap} min={0} max={20} step="any" />
 	</VStack>
 	<VStack width="100%" gap={5}>
-		<HStack width="100%" align="center" gap={7.5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Inset</span>
 			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{inset.toFixed(1)}</span>

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export type { TooltipOptions } from './actions/tooltip';
 export { loader } from './actions/loader';
 export type { LoaderOptions } from './actions/loader';
 export type { LoaderProps } from './style/loader';
-export { LayoutAlignment, LayoutDimension, LayoutJustification } from './style/layout';
-export type { FrameProps, LayoutAlignmentValue, LayoutDimensionValue, LayoutJustificationValue, LayoutProps, StackProps } from './style/layout';
+export { Axis, LayoutDimension } from './style/layout';
+export type { AxisValue, LayoutAxis, LayoutAxisBehavior, LayoutDimensionValue, LayoutProps } from './style/layout';
 export { LabelOrientation } from './style/label';
 export type { LabelOrientationValue } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
@@ -18,6 +18,9 @@ export type { TextAlignmentValue, TextAsValue, TextProps } from './style/text';
 export { TextFieldType, TextInputMode } from './style/text-editor';
 export type { TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
 export type { TooltipProps } from './style/tooltip';
+export * from './viewport';
+export { default as Accordion } from './components/Library/Accordion';
+export type { AccordionState } from './components/Library/Accordion';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -33,6 +36,8 @@ export type { ImageMaskValue } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
 export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as Notifications } from './components/Library/Notifications';
+export type { NotificationItem, NotificationTone } from './components/Library/Notifications';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';
@@ -59,6 +64,6 @@ export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
 export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export type { ScrollGeometry } from './components/Library/ScrollView';
+export type { ScrollContentSize, ScrollGeometry, ScrollViewHandle, ScrollViewOverscrollBehavior } from './components/Library/ScrollView';
 export { default as TokenSearchField } from './components/Library/TokenSearchField';
 export { default as VStack } from './components/Library/VStack';

package/dist/index.js

@@ -2,12 +2,14 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export { loader } from './actions/loader';
-export { LayoutAlignment, LayoutDimension, LayoutJustification } from './style/layout';
+export { Axis, LayoutDimension } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';
 export { TextAlignment, TextAs } from './style/text';
 export { TextFieldType, TextInputMode } from './style/text-editor';
+export * from './viewport';
+export { default as Accordion } from './components/Library/Accordion';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -22,6 +24,7 @@ export { default as ImageMask } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
 export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as Notifications } from './components/Library/Notifications';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';

package/dist/style/index.css

@@ -119,7 +119,6 @@
 }
 
 .overflow-auto > .vstack,
-.overflow-auto > .hstack,
-.overflow-auto > .grid {
+.overflow-auto > .hstack {
 	flex-shrink: 0;
 }

package/dist/style/layout.d.ts

@@ -1,38 +1,23 @@
 type StringWithAutocomplete<T extends string> = T | (string & {});
+export declare const Axis: {
+    readonly X: "x";
+    readonly Y: "y";
+};
 export declare const LayoutDimension: {
     readonly infinity: "infinity";
 };
-export declare const LayoutAlignment: {
-    readonly start: "start";
-    readonly center: "center";
-    readonly end: "end";
-    readonly stretch: "stretch";
-    readonly baseline: "baseline";
-};
-export declare const LayoutJustification: {
-    readonly start: "start";
-    readonly center: "center";
-    readonly end: "end";
-};
+export type AxisValue = (typeof Axis)[keyof typeof Axis];
 export type LayoutDimensionValue = (typeof LayoutDimension)[keyof typeof LayoutDimension];
-export type LayoutAlignmentValue = (typeof LayoutAlignment)[keyof typeof LayoutAlignment];
-export type LayoutJustificationValue = (typeof LayoutJustification)[keyof typeof LayoutJustification];
+export type Axis = AxisValue;
+export type LayoutAxis = Axis | Axis[];
+export type LayoutAxisBehavior = boolean | LayoutAxis;
 export type LayoutDimension = StringWithAutocomplete<LayoutDimensionValue> | number;
-export type LayoutAlignment = LayoutAlignmentValue;
-export type LayoutJustification = LayoutJustificationValue;
-export type FrameProps = {
+export type LayoutProps = {
+    grow?: LayoutAxisBehavior;
+    fit?: LayoutAxisBehavior;
     width?: LayoutDimension;
     height?: LayoutDimension;
-    minWidth?: LayoutDimension;
-    minHeight?: LayoutDimension;
-    maxWidth?: LayoutDimension;
-    maxHeight?: LayoutDimension;
-};
-export type StackProps = {
-    align?: LayoutAlignment;
-    justify?: LayoutJustification;
 };
-export type LayoutProps = FrameProps & StackProps;
 export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
     layoutProps: Partial<LayoutProps>;
     restProps: Record<string, unknown>;