@x33025/sveltely 0.1.18 → 0.1.21

package/dist/components/Library/WheelPicker/WheelColumn.svelte

@@ -1,5 +1,9 @@
 <script lang="ts" generics="T extends string | number">
-	import { tick } from 'svelte';
+	import { tick, untrack } from 'svelte';
+	import ScrollView, {
+		type ScrollGeometry,
+		type ScrollViewHandle
+	} from '../ScrollView';
 	import type { WheelOption } from './types';
 
 	type Props = {
@@ -10,17 +14,49 @@
 
 	let { options, value = $bindable<T>(), onChange }: Props = $props();
 
-	let viewport = $state<HTMLDivElement | null>(null);
+	let viewport = $state<ScrollViewHandle | null>(null);
 	let optionRefs = $state<(HTMLButtonElement | null)[]>([]);
 	let scrollTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
-	let scrollingLockTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
 	let isUserScrolling = $state(false);
 	let scrollAnimationFrame = $state<number | null>(null);
-	let visualUpdateFrame = $state<number | null>(null);
+	let spacerSize = $state(0);
+	let optionHeight = $state(0);
+	let scrollOffsetY = $state(0);
+	let optionPointer: { id: number; x: number; y: number; moved: boolean } | null = null;
 
 	const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
 
-	const animateScrollTo = (nextViewport: HTMLDivElement, targetTop: number, duration = 220) => {
+	const resolveOptionHeight = (nextViewport = viewport) => {
+		const measuredOptionHeight = optionRefs.find((element) => element !== null)?.clientHeight;
+		const cssOptionHeight =
+			typeof document === 'undefined'
+				? 0
+				: parseFloat(
+						getComputedStyle(nextViewport?.element ?? document.documentElement).getPropertyValue(
+							'--wheel-picker-option-height'
+						)
+					);
+
+		return measuredOptionHeight && measuredOptionHeight > 0
+			? measuredOptionHeight
+			: Number.isFinite(cssOptionHeight)
+				? cssOptionHeight
+				: 0;
+	};
+
+	const measureSpacerSize = (nextViewport = viewport) => {
+		if (!nextViewport) return;
+		const nextOptionHeight = resolveOptionHeight(nextViewport);
+		const nextSpacerSize = Math.max(0, (nextViewport.clientHeight - nextOptionHeight) / 2);
+		if (Math.abs(optionHeight - nextOptionHeight) > 0.5) {
+			optionHeight = nextOptionHeight;
+		}
+		if (Math.abs(spacerSize - nextSpacerSize) > 0.5) {
+			spacerSize = nextSpacerSize;
+		}
+	};
+
+	const animateScrollTo = (nextViewport: ScrollViewHandle, targetTop: number, duration = 220) => {
 		if (scrollAnimationFrame) cancelAnimationFrame(scrollAnimationFrame);
 
 		const startTop = nextViewport.scrollTop;
@@ -47,7 +83,7 @@
 	};
 
 	const scrollSelectedIntoView = async (
-		nextViewport: HTMLDivElement | null,
+		nextViewport: ScrollViewHandle | null,
 		element: HTMLButtonElement | null
 	) => {
 		if (!nextViewport || !element) return;
@@ -63,7 +99,7 @@
 	};
 
 	const getCenteredIndex = (
-		nextViewport: HTMLDivElement | null,
+		nextViewport: ScrollViewHandle | null,
 		elements: Array<HTMLButtonElement | null>
 	) => {
 		if (!nextViewport) return -1;
@@ -87,7 +123,7 @@
 	};
 
 	const getCenterDistance = (
-		nextViewport: HTMLDivElement | null,
+		nextViewport: ScrollViewHandle | null,
 		element: HTMLButtonElement | null
 	) => {
 		if (!nextViewport || !element) return Number.POSITIVE_INFINITY;
@@ -98,30 +134,6 @@
 		return Math.abs(elementCenter - viewportCenter);
 	};
 
-	const updateVisualDepth = () => {
-		if (!viewport) return;
-		const viewportRect = viewport.getBoundingClientRect();
-		const viewportCenter = viewportRect.top + viewportRect.height / 2;
-		const maxDistance = Math.max(viewportRect.height / 2, 1);
-
-		for (const element of optionRefs) {
-			if (!element) continue;
-			const rect = element.getBoundingClientRect();
-			const center = rect.top + rect.height / 2;
-			const ratio = Math.min(1, Math.abs(center - viewportCenter) / maxDistance);
-			const emphasis = Math.pow(Math.cos(ratio * (Math.PI / 2)), 2);
-			element.style.setProperty('--wheel-column-emphasis', emphasis.toFixed(3));
-		}
-	};
-
-	const scheduleVisualDepthUpdate = () => {
-		if (visualUpdateFrame) cancelAnimationFrame(visualUpdateFrame);
-		visualUpdateFrame = requestAnimationFrame(() => {
-			visualUpdateFrame = null;
-			updateVisualDepth();
-		});
-	};
-
 	const applyValue = (nextValue: T) => {
 		if (value === nextValue) return;
 		value = nextValue;
@@ -129,13 +141,39 @@
 	};
 
 	const selectOption = (option: WheelOption<T>, index: number) => {
+		if (scrollTimeout) clearTimeout(scrollTimeout);
+		isUserScrolling = false;
 		applyValue(option.value);
 		void scrollSelectedIntoView(viewport, optionRefs[index] ?? null);
-		scheduleVisualDepthUpdate();
+	};
+
+	const handleOptionPointerdown = (event: PointerEvent) => {
+		optionPointer = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			moved: false
+		};
+	};
+
+	const handleOptionPointermove = (event: PointerEvent) => {
+		if (!optionPointer || optionPointer.id !== event.pointerId) return;
+		const distance = Math.hypot(event.clientX - optionPointer.x, event.clientY - optionPointer.y);
+		if (distance > 6) optionPointer.moved = true;
+	};
+
+	const handleOptionClick = (option: WheelOption<T>, index: number) => {
+		if (optionPointer?.moved) {
+			optionPointer = null;
+			return;
+		}
+		optionPointer = null;
+		selectOption(option, index);
 	};
 
 	const syncToCurrentValue = () => {
 		if (isUserScrolling || !viewport) return;
+		measureSpacerSize(viewport);
 		const index = options.findIndex((option) => option.value === value);
 		if (index < 0) return;
 		const element = optionRefs[index] ?? null;
@@ -143,67 +181,70 @@
 		if (getCenterDistance(viewport, element) > 1) {
 			void scrollSelectedIntoView(viewport, element);
 		}
-		scheduleVisualDepthUpdate();
 	};
 
-	const handleScroll = () => {
-		scheduleVisualDepthUpdate();
+	const settleScroll = () => {
+		isUserScrolling = false;
+		const centeredIndex = getCenteredIndex(viewport, optionRefs);
+		if (centeredIndex < 0) return;
+		const centeredOption = options[centeredIndex];
+		const centeredElement = optionRefs[centeredIndex] ?? null;
+		if (!centeredOption || !centeredElement) return;
+
+		const centerDistance = getCenterDistance(viewport, centeredElement);
+		if (centerDistance > 1) {
+			void scrollSelectedIntoView(viewport, centeredElement);
+		}
+
+		applyValue(centeredOption.value);
+	};
+
+	const handleScroll = (geometry: ScrollGeometry) => {
+		scrollOffsetY = geometry.offset.y;
+		measureSpacerSize();
 		isUserScrolling = true;
-		if (scrollingLockTimeout) clearTimeout(scrollingLockTimeout);
-		scrollingLockTimeout = setTimeout(() => {
-			isUserScrolling = false;
-		}, 180);
 
 		if (scrollTimeout) clearTimeout(scrollTimeout);
-		scrollTimeout = setTimeout(() => {
-			const centeredIndex = getCenteredIndex(viewport, optionRefs);
-			if (centeredIndex < 0) return;
-			const centeredOption = options[centeredIndex];
-			const centeredElement = optionRefs[centeredIndex] ?? null;
-			if (!centeredOption || !centeredElement) return;
-
-			const centerDistance = getCenterDistance(viewport, centeredElement);
-			if (centerDistance > 1) {
-				void scrollSelectedIntoView(viewport, centeredElement);
-			}
-
-			applyValue(centeredOption.value);
-			scheduleVisualDepthUpdate();
-		}, 140);
+		scrollTimeout = setTimeout(settleScroll, 240);
 	};
 
-	const viewportSync = (node: HTMLDivElement) => {
-		viewport = node;
-		void tick().then(() => {
-			syncToCurrentValue();
-			scheduleVisualDepthUpdate();
+	$effect(() => {
+		const nextViewport = viewport;
+		const nextValue = value;
+		const nextOptions = options;
+		if (!nextViewport) return;
+
+		void tick().then(async () => {
+			if (viewport !== nextViewport || value !== nextValue || options !== nextOptions) return;
+			untrack(() => {
+				measureSpacerSize(nextViewport);
+			});
+			await tick();
+			if (viewport !== nextViewport || value !== nextValue || options !== nextOptions) return;
+			untrack(() => {
+				syncToCurrentValue();
+			});
 		});
+	});
 
-		return {
-			update() {
-				void tick().then(() => {
-					syncToCurrentValue();
-					scheduleVisualDepthUpdate();
-				});
-			},
-			destroy() {
-				if (scrollTimeout) clearTimeout(scrollTimeout);
-				if (scrollingLockTimeout) clearTimeout(scrollingLockTimeout);
-				if (scrollAnimationFrame) cancelAnimationFrame(scrollAnimationFrame);
-				if (visualUpdateFrame) cancelAnimationFrame(visualUpdateFrame);
-				viewport = null;
-			}
+	$effect(() => {
+		return () => {
+			if (scrollTimeout) clearTimeout(scrollTimeout);
+			if (scrollAnimationFrame) cancelAnimationFrame(scrollAnimationFrame);
 		};
-	};
+	});
 </script>
 
-<div
-	class="wheel-column-viewport"
-	bind:this={viewport}
-	use:viewportSync={{ value, options }}
-	onscroll={handleScroll}
+<ScrollView
+	axis="vertical"
+	bind:viewport
+	scrollGradient={false}
+	showIndicators={false}
+	contentStyles={{ paddingX: 0, paddingY: 0 }}
+	onScroll={handleScroll}
 >
 	<div class="wheel-column-options vstack">
+		<div class="wheel-column-spacer" style:height={`${spacerSize}px`} aria-hidden="true"></div>
 		{#each options as option, index (option.value)}
 			<button
 				bind:this={optionRefs[index]}
@@ -211,47 +252,58 @@
 				class="wheel-column-option"
 				class:wheel-column-option-selected={option.value === value}
 				aria-pressed={option.value === value}
-				onclick={() => selectOption(option, index)}
+				onpointerdown={handleOptionPointerdown}
+				onpointermove={handleOptionPointermove}
+				onpointercancel={() => {
+					optionPointer = null;
+				}}
+				onclick={() => handleOptionClick(option, index)}
 			>
 				{option.label}
 			</button>
 		{/each}
+		<div class="wheel-column-spacer" style:height={`${spacerSize}px`} aria-hidden="true"></div>
+	</div>
+</ScrollView>
+
+<div
+	class="wheel-column-active-layer"
+	style:top={`${spacerSize}px`}
+	style:height={`${optionHeight}px`}
+	aria-hidden="true"
+>
+	<div
+		class="wheel-column-active-options"
+		style:transform={`translateY(${-scrollOffsetY - spacerSize}px)`}
+	>
+		<div class="wheel-column-spacer" style:height={`${spacerSize}px`}></div>
+		{#each options as option (option.value)}
+			<div class="wheel-column-active-option">{option.label}</div>
+		{/each}
+		<div class="wheel-column-spacer" style:height={`${spacerSize}px`}></div>
 	</div>
 </div>
 
 <style>
-	.wheel-column-viewport {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
+	:global(.wheel-picker-column) {
 		position: relative;
-		overflow-y: auto;
-		overflow-x: hidden;
-		overscroll-behavior-y: contain;
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-		z-index: 1;
+		overflow: hidden;
 	}
 
-	.wheel-column-viewport::-webkit-scrollbar {
-		display: none;
+	:global(.wheel-picker-column > .scroll-view) {
+		z-index: 1;
 	}
 
-	.wheel-column-viewport::before,
-	.wheel-column-viewport::after {
-		content: '';
-		display: block;
-		flex: 0 0 calc(50% - (var(--wheel-picker-option-height) / 2));
+	.wheel-column-options {
+		gap: 0;
 	}
 
-	.wheel-column-options {
+	.wheel-column-spacer {
 		flex: 0 0 auto;
-		gap: 0;
+		min-height: 0;
 	}
 
 	.wheel-column-option {
-		--wheel-column-emphasis: 0;
 		width: 100%;
 		height: var(--wheel-picker-option-height);
 		border: none;
@@ -260,37 +312,42 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0 calc(var(--sveltely-padding-x) * 0.67 * var(--wheel-picker-scale));
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--wheel-picker-scale))
+			calc(var(--sveltely-padding-x) * 0.67 * var(--wheel-picker-scale));
 		font-size: calc(var(--wheel-picker-font-size) * 0.875);
-		line-height: 1;
-		color: var(--sveltely-primary-color);
-		text-align: center;
-		appearance: none;
-		position: relative;
-		z-index: 1;
-		opacity: calc(0.3 + (var(--wheel-column-emphasis) * 0.7));
-		transform: scale(calc(0.84 + (var(--wheel-column-emphasis) * 0.16)));
-		transform-origin: center;
+		font-variant-numeric: tabular-nums;
+		line-height: 1.2;
+		color: var(--sveltely-text-secondary-color);
+		font-weight: 400;
 		transition:
-			color 160ms,
-			background-color 160ms,
-			opacity 160ms,
-			transform 160ms;
+			color 120ms,
+			font-weight 120ms;
 	}
 
-	.wheel-column-option:hover {
-		background: var(--sveltely-hover-color);
+	.wheel-column-active-layer {
+		position: absolute;
+		inset-inline: 0;
+		z-index: 2;
+		overflow: hidden;
+		pointer-events: none;
 	}
 
-	.wheel-column-option:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
-		outline-offset: 2px;
+	.wheel-column-active-options {
+		will-change: transform;
 	}
 
-	.wheel-column-option-selected {
-		background: transparent;
-		color: var(--sveltely-primary-color);
-		opacity: 1;
-		transform: scale(1);
+	.wheel-column-active-option {
+		display: flex;
+		width: 100%;
+		height: var(--wheel-picker-option-height);
+		align-items: center;
+		justify-content: center;
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--wheel-picker-scale))
+			calc(var(--sveltely-padding-x) * 0.67 * var(--wheel-picker-scale));
+		font-size: calc(var(--wheel-picker-font-size) * 0.875);
+		font-variant-numeric: tabular-nums;
+		line-height: 1.2;
+		color: var(--sveltely-text-primary-color);
+		font-weight: 600;
 	}
 </style>

package/dist/components/Library/WheelPicker/WheelPicker.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import WheelColumn from './WheelColumn.svelte';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
-	import type { WheelColumn as WheelColumnData } from './types';
+	import type { AnyWheelColumn } from './types';
 
 	type Props = {
-		columns: WheelColumnData[];
+		columns: AnyWheelColumn[];
 		height?: number | string;
 	} & StyleProps &
 		Record<string, unknown>;
@@ -95,7 +95,7 @@
 		height: var(--wheel-picker-option-height);
 		transform: translateY(-50%);
 		border-radius: var(--sveltely-border-radius);
-		background: color-mix(in oklab, var(--sveltely-inactive-color) 85%, white);
+		background: color-mix(in oklab, var(--sveltely-control-inactive-color) 85%, white);
 		pointer-events: none;
 		z-index: 0;
 	}
@@ -105,6 +105,6 @@
 		font-size: calc(var(--wheel-picker-font-size) * 0.75);
 		line-height: 1;
 		font-weight: 500;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 </style>

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

@@ -1,7 +1,7 @@
 import { type StyleProps } from '../../../style/surface';
-import type { WheelColumn as WheelColumnData } from './types';
+import type { AnyWheelColumn } from './types';
 type Props = {
-    columns: WheelColumnData[];
+    columns: AnyWheelColumn[];
     height?: number | string;
 } & StyleProps & Record<string, unknown>;
 declare const WheelPicker: import("svelte").Component<Props, {}, "">;

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

@@ -1,2 +1,2 @@
 export { default } from './WheelPicker.svelte';
-export type { WheelColumn, WheelOption } from './types';
+export type { AnyWheelColumn, WheelColumn, WheelOption } from './types';

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

@@ -8,3 +8,9 @@ export type WheelColumn<TValue extends string | number = string> = {
     options: WheelOption<TValue>[];
     onChange?: (value: TValue) => void;
 };
+export type AnyWheelColumn = {
+    label?: string;
+    value: string | number;
+    options: WheelOption<string | number>[];
+    onChange?: (value: string | number) => void;
+};

package/dist/components/Local/ColorStyleControls.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import Divider from '../Library/Divider';
+	import HStack from '../Library/HStack';
+	import Label from '../Library/Label';
+	import VStack from '../Library/VStack';
+
+	type Props = {
+		borderColor?: string;
+		textPrimaryColor?: string;
+		textSecondaryColor?: string;
+		textTertiaryColor?: string;
+		backgroundColor?: string;
+		controlActiveColor?: string;
+		controlInactiveColor?: string;
+		controlBackgroundColor?: string;
+	};
+
+	let {
+		borderColor = $bindable('#e4e4e7'),
+		textPrimaryColor = $bindable('#18181b'),
+		textSecondaryColor = $bindable('#71717a'),
+		textTertiaryColor = $bindable('#a1a1aa'),
+		backgroundColor = $bindable('#ffffff'),
+		controlActiveColor = $bindable('#18181b'),
+		controlInactiveColor = $bindable('#f4f4f5'),
+		controlBackgroundColor = $bindable('#fafafa')
+	}: Props = $props();
+</script>
+
+<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"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{textPrimaryColor}</span>
+			<input
+				bind:value={textPrimaryColor}
+				type="color"
+				aria-label="Text primary"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+	<Label
+		label="Text secondary"
+		orientation="leading"
+		width="100%"
+		align="center"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{textSecondaryColor}</span>
+			<input
+				bind:value={textSecondaryColor}
+				type="color"
+				aria-label="Text secondary"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+	<Label
+		label="Text tertiary"
+		orientation="leading"
+		width="100%"
+		align="center"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{textTertiaryColor}</span>
+			<input
+				bind:value={textTertiaryColor}
+				type="color"
+				aria-label="Text tertiary"
+				class="color-input"
+			/>
+		</HStack>
+	</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"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{backgroundColor}</span>
+			<input
+				bind:value={backgroundColor}
+				type="color"
+				aria-label="Background color"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+	<Label
+		label="Border color"
+		orientation="leading"
+		width="100%"
+		align="center"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<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"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{controlActiveColor}</span>
+			<input
+				bind:value={controlActiveColor}
+				type="color"
+				aria-label="Control active"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+	<Label
+		label="Control background"
+		orientation="leading"
+		width="100%"
+		align="center"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{controlBackgroundColor}</span>
+			<input
+				bind:value={controlBackgroundColor}
+				type="color"
+				aria-label="Control background"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+	<Label
+		label="Control inactive"
+		orientation="leading"
+		width="100%"
+		align="center"
+		justify="between"
+		gap={5}
+	>
+		<HStack width="100%" align="center" justify="end" gap={5}>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{controlInactiveColor}</span>
+			<input
+				bind:value={controlInactiveColor}
+				type="color"
+				aria-label="Control inactive"
+				class="color-input"
+			/>
+		</HStack>
+	</Label>
+</VStack>
+
+<style>
+	.color-input {
+		width: 2.5rem;
+		height: 2.5rem;
+		flex: 0 0 2.5rem;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: 0.375rem;
+		background: white;
+		padding: 0.1875rem;
+	}
+
+	.color-input::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	.color-input::-webkit-color-swatch {
+		border: 0;
+		border-radius: 0.25rem;
+	}
+
+	.color-input::-moz-color-swatch {
+		border: 0;
+		border-radius: 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+type Props = {
+    borderColor?: string;
+    textPrimaryColor?: string;
+    textSecondaryColor?: string;
+    textTertiaryColor?: string;
+    backgroundColor?: string;
+    controlActiveColor?: string;
+    controlInactiveColor?: string;
+    controlBackgroundColor?: string;
+};
+declare const ColorStyleControls: import("svelte").Component<Props, {}, "backgroundColor" | "borderColor" | "textPrimaryColor" | "textSecondaryColor" | "textTertiaryColor" | "controlActiveColor" | "controlInactiveColor" | "controlBackgroundColor">;
+type ColorStyleControls = ReturnType<typeof ColorStyleControls>;
+export default ColorStyleControls;