@x33025/sveltely 0.0.57 → 0.1.0

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

@@ -0,0 +1,302 @@
+<script lang="ts" generics="T extends string | number">
+	import { tick } from 'svelte';
+	import type { WheelOption } from './types';
+
+	type Props = {
+		options: WheelOption<T>[];
+		value?: T;
+		onChange?: (value: T) => void;
+	};
+
+	let { options, value = $bindable<T>(), onChange }: Props = $props();
+
+	let viewport = $state<HTMLDivElement | 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);
+
+	const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+	const animateScrollTo = (
+		nextViewport: HTMLDivElement,
+		targetTop: number,
+		duration = 220
+	) => {
+		if (scrollAnimationFrame) cancelAnimationFrame(scrollAnimationFrame);
+
+		const startTop = nextViewport.scrollTop;
+		const delta = Math.max(0, targetTop) - startTop;
+		if (Math.abs(delta) < 0.5) {
+			nextViewport.scrollTop = Math.max(0, targetTop);
+			scrollAnimationFrame = null;
+			return;
+		}
+
+		const startTime = performance.now();
+
+		const step = (now: number) => {
+			const progress = Math.min(1, (now - startTime) / duration);
+			nextViewport.scrollTop = startTop + delta * easeOutCubic(progress);
+			if (progress < 1) {
+				scrollAnimationFrame = requestAnimationFrame(step);
+				return;
+			}
+			scrollAnimationFrame = null;
+		};
+
+		scrollAnimationFrame = requestAnimationFrame(step);
+	};
+
+	const scrollSelectedIntoView = async (
+		nextViewport: HTMLDivElement | null,
+		element: HTMLButtonElement | null
+	) => {
+		if (!nextViewport || !element) return;
+		await tick();
+		const viewportRect = nextViewport.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		const top =
+			nextViewport.scrollTop +
+			(elementRect.top - viewportRect.top) -
+			nextViewport.clientHeight / 2 +
+			element.clientHeight / 2;
+		animateScrollTo(nextViewport, top);
+	};
+
+	const getCenteredIndex = (
+		nextViewport: HTMLDivElement | null,
+		elements: Array<HTMLButtonElement | null>
+	) => {
+		if (!nextViewport) return -1;
+		const viewportRect = nextViewport.getBoundingClientRect();
+		const viewportCenter = viewportRect.top + viewportRect.height / 2;
+		let bestIndex = -1;
+		let bestDistance = Number.POSITIVE_INFINITY;
+
+		for (const [index, element] of elements.entries()) {
+			if (!element) continue;
+			const rect = element.getBoundingClientRect();
+			const center = rect.top + rect.height / 2;
+			const distance = Math.abs(center - viewportCenter);
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				bestIndex = index;
+			}
+		}
+
+		return bestIndex;
+	};
+
+	const getCenterDistance = (
+		nextViewport: HTMLDivElement | null,
+		element: HTMLButtonElement | null
+	) => {
+		if (!nextViewport || !element) return Number.POSITIVE_INFINITY;
+		const viewportRect = nextViewport.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		const viewportCenter = viewportRect.top + viewportRect.height / 2;
+		const elementCenter = elementRect.top + elementRect.height / 2;
+		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;
+		onChange?.(nextValue);
+	};
+
+	const selectOption = (option: WheelOption<T>, index: number) => {
+		applyValue(option.value);
+		void scrollSelectedIntoView(viewport, optionRefs[index] ?? null);
+		scheduleVisualDepthUpdate();
+	};
+
+	const syncToCurrentValue = () => {
+		if (isUserScrolling || !viewport) return;
+		const index = options.findIndex((option) => option.value === value);
+		if (index < 0) return;
+		const element = optionRefs[index] ?? null;
+		if (!element) return;
+		if (getCenterDistance(viewport, element) > 1) {
+			void scrollSelectedIntoView(viewport, element);
+		}
+		scheduleVisualDepthUpdate();
+	};
+
+	const handleScroll = () => {
+		scheduleVisualDepthUpdate();
+		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);
+	};
+
+	const viewportSync = (node: HTMLDivElement) => {
+		viewport = node;
+		void tick().then(() => {
+			syncToCurrentValue();
+			scheduleVisualDepthUpdate();
+		});
+
+		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;
+			}
+		};
+	};
+</script>
+
+<div
+	class="wheel-column-viewport"
+	bind:this={viewport}
+	use:viewportSync={{ value, options }}
+	onscroll={handleScroll}
+>
+	<div class="wheel-column-options vstack">
+		{#each options as option, index (option.value)}
+			<button
+				bind:this={optionRefs[index]}
+				type="button"
+				class="wheel-column-option"
+				class:wheel-column-option-selected={option.value === value}
+				aria-pressed={option.value === value}
+				onclick={() => selectOption(option, index)}
+			>
+				{option.label}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.wheel-column-viewport {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		position: relative;
+		overflow-y: auto;
+		overflow-x: hidden;
+		overscroll-behavior-y: contain;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		z-index: 1;
+	}
+
+	.wheel-column-viewport::-webkit-scrollbar {
+		display: none;
+	}
+
+	.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 {
+		flex: 0 0 auto;
+		gap: 0;
+	}
+
+	.wheel-column-option {
+		--wheel-column-emphasis: 0;
+		width: 100%;
+		height: var(--wheel-picker-option-height);
+		border: none;
+		border-radius: var(--sveltely-border-radius);
+		background: transparent;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding:
+			0
+			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(--color-zinc-700);
+		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;
+		transition:
+			color 160ms,
+			background-color 160ms,
+			opacity 160ms,
+			transform 160ms;
+	}
+
+	.wheel-column-option:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.wheel-column-option:focus-visible {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.wheel-column-option-selected {
+		background: transparent;
+		color: var(--sveltely-primary-color);
+		opacity: 1;
+		transform: scale(1);
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import type { WheelOption } from './types';
+declare function $$render<T extends string | number>(): {
+    props: {
+        options: WheelOption<T>[];
+        value?: T;
+        onChange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(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 extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const WheelColumn: $$IsomorphicComponent;
+type WheelColumn<T extends string | number> = InstanceType<typeof WheelColumn<T>>;
+export default WheelColumn;

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import WheelColumn from './WheelColumn.svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { WheelColumn as WheelColumnData } from './types';
+
+	type Props = {
+		columns: WheelColumnData[];
+		height?: number | string;
+	} & StyleProps & Record<string, unknown>;
+
+	const toCssLength = (value: number | string | undefined) =>
+		value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value;
+
+	let { columns, height, ...restProps }: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'wheel-picker'));
+	const pickerStyle = $derived.by(() => {
+		const resolvedHeight = toCssLength(height);
+		if (!resolvedHeight) return rootStyle;
+		const heightStyle = `--wheel-picker-height: ${resolvedHeight};`;
+		return rootStyle ? `${rootStyle} ${heightStyle}` : heightStyle;
+	});
+
+</script>
+
+<div class="wheel-picker vstack" style={pickerStyle} {...props}>
+	<div class="wheel-picker-label-row hstack">
+		{#each columns as column, index (`label-${index}`)}
+			<div
+				class="wheel-picker-label-column"
+				style={`--wheel-picker-column-flex: ${column.options.length <= 3 ? 0.85 : 1};`}
+			>
+				{#if column.label}
+					<div class="wheel-picker-label">{column.label}</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	<div class="wheel-picker-wheels hstack">
+		<div class="wheel-picker-overlay" aria-hidden="true"></div>
+		{#each columns as column, index (`wheel-${index}`)}
+			<div
+				class="wheel-picker-column"
+				style={`--wheel-picker-column-flex: ${column.options.length <= 3 ? 0.85 : 1};`}
+			>
+				<WheelColumn
+					options={column.options}
+					value={column.value}
+					onChange={column.onChange}
+				/>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.wheel-picker {
+		--wheel-picker-font-size: var(--sveltely-font-size);
+		--wheel-picker-scale: calc(var(--wheel-picker-font-size) / 1rem);
+		--wheel-picker-option-height: calc(
+			(calc(var(--wheel-picker-font-size) * 0.875) * 1.2) +
+				(calc(var(--sveltely-padding-y) * 0.67 * var(--wheel-picker-scale)) * 2) + 2px
+		);
+		height: var(--wheel-picker-height, calc(var(--wheel-picker-option-height) * 10));
+		gap: calc(var(--sveltely-gap) * 0.5);
+		position: relative;
+	}
+
+	.wheel-picker-label-row,
+	.wheel-picker-wheels {
+		gap: var(--sveltely-gap);
+	}
+
+	.wheel-picker-label-row {
+		flex: 0 0 auto;
+	}
+
+	.wheel-picker-label-column,
+	.wheel-picker-column {
+		flex: var(--wheel-picker-column-flex, 1) 1 0;
+		min-width: calc(var(--wheel-picker-font-size) * 3.75);
+	}
+
+	.wheel-picker-wheels {
+		flex: 1 1 auto;
+		min-height: 0;
+		position: relative;
+		align-items: stretch;
+	}
+
+	.wheel-picker-overlay {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		height: var(--wheel-picker-option-height);
+		transform: translateY(-50%);
+		border-radius: var(--sveltely-border-radius);
+		background: color-mix(in oklab, var(--color-zinc-100) 85%, white);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.wheel-picker-label {
+		padding-inline: calc(var(--sveltely-padding-x) * 0.33);
+		font-size: calc(var(--wheel-picker-font-size) * 0.75);
+		line-height: 1;
+		font-weight: 500;
+		color: var(--color-zinc-500);
+	}
+</style>

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

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

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

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

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

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

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

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

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

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

package/dist/components/Local/ComponentGrid.svelte

@@ -6,8 +6,8 @@
 		component: Component;
 		name: string;
 		description: string;
-		isProminent: boolean;
 		columnSpan?: 1 | 2;
+		rowSpan?: 1 | 2;
 	};
 
 	type Props = {
@@ -18,15 +18,16 @@
 </script>
 
 <div
-	class="component-grid grid gap-4 overflow-auto p-6 md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
+	class="component-grid grid gap-4 overflow-auto md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
+	style="padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);"
 >
 	{#each demos as entry}
 		{@const DemoComponent = entry.component}
 		<HeroCard
 			title={entry.name}
 			description={entry.description}
-			isProminent={entry.isProminent}
 			columnSpan={entry.columnSpan ?? 1}
+			rowSpan={entry.rowSpan ?? 1}
 		>
 			<DemoComponent />
 		</HeroCard>
@@ -35,10 +36,10 @@
 
 <style>
 	.component-grid :global(.hero-card) {
+		--sveltely-border-width: 1px;
 		min-height: 14rem;
-		border: 1px solid rgb(228 228 231);
-		border-radius: 1rem;
-		box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: 0.75rem;
 		align-items: stretch;
 	}
 

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

@@ -3,8 +3,8 @@ type DemoEntry = {
     component: Component;
     name: string;
     description: string;
-    isProminent: boolean;
     columnSpan?: 1 | 2;
+    rowSpan?: 1 | 2;
 };
 type Props = {
     demos: DemoEntry[];

package/dist/components/Local/HeroCard.svelte

@@ -5,14 +5,20 @@
 		title?: string;
 		description?: string;
 		children?: Snippet;
-		isProminent?: boolean;
 		columnSpan?: 1 | 2;
+		rowSpan?: 1 | 2;
 	};
 
-	let { title, description = '', children, isProminent = false, columnSpan = 1 }: Props = $props();
+	let {
+		title,
+		description = '',
+		children,
+		columnSpan = 1,
+		rowSpan = 1
+	}: Props = $props();
 </script>
 
-<div class="hero-card vstack gap-2" data-column-span={columnSpan}>
+<div class="hero-card vstack shrink-0 gap-2" data-column-span={columnSpan} data-row-span={rowSpan}>
 	{#if title}
 		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
 		{#if description}
@@ -21,10 +27,6 @@
 	{/if}
 	<div
 		class="hero-card-content center flex"
-		class:overflow-hidden={isProminent}
-		class:rounded-xl={isProminent}
-		class:bg-zinc-50={isProminent}
-		class:p-4={isProminent}
 	>
 		{#if children}
 			{@render children()}
@@ -34,8 +36,12 @@
 
 <style>
 	.hero-card {
+		--hero-card-inset-x: calc(var(--sveltely-padding-x) * 2);
+		--hero-card-inset-y: calc(var(--sveltely-padding-y) * 2);
+		--hero-card-inset: max(var(--hero-card-inset-x), var(--hero-card-inset-y));
+		--sveltely-nested-inset: var(--hero-card-inset);
 		background: white;
-		padding: 1.5rem;
+		padding: 1.5rem 1.5rem;
 	}
 
 	.hero-card-content {
@@ -47,5 +53,9 @@
 		.hero-card[data-column-span='2'] {
 			grid-column: span 2;
 		}
+
+		.hero-card[data-row-span='2'] {
+			grid-row: span 2;
+		}
 	}
 </style>

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

@@ -3,8 +3,8 @@ type Props = {
     title?: string;
     description?: string;
     children?: Snippet;
-    isProminent?: boolean;
     columnSpan?: 1 | 2;
+    rowSpan?: 1 | 2;
 };
 declare const HeroCard: import("svelte").Component<Props, {}, "">;
 type HeroCard = ReturnType<typeof HeroCard>;