sheer-ui 0.0.0

package/src/lib/components/carousel/carousel.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { untrack } from 'svelte';
+	import { on } from 'svelte/events';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Attachment } from 'svelte/attachments';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
+	import { setCarouselContext, setCarouselWiring, type CarouselAlign, type CarouselOrientation } from './carouselState.svelte';
+
+	let {
+		ref = $bindable(null),
+		orientation = 'horizontal',
+		align = 'start',
+		loop = false,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: CarouselOrientation;
+		align?: CarouselAlign;
+		/** Endless scrolling via flex-`order` rotation: the selected slide is re-centered in the
+		 *  strip on every scrollend, so there is always runway on both sides. Needs ≥3 slides. */
+		loop?: boolean;
+	} = $props();
+
+	let scroller = $state.raw<HTMLElement | null>(null);
+
+	// Scroll facts, synced from the native scroller on scrollend. Selection is a
+	// scroll fact here, not an engine event: the browser owns physics and snapping.
+	let selectedIndex = $state(0);
+	let snapOffsets = $state.raw<number[]>([]);
+	let atStart = $state(true);
+	let atEnd = $state(true);
+
+	const horizontal = $derived(orientation === 'horizontal');
+
+	const scrollPos = (el: HTMLElement) => (horizontal ? el.scrollLeft : el.scrollTop);
+	const viewSize = (el: HTMLElement) => (horizontal ? el.clientWidth : el.clientHeight);
+	const scrollSize = (el: HTMLElement) => (horizontal ? el.scrollWidth : el.scrollHeight);
+
+	// Snap offset of a slide in scroll coordinates for the configured alignment.
+	// Rect deltas against the current scroll position stay correct under RTL, where
+	// scrollLeft runs negative — but the logical inline-start edge is the RIGHT edge
+	// there, so both the measured edge and the align offset's sign must flip or
+	// `align: center/end` disagrees with where scroll-snap-align actually snaps.
+	function measureOffsets(el: HTMLElement): number[] {
+		const scrollerRect = el.getBoundingClientRect();
+		const pos = scrollPos(el);
+		const rtl = horizontal && getComputedStyle(el).direction === 'rtl';
+
+		const measured = [...el.children].map((slide) => {
+			const slideRect = slide.getBoundingClientRect();
+			const start =
+				horizontal ?
+					rtl ? slideRect.right - scrollerRect.right
+					:	slideRect.left - scrollerRect.left
+				:	slideRect.top - scrollerRect.top;
+			const size = horizontal ? slideRect.width : slideRect.height;
+			const free = viewSize(el) - size;
+			const alignOffset = align === 'center' ? free / 2 : align === 'end' ? free : 0;
+
+			return pos + start + (rtl ? alignOffset : -alignOffset);
+		});
+
+		// publish only on change — most measurements confirm the same offsets, and every
+		// reassignment invalidates the dot UIs reading `scrollSnaps`
+		if (measured.length !== snapOffsets.length || measured.some((v, i) => v !== snapOffsets[i])) snapOffsets = measured;
+
+		return measured;
+	}
+
+	// Rotate CSS `order` so the selected slide sits mid-strip, then scroll STRAIGHT TO its
+	// post-rotation snap offset — absolute, not a relative delta. The browser reacts to the
+	// reorder on its own (snap-follow, scroll anchoring); a relative compensation stacks on top
+	// of that and oscillates one stride per scrollend, while the absolute target is a fixed
+	// point no matter who scrolls first. DOM order never changes: indices, offsets, and dot
+	// UIs keep speaking child order.
+	function recenter() {
+		if (!scroller) return;
+		const slides = [...scroller.children] as HTMLElement[];
+		const n = slides.length;
+		if (n < 3) return;
+
+		const half = Math.floor(n / 2);
+		for (let i = 0; i < n; i++) {
+			slides[i]!.style.order = String((((i - selectedIndex + half) % n) + n) % n);
+		}
+		const offset = measureOffsets(scroller)[selectedIndex]!;
+		if (Math.abs(scrollPos(scroller) - offset) >= 1) {
+			scroller.scrollTo(horizontal ? { left: offset, behavior: 'instant' } : { top: offset, behavior: 'instant' });
+		}
+	}
+
+	function sync() {
+		if (!scroller) return;
+
+		const offsets = measureOffsets(scroller);
+		const pos = scrollPos(scroller);
+
+		let closest = 0;
+		for (let i = 1; i < offsets.length; i++) {
+			if (Math.abs(offsets[i]! - pos) < Math.abs(offsets[closest]! - pos)) closest = i;
+		}
+
+		selectedIndex = closest;
+		if (loop) {
+			atStart = false;
+			atEnd = false;
+			recenter();
+			return;
+		}
+		atStart = Math.abs(pos) <= 1;
+		atEnd = Math.abs(pos) >= scrollSize(scroller) - viewSize(scroller) - 1;
+	}
+
+	function scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth') {
+		if (!scroller) return;
+
+		const offsets = measureOffsets(scroller);
+		if (!offsets.length) return;
+
+		if (loop) {
+			// Wrap instead of clamp. Rapid clicks past the wrap point animate across the strip once
+			// (recenter hasn't run between clicks) — settles correctly on scrollend.
+			const target = ((index % offsets.length) + offsets.length) % offsets.length;
+			selectedIndex = target;
+			scroller.scrollTo(horizontal ? { left: offsets[target], behavior } : { top: offsets[target], behavior });
+			return;
+		}
+
+		const clamped = Math.min(Math.max(index, 0), offsets.length - 1);
+
+		// Optimistic, so rapid clicks queue from the pending target and the
+		// arrows disable without waiting for scrollend.
+		selectedIndex = clamped;
+		atStart = Math.abs(offsets[clamped]!) <= 1;
+		atEnd = Math.abs(offsets[clamped]!) >= scrollSize(scroller) - viewSize(scroller) - 1;
+
+		scroller.scrollTo(horizontal ? { left: offsets[clamped], behavior } : { top: offsets[clamped], behavior });
+	}
+
+	function scrollPrev() {
+		scrollToIndex(selectedIndex - 1);
+	}
+
+	function scrollNext() {
+		scrollToIndex(selectedIndex + 1);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (orientation === 'horizontal') {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				scrollPrev();
+			}
+
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				scrollNext();
+			}
+
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			scrollPrev();
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			scrollNext();
+		}
+	}
+
+	const scrollerAttachment: Attachment<HTMLElement> = (node) => {
+		scroller = node;
+		// untrack: sync reads the scroller/index state this attachment writes; tracking
+		// it would make the attachment re-run on its own writes.
+		untrack(sync);
+
+		// scrollend is Baseline; the debounced scroll fallback covers older Safari.
+		const dispose = 'onscrollend' in window ? on(node, 'scrollend', sync) : debouncedScrollFallback(node);
+
+		return () => {
+			dispose();
+			scroller = null;
+		};
+	};
+
+	function debouncedScrollFallback(node: HTMLElement) {
+		const debouncedSync = createEffectTimeout(sync, () => 150);
+		const off = on(node, 'scroll', debouncedSync.start, { passive: true });
+
+		return () => {
+			debouncedSync.stop();
+			off();
+		};
+	}
+
+	setCarouselWiring({
+		get orientation() {
+			return orientation;
+		},
+		get align() {
+			return align;
+		},
+		scroller: scrollerAttachment,
+	});
+
+	// The consumer-facing context: arrows and dot UIs read scroll facts from here.
+	setCarouselContext({
+		get orientation() {
+			return orientation;
+		},
+		get canScrollNext() {
+			return !atEnd;
+		},
+		get canScrollPrev() {
+			return !atStart;
+		},
+		get scrollSnaps() {
+			return snapOffsets;
+		},
+		get selectedIndex() {
+			return selectedIndex;
+		},
+		scrollPrev,
+		scrollNext,
+		scrollTo: (index: number, jump?: boolean) => scrollToIndex(index, jump ? 'instant' : 'smooth'),
+		handleKeyDown,
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={join('relative', className)}
+	role="region"
+	aria-roledescription="carousel"
+	onkeydown={handleKeyDown}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/carousel/carouselState.svelte.ts

@@ -0,0 +1,30 @@
+import { createContext } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+
+export type CarouselOrientation = 'horizontal' | 'vertical';
+export type CarouselAlign = 'start' | 'center' | 'end';
+
+/** Consumer-facing carousel state: what the arrow components and dot UIs read. */
+export type CarouselContext = {
+	readonly orientation: CarouselOrientation;
+	readonly canScrollNext: boolean;
+	readonly canScrollPrev: boolean;
+	readonly scrollSnaps: number[];
+	readonly selectedIndex: number;
+
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	handleKeyDown: (event: KeyboardEvent) => void;
+};
+
+export const [getCarouselContext, setCarouselContext] = createContext<CarouselContext>();
+
+/** Internal wiring between Root and Content/Item; not part of the consumer surface. */
+export type CarouselWiring = {
+	readonly orientation: CarouselOrientation;
+	readonly align: CarouselAlign;
+	scroller: Attachment<HTMLElement>;
+};
+
+export const [getCarouselWiring, setCarouselWiring] = createContext<CarouselWiring>();

package/src/lib/components/carousel/index.ts

@@ -0,0 +1,24 @@
+import Root from './carousel.svelte';
+import Content from './carousel-content.svelte';
+import Item from './carousel-item.svelte';
+import Next from './carousel-next.svelte';
+import Previous from './carousel-previous.svelte';
+import Dots from './carousel-dots.svelte';
+
+export type { CarouselAlign, CarouselOrientation } from './carouselState.svelte';
+
+export {
+	Root,
+	Content,
+	Item,
+	Previous,
+	Next,
+	Dots,
+	//
+	Root as Carousel,
+	Content as CarouselContent,
+	Item as CarouselItem,
+	Previous as CarouselPrevious,
+	Next as CarouselNext,
+	Dots as CarouselDots,
+};

package/src/lib/components/chart/chart-container.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import ChartStyle from './chart-style.svelte';
+	import { setChartContext, type ChartConfig } from './chart-utils.js';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = uid,
+		class: className,
+		style,
+		children,
+		config,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		config: ChartConfig;
+	} = $props();
+
+	const chartId = $derived(`chart-${id || uid.replace(/:/g, '')}`);
+
+	setChartContext({
+		get config() {
+			return config;
+		},
+	});
+
+	// Plain colors become inline custom properties; per-theme colors need real
+	// selectors (`.dark`) and keep the <ChartStyle> stylesheet path.
+	const colorVars = $derived(
+		Object.entries(config)
+			.filter(([, item]) => item.color)
+			.map(([key, item]) => `--color-${key}: ${item.color};`)
+			.join(' '),
+	);
+	const hasThemedColors = $derived(Object.values(config).some((item) => item.theme));
+</script>
+
+<div
+	bind:this={ref}
+	data-chart={chartId}
+	data-slot="chart"
+	class={join('flex aspect-video justify-center overflow-visible text-xs', className)}
+	style={[colorVars, style].filter(Boolean).join(' ') || undefined}
+	{...restProps}>
+	{#if hasThemedColors}
+		<ChartStyle id={chartId} {config} />
+	{/if}
+	{@render children?.()}
+</div>

package/src/lib/components/chart/chart-style.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { THEMES, type ChartConfig } from './chart-utils.js';
+
+	let { id, config }: { id: string; config: ChartConfig } = $props();
+
+	// Only entries with per-theme colors reach this component; plain colors are
+	// inlined as custom properties by chart-container.
+	const themedConfig = $derived(Object.entries(config).flatMap(([key, item]) => (item.theme ? [[key, item.theme] as const] : [])));
+
+	const themeContents = $derived.by(() => {
+		if (!themedConfig.length) return;
+
+		return Object.entries(THEMES)
+			.map(([theme, prefix]) =>
+				[
+					`${prefix} [data-chart=${id}] {`,
+					...themedConfig.map(([key, themeColors]) => `\t--color-${key}: ${themeColors[theme as keyof typeof THEMES]};`),
+					'}',
+				].join('\n'),
+			)
+			.join('\n');
+	});
+</script>
+
+{#if themeContents}
+	<svelte:element this={'style'}>
+		{themeContents}
+	</svelte:element>
+{/if}

package/src/lib/components/chart/chart-tooltip.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef, WithoutChildren } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
+	import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
+	import type { Snippet } from 'svelte';
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+		return `${value}`;
+	}
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		hideLabel = false,
+		indicator = 'dot',
+		hideIndicator = false,
+		labelKey,
+		label,
+		labelFormatter = defaultFormatter,
+		labelClassName,
+		formatter,
+		nameKey,
+		color,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		hideLabel?: boolean;
+		label?: string;
+		indicator?: 'line' | 'dot' | 'dashed';
+		nameKey?: string;
+		labelKey?: string;
+		hideIndicator?: boolean;
+		labelClassName?: string;
+		labelFormatter?:
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+		formatter?: Snippet<
+			[
+				{
+					value: unknown;
+					name: string;
+					item: TooltipPayload;
+					index: number;
+					payload: TooltipPayload[];
+				},
+			]
+		>;
+	} = $props();
+
+	const chart = useChart();
+	const chartCtx = getChartContext();
+
+	// Filter to series with defined values (important for item-based charts like Pie/Arc
+	// where only the hovered item has a value)
+	const visibleSeries = $derived(chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined));
+
+	const formattedLabel = $derived.by(() => {
+		if (hideLabel || !visibleSeries?.length) return null;
+
+		const [item] = visibleSeries;
+		const tooltipData = chartCtx.tooltip.data;
+
+		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
+		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+
+		const key = labelKey ?? item?.label ?? item?.key ?? 'value';
+		const itemConfig = getPayloadConfigFromPayload(chart.config, item!, key, tooltipData as Record<string, unknown> | null);
+
+		let value: unknown;
+		if (!labelKey && typeof label === 'string') {
+			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+		} else if (labelKey) {
+			value = itemConfig?.label ?? dataLabel;
+		} else {
+			value = dataLabel;
+		}
+
+		if (value === undefined) return null;
+		if (!labelFormatter) return value;
+		return labelFormatter(value, visibleSeries);
+	});
+
+	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== 'dot');
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel}
+		<div class={join('font-medium', labelClassName)}>
+			{#if typeof formattedLabel === 'function'}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		bind:this={ref}
+		class={join(
+			'border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+			className,
+		)}
+		{...restProps}>
+		{#if !nestLabel}
+			{@render TooltipLabel()}
+		{/if}
+		<div class="grid gap-1.5">
+			{#each visibleSeries as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || item.label || 'value'}`}
+				{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key, chartCtx.tooltip.data)}
+				{@const indicatorColor = color || item.config?.color || item.color}
+				<div
+					class={join(
+						'[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',
+						indicator === 'dot' && 'items-center',
+					)}>
+					{#if formatter && item.value !== undefined && item.label}
+						{@render formatter({
+							value: item.value,
+							name: item.label,
+							item,
+							index: i,
+							payload: visibleSeries,
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+								class={join('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {
+									'size-2.5': indicator === 'dot',
+									'h-full w-1': indicator === 'line',
+									'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+									'my-0.5': nestLabel && indicator === 'dashed',
+								})}>
+							</div>
+						{/if}
+						<div class={join('flex flex-1 shrink-0 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>
+							<div class="grid gap-1.5">
+								{#if nestLabel}
+									{@render TooltipLabel()}
+								{/if}
+								<span class="text-muted-foreground">
+									{itemConfig?.label || item.label}
+								</span>
+							</div>
+							{#if item.value !== undefined}
+								<span class="text-foreground font-mono font-medium tabular-nums">
+									{item.value.toLocaleString()}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</TooltipPrimitive.Root>

package/src/lib/components/chart/chart-utils.ts

@@ -0,0 +1,50 @@
+import type { Tooltip } from 'layerchart';
+import { createContext, type Component } from 'svelte';
+
+export const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: string;
+		icon?: Component;
+	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+export type TooltipPayload = Tooltip.TooltipSeries;
+
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(
+	config: ChartConfig,
+	payload: TooltipPayload,
+	key: string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	data?: Record<string, any> | null,
+) {
+	if (typeof payload !== 'object' || payload === null) return undefined;
+
+	const payloadConfig = 'config' in payload && typeof payload.config === 'object' && payload.config !== null ? payload.config : undefined;
+
+	let configLabelKey: string = key;
+
+	if (payload.key === key) {
+		configLabelKey = payload.key;
+	} else if (payload.label === key) {
+		configLabelKey = payload.label;
+	} else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (payloadConfig !== undefined && key in payloadConfig && typeof payloadConfig[key as keyof typeof payloadConfig] === 'string') {
+		configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
+	} else if (data != null && key in data && typeof data[key] === 'string') {
+		configLabelKey = data[key] as string;
+	}
+
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+type ChartContextValue = {
+	config: ChartConfig;
+};
+
+// The getter throws missing_context when no Chart.Container is above, instead of
+// returning undefined and failing later on `.config`.
+export const [useChart, setChartContext] = createContext<ChartContextValue>();

package/src/lib/components/chart/index.ts

@@ -0,0 +1,6 @@
+import ChartContainer from './chart-container.svelte';
+import ChartTooltip from './chart-tooltip.svelte';
+
+export { getPayloadConfigFromPayload, type ChartConfig } from './chart-utils.js';
+
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };