@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/composer/ComposerModelPicker.svelte

@@ -0,0 +1,475 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import { getComposerContext } from './context.js';
+
+	export type ComposerModel = {
+		value: string;
+		label: string;
+		/** A line under the name, such as "Fastest for everyday tasks". */
+		description?: string;
+		/** Models with the same group are listed together under its name. */
+		group?: string;
+		/** A short tag beside the name, such as "New". */
+		badge?: string;
+		disabled?: boolean;
+	};
+
+	export type ComposerModelPickerProps = Omit<HTMLButtonAttributes, 'children' | 'value'> & {
+		models: ComposerModel[];
+		/** The chosen model's value. Bindable. Defaults to the first model. */
+		value?: string;
+		/** What is being chosen. Names the list, and is read before the model on the button. */
+		label?: string;
+		/** Called when the person picks a model. */
+		onchange?: (value: string) => void;
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const FORCED = '@media (forced-colors: active)';
+	const GAP = 6;
+	const MARGIN = 8;
+
+	const styles = stylex.create({
+		trigger: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			flexShrink: 1,
+			gap: '0.25rem',
+			minWidth: 0,
+			height: '1.75rem',
+			margin: 0,
+			paddingInlineStart: '0.625rem',
+			paddingInlineEnd: '0.375rem',
+			borderWidth: 0,
+			borderRadius: `calc(${radius.xl} * 4 / 3)`,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			fontFamily: 'inherit',
+			fontSize: font.sizeSm,
+			fontWeight: font.weightMedium,
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			cursor: { default: 'pointer', ':disabled': 'not-allowed' },
+			opacity: { default: 1, ':disabled': 0.5 },
+			WebkitTapHighlightColor: 'transparent',
+			transitionProperty: 'background-color, color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		triggerOpen: {
+			backgroundColor: colors.hover,
+			color: colors.text
+		},
+		triggerText: {
+			overflow: 'hidden',
+			textOverflow: 'ellipsis'
+		},
+		selector: { display: 'grid', flexShrink: 0, opacity: 0.7 },
+
+		// The list floats in the top layer, placed beside the button by script.
+		// It grows out of the button, and goes a little faster than it came.
+		popover: {
+			position: 'fixed',
+			inset: 'auto',
+			boxSizing: 'border-box',
+			width: 'max-content',
+			minWidth: '15rem',
+			maxWidth: 'min(320px, calc(100vw - 16px))',
+			maxHeight: 'min(360px, var(--narvi-picker-room, 360px))',
+			margin: 0,
+			padding: '0.25rem',
+			overflowY: 'auto',
+			overscrollBehavior: 'contain',
+			borderWidth: 0,
+			// Inner items are 8px round with 4px of padding: 12px outside
+			borderRadius: radius.xl,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 2px 4px ${colors.shade}, 0 16px 40px -12px ${colors.shade}`,
+			color: colors.text,
+			fontFamily: font.body,
+			scrollbarWidth: 'thin',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, [FORCED]: '1px' },
+			outlineColor: 'CanvasText',
+			transformOrigin: 'var(--narvi-picker-origin, top left)',
+			opacity: { default: 0, ':popover-open': { default: 1, '@starting-style': 0 } },
+			scale: {
+				default: null,
+				[MOTION]: { default: 0.97, ':popover-open': { default: 1, '@starting-style': 0.97 } }
+			},
+			transitionProperty: {
+				default: 'opacity, display, overlay',
+				[MOTION]: 'opacity, scale, display, overlay'
+			},
+			transitionBehavior: 'allow-discrete',
+			transitionDuration: { default: '100ms', ':popover-open': '160ms' },
+			transitionTimingFunction: motion.easeOut
+		},
+		list: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '2px',
+			outlineStyle: 'none'
+		},
+		group: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '2px',
+			paddingTop: '0.25rem'
+		},
+		groupLabel: {
+			paddingTop: '0.375rem',
+			paddingBottom: '0.25rem',
+			paddingInline: '0.625rem',
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: '0.6875rem',
+			letterSpacing: '0.04em',
+			lineHeight: 1,
+			textTransform: 'uppercase'
+		},
+		option: {
+			display: 'grid',
+			gridTemplateColumns: 'minmax(0, 1fr) 16px',
+			alignItems: 'center',
+			columnGap: '0.75rem',
+			minHeight: '2.25rem',
+			paddingBlock: '0.4375rem',
+			paddingInline: '0.625rem',
+			borderRadius: radius.md,
+			cursor: 'pointer',
+			userSelect: 'none',
+			WebkitTapHighlightColor: 'transparent'
+		},
+		// The option the keyboard or pointer is on. No transition: it follows the
+		// arrow keys, which are pressed many times in a row.
+		active: {
+			backgroundColor: { default: colors.hover, [FORCED]: 'Highlight' },
+			color: { default: null, [FORCED]: 'HighlightText' },
+			forcedColorAdjust: 'none'
+		},
+		optionDisabled: {
+			opacity: 0.45,
+			cursor: 'not-allowed'
+		},
+		name: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.375rem',
+			minWidth: 0,
+			fontSize: font.sizeMd,
+			fontWeight: font.weightMedium,
+			lineHeight: font.leadingSnug
+		},
+		nameText: {
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		},
+		badge: {
+			flexShrink: 0,
+			paddingBlock: '2px',
+			paddingInline: '0.375rem',
+			borderRadius: radius.lg,
+			backgroundColor: colors.ithilSoft,
+			color: colors.ithil,
+			fontSize: '0.6875rem',
+			fontWeight: font.weightMedium,
+			lineHeight: 1.3
+		},
+		description: {
+			gridColumn: '1',
+			marginTop: '2px',
+			color: colors.textMuted,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug
+		},
+		check: {
+			gridColumn: '2',
+			gridRow: '1',
+			display: 'grid',
+			color: colors.ithil
+		}
+	});
+
+	type Group = { name: string | undefined; models: ComposerModel[] };
+
+	function groupModels(models: ComposerModel[]): Group[] {
+		const groups: Group[] = [];
+		for (const model of models) {
+			const last = groups.at(-1);
+			if (last && last.name === model.group) last.models.push(model);
+			else groups.push({ name: model.group, models: [model] });
+		}
+		return groups;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		models,
+		value = $bindable(),
+		label = 'Model',
+		onchange,
+		disabled,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		onclick,
+		onkeydown,
+		...rest
+	}: ComposerModelPickerProps = $props();
+
+	const composer = getComposerContext();
+	const uid = $props.id();
+
+	let popover = $state<HTMLDivElement | null>(null);
+	let list = $state<HTMLDivElement | null>(null);
+	let open = $state(false);
+	let active = $state<string>();
+
+	const groups = $derived(groupModels(models));
+	const enabled = $derived(models.filter((model) => !model.disabled));
+	const selected = $derived(models.find((model) => model.value === value) ?? models[0]);
+	const optionId = (model: ComposerModel) => `${uid}-option-${models.indexOf(model)}`;
+	const activeModel = $derived(models.find((model) => model.value === active));
+
+	function show() {
+		active = selected && !selected.disabled ? selected.value : enabled[0]?.value;
+		popover?.showPopover();
+		// Placed and focused at once, so a key pressed straight after opening is not lost
+		place();
+		list?.focus();
+		list?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
+	}
+
+	function hide(refocus = true) {
+		popover?.hidePopover();
+		if (refocus) ref?.focus();
+	}
+
+	function choose(model: ComposerModel) {
+		if (model.disabled) return;
+		value = model.value;
+		onchange?.(model.value);
+		hide();
+	}
+
+	// Beside the button: below it when there is room, otherwise above, which is
+	// usually the case for a composer at the foot of the page.
+	function place() {
+		if (!ref || !popover) return;
+		const button = ref.getBoundingClientRect();
+		const below = innerHeight - button.bottom - GAP - MARGIN;
+		const above = button.top - GAP - MARGIN;
+		const height = popover.scrollHeight;
+		const up = height > below && above > below;
+		const rtl = getComputedStyle(ref).direction === 'rtl';
+		const width = popover.offsetWidth;
+
+		let left = rtl ? button.right - width : button.left;
+		left = Math.min(Math.max(left, MARGIN), innerWidth - width - MARGIN);
+
+		popover.style.left = `${left}px`;
+		popover.style.top = up ? 'auto' : `${button.bottom + GAP}px`;
+		popover.style.bottom = up ? `${innerHeight - button.top + GAP}px` : 'auto';
+		popover.style.setProperty('--narvi-picker-room', `${Math.max(up ? above : below, 120)}px`);
+		popover.style.setProperty(
+			'--narvi-picker-origin',
+			`${up ? 'bottom' : 'top'} ${rtl ? 'right' : 'left'}`
+		);
+	}
+
+	function ontoggle(event: ToggleEvent) {
+		open = event.newState === 'open';
+		if (!open && popover?.contains(document.activeElement)) {
+			// Closed by Escape or a click outside while the list had focus
+			ref?.focus();
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+		const reposition = () => place();
+		addEventListener('resize', reposition);
+		addEventListener('scroll', reposition, { capture: true, passive: true });
+		return () => {
+			removeEventListener('resize', reposition);
+			removeEventListener('scroll', reposition, { capture: true });
+		};
+	});
+
+	// Keep the active option in view as the keyboard moves through the list
+	$effect(() => {
+		if (!open || !activeModel || !list) return;
+		list
+			.querySelector(`#${CSS.escape(optionId(activeModel))}`)
+			?.scrollIntoView({ block: 'nearest' });
+	});
+
+	function move(step: number) {
+		if (!enabled.length) return;
+		const index = enabled.findIndex((model) => model.value === active);
+		const next = index === -1 ? (step > 0 ? 0 : enabled.length - 1) : index + step;
+		active = enabled[Math.min(Math.max(next, 0), enabled.length - 1)].value;
+	}
+
+	// Typing a letter or two jumps to the model whose name starts with them
+	let typed = '';
+	let typedTimer: ReturnType<typeof setTimeout> | undefined;
+	function typeahead(char: string) {
+		clearTimeout(typedTimer);
+		typed += char.toLowerCase();
+		typedTimer = setTimeout(() => (typed = ''), 600);
+		const start = enabled.findIndex((model) => model.value === active);
+		const ordered = [...enabled.slice(start + 1), ...enabled.slice(0, start + 1)];
+		const pool =
+			typed.length === 1 ? ordered : [...enabled.slice(start), ...enabled.slice(0, start)];
+		const match = pool.find((model) => model.label.toLowerCase().startsWith(typed));
+		if (match) active = match.value;
+	}
+
+	function onListKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				move(1);
+				break;
+			case 'ArrowUp':
+				move(-1);
+				break;
+			case 'Home':
+				active = enabled[0]?.value;
+				break;
+			case 'End':
+				active = enabled.at(-1)?.value;
+				break;
+			case 'Enter':
+			case ' ':
+				if (event.key === ' ' && typed) {
+					typeahead(' ');
+					break;
+				}
+				if (activeModel) choose(activeModel);
+				break;
+			case 'Tab':
+				hide();
+				break;
+			default:
+				if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+					typeahead(event.key);
+					break;
+				}
+				return;
+		}
+		event.preventDefault();
+	}
+
+	function onTriggerKeydown(event: KeyboardEvent & { currentTarget: HTMLButtonElement }) {
+		onkeydown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			show();
+		}
+	}
+
+	$effect(() => () => clearTimeout(typedTimer));
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	aria-haspopup="listbox"
+	aria-expanded={open}
+	aria-controls="{uid}-popover"
+	aria-label="{label}: {selected?.label ?? ''}"
+	disabled={disabled ?? composer?.disabled}
+	data-slot="composer-model-picker"
+	{...rest}
+	{...attrs([styles.trigger, shared.focusable, open && styles.triggerOpen, sx], className)}
+	onclick={(event) => {
+		onclick?.(event);
+		if (event.defaultPrevented) return;
+		if (open) hide();
+		else show();
+	}}
+	onkeydown={onTriggerKeydown}
+>
+	<span {...stylex.attrs(styles.triggerText)}>{selected?.label}</span>
+	<span {...stylex.attrs(styles.selector)}><Glyph name="selector" size={14} /></span>
+</button>
+
+<div
+	bind:this={popover}
+	id="{uid}-popover"
+	popover="auto"
+	data-slot="composer-model-list"
+	{...stylex.attrs(styles.popover)}
+	{ontoggle}
+>
+	<div
+		bind:this={list}
+		role="listbox"
+		tabindex="-1"
+		aria-label={label}
+		aria-activedescendant={activeModel ? optionId(activeModel) : undefined}
+		{...stylex.attrs(styles.list)}
+		onkeydown={onListKeydown}
+	>
+		{#each groups as group, g (g)}
+			<div
+				role="group"
+				aria-labelledby={group.name ? `${uid}-group-${g}` : undefined}
+				{...stylex.attrs(g > 0 && styles.group)}
+			>
+				{#if group.name}
+					<div id="{uid}-group-{g}" {...stylex.attrs(styles.groupLabel)}>{group.name}</div>
+				{/if}
+				{#each group.models as model (model.value)}
+					{@const isSelected = model.value === selected?.value}
+					<!-- The list handles the keyboard for every option; this click is for the pointer -->
+					<div
+						id={optionId(model)}
+						role="option"
+						aria-selected={isSelected}
+						aria-disabled={model.disabled || undefined}
+						{...stylex.attrs(
+							styles.option,
+							model.value === active && styles.active,
+							model.disabled && styles.optionDisabled
+						)}
+						onpointermove={() => {
+							if (!model.disabled) active = model.value;
+						}}
+						onclick={() => choose(model)}
+					>
+						<span {...stylex.attrs(styles.name)}>
+							<span {...stylex.attrs(styles.nameText)}>{model.label}</span>
+							{#if model.badge}<span {...stylex.attrs(styles.badge)}>{model.badge}</span>{/if}
+						</span>
+						{#if isSelected}
+							<span {...stylex.attrs(styles.check)}><Glyph name="check" stroke={1.75} /></span>
+						{/if}
+						{#if model.description}
+							<span {...stylex.attrs(styles.description)}>{model.description}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>

package/dist/components/composer/ComposerModelPicker.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerModel = {
+    value: string;
+    label: string;
+    /** A line under the name, such as "Fastest for everyday tasks". */
+    description?: string;
+    /** Models with the same group are listed together under its name. */
+    group?: string;
+    /** A short tag beside the name, such as "New". */
+    badge?: string;
+    disabled?: boolean;
+};
+export type ComposerModelPickerProps = Omit<HTMLButtonAttributes, 'children' | 'value'> & {
+    models: ComposerModel[];
+    /** The chosen model's value. Bindable. Defaults to the first model. */
+    value?: string;
+    /** What is being chosen. Names the list, and is read before the model on the button. */
+    label?: string;
+    /** Called when the person picks a model. */
+    onchange?: (value: string) => void;
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+};
+declare const ComposerModelPicker: import("svelte").Component<ComposerModelPickerProps, {}, "value" | "ref">;
+type ComposerModelPicker = ReturnType<typeof ComposerModelPicker>;
+export default ComposerModelPicker;