@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/composer/ComposerRoot.svelte

@@ -0,0 +1,315 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLFormAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import {
+		accepts,
+		setComposerContext,
+		type ComposerMessage,
+		type ComposerRejection,
+		type ComposerStatus
+	} from './context.js';
+
+	export type ComposerRootProps = Omit<HTMLFormAttributes, 'children' | 'onsubmit'> & {
+		/** What the person has typed. Bindable. */
+		value?: string;
+		/** The files attached so far. Bindable. */
+		files?: File[];
+		status?: ComposerStatus;
+		disabled?: boolean;
+		/** File types to take, as in an input's `accept`, such as `image/*,.pdf`. */
+		accept?: string;
+		/** The most files at once. */
+		maxFiles?: number;
+		/** The largest file, in bytes. */
+		maxSize?: number;
+		/** What is shown over the composer while files are dragged onto it. */
+		dropLabel?: string;
+		/**
+		 * Called with the trimmed text and the files when the person sends. The
+		 * composer is cleared afterwards, unless this returns `false`.
+		 */
+		onsubmit?: (message: ComposerMessage, event: SubmitEvent) => unknown;
+		/** Called when the person stops a reply that is on its way. */
+		onstop?: () => void;
+		/**
+		 * Called with the message when the person sends while a reply is under
+		 * way. Without it, nothing can be sent until the reply ends. Show what is
+		 * queued with a QueuedMessage; the composer is cleared unless this returns `false`.
+		 */
+		onqueue?: (message: ComposerMessage, event: SubmitEvent) => unknown;
+		/** Called with the files that were turned away, and why. */
+		onreject?: (rejections: ComposerRejection[]) => void;
+		sx?: Sx;
+		ref?: HTMLFormElement | null;
+		/** Composer.Attachments, a Composer.Textarea and a Composer.Toolbar. */
+		children?: Snippet;
+	};
+
+	const FORCED = '@media (forced-colors: active)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		root: {
+			position: 'relative',
+			boxSizing: 'border-box',
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.25rem',
+			minWidth: 0,
+			margin: 0,
+			padding: '0.5rem',
+			// The controls' radius plus this padding, so the corners sit concentric.
+			// Both follow the radius scale: 1rem and 1.5rem by default.
+			borderRadius: `calc(${radius.xl} * 4 / 3 + 0.5rem)`,
+			backgroundColor: colors.bgRaised,
+			color: colors.text,
+			fontFamily: font.body,
+			cursor: 'text',
+			boxShadow: {
+				default: `inset 0 0 0 1px ${colors.line}, inset 0 1px 0 ${colors.highlight}, 0 1px 2px ${colors.shade}, 0 16px 32px -20px ${colors.shade}`,
+				':focus-within': `inset 0 0 0 1px ${colors.edge}, inset 0 1px 0 ${colors.highlight}, 0 1px 2px ${colors.shade}, 0 16px 32px -20px ${colors.shade}`
+			},
+			// In forced colours the shadow is gone; the outline is the edge, and thickens with focus
+			outlineWidth: { default: '1px', [FORCED]: { default: '1px', ':focus-within': '2px' } },
+			transitionProperty: 'box-shadow',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		disabled: {
+			opacity: 0.6,
+			cursor: 'not-allowed'
+		},
+		// Dragging files over: the whole composer lights up as the place to let go
+		drop: {
+			position: 'absolute',
+			inset: 0,
+			zIndex: 2,
+			display: 'grid',
+			placeItems: 'center',
+			borderRadius: 'inherit',
+			backgroundColor: `color-mix(in oklab, ${colors.bgRaised} 86%, transparent)`,
+			backdropFilter: 'blur(2px)',
+			boxShadow: `inset 0 0 0 1.5px ${colors.ithil}, 0 0 24px ${colors.glow}`,
+			color: colors.ithil,
+			fontSize: font.sizeMd,
+			fontWeight: font.weightMedium,
+			pointerEvents: 'none',
+			opacity: { default: 1, '@starting-style': 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.98 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionDuration: motion.base,
+			transitionTimingFunction: motion.easeOut
+		},
+		input: { display: 'none' },
+		status: {
+			position: 'absolute',
+			width: '1px',
+			height: '1px',
+			overflow: 'hidden',
+			clipPath: 'inset(50%)',
+			whiteSpace: 'nowrap'
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		files = $bindable([]),
+		status = 'ready',
+		disabled = false,
+		accept,
+		maxFiles,
+		maxSize,
+		dropLabel = 'Drop files to attach',
+		onsubmit,
+		onstop,
+		onqueue,
+		onreject,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		onclick,
+		...rest
+	}: ComposerRootProps = $props();
+
+	let textarea: HTMLTextAreaElement | null = null;
+	let picker = $state<HTMLInputElement | null>(null);
+	let attachments = $state(0);
+	// dragenter and dragleave fire for every child crossed; count them to know when the drag has left
+	let depth = $state(0);
+	let announcement = $state('');
+
+	const busy = $derived(status === 'submitted' || status === 'streaming');
+	const attachable = $derived(attachments > 0 && !disabled);
+
+	function addFiles(incoming: Iterable<File>) {
+		const taken: File[] = [];
+		const rejected: ComposerRejection[] = [];
+		for (const file of incoming) {
+			if (!accepts(file, accept)) rejected.push({ file, reason: 'type' });
+			else if (maxSize !== undefined && file.size > maxSize)
+				rejected.push({ file, reason: 'size' });
+			else if (maxFiles !== undefined && files.length + taken.length >= maxFiles)
+				rejected.push({ file, reason: 'count' });
+			else taken.push(file);
+		}
+		if (taken.length) {
+			files = [...files, ...taken];
+			announcement =
+				taken.length === 1 ? `Attached ${taken[0].name}` : `Attached ${taken.length} files`;
+		}
+		if (rejected.length) onreject?.(rejected);
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (disabled) return;
+		const text = value.trim();
+		const empty = !text && files.length === 0;
+		if (busy) {
+			// The Stop button stops; Enter in the text, with something written, queues
+			const stopping = !!(event.submitter as HTMLElement | null)?.closest(
+				'[data-slot="composer-submit"]'
+			);
+			if (stopping || !onqueue || empty) {
+				if (stopping) onstop?.();
+				return;
+			}
+			if (onqueue({ text, files: [...files] }, event) !== false) {
+				value = '';
+				files = [];
+			}
+			return;
+		}
+		if (empty) return;
+		if (onsubmit?.({ text, files: [...files] }, event) !== false) {
+			value = '';
+			files = [];
+		}
+	}
+
+	const carriesFiles = (event: DragEvent) => event.dataTransfer?.types.includes('Files') ?? false;
+
+	setComposerContext({
+		get value() {
+			return value;
+		},
+		set value(next) {
+			value = next;
+		},
+		get files() {
+			return files;
+		},
+		get status() {
+			return status;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get busy() {
+			return busy;
+		},
+		get canSend() {
+			const something = value.trim().length > 0 || files.length > 0;
+			return !disabled && something && (!busy || !!onqueue);
+		},
+		get attachable() {
+			return attachable;
+		},
+		submit() {
+			ref?.requestSubmit();
+		},
+		addFiles,
+		removeFile(file) {
+			files = files.filter((f) => f !== file);
+		},
+		browse() {
+			picker?.click();
+		},
+		focus() {
+			textarea?.focus();
+		},
+		announce(message) {
+			announcement = message;
+		},
+		setTextarea(el) {
+			textarea = el;
+		},
+		// Called from an effect: the count is read here, so it must not become a dependency
+		registerAttachments() {
+			untrack(() => attachments++);
+			return () => untrack(() => attachments--);
+		}
+	});
+</script>
+
+<form
+	bind:this={ref}
+	data-slot="composer"
+	data-status={status}
+	data-disabled={disabled || undefined}
+	data-dragging={depth > 0 || undefined}
+	{...rest}
+	{...attrs([shared.edged, styles.root, disabled && styles.disabled, sx], className)}
+	onsubmit={handleSubmit}
+	onclick={(event) => {
+		onclick?.(event);
+		// A click on the frame, not on a control inside it, goes to the text
+		const target = event.target as HTMLElement;
+		if (target === event.currentTarget || target.dataset.slot === 'composer-toolbar')
+			textarea?.focus();
+	}}
+	ondragenter={(event) => {
+		if (!attachable || !carriesFiles(event)) return;
+		event.preventDefault();
+		depth++;
+	}}
+	ondragover={(event) => {
+		if (!attachable || !carriesFiles(event)) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+	}}
+	ondragleave={() => {
+		if (depth > 0) depth--;
+	}}
+	ondrop={(event) => {
+		if (!attachable || !carriesFiles(event)) return;
+		event.preventDefault();
+		depth = 0;
+		addFiles(event.dataTransfer?.files ?? []);
+		textarea?.focus();
+	}}
+>
+	{@render children?.()}
+
+	<!-- One hidden picker, shared by every Composer.AttachButton -->
+	<input
+		bind:this={picker}
+		type="file"
+		multiple={maxFiles !== 1}
+		{accept}
+		tabindex="-1"
+		aria-hidden="true"
+		{...stylex.attrs(styles.input)}
+		onchange={(event) => {
+			const input = event.currentTarget;
+			addFiles(input.files ?? []);
+			input.value = '';
+			textarea?.focus();
+		}}
+	/>
+
+	<span role="status" {...stylex.attrs(styles.status)}>{announcement}</span>
+
+	{#if depth > 0}
+		<div aria-hidden="true" {...stylex.attrs(styles.drop)}>{dropLabel}</div>
+	{/if}
+</form>

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

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+import { type ComposerMessage, type ComposerRejection, type ComposerStatus } from './context.js';
+export type ComposerRootProps = Omit<HTMLFormAttributes, 'children' | 'onsubmit'> & {
+    /** What the person has typed. Bindable. */
+    value?: string;
+    /** The files attached so far. Bindable. */
+    files?: File[];
+    status?: ComposerStatus;
+    disabled?: boolean;
+    /** File types to take, as in an input's `accept`, such as `image/*,.pdf`. */
+    accept?: string;
+    /** The most files at once. */
+    maxFiles?: number;
+    /** The largest file, in bytes. */
+    maxSize?: number;
+    /** What is shown over the composer while files are dragged onto it. */
+    dropLabel?: string;
+    /**
+     * Called with the trimmed text and the files when the person sends. The
+     * composer is cleared afterwards, unless this returns `false`.
+     */
+    onsubmit?: (message: ComposerMessage, event: SubmitEvent) => unknown;
+    /** Called when the person stops a reply that is on its way. */
+    onstop?: () => void;
+    /**
+     * Called with the message when the person sends while a reply is under
+     * way. Without it, nothing can be sent until the reply ends. Show what is
+     * queued with a QueuedMessage; the composer is cleared unless this returns `false`.
+     */
+    onqueue?: (message: ComposerMessage, event: SubmitEvent) => unknown;
+    /** Called with the files that were turned away, and why. */
+    onreject?: (rejections: ComposerRejection[]) => void;
+    sx?: Sx;
+    ref?: HTMLFormElement | null;
+    /** Composer.Attachments, a Composer.Textarea and a Composer.Toolbar. */
+    children?: Snippet;
+};
+declare const ComposerRoot: import("svelte").Component<ComposerRootProps, {}, "value" | "ref" | "files">;
+type ComposerRoot = ReturnType<typeof ComposerRoot>;
+export default ComposerRoot;

package/dist/components/composer/ComposerSubmit.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { loop } from '../../internal/loop.js';
+	import type { Sx } from '../../internal/sx.js';
+	import { colors, motion, radius } from '../../tokens.stylex.js';
+	import Button, { type ButtonProps } from '../button/Button.svelte';
+	import { useComposer } from './context.js';
+
+	export type ComposerSubmitProps = Omit<
+		ButtonProps,
+		'children' | 'type' | 'variant' | 'iconOnly' | 'href' | 'ref' | 'sx'
+	> & {
+		/** Accessible name while it sends. */
+		sendLabel?: string;
+		/** Accessible name while a reply is on its way and pressing it stops the reply. */
+		stopLabel?: string;
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	// While the reply has not started, an arc circles the square, on the shared clock
+	const spin = loop(
+		(reduced) => (reduced ? 2400 : 900),
+		(element, { progress }) => (element.style.rotate = `${progress}turn`),
+		(element) => (element.style.rotate = '')
+	);
+
+	const styles = stylex.create({
+		button: {
+			marginInlineStart: 'auto',
+			// Round by default; squarer when the radius scale is sharp
+			borderRadius: `calc(${radius.xl} * 4 / 3)`
+		},
+		// Nothing to send yet: a quiet socket in the stone, not a greyed-out button.
+		// It turns to mithril as soon as there is something to send.
+		idle: {
+			opacity: 1,
+			backgroundImage: 'none',
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.textSubtle,
+			'::before': { display: 'none' }
+		},
+		stack: {
+			display: 'grid',
+			placeItems: 'center'
+		},
+		// Send and Stop share one cell and trade places, with a little blur so the
+		// arrow reads as turning into the square
+		icon: {
+			gridArea: '1 / 1',
+			display: 'grid',
+			placeItems: 'center',
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale, filter' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		gone: {
+			opacity: 0,
+			scale: { default: null, [MOTION]: 0.5 },
+			filter: { default: null, [MOTION]: 'blur(2px)' }
+		},
+		// While the reply has not started, an arc circles the square
+		ring: {
+			gridArea: '1 / 1',
+			opacity: { default: 1, '@starting-style': 0 },
+			transitionProperty: 'opacity',
+			transitionDuration: motion.base
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		sendLabel = 'Send',
+		stopLabel = 'Stop',
+		disabled,
+		sx,
+		ref = $bindable(null),
+		...rest
+	}: ComposerSubmitProps = $props();
+
+	const composer = useComposer('Submit');
+	const busy = $derived(composer.busy);
+	const idle = $derived(!busy && !composer.canSend);
+</script>
+
+<Button
+	bind:ref={() => ref, (el) => (ref = el as HTMLButtonElement | null)}
+	type="submit"
+	variant="primary"
+	iconOnly
+	aria-label={busy ? stopLabel : sendLabel}
+	disabled={disabled ?? (composer.disabled || (!busy && !composer.canSend))}
+	data-slot="composer-submit"
+	data-status={composer.status}
+	{...rest}
+	sx={[styles.button, idle && styles.idle, sx]}
+>
+	<span {...stylex.attrs(styles.stack)}>
+		<span {...stylex.attrs(styles.icon, busy && styles.gone)}>
+			<Glyph name="arrowUp" stroke={2} />
+		</span>
+		<span {...stylex.attrs(styles.icon, !busy && styles.gone)}>
+			<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+				<rect x="4.5" y="4.5" width="7" height="7" rx="1.75" fill="currentColor" />
+			</svg>
+		</span>
+		{#if composer.status === 'submitted'}
+			<svg
+				width="26"
+				height="26"
+				viewBox="0 0 26 26"
+				fill="none"
+				aria-hidden="true"
+				{...stylex.attrs(styles.ring)}
+				{@attach spin}
+			>
+				<path
+					d="M13 2.5A10.5 10.5 0 0 1 23.5 13"
+					stroke="currentColor"
+					stroke-width="1.75"
+					stroke-linecap="round"
+				/>
+			</svg>
+		{/if}
+	</span>
+</Button>

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

@@ -0,0 +1,13 @@
+import type { Sx } from '../../internal/sx.js';
+import { type ButtonProps } from '../button/Button.svelte';
+export type ComposerSubmitProps = Omit<ButtonProps, 'children' | 'type' | 'variant' | 'iconOnly' | 'href' | 'ref' | 'sx'> & {
+    /** Accessible name while it sends. */
+    sendLabel?: string;
+    /** Accessible name while a reply is on its way and pressing it stops the reply. */
+    stopLabel?: string;
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+};
+declare const ComposerSubmit: import("svelte").Component<ComposerSubmitProps, {}, "ref">;
+type ComposerSubmit = ReturnType<typeof ComposerSubmit>;
+export default ComposerSubmit;

package/dist/components/composer/ComposerTextarea.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+	import { useComposer } from './context.js';
+
+	export type ComposerTextareaProps = Omit<HTMLTextareaAttributes, 'value'> & {
+		sx?: Sx;
+		ref?: HTMLTextAreaElement | null;
+	};
+
+	const styles = stylex.create({
+		textarea: {
+			boxSizing: 'border-box',
+			display: 'block',
+			width: '100%',
+			// One line to start; it grows with what is typed, then scrolls
+			minHeight: 'calc(1lh + 12px)',
+			maxHeight: '14rem',
+			margin: 0,
+			paddingBlock: '0.375rem',
+			paddingInline: '0.5rem',
+			borderWidth: 0,
+			backgroundColor: 'transparent',
+			color: colors.text,
+			fontFamily: 'inherit',
+			// The size messages are read at. At 16px, iOS also leaves the page unzoomed on focus.
+			fontSize: font.sizeLg,
+			lineHeight: font.leadingNormal,
+			fieldSizing: 'content',
+			resize: 'none',
+			overflowY: 'auto',
+			scrollbarWidth: 'thin',
+			// The frame around it shows the focus
+			outlineStyle: 'none',
+			cursor: { default: 'text', ':disabled': 'not-allowed' },
+			'::placeholder': {
+				color: colors.textSubtle,
+				opacity: 1
+			}
+		}
+	});
+
+	// Phones and tablets type with an on-screen keyboard, where Return is for new lines
+	const TOUCH = '(hover: none) and (pointer: coarse)';
+</script>
+
+<script lang="ts">
+	let {
+		rows = 1,
+		disabled,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		onkeydown,
+		onpaste,
+		...rest
+	}: ComposerTextareaProps = $props();
+
+	const composer = useComposer('Textarea');
+
+	$effect(() => {
+		composer.setTextarea(ref);
+		return () => composer.setTextarea(null);
+	});
+
+	// Browsers without `field-sizing` are sized by hand
+	$effect(() => {
+		void composer.value;
+		if (!ref || CSS.supports('field-sizing', 'content')) return;
+		ref.style.height = 'auto';
+		ref.style.height = `${ref.scrollHeight}px`;
+	});
+
+	function handleKeydown(event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+		onkeydown?.(event);
+		if (event.defaultPrevented || event.key !== 'Enter') return;
+		// Shift+Enter is a new line. So is Enter while an input method is composing a character.
+		if (event.shiftKey || event.isComposing || event.keyCode === 229) return;
+		// On touch keyboards Return types a new line, unless a modifier asks to send
+		if (!(event.metaKey || event.ctrlKey) && matchMedia(TOUCH).matches) return;
+		event.preventDefault();
+		// Enter never stops a reply. That takes a deliberate press of the Stop button.
+		// While a reply is under way, it queues, if the app takes queued messages
+		if (composer.canSend) composer.submit();
+	}
+
+	// A pasted screenshot or file becomes an attachment. Pasted text is left to the browser.
+	function handlePaste(event: ClipboardEvent & { currentTarget: HTMLTextAreaElement }) {
+		onpaste?.(event);
+		const files = event.clipboardData?.files;
+		if (event.defaultPrevented || !composer.attachable || !files?.length) return;
+		if (!event.clipboardData?.getData('text/plain')) event.preventDefault();
+		composer.addFiles(files);
+	}
+</script>
+
+<textarea
+	bind:this={ref}
+	bind:value={composer.value}
+	{rows}
+	disabled={disabled ?? composer.disabled}
+	enterkeyhint="send"
+	data-slot="composer-textarea"
+	{...rest}
+	{...attrs([styles.textarea, sx], className)}
+	onkeydown={handleKeydown}
+	onpaste={handlePaste}></textarea>

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

@@ -0,0 +1,9 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerTextareaProps = Omit<HTMLTextareaAttributes, 'value'> & {
+    sx?: Sx;
+    ref?: HTMLTextAreaElement | null;
+};
+declare const ComposerTextarea: import("svelte").Component<ComposerTextareaProps, {}, "ref">;
+type ComposerTextarea = ReturnType<typeof ComposerTextarea>;
+export default ComposerTextarea;