@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/progress/Progress.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { loop } from '../../internal/loop.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, motion, radius } from '../../tokens.stylex.js';
+
+	export type ProgressProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** How far along, from 0 to `max`. Leave out while the amount is unknown. */
+		value?: number | null;
+		max?: number;
+		sx?: Sx;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const FORCED = '@media (forced-colors: active)';
+
+	// The bar of an unknown amount sweeps across on Narvi's shared clock, easing in
+	// and out. With reduced motion it breathes in place instead.
+	const ease = (t: number) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2);
+	const sweep = loop(
+		(reduced) => (reduced ? 2000 : 1400),
+		(element, { progress, reduced, rtl }) => {
+			if (reduced) {
+				element.style.translate = '';
+				element.style.opacity = String(
+					0.35 + 0.65 * (0.5 - 0.5 * Math.cos(progress * 2 * Math.PI))
+				);
+				return;
+			}
+			const at = -100 + 350 * ease(progress);
+			element.style.opacity = '';
+			element.style.translate = `${rtl ? -at : at}% 0`;
+		},
+		(element) => {
+			element.style.translate = '';
+			element.style.opacity = '';
+		}
+	);
+
+	const styles = stylex.create({
+		track: {
+			position: 'relative',
+			boxSizing: 'border-box',
+			width: '100%',
+			height: '0.25rem',
+			borderRadius: radius.full,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			outlineStyle: 'solid',
+			outlineWidth: '1px',
+			outlineColor: 'transparent'
+		},
+		// Clips the fill to the track's rounded shape. The glow is a filter on this
+		// layer, so it follows what is visible and is not cut off with it.
+		clip: {
+			position: 'absolute',
+			inset: 0,
+			overflow: 'hidden',
+			borderRadius: radius.full,
+			filter: `drop-shadow(0 0 4px ${colors.glow})`
+		},
+		fill: {
+			display: 'block',
+			width: '100%',
+			height: '100%',
+			borderRadius: radius.full,
+			backgroundImage: {
+				default: `linear-gradient(90deg, ${colors.ithilStrong}, ${colors.ithil})`,
+				[FORCED]: 'linear-gradient(Highlight, Highlight)'
+			},
+			forcedColorAdjust: 'none'
+		},
+		// The fill is always full width and is slid into view, so a change of value
+		// moves it without laying anything out again.
+		known: {
+			translate: {
+				default: 'calc(var(--narvi-progress) - 100%) 0',
+				':dir(rtl)': 'calc(100% - var(--narvi-progress)) 0'
+			},
+			transitionProperty: { default: 'none', [MOTION]: 'translate' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		unknown: {
+			width: { default: '100%', [MOTION]: '40%' }
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { value = null, max = 100, sx, class: className, ...rest }: ProgressProps = $props();
+
+	const known = $derived(typeof value === 'number');
+	const percent = $derived(known ? Math.min(100, Math.max(0, ((value ?? 0) / max) * 100)) : 0);
+</script>
+
+<div
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={known ? value : undefined}
+	{...rest}
+	{...attrs([styles.track, sx], className)}
+>
+	<span {...stylex.attrs(styles.clip)}>
+		<span
+			{...stylex.attrs(styles.fill, known ? styles.known : styles.unknown)}
+			style:--narvi-progress={known ? `${percent}%` : undefined}
+			{@attach !known && sweep}
+		></span>
+	</span>
+</div>

package/dist/components/progress/Progress.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ProgressProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** How far along, from 0 to `max`. Leave out while the amount is unknown. */
+    value?: number | null;
+    max?: number;
+    sx?: Sx;
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/questionnaire/Questionnaire.svelte

@@ -0,0 +1,315 @@
+<!--
+	The agent asks the person questions, one at a time. Keys 1 to 9 pick an
+	answer, Enter goes on, ⌘Enter sends them all. Each question's prompt takes
+	focus as it arrives, so it is read out. Once answered, it folds into what
+	was said.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { tick } from 'svelte';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius, space } from '../../tokens.stylex.js';
+	import Button from '../button/Button.svelte';
+	import Kbd from '../kbd/Kbd.svelte';
+	import Progress from '../progress/Progress.svelte';
+	import Textarea from '../textarea/Textarea.svelte';
+
+	export type Question = {
+		id: string;
+		prompt: string;
+		choices?: { label: string; description?: string }[];
+		/** Lets several choices be picked. */
+		multiple?: boolean;
+		/** Offers a free answer as well; a string is its placeholder. */
+		other?: boolean | string;
+	};
+
+	export type QuestionAnswer = { choices: string[]; other?: string; skipped?: boolean };
+	export type QuestionnaireAnswers = Record<string, QuestionAnswer>;
+
+	export type QuestionnaireProps = {
+		questions: Question[];
+		onsubmit: (answers: QuestionnaireAnswers) => void;
+		/** Declines to answer at all. */
+		ondecline?: () => void;
+		/** Once the answers are given, it folds into them. */
+		answered?: QuestionnaireAnswers;
+		labels?: Partial<
+			Record<'next' | 'back' | 'skip' | 'send' | 'decline' | 'required' | 'skipped', string>
+		>;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const LABELS = {
+		next: 'Next',
+		back: 'Back',
+		skip: 'Skip',
+		send: 'Send answers',
+		decline: 'Decline',
+		required: 'Choose an answer, write one, or skip this question.',
+		skipped: 'Skipped'
+	};
+
+	const styles = stylex.create({
+		card: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: space.x3,
+			padding: '0.875rem',
+			borderRadius: radius.lg,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.ithil} 35%, transparent), 0 0 0 3px ${colors.ithilSoft}`
+		},
+		head: { display: 'flex', flexDirection: 'column', gap: '0.5rem' },
+		count: { color: colors.ithil },
+		prompt: {
+			margin: 0,
+			fontSize: font.sizeLg,
+			fontWeight: font.weightMedium,
+			lineHeight: font.leadingSnug,
+			outlineStyle: 'none'
+		},
+		choices: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.25rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0
+		},
+		choice: {
+			display: 'grid',
+			gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+			alignItems: 'start',
+			columnGap: '0.625rem',
+			paddingBlock: '0.5rem',
+			paddingInline: '0.625rem',
+			borderRadius: radius.md,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, '@media (hover: hover)': colors.hover },
+				':has(:checked)': colors.ithilSoft
+			},
+			boxShadow: {
+				default: `inset 0 0 0 1px ${colors.line}`,
+				':has(:checked)': `inset 0 0 0 1px color-mix(in oklab, ${colors.ithil} 60%, transparent)`
+			},
+			cursor: 'pointer',
+			transitionProperty: 'background-color, box-shadow',
+			transitionDuration: '120ms',
+			transitionTimingFunction: 'ease'
+		},
+		// Drawn by hand, so it matches the stone in both schemes: a ring, filled
+		// with ithildin and a dot of the card's colour once chosen
+		input: {
+			appearance: 'none',
+			boxSizing: 'border-box',
+			flexShrink: 0,
+			width: '1rem',
+			height: '1rem',
+			margin: 0,
+			marginTop: '0.1875rem',
+			borderRadius: radius.full,
+			backgroundColor: { default: colors.well, ':checked': colors.ithil },
+			boxShadow: {
+				default: `inset 0 0 0 1px ${colors.edge}`,
+				':checked': `inset 0 0 0 4px ${colors.ithil}, inset 0 0 0 10px ${colors.bgRaised}`
+			},
+			cursor: 'pointer',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'box-shadow, background-color',
+			transitionDuration: '120ms',
+			transitionTimingFunction: 'ease'
+		},
+		// Several may be chosen: the same, squared
+		box: { borderRadius: radius.xs },
+		text: { display: 'flex', flexDirection: 'column', gap: '0.125rem', minWidth: 0 },
+		description: { color: colors.textMuted, fontSize: font.sizeSm },
+		error: { margin: 0, color: colors.danger, fontSize: font.sizeSm },
+		foot: { display: 'flex', alignItems: 'center', gap: space.x2 },
+		spacer: { flexGrow: 1 },
+		summary: { display: 'flex', flexDirection: 'column', gap: '0.5rem', margin: 0, padding: 0 },
+		q: { color: colors.textMuted, fontSize: font.sizeSm },
+		a: { margin: 0, fontSize: font.sizeMd }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		questions,
+		onsubmit,
+		ondecline,
+		answered,
+		labels,
+		sx,
+		class: className
+	}: QuestionnaireProps = $props();
+
+	const word = $derived({ ...LABELS, ...labels });
+	const uid = $props.id();
+	let index = $state(0);
+	let answers = $state<QuestionnaireAnswers>({});
+	let error = $state('');
+	let prompt = $state<HTMLElement | null>(null);
+
+	const question = $derived(questions[index]);
+	const answer = $derived(answers[question?.id] ?? { choices: [] });
+	const last = $derived(index === questions.length - 1);
+
+	function set(next: QuestionAnswer) {
+		answers[question.id] = next;
+		error = '';
+	}
+
+	function pick(label: string) {
+		if (question.multiple) {
+			const has = answer.choices.includes(label);
+			set({
+				...answer,
+				skipped: false,
+				choices: has ? answer.choices.filter((c) => c !== label) : [...answer.choices, label]
+			});
+		} else set({ ...answer, skipped: false, choices: [label] });
+	}
+
+	const given = (a: QuestionAnswer | undefined) =>
+		!!a && (a.skipped || a.choices.length > 0 || !!a.other?.trim());
+
+	async function go(to: number) {
+		index = to;
+		error = '';
+		await tick();
+		prompt?.focus();
+	}
+
+	function next() {
+		if (!given(answers[question.id])) {
+			error = word.required;
+			return;
+		}
+		if (last) onsubmit($state.snapshot(answers));
+		else go(index + 1);
+	}
+
+	function skip() {
+		set({ choices: [], skipped: true });
+		if (last) onsubmit($state.snapshot(answers));
+		else go(index + 1);
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		if (event.isComposing) return;
+		const typing = event.target instanceof HTMLTextAreaElement;
+		if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			for (const q of questions)
+				if (!given(answers[q.id])) answers[q.id] = { choices: [], skipped: true };
+			onsubmit($state.snapshot(answers));
+		} else if (event.key === 'Enter' && !typing && !event.shiftKey) {
+			event.preventDefault();
+			next();
+		} else if (
+			!typing &&
+			/^[1-9]$/.test(event.key) &&
+			!event.metaKey &&
+			!event.ctrlKey &&
+			!event.altKey
+		) {
+			const choice = question.choices?.[Number(event.key) - 1];
+			if (choice) {
+				event.preventDefault();
+				pick(choice.label);
+			}
+		}
+	}
+
+	const say = (a: QuestionAnswer | undefined) =>
+		!a || a.skipped ? word.skipped : [...a.choices, a.other?.trim()].filter(Boolean).join(', ');
+</script>
+
+{#if answered}
+	<dl data-slot="questionnaire" data-answered {...attrs([styles.summary, sx], className)}>
+		{#each questions as q (q.id)}
+			<div>
+				<dt {...stylex.attrs(styles.q)}>{q.prompt}</dt>
+				<dd {...stylex.attrs(styles.a)}>{say(answered[q.id])}</dd>
+			</div>
+		{/each}
+	</dl>
+{:else if question}
+	<section
+		role="group"
+		aria-labelledby="{uid}-prompt"
+		data-slot="questionnaire"
+		{...attrs([styles.card, sx], className)}
+		{onkeydown}
+	>
+		<div {...stylex.attrs(styles.head)}>
+			<span {...stylex.attrs(shared.eyebrow, styles.count)}
+				>Question {index + 1} of {questions.length}</span
+			>
+			{#if questions.length > 1}
+				<Progress
+					value={index + 1}
+					max={questions.length}
+					aria-label="Question {index + 1} of {questions.length}"
+				/>
+			{/if}
+		</div>
+		<p bind:this={prompt} id="{uid}-prompt" tabindex="-1" {...stylex.attrs(styles.prompt)}>
+			{question.prompt}
+		</p>
+
+		{#if question.choices?.length}
+			<fieldset {...stylex.attrs(styles.choices)} aria-labelledby="{uid}-prompt">
+				{#each question.choices as choice, n (choice.label)}
+					<label {...stylex.attrs(styles.choice)}>
+						<input
+							type={question.multiple ? 'checkbox' : 'radio'}
+							name="{uid}-{question.id}"
+							checked={answer.choices.includes(choice.label)}
+							onchange={() => pick(choice.label)}
+							{...stylex.attrs(styles.input, question.multiple && styles.box)}
+						/>
+						<span {...stylex.attrs(styles.text)}>
+							<span>{choice.label}</span>
+							{#if choice.description}<span {...stylex.attrs(styles.description)}
+									>{choice.description}</span
+								>{/if}
+						</span>
+						{#if n < 9}<Kbd aria-hidden="true">{n + 1}</Kbd>{/if}
+					</label>
+				{/each}
+			</fieldset>
+		{/if}
+
+		{#if question.other || !question.choices?.length}
+			<Textarea
+				autosize
+				rows={2}
+				aria-label={typeof question.other === 'string' ? question.other : 'Your answer'}
+				placeholder={typeof question.other === 'string' ? question.other : 'Your answer'}
+				value={answer.other ?? ''}
+				oninput={(event) => set({ ...answer, skipped: false, other: event.currentTarget.value })}
+			/>
+		{/if}
+
+		{#if error}<p role="alert" {...stylex.attrs(styles.error)}>{error}</p>{/if}
+
+		<div {...stylex.attrs(styles.foot)}>
+			{#if ondecline}<Button size="sm" variant="ghost" onclick={ondecline}>{word.decline}</Button
+				>{/if}
+			<span {...stylex.attrs(styles.spacer)}></span>
+			<Button size="sm" variant="ghost" onclick={skip}>{word.skip}</Button>
+			{#if index > 0}<Button size="sm" variant="ghost" onclick={() => go(index - 1)}
+					>{word.back}</Button
+				>{/if}
+			<Button size="sm" variant="primary" onclick={next}>{last ? word.send : word.next}</Button>
+		</div>
+	</section>
+{/if}

package/dist/components/questionnaire/Questionnaire.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type Sx } from '../../internal/sx.js';
+export type Question = {
+    id: string;
+    prompt: string;
+    choices?: {
+        label: string;
+        description?: string;
+    }[];
+    /** Lets several choices be picked. */
+    multiple?: boolean;
+    /** Offers a free answer as well; a string is its placeholder. */
+    other?: boolean | string;
+};
+export type QuestionAnswer = {
+    choices: string[];
+    other?: string;
+    skipped?: boolean;
+};
+export type QuestionnaireAnswers = Record<string, QuestionAnswer>;
+export type QuestionnaireProps = {
+    questions: Question[];
+    onsubmit: (answers: QuestionnaireAnswers) => void;
+    /** Declines to answer at all. */
+    ondecline?: () => void;
+    /** Once the answers are given, it folds into them. */
+    answered?: QuestionnaireAnswers;
+    labels?: Partial<Record<'next' | 'back' | 'skip' | 'send' | 'decline' | 'required' | 'skipped', string>>;
+    sx?: Sx;
+    class?: string;
+};
+declare const Questionnaire: import("svelte").Component<QuestionnaireProps, {}, "">;
+type Questionnaire = ReturnType<typeof Questionnaire>;
+export default Questionnaire;

package/dist/components/queued-message/QueuedMessage.svelte

@@ -0,0 +1,133 @@
+<!--
+	A message the person sent while the agent was still at work. It waits at
+	the foot of the conversation, quieter than a sent message, saying what will
+	happen to it, with ways to change that.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Glyph, { type GlyphName } from '../../internal/Glyph.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+	import Button from '../button/Button.svelte';
+	import * as Tooltip from '../tooltip/index.js';
+
+	export type QueuedMessageStatus = 'queued' | 'editing' | 'unsent';
+
+	export type QueuedMessageProps = {
+		status?: QueuedMessageStatus;
+		/** Overrides what the status line says. */
+		statusText?: string;
+		onedit?: () => void;
+		/** Takes the message back into the composer. */
+		ontakeback?: () => void;
+		/** Sends it into the turn under way, so the agent hears it now. */
+		onsteer?: () => void;
+		/** Stops the turn and sends it. */
+		onsend?: () => void;
+		labels?: Partial<Record<'edit' | 'takeBack' | 'steer' | 'send', string>>;
+		sx?: Sx;
+		class?: string;
+		/** The message. */
+		children?: Snippet;
+	};
+
+	const STATUS: Record<QueuedMessageStatus, string> = {
+		queued: 'Queued · sends when this turn ends',
+		editing: 'Queued · editing',
+		unsent: 'Not sent'
+	};
+
+	const styles = stylex.create({
+		root: {
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'flex-end',
+			gap: '0.25rem',
+			minWidth: 0
+		},
+		bubble: {
+			maxWidth: 'min(85%, 36rem)',
+			paddingBlock: '0.5625rem',
+			paddingInline: '0.875rem',
+			borderRadius: radius.frame,
+			backgroundColor: 'transparent',
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}`,
+			color: colors.textMuted,
+			fontSize: font.sizeLg,
+			lineHeight: font.leadingNormal,
+			whiteSpace: 'pre-wrap',
+			overflowWrap: 'anywhere'
+		},
+		// Dashed while it waits: not sent yet
+		waiting: {
+			boxShadow: 'none',
+			outlineStyle: 'dashed',
+			outlineWidth: '1px',
+			outlineColor: colors.lineStrong,
+			outlineOffset: '-1px'
+		},
+		foot: { display: 'flex', alignItems: 'center', gap: '0.125rem' },
+		status: { paddingInlineEnd: '0.25rem', color: colors.textSubtle, fontSize: font.sizeXs },
+		unsent: { color: colors.danger }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		status = 'queued',
+		statusText,
+		onedit,
+		ontakeback,
+		onsteer,
+		onsend,
+		labels,
+		sx,
+		class: className,
+		children
+	}: QueuedMessageProps = $props();
+
+	const actions = $derived(
+		(
+			[
+				['edit', onedit, 'pencil', 'Edit'],
+				['takeBack', ontakeback, 'undo', 'Take back'],
+				['steer', onsteer, 'steer', 'Send into this turn'],
+				['send', onsend, 'send', 'Stop the turn and send']
+			] as const
+		).filter(([, handler]) => handler)
+	);
+</script>
+
+<div data-slot="queued-message" data-status={status} {...attrs([styles.root, sx], className)}>
+	<div {...stylex.attrs(styles.bubble, status !== 'unsent' && styles.waiting)}>
+		{@render children?.()}
+	</div>
+	<div {...stylex.attrs(styles.foot)}>
+		<span {...stylex.attrs(styles.status, status === 'unsent' && styles.unsent)}
+			>{statusText ?? STATUS[status]}</span
+		>
+		<Tooltip.Provider delayDuration={400}>
+			{#each actions as [key, handler, icon, fallback] (key)}
+				{@const label = labels?.[key] ?? fallback}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#snippet child({ props })}
+							<Button
+								{...props}
+								variant="ghost"
+								size="sm"
+								iconOnly
+								aria-label={label}
+								onclick={() => handler?.()}
+							>
+								<Glyph name={icon as GlyphName} />
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					<Tooltip.Content>{label}</Tooltip.Content>
+				</Tooltip.Root>
+			{/each}
+		</Tooltip.Provider>
+	</div>
+</div>

package/dist/components/queued-message/QueuedMessage.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type QueuedMessageStatus = 'queued' | 'editing' | 'unsent';
+export type QueuedMessageProps = {
+    status?: QueuedMessageStatus;
+    /** Overrides what the status line says. */
+    statusText?: string;
+    onedit?: () => void;
+    /** Takes the message back into the composer. */
+    ontakeback?: () => void;
+    /** Sends it into the turn under way, so the agent hears it now. */
+    onsteer?: () => void;
+    /** Stops the turn and sends it. */
+    onsend?: () => void;
+    labels?: Partial<Record<'edit' | 'takeBack' | 'steer' | 'send', string>>;
+    sx?: Sx;
+    class?: string;
+    /** The message. */
+    children?: Snippet;
+};
+declare const QueuedMessage: import("svelte").Component<QueuedMessageProps, {}, "">;
+type QueuedMessage = ReturnType<typeof QueuedMessage>;
+export default QueuedMessage;