@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/composer/ComposerToggle.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } 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 { useComposer } from './context.js';
+
+	export type ComposerToggleProps = Omit<HTMLButtonAttributes, 'children'> & {
+		/** Whether it is on. Bindable. */
+		pressed?: boolean;
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+		/** A 16px icon and a short label, such as "Search". */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		toggle: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			flexShrink: 0,
+			gap: '0.375rem',
+			height: '1.75rem',
+			margin: 0,
+			paddingInline: '0.625rem',
+			borderWidth: 0,
+			borderRadius: `calc(${radius.xl} * 4 / 3)`,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			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',
+			scale: { default: null, ':active': { default: null, [MOTION]: 0.96 } },
+			transitionProperty: {
+				default: 'background-color, color, box-shadow',
+				[MOTION]: 'scale, background-color, color, box-shadow'
+			},
+			transitionDuration: motion.base,
+			transitionTimingFunction: { default: 'ease', [MOTION]: `${motion.easeOut}, ease, ease, ease` }
+		},
+		// The icon leads, so the pill is a touch tighter on that side
+		withIcon: { paddingInlineStart: '0.5rem' },
+		// On: lit with ithildin, the one colour that marks state
+		on: {
+			backgroundColor: {
+				default: colors.ithilSoft,
+				':hover': { default: null, [HOVER]: colors.focusHalo }
+			},
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.ithil} 35%, transparent)`,
+			color: { default: colors.ithil, ':hover': colors.ithil, [FORCED]: 'Highlight' }
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		pressed = $bindable(false),
+		disabled,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		onclick,
+		...rest
+	}: ComposerToggleProps = $props();
+
+	const composer = useComposer('Toggle');
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	aria-pressed={pressed}
+	disabled={disabled ?? composer.disabled}
+	data-slot="composer-toggle"
+	data-state={pressed ? 'on' : 'off'}
+	{...rest}
+	{...attrs(
+		[styles.toggle, shared.focusable, styles.withIcon, pressed && styles.on, sx],
+		className
+	)}
+	onclick={(event) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) pressed = !pressed;
+	}}
+>
+	{@render children?.()}
+</button>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerToggleProps = Omit<HTMLButtonAttributes, 'children'> & {
+    /** Whether it is on. Bindable. */
+    pressed?: boolean;
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+    /** A 16px icon and a short label, such as "Search". */
+    children?: Snippet;
+};
+declare const ComposerToggle: import("svelte").Component<ComposerToggleProps, {}, "ref" | "pressed">;
+type ComposerToggle = ReturnType<typeof ComposerToggle>;
+export default ComposerToggle;

package/dist/components/composer/ComposerToolbar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type ComposerToolbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		/** Tools at the start, such as ghost Buttons, and a Composer.Submit, which goes to the end. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		toolbar: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.25rem',
+			minWidth: 0
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: ComposerToolbarProps = $props();
+</script>
+
+<div data-slot="composer-toolbar" {...rest} {...attrs([styles.toolbar, sx], className)}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerToolbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    /** Tools at the start, such as ghost Buttons, and a Composer.Submit, which goes to the end. */
+    children?: Snippet;
+};
+declare const ComposerToolbar: import("svelte").Component<ComposerToolbarProps, {}, "">;
+type ComposerToolbar = ReturnType<typeof ComposerToolbar>;
+export default ComposerToolbar;

package/dist/components/composer/context.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Where the exchange stands, as most AI SDKs report it.
+ * - `ready`: waiting for the person
+ * - `submitted`: sent, waiting for the first token
+ * - `streaming`: the reply is arriving
+ * - `error`: the last request failed; the person can send again
+ */
+export type ComposerStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+/** What the person sends: their text, and the files they attached. */
+export type ComposerMessage = {
+    text: string;
+    files: File[];
+};
+/** Why files were turned away: not an accepted type, too large, or one too many. */
+export type ComposerRejection = {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+};
+export type ComposerContext = {
+    value: string;
+    readonly files: readonly File[];
+    readonly status: ComposerStatus;
+    readonly disabled: boolean;
+    /** True while a reply is on its way. Submitting stops it instead of sending. */
+    readonly busy: boolean;
+    /**
+     * Something to send, text or files, and nothing in the way of sending it.
+     * While a reply is under way, true only if the composer can queue.
+     */
+    readonly canSend: boolean;
+    /** Sends the message, or stops the reply while one is arriving. */
+    submit(): void;
+    /** Adds files, turning away any the composer does not accept. */
+    addFiles(files: Iterable<File>): void;
+    removeFile(file: File): void;
+    /** Opens the system's file picker. */
+    browse(): void;
+    /** True once a Composer.Attachments is placed: only then are dropped or pasted files taken. */
+    readonly attachable: boolean;
+    focus(): void;
+    /** Reads a short message out to assistive technology, such as "Attached report.pdf". */
+    announce(message: string): void;
+    /** @internal */
+    setTextarea(el: HTMLTextAreaElement | null): void;
+    /** @internal Composer.Attachments announces itself, so files can be dropped and pasted. */
+    registerAttachments(): () => void;
+};
+export declare function setComposerContext(context: ComposerContext): void;
+/** The surrounding Composer, for building parts of your own. */
+export declare function getComposerContext(): ComposerContext | undefined;
+export declare function useComposer(part: string): ComposerContext;
+/** Whether a file matches an `accept` list such as `image/*,.pdf`. */
+export declare function accepts(file: File, accept: string | undefined): boolean;

package/dist/components/composer/context.js

@@ -0,0 +1,32 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.composer');
+export function setComposerContext(context) {
+    setContext(KEY, context);
+}
+/** The surrounding Composer, for building parts of your own. */
+export function getComposerContext() {
+    return getContext(KEY);
+}
+export function useComposer(part) {
+    const context = getComposerContext();
+    if (!context)
+        throw new Error(`<Composer.${part}> must be placed inside <Composer.Root>.`);
+    return context;
+}
+/** Whether a file matches an `accept` list such as `image/*,.pdf`. */
+export function accepts(file, accept) {
+    if (!accept)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.split(',').some((raw) => {
+        const rule = raw.trim().toLowerCase();
+        if (!rule)
+            return false;
+        if (rule.startsWith('.'))
+            return name.endsWith(rule);
+        if (rule.endsWith('/*'))
+            return type.startsWith(rule.slice(0, -1));
+        return type === rule;
+    });
+}

package/dist/components/composer/index.d.ts

@@ -0,0 +1,21 @@
+import AttachButton from './ComposerAttachButton.svelte';
+import Attachment from './ComposerAttachment.svelte';
+import Attachments from './ComposerAttachments.svelte';
+import ModelPicker from './ComposerModelPicker.svelte';
+import Root from './ComposerRoot.svelte';
+import Submit from './ComposerSubmit.svelte';
+import Textarea from './ComposerTextarea.svelte';
+import Toggle from './ComposerToggle.svelte';
+import Toolbar from './ComposerToolbar.svelte';
+export { Root, Attachments, Attachment, Textarea, Toolbar, AttachButton, Toggle, ModelPicker, Submit, Root as ComposerRoot, Attachments as ComposerAttachments, Attachment as ComposerAttachment, Textarea as ComposerTextarea, Toolbar as ComposerToolbar, AttachButton as ComposerAttachButton, Toggle as ComposerToggle, ModelPicker as ComposerModelPicker, Submit as ComposerSubmit };
+export { getComposerContext } from './context.js';
+export type { ComposerContext, ComposerMessage, ComposerRejection, ComposerStatus } from './context.js';
+export type { ComposerAttachButtonProps } from './ComposerAttachButton.svelte';
+export type { ComposerAttachmentProps } from './ComposerAttachment.svelte';
+export type { ComposerAttachmentsProps } from './ComposerAttachments.svelte';
+export type { ComposerModel, ComposerModelPickerProps } from './ComposerModelPicker.svelte';
+export type { ComposerRootProps } from './ComposerRoot.svelte';
+export type { ComposerSubmitProps } from './ComposerSubmit.svelte';
+export type { ComposerTextareaProps } from './ComposerTextarea.svelte';
+export type { ComposerToggleProps } from './ComposerToggle.svelte';
+export type { ComposerToolbarProps } from './ComposerToolbar.svelte';

package/dist/components/composer/index.js

@@ -0,0 +1,13 @@
+import AttachButton from './ComposerAttachButton.svelte';
+import Attachment from './ComposerAttachment.svelte';
+import Attachments from './ComposerAttachments.svelte';
+import ModelPicker from './ComposerModelPicker.svelte';
+import Root from './ComposerRoot.svelte';
+import Submit from './ComposerSubmit.svelte';
+import Textarea from './ComposerTextarea.svelte';
+import Toggle from './ComposerToggle.svelte';
+import Toolbar from './ComposerToolbar.svelte';
+export { Root, Attachments, Attachment, Textarea, Toolbar, AttachButton, Toggle, ModelPicker, Submit, 
+//
+Root as ComposerRoot, Attachments as ComposerAttachments, Attachment as ComposerAttachment, Textarea as ComposerTextarea, Toolbar as ComposerToolbar, AttachButton as ComposerAttachButton, Toggle as ComposerToggle, ModelPicker as ComposerModelPicker, Submit as ComposerSubmit };
+export { getComposerContext } from './context.js';

package/dist/components/conversation/ConversationContent.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, space } from '../../tokens.stylex.js';
+	import { useConversation } from './context.js';
+
+	export type ConversationContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Styles for the column the messages sit in: its width, padding and gaps. */
+		sx?: Sx;
+		/** Styles for the scrolling area around the column. */
+		viewportSx?: Sx;
+		ref?: HTMLDivElement | null;
+		/** The messages. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		viewport: {
+			position: 'relative',
+			flexGrow: 1,
+			minHeight: 0,
+			overflowY: 'auto',
+			// The conversation does its own anchoring at the bottom; the browser's would fight it
+			overflowAnchor: 'none',
+			overscrollBehavior: 'contain',
+			scrollbarGutter: 'stable',
+			scrollbarWidth: 'thin',
+			scrollbarColor: `${colors.lineStrong} transparent`,
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '-2px'
+		},
+		column: {
+			boxSizing: 'border-box',
+			display: 'flex',
+			flexDirection: 'column',
+			gap: space.x5,
+			width: '100%',
+			maxWidth: '46rem',
+			minHeight: '100%',
+			marginInline: 'auto',
+			paddingBlock: space.x6,
+			paddingInline: space.x4
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		sx,
+		viewportSx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: ConversationContentProps = $props();
+
+	const conversation = useConversation('Content');
+	let column = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (ref && column) return conversation.attach(ref, column);
+	});
+</script>
+
+<!-- A log, but a silent one: streamed text read aloud word by word is noise.
+     Say what matters, "Working", "Done", with an Announcer instead. -->
+<!-- A scrolling region must be reachable from the keyboard -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={ref}
+	role="log"
+	aria-live="off"
+	tabindex="0"
+	aria-label="Conversation"
+	data-slot="conversation-viewport"
+	{...rest}
+	{...stylex.attrs(styles.viewport, viewportSx)}
+>
+	<div
+		bind:this={column}
+		data-slot="conversation-content"
+		{...attrs([styles.column, sx], className)}
+	>
+		{@render children?.()}
+		<!-- Room for the reply beneath a message lifted to the top -->
+		{#if conversation.spacer > 0}
+			<div aria-hidden="true" style:height="{conversation.spacer}px" style:flex-shrink="0"></div>
+		{/if}
+	</div>
+</div>

package/dist/components/conversation/ConversationContent.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ConversationContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Styles for the column the messages sit in: its width, padding and gaps. */
+    sx?: Sx;
+    /** Styles for the scrolling area around the column. */
+    viewportSx?: Sx;
+    ref?: HTMLDivElement | null;
+    /** The messages. */
+    children?: Snippet;
+};
+declare const ConversationContent: import("svelte").Component<ConversationContentProps, {}, "ref">;
+type ConversationContent = ReturnType<typeof ConversationContent>;
+export default ConversationContent;

package/dist/components/conversation/ConversationEmpty.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, space } from '../../tokens.stylex.js';
+
+	export type ConversationEmptyProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		'children' | 'title'
+	> & {
+		/** The greeting, set in the display serif. */
+		title?: string;
+		description?: string;
+		/** Shown above the title, such as a logo or an icon. */
+		icon?: Snippet;
+		sx?: Sx;
+		/** Shown below the description, such as Suggestions. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		empty: {
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			justifyContent: 'center',
+			flexGrow: 1,
+			gap: space.x2,
+			paddingBlock: space.x8,
+			textAlign: 'center',
+			textWrap: 'balance'
+		},
+		icon: {
+			display: 'grid',
+			placeItems: 'center',
+			marginBottom: space.x2,
+			color: colors.textMuted
+		},
+		title: {
+			margin: 0,
+			color: colors.text,
+			fontFamily: font.display,
+			fontSize: '1.875rem',
+			fontWeight: font.weightDisplay,
+			letterSpacing: font.trackingDisplay,
+			lineHeight: font.leadingTight
+		},
+		description: {
+			maxWidth: '32rem',
+			margin: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingNormal
+		},
+		children: {
+			display: 'flex',
+			justifyContent: 'center',
+			marginTop: space.x4
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		icon,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: ConversationEmptyProps = $props();
+</script>
+
+<div data-slot="conversation-empty" {...rest} {...attrs([styles.empty, sx], className)}>
+	{#if icon}
+		<div {...stylex.attrs(styles.icon)}>{@render icon()}</div>
+	{/if}
+	{#if title}
+		<p {...stylex.attrs(styles.title)}>{title}</p>
+	{/if}
+	{#if description}
+		<p {...stylex.attrs(styles.description)}>{description}</p>
+	{/if}
+	{#if children}
+		<div {...stylex.attrs(styles.children)}>{@render children()}</div>
+	{/if}
+</div>

package/dist/components/conversation/ConversationEmpty.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ConversationEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** The greeting, set in the display serif. */
+    title?: string;
+    description?: string;
+    /** Shown above the title, such as a logo or an icon. */
+    icon?: Snippet;
+    sx?: Sx;
+    /** Shown below the description, such as Suggestions. */
+    children?: Snippet;
+};
+declare const ConversationEmpty: import("svelte").Component<ConversationEmptyProps, {}, "">;
+type ConversationEmpty = ReturnType<typeof ConversationEmpty>;
+export default ConversationEmpty;