@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/app-shell/AppShellSidebar.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, motion } from '../../tokens.stylex.js';
+	import { useAppShell } from './context.js';
+
+	export type AppShellSidebarProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Names the region: "Threads", "Projects". */
+		label?: string;
+		/** A Sidebar.Header, across the full width, above the rail. */
+		header?: Snippet;
+		/** A Rail, the narrow column of icons that stays when the sidebar collapses. */
+		rail?: Snippet;
+		sx?: Sx;
+		/** Sidebar.Content and Sidebar.Footer. */
+		children?: Snippet;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	// The drawer's curve: quick out of the edge, a long gentle settle
+	const DRAWER = 'cubic-bezier(0.32, 0.72, 0, 1)';
+
+	const styles = stylex.create({
+		sidebar: {
+			position: 'relative',
+			zIndex: 1,
+			display: 'flex',
+			flexDirection: 'column',
+			flexShrink: 0,
+			overflow: 'clip',
+			color: colors.text
+		},
+		wide: {
+			width: 'calc(var(--narvi-sidebar-width) + var(--narvi-rail-current, 0px))',
+			transitionProperty: { default: 'none', [MOTION]: 'width' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeInOut
+		},
+		collapsed: { width: 0 },
+		collapsedToRail: { width: 'var(--narvi-rail-width)' },
+		// Narrow: a drawer over the page, from the start edge
+		drawer: {
+			position: 'fixed',
+			insetBlock: 0,
+			insetInlineStart: 0,
+			zIndex: 40,
+			width: 'min(calc(var(--narvi-sidebar-width) + var(--narvi-rail-current, 0px) + 1rem), 86vw)',
+			backgroundColor: colors.bg,
+			boxShadow: `0 24px 64px -12px rgb(0 0 0 / 0.5)`,
+			translate: { default: '-100% 0', ':dir(rtl)': '100% 0' },
+			// Hidden only once it has slid away; shown at once when it opens, so
+			// focus can move into it on the first frame
+			visibility: 'hidden',
+			transitionProperty: { default: 'visibility', [MOTION]: 'translate, visibility' },
+			transitionDuration: { default: '0s', [MOTION]: '320ms, 0s' },
+			transitionDelay: { default: '0s', [MOTION]: '0s, 320ms' },
+			transitionTimingFunction: DRAWER
+		},
+		drawerOpen: {
+			translate: '0 0',
+			visibility: 'visible',
+			transitionDelay: { default: '0s', [MOTION]: '0s, 0s' }
+		},
+		scrim: {
+			position: 'fixed',
+			inset: 0,
+			zIndex: 39,
+			backgroundColor: 'rgb(0 0 0 / 0.4)',
+			opacity: { default: 1, '@starting-style': 0 },
+			transitionProperty: 'opacity',
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		header: {
+			flexShrink: 0,
+			transitionProperty: 'opacity',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		// Folded to the rail, the header has no room; it steps out rather than being cut
+		headerHidden: { opacity: 0, visibility: 'hidden' },
+		body: { display: 'flex', flexGrow: 1, minHeight: 0 },
+		rail: { display: 'flex', flexShrink: 0, width: 'var(--narvi-rail-width)' },
+		// The column keeps its width while the sidebar narrows, so its rows are
+		// clipped rather than squeezed and reflowed on every frame
+		column: {
+			display: 'flex',
+			flexDirection: 'column',
+			flexShrink: 0,
+			minHeight: 0
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label = 'Sidebar',
+		header,
+		rail,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: AppShellSidebarProps = $props();
+
+	const shell = useAppShell('Sidebar');
+	let element = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		shell.setRail(!!rail);
+		return () => shell.setRail(false);
+	});
+
+	// A drawer takes focus when it opens and gives it back when it closes
+	let returnTo: HTMLElement | null = null;
+	$effect(() => {
+		if (!shell.narrow) return;
+		if (shell.open) {
+			returnTo = document.activeElement as HTMLElement | null;
+			// The open row first, then the list's tab stop, then whatever comes first
+			tick().then(() =>
+				requestAnimationFrame(() => {
+					const first = [
+						'[data-sidebar-row][aria-current="page"]',
+						'[data-sidebar-row][tabindex="0"]',
+						'button, a[href]'
+					]
+						.map((selector) => element?.querySelector<HTMLElement>(selector))
+						.find(Boolean);
+					first?.focus();
+				})
+			);
+		} else if (returnTo) {
+			returnTo.focus();
+			returnTo = null;
+		}
+	});
+
+	const hidden = $derived(shell.narrow ? !shell.open : !shell.open && !rail);
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.key === 'Escape' && shell.narrow && shell.open) shell.close();
+	}}
+/>
+
+{#if shell.narrow && shell.open}
+	<div aria-hidden="true" {...stylex.attrs(styles.scrim)} onclick={() => shell.close()}></div>
+{/if}
+
+<aside
+	bind:this={element}
+	id={shell.sidebarId}
+	aria-label={label}
+	inert={hidden || undefined}
+	data-slot="app-shell-sidebar"
+	{...rest}
+	{...attrs(
+		[
+			styles.sidebar,
+			shell.narrow
+				? [styles.drawer, shell.open && styles.drawerOpen]
+				: [styles.wide, !shell.open && (rail ? styles.collapsedToRail : styles.collapsed)],
+			sx
+		],
+		className
+	)}
+>
+	{#if header}
+		<div
+			{...stylex.attrs(styles.header, !shell.open && !shell.narrow && styles.headerHidden)}
+			inert={!shell.open && !shell.narrow ? true : undefined}
+		>
+			{@render header()}
+		</div>
+	{/if}
+	<div {...stylex.attrs(styles.body)}>
+		{#if rail}
+			<div {...stylex.attrs(styles.rail)}>{@render rail()}</div>
+		{/if}
+		<div
+			{...stylex.attrs(styles.column)}
+			style:width="var(--narvi-sidebar-width)"
+			inert={!shell.open && !shell.narrow ? true : undefined}
+		>
+			{@render children?.()}
+		</div>
+	</div>
+</aside>

package/dist/components/app-shell/AppShellSidebar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AppShellSidebarProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Names the region: "Threads", "Projects". */
+    label?: string;
+    /** A Sidebar.Header, across the full width, above the rail. */
+    header?: Snippet;
+    /** A Rail, the narrow column of icons that stays when the sidebar collapses. */
+    rail?: Snippet;
+    sx?: Sx;
+    /** Sidebar.Content and Sidebar.Footer. */
+    children?: Snippet;
+};
+declare const AppShellSidebar: import("svelte").Component<AppShellSidebarProps, {}, "">;
+type AppShellSidebar = ReturnType<typeof AppShellSidebar>;
+export default AppShellSidebar;

package/dist/components/app-shell/AppShellToggle.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import type { Sx } from '../../internal/sx.js';
+	import Button, { type ButtonProps } from '../button/Button.svelte';
+	import { useAppShell } from './context.js';
+
+	export type AppShellToggleProps = Omit<
+		ButtonProps,
+		'children' | 'variant' | 'iconOnly' | 'href' | 'ref' | 'onclick'
+	> & {
+		showLabel?: string;
+		hideLabel?: string;
+		sx?: Sx;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		showLabel = 'Show the sidebar',
+		hideLabel = 'Hide the sidebar',
+		size = 'sm',
+		...rest
+	}: AppShellToggleProps = $props();
+
+	const shell = useAppShell('Toggle');
+</script>
+
+<Button
+	variant="ghost"
+	{size}
+	iconOnly
+	aria-label={shell.open ? hideLabel : showLabel}
+	aria-expanded={shell.open}
+	aria-controls={shell.sidebarId}
+	data-slot="app-shell-toggle"
+	{...rest}
+	onclick={() => shell.toggle()}
+>
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		aria-hidden="true"
+	>
+		<rect x="2.25" y="2.75" width="11.5" height="10.5" rx="2" />
+		<path d="M6.25 2.75v10.5" />
+	</svg>
+</Button>

package/dist/components/app-shell/AppShellToggle.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Sx } from '../../internal/sx.js';
+import { type ButtonProps } from '../button/Button.svelte';
+export type AppShellToggleProps = Omit<ButtonProps, 'children' | 'variant' | 'iconOnly' | 'href' | 'ref' | 'onclick'> & {
+    showLabel?: string;
+    hideLabel?: string;
+    sx?: Sx;
+};
+declare const AppShellToggle: import("svelte").Component<AppShellToggleProps, {}, "">;
+type AppShellToggle = ReturnType<typeof AppShellToggle>;
+export default AppShellToggle;

package/dist/components/app-shell/context.d.ts

@@ -0,0 +1,15 @@
+export type AppShellContext = {
+    /** Whether the sidebar shows in full. On a narrow window: whether its drawer is open. */
+    readonly open: boolean;
+    /** True below the narrow width, where the sidebar is a drawer over the page. */
+    readonly narrow: boolean;
+    readonly sidebarId: string;
+    toggle(): void;
+    close(): void;
+    /** @internal The sidebar says whether it has a rail, which stays when it collapses. */
+    setRail(present: boolean): void;
+};
+export declare function setAppShellContext(context: AppShellContext): void;
+/** The surrounding AppShell, for building parts of your own. */
+export declare function getAppShellContext(): AppShellContext | undefined;
+export declare function useAppShell(part: string): AppShellContext;

package/dist/components/app-shell/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.app-shell');
+export function setAppShellContext(context) {
+    setContext(KEY, context);
+}
+/** The surrounding AppShell, for building parts of your own. */
+export function getAppShellContext() {
+    return getContext(KEY);
+}
+export function useAppShell(part) {
+    const context = getAppShellContext();
+    if (!context)
+        throw new Error(`<AppShell.${part}> must be placed inside <AppShell.Root>.`);
+    return context;
+}

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,15 @@
+import Header from './AppShellHeader.svelte';
+import Main from './AppShellMain.svelte';
+import Panel from './AppShellPanel.svelte';
+import Root from './AppShellRoot.svelte';
+import Sidebar from './AppShellSidebar.svelte';
+import Toggle from './AppShellToggle.svelte';
+export { Root, Sidebar, Main, Header, Panel, Toggle };
+export { getAppShellContext } from './context.js';
+export type { AppShellContext } from './context.js';
+export type { AppShellHeaderProps } from './AppShellHeader.svelte';
+export type { AppShellMainProps } from './AppShellMain.svelte';
+export type { AppShellPanelProps } from './AppShellPanel.svelte';
+export type { AppShellRootProps } from './AppShellRoot.svelte';
+export type { AppShellSidebarProps } from './AppShellSidebar.svelte';
+export type { AppShellToggleProps } from './AppShellToggle.svelte';

package/dist/components/app-shell/index.js

@@ -0,0 +1,8 @@
+import Header from './AppShellHeader.svelte';
+import Main from './AppShellMain.svelte';
+import Panel from './AppShellPanel.svelte';
+import Root from './AppShellRoot.svelte';
+import Sidebar from './AppShellSidebar.svelte';
+import Toggle from './AppShellToggle.svelte';
+export { Root, Sidebar, Main, Header, Panel, Toggle };
+export { getAppShellContext } from './context.js';

package/dist/components/approval/Approval.svelte

@@ -0,0 +1,213 @@
+<!--
+	The agent stops to ask. A question, what it wants to do, why, and the
+	choices; once answered, the card folds into one line that says what was
+	decided. Focus is kept: when the buttons go, it moves to that line, not to
+	the top of the page. (From Eregion, 2b566c1f.)
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { tick, type Snippet } from 'svelte';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius, space } from '../../tokens.stylex.js';
+	import Button from '../button/Button.svelte';
+
+	export type ApprovalChoice = {
+		value: string;
+		label: string;
+		/** The one choice most people make; shown as the main button. */
+		primary?: boolean;
+		/** For a choice that refuses, or refuses and stops. */
+		tone?: 'default' | 'danger';
+	};
+
+	export type ApprovalAnswer = {
+		/** What was decided, in words: "Approved", "Declined". */
+		label: string;
+		tone: 'approved' | 'declined' | 'withdrawn';
+	};
+
+	export type ApprovalProps = {
+		/** A question: "Run this command?" */
+		title: string;
+		/** Why the agent wants it. */
+		reason?: string;
+		/** The command it would run. */
+		command?: string;
+		/** The files it would touch. */
+		files?: string[];
+		choices: ApprovalChoice[];
+		onchoose: (value: string) => void;
+		/** Once there is one, the card folds into a line that says it. */
+		answer?: ApprovalAnswer;
+		/** What the folded line names after the answer, such as the command. */
+		subject?: string;
+		/** More detail inside the card. */
+		children?: Snippet;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		card: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: space.x3,
+			padding: '0.875rem',
+			borderRadius: radius.lg,
+			backgroundColor: `color-mix(in oklab, ${colors.warning} 7%, ${colors.bgRaised})`,
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.warning} 40%, transparent)`,
+			opacity: { default: 1, '@starting-style': 0 },
+			translate: { default: null, [MOTION]: { default: '0 0', '@starting-style': '0 0.375rem' } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, translate' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		title: { margin: 0, fontSize: font.sizeMd, fontWeight: font.weightSemibold },
+		reason: {
+			margin: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingNormal
+		},
+		command: {
+			margin: 0,
+			paddingBlock: '0.5rem',
+			paddingInline: '0.625rem',
+			overflowX: 'auto',
+			borderRadius: radius.md,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			fontFamily: font.mono,
+			fontSize: font.sizeSm,
+			whiteSpace: 'pre-wrap',
+			overflowWrap: 'anywhere',
+			userSelect: 'text'
+		},
+		prompt: { color: colors.textSubtle, userSelect: 'none' },
+		files: {
+			margin: 0,
+			paddingInlineStart: '1rem',
+			color: colors.textMuted,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			lineHeight: 1.7
+		},
+		actions: { display: 'flex', flexWrap: 'wrap', gap: space.x2 },
+		answered: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			minWidth: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeSm,
+			borderRadius: radius.xs,
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px'
+		},
+		approved: { color: colors.success, display: 'grid' },
+		declined: { color: colors.danger, display: 'grid' },
+		withdrawn: { color: colors.textSubtle, display: 'grid' },
+		subject: {
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			fontFamily: font.mono,
+			fontSize: font.sizeXs
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		reason,
+		command,
+		files,
+		choices,
+		onchoose,
+		answer,
+		subject,
+		children,
+		sx,
+		class: className
+	}: ApprovalProps = $props();
+
+	const uid = $props.id();
+	let card = $state<HTMLElement | null>(null);
+	let line = $state<HTMLElement | null>(null);
+	let keepFocus = false;
+
+	function choose(value: string) {
+		// The buttons are about to go; focus follows to what replaces them
+		keepFocus = !!card?.contains(document.activeElement);
+		onchoose(value);
+	}
+
+	$effect(() => {
+		if (!answer || !keepFocus) return;
+		keepFocus = false;
+		tick().then(() => line?.focus());
+	});
+</script>
+
+{#if answer}
+	<p
+		bind:this={line}
+		tabindex="-1"
+		data-slot="approval"
+		data-answer={answer.tone}
+		{...attrs([styles.answered, sx], className)}
+	>
+		<span {...stylex.attrs(styles[answer.tone])}>
+			{#if answer.tone === 'approved'}<Glyph
+					name="check"
+					stroke={1.75}
+				/>{:else if answer.tone === 'declined'}<Glyph name="close" />{:else}<Glyph
+					name="dashed"
+					size={14}
+				/>{/if}
+		</span>
+		<span>{answer.label}</span>
+		{#if subject ?? command}<span aria-hidden="true">·</span><code {...stylex.attrs(styles.subject)}
+				>{subject ?? command}</code
+			>{/if}
+	</p>
+{:else}
+	<section
+		bind:this={card}
+		role="group"
+		aria-labelledby="{uid}-title"
+		data-slot="approval"
+		{...attrs([styles.card, sx], className)}
+	>
+		<p id="{uid}-title" {...stylex.attrs(styles.title)}>{title}</p>
+		{#if reason}<p {...stylex.attrs(styles.reason)}>{reason}</p>{/if}
+		{#if command}
+			<pre {...stylex.attrs(styles.command)}><span {...stylex.attrs(styles.prompt)}
+					>$ </span>{command}</pre>
+		{/if}
+		{#if files?.length}
+			<ul {...stylex.attrs(styles.files)}>
+				{#each files as file (file)}<li>{file}</li>{/each}
+			</ul>
+		{/if}
+		{@render children?.()}
+		<div {...stylex.attrs(styles.actions)}>
+			{#each choices as choice (choice.value)}
+				<Button
+					size="sm"
+					variant={choice.primary ? 'primary' : choice.tone === 'danger' ? 'danger' : 'ghost'}
+					onclick={() => choose(choice.value)}
+				>
+					{choice.label}
+				</Button>
+			{/each}
+		</div>
+	</section>
+{/if}

package/dist/components/approval/Approval.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type ApprovalChoice = {
+    value: string;
+    label: string;
+    /** The one choice most people make; shown as the main button. */
+    primary?: boolean;
+    /** For a choice that refuses, or refuses and stops. */
+    tone?: 'default' | 'danger';
+};
+export type ApprovalAnswer = {
+    /** What was decided, in words: "Approved", "Declined". */
+    label: string;
+    tone: 'approved' | 'declined' | 'withdrawn';
+};
+export type ApprovalProps = {
+    /** A question: "Run this command?" */
+    title: string;
+    /** Why the agent wants it. */
+    reason?: string;
+    /** The command it would run. */
+    command?: string;
+    /** The files it would touch. */
+    files?: string[];
+    choices: ApprovalChoice[];
+    onchoose: (value: string) => void;
+    /** Once there is one, the card folds into a line that says it. */
+    answer?: ApprovalAnswer;
+    /** What the folded line names after the answer, such as the command. */
+    subject?: string;
+    /** More detail inside the card. */
+    children?: Snippet;
+    sx?: Sx;
+    class?: string;
+};
+declare const Approval: import("svelte").Component<ApprovalProps, {}, "">;
+type Approval = ReturnType<typeof Approval>;
+export default Approval;

package/dist/components/avatar/AvatarFallback.svelte

@@ -0,0 +1,73 @@
+<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 { getAvatarContext } from './context.js';
+
+	export type AvatarFallbackProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		sx?: Sx;
+		/** Usually initials. Leave it empty to show the built-in portrait instead. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		fallback: {
+			display: 'grid',
+			placeItems: 'center',
+			width: '100%',
+			height: '100%',
+			borderRadius: 'inherit'
+		},
+		// Initials sit on the person's own colour: dark enough for white text at every hue
+		initials: {
+			backgroundImage:
+				'linear-gradient(140deg, oklch(0.56 0.075 var(--narvi-avatar-hue, 255)), oklch(0.3 0.06 var(--narvi-avatar-hue, 255)))',
+			color: '#fff',
+			forcedColorAdjust: 'none'
+		},
+		portrait: {
+			display: 'block',
+			width: '100%',
+			height: '100%'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: AvatarFallbackProps = $props();
+
+	const avatar = getAvatarContext('Fallback');
+	const uid = $props.id();
+</script>
+
+{#if avatar.status !== 'loaded'}
+	<span
+		data-slot="avatar-fallback"
+		{...rest}
+		{...attrs([styles.fallback, children && styles.initials, sx], className)}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<!-- The built-in portrait: a head and shoulders on indigo -->
+			<svg
+				viewBox="0 0 96 96"
+				preserveAspectRatio="xMidYMid slice"
+				aria-hidden="true"
+				data-slot="avatar-portrait"
+				{...stylex.attrs(styles.portrait)}
+			>
+				<defs>
+					<linearGradient id="{uid}-bg" x1="0" y1="0" x2="1" y2="1">
+						<stop offset="0" stop-color="#7c8cf8" />
+						<stop offset="1" stop-color="#3b2f9e" />
+					</linearGradient>
+				</defs>
+				<rect width="96" height="96" fill="url(#{uid}-bg)" />
+				<circle cx="48" cy="38" r="17" fill="#f3e6d8" />
+				<path d="M14 96c2-20 16-31 34-31s32 11 34 31z" fill="#f3e6d8" />
+			</svg>
+		{/if}
+	</span>
+{/if}

package/dist/components/avatar/AvatarFallback.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 AvatarFallbackProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    sx?: Sx;
+    /** Usually initials. Leave it empty to show the built-in portrait instead. */
+    children?: Snippet;
+};
+declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;