@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/text/Text.svelte

@@ -0,0 +1,88 @@
+<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 } from '../../tokens.stylex.js';
+
+	export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	export type TextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success';
+	export type TextWeight = 'regular' | 'medium' | 'semibold';
+
+	export type TextProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Element to render. */
+		as?: 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small';
+		size?: TextSize;
+		tone?: TextTone;
+		weight?: TextWeight;
+		/** Cuts the text off with an ellipsis on one line. */
+		truncate?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			margin: 0,
+			fontFamily: font.body,
+			fontStyle: 'normal',
+			lineHeight: font.leadingNormal,
+			textWrap: 'pretty'
+		},
+		truncate: {
+			display: 'block',
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		}
+	});
+
+	const sizes = stylex.create({
+		xs: { fontSize: font.sizeXs },
+		sm: { fontSize: font.sizeSm },
+		md: { fontSize: font.sizeMd },
+		lg: { fontSize: font.sizeLg },
+		xl: { fontSize: font.sizeXl }
+	});
+
+	const tones = stylex.create({
+		default: { color: colors.text },
+		muted: { color: colors.textMuted },
+		subtle: { color: colors.textSubtle },
+		accent: { color: colors.ithil },
+		danger: { color: colors.danger },
+		success: { color: colors.success }
+	});
+
+	const weights = stylex.create({
+		regular: { fontWeight: font.weightRegular },
+		medium: { fontWeight: font.weightMedium },
+		semibold: { fontWeight: font.weightSemibold }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		as = 'p',
+		size = 'md',
+		tone = 'default',
+		weight = 'regular',
+		truncate = false,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: TextProps = $props();
+</script>
+
+<svelte:element
+	this={as}
+	{...rest}
+	{...attrs(
+		[styles.base, sizes[size], tones[tone], weights[weight], truncate && styles.truncate, sx],
+		className
+	)}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/components/text/Text.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success';
+export type TextWeight = 'regular' | 'medium' | 'semibold';
+export type TextProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Element to render. */
+    as?: 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small';
+    size?: TextSize;
+    tone?: TextTone;
+    weight?: TextWeight;
+    /** Cuts the text off with an ellipsis on one line. */
+    truncate?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/textarea/Textarea.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { control } from '../../internal/control.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { getFieldContext } from '../field/context.js';
+
+	export type TextareaProps = HTMLTextareaAttributes & {
+		/** Marks the textarea as invalid. Inherited from a surrounding Field with an `error`. */
+		invalid?: boolean;
+		/** Grows with its content instead of scrolling, in browsers that support `field-sizing`. */
+		autosize?: boolean;
+		sx?: Sx;
+		ref?: HTMLTextAreaElement | null;
+	};
+
+	const styles = stylex.create({
+		base: {
+			minHeight: '5rem',
+			paddingBlock: '0.5rem',
+			paddingInline: '0.625rem',
+			resize: 'vertical'
+		},
+		autosize: {
+			fieldSizing: 'content',
+			resize: 'none'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(),
+		invalid,
+		autosize = false,
+		disabled,
+		required,
+		id,
+		rows = 3,
+		'aria-describedby': describedBy,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: TextareaProps = $props();
+
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid ?? field?.invalid ?? false);
+</script>
+
+<textarea
+	bind:this={ref}
+	bind:value
+	{rows}
+	id={id ?? field?.id}
+	disabled={disabled ?? field?.disabled}
+	required={required ?? field?.required}
+	aria-invalid={isInvalid ? true : undefined}
+	aria-describedby={describedBy ?? field?.describedBy}
+	{...rest}
+	{...attrs(
+		[control.base, styles.base, autosize && styles.autosize, isInvalid && control.invalid, sx],
+		className
+	)}></textarea>

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type TextareaProps = HTMLTextareaAttributes & {
+    /** Marks the textarea as invalid. Inherited from a surrounding Field with an `error`. */
+    invalid?: boolean;
+    /** Grows with its content instead of scrolling, in browsers that support `field-sizing`. */
+    autosize?: boolean;
+    sx?: Sx;
+    ref?: HTMLTextAreaElement | null;
+};
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/theme/Theme.svelte

@@ -0,0 +1,49 @@
+<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 } from '../../tokens.stylex.js';
+
+	export type ThemeScheme = 'light' | 'dark' | 'system';
+
+	/** The result of `stylex.createTheme`, for any token group. */
+	export type ThemeOverrides = Readonly<{ theme: string }>;
+
+	export type ThemeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/**
+		 * Colour scheme for everything inside. `system` follows the user's OS setting.
+		 * Leave it out to keep whatever scheme the surrounding page uses.
+		 */
+		scheme?: ThemeScheme;
+		/**
+		 * One or more themes from `stylex.createTheme`. Their token overrides apply
+		 * to everything inside.
+		 */
+		theme?: ThemeOverrides | ReadonlyArray<ThemeOverrides>;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// `display: contents` keeps the wrapper out of layout, while the inherited
+		// `color-scheme` and `color` still reach its children.
+		base: {
+			display: 'contents',
+			color: colors.text
+		},
+		light: { colorScheme: 'light' },
+		dark: { colorScheme: 'dark' },
+		system: { colorScheme: 'light dark' }
+	});
+</script>
+
+<script lang="ts">
+	let { scheme, theme, sx, class: className, children, ...rest }: ThemeProps = $props();
+
+	const themes = $derived(theme === undefined ? [] : Array.isArray(theme) ? theme : [theme]);
+</script>
+
+<div {...rest} {...attrs([styles.base, scheme && styles[scheme], ...themes, sx], className)}>
+	{@render children?.()}
+</div>

package/dist/components/theme/Theme.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ThemeScheme = 'light' | 'dark' | 'system';
+/** The result of `stylex.createTheme`, for any token group. */
+export type ThemeOverrides = Readonly<{
+    theme: string;
+}>;
+export type ThemeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * Colour scheme for everything inside. `system` follows the user's OS setting.
+     * Leave it out to keep whatever scheme the surrounding page uses.
+     */
+    scheme?: ThemeScheme;
+    /**
+     * One or more themes from `stylex.createTheme`. Their token overrides apply
+     * to everything inside.
+     */
+    theme?: ThemeOverrides | ReadonlyArray<ThemeOverrides>;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Theme: import("svelte").Component<ThemeProps, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

package/dist/components/toast/Toaster.svelte

@@ -0,0 +1,223 @@
+<!--
+	Where toasts appear. Place one near the root of the app.
+
+	It sits in the top layer, so toasts stay above dialogs and can still be
+	clicked while one is open. Each toast waits while the pointer or focus is on
+	the stack, and while the window is hidden, so none goes unread.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { colors, font, motion, radius, space } from '../../tokens.stylex.js';
+	import Glyph from '../../internal/Glyph.svelte';
+	import Button from '../button/Button.svelte';
+	import Spinner from '../spinner/Spinner.svelte';
+	import { toast, toasts, type ToastEntry } from './toasts.svelte.js';
+
+	export type ToasterProps = {
+		/** Distance from the top of the window, to clear an app's own header. */
+		offset?: string;
+		/** Accessible name of the region. */
+		label?: string;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		// The top layer brings the browser's popover styles; these undo them
+		region: {
+			position: 'fixed',
+			inset: 'auto',
+			top: 'var(--narvi-toaster-offset)',
+			insetInlineEnd: space.x4,
+			display: 'flex',
+			flexDirection: 'column',
+			gap: space.x2,
+			width: 'min(22rem, calc(100vw - 2rem))',
+			height: 'auto',
+			margin: 0,
+			padding: 0,
+			overflow: 'visible',
+			borderWidth: 0,
+			backgroundColor: 'transparent',
+			pointerEvents: 'none'
+		},
+		toast: {
+			display: 'grid',
+			gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+			alignItems: 'start',
+			gap: '0.625rem',
+			paddingBlock: '0.75rem',
+			paddingInlineStart: '0.875rem',
+			paddingInlineEnd: '0.5rem',
+			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,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingSnug,
+			pointerEvents: 'auto',
+			opacity: { default: 1, '@starting-style': 0 },
+			translate: { default: null, [MOTION]: { default: '0 0', '@starting-style': '0 -0.5rem' } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, translate' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		leaving: {
+			opacity: 0,
+			translate: { default: null, [MOTION]: '0.5rem 0' },
+			transitionDuration: motion.fast
+		},
+		icon: { display: 'grid', placeItems: 'center', width: '1rem', height: '1.25rem' },
+		dot: {
+			width: '0.375rem',
+			height: '0.375rem',
+			borderRadius: '9999px',
+			backgroundColor: colors.ithil
+		},
+		success: { color: colors.success },
+		error: { color: colors.danger },
+		muted: { color: colors.textMuted },
+		text: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.125rem',
+			minWidth: 0,
+			paddingTop: '1px'
+		},
+		title: { fontWeight: font.weightMedium },
+		// What went wrong can be selected and copied
+		description: {
+			color: colors.textMuted,
+			fontSize: font.sizeSm,
+			userSelect: 'text',
+			overflowWrap: 'anywhere'
+		},
+		actions: { display: 'flex', alignItems: 'center', gap: '0.25rem', marginTop: '-0.25rem' }
+	});
+</script>
+
+<script lang="ts">
+	let { offset = '1rem', label = 'Notifications' }: ToasterProps = $props();
+
+	let region = $state<HTMLElement | null>(null);
+	let held = $state(false);
+	let hidden = $state(false);
+	// Toasts on their way out, kept a moment so they can fade
+	let leaving = $state<number[]>([]);
+
+	$effect(() => {
+		region?.showPopover?.();
+		const visibility = () => (hidden = document.hidden);
+		document.addEventListener('visibilitychange', visibility);
+		return () => document.removeEventListener('visibilitychange', visibility);
+	});
+
+	function close(entry: ToastEntry) {
+		if (leaving.includes(entry.id)) return;
+		leaving = [...leaving, entry.id];
+		setTimeout(() => {
+			toast.dismiss(entry.id);
+			leaving = leaving.filter((id) => id !== entry.id);
+		}, 140);
+	}
+
+	// Each toast's own timer, which runs only while nothing holds the stack
+	function timed(element: HTMLElement, entry: ToastEntry) {
+		let remaining = entry.duration ?? Infinity;
+		let started = 0;
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		const run = () => {
+			if (!Number.isFinite(remaining)) return;
+			started = performance.now();
+			timer = setTimeout(() => close(entry), remaining);
+		};
+		const pause = () => {
+			if (timer === undefined) return;
+			clearTimeout(timer);
+			timer = undefined;
+			remaining -= performance.now() - started;
+		};
+		return { run, pause, stop: () => clearTimeout(timer), element };
+	}
+</script>
+
+<section
+	bind:this={region}
+	popover="manual"
+	aria-label={label}
+	data-slot="toaster"
+	style:--narvi-toaster-offset={offset}
+	{...stylex.attrs(styles.region)}
+	onpointerenter={() => (held = true)}
+	onpointerleave={() => (held = false)}
+	onfocusin={() => (held = true)}
+	onfocusout={(event) => {
+		if (!region?.contains(event.relatedTarget as Node | null)) held = false;
+	}}
+>
+	{#each toasts.list as entry (entry.id)}
+		{@const clock = timed(region!, entry)}
+		<div
+			role={entry.tone === 'error' ? 'alert' : 'status'}
+			data-tone={entry.tone}
+			{...stylex.attrs(styles.toast, leaving.includes(entry.id) && styles.leaving)}
+			{@attach () => {
+				// Restarts when the toast changes, as a loading toast turns into a result
+				void entry.duration;
+				if (!held && !hidden) clock.run();
+				return () => clock.pause();
+			}}
+		>
+			<span
+				{...stylex.attrs(
+					styles.icon,
+					entry.tone === 'success' && styles.success,
+					entry.tone === 'error' && styles.error,
+					(entry.tone === 'default' || entry.tone === 'loading') && styles.muted
+				)}
+			>
+				{#if entry.tone === 'loading'}
+					<Spinner size={14} label={null} />
+				{:else if entry.tone === 'success'}
+					<Glyph name="check" stroke={1.75} />
+				{:else if entry.tone === 'error'}
+					<Glyph name="alert" />
+				{:else}
+					<span {...stylex.attrs(styles.dot)}></span>
+				{/if}
+			</span>
+			<span {...stylex.attrs(styles.text)}>
+				<span {...stylex.attrs(styles.title)}>{entry.title}</span>
+				{#if entry.description}
+					<span {...stylex.attrs(styles.description)}>{entry.description}</span>
+				{/if}
+			</span>
+			<span {...stylex.attrs(styles.actions)}>
+				{#if entry.action}
+					<Button
+						size="sm"
+						variant="secondary"
+						onclick={() => {
+							entry.action?.onclick();
+							close(entry);
+						}}
+					>
+						{entry.action.label}
+					</Button>
+				{/if}
+				{#if entry.tone !== 'loading'}
+					<Button
+						size="sm"
+						variant="ghost"
+						iconOnly
+						aria-label="Dismiss"
+						onclick={() => close(entry)}
+					>
+						<Glyph name="close" size={14} />
+					</Button>
+				{/if}
+			</span>
+		</div>
+	{/each}
+</section>

package/dist/components/toast/Toaster.svelte.d.ts

@@ -0,0 +1,9 @@
+export type ToasterProps = {
+    /** Distance from the top of the window, to clear an app's own header. */
+    offset?: string;
+    /** Accessible name of the region. */
+    label?: string;
+};
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/toast/toasts.svelte.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Toasts: short notes about something that happened away from where the person
+ * is looking. Call `toast()` from anywhere; one <Toaster /> shows them.
+ */
+export type ToastTone = 'default' | 'success' | 'error' | 'loading';
+export type ToastAction = {
+    label: string;
+    onclick: () => void;
+};
+export type ToastOptions = {
+    description?: string;
+    tone?: ToastTone;
+    /** A button in the toast, such as Undo or Retry. */
+    action?: ToastAction;
+    /** Milliseconds before it goes. `null` keeps it until dismissed. */
+    duration?: number | null;
+};
+export type ToastEntry = Required<Pick<ToastOptions, 'tone'>> & Omit<ToastOptions, 'tone'> & {
+    id: number;
+    title: string;
+    duration: number | null;
+};
+declare class Toasts {
+    list: ToastEntry[];
+}
+export declare const toasts: Toasts;
+declare function show(title: string, options?: ToastOptions): number;
+declare function update(id: number, patch: ToastOptions & {
+    title?: string;
+}): void;
+declare function dismiss(id?: number): void;
+type Message<T> = string | ((value: T) => string);
+/**
+ * Shows a toast and returns its id.
+ *
+ * ```ts
+ * toast('Copied');
+ * toast.error("Couldn't push the branch", { description: reason, action: { label: 'Retry', onclick: push } });
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: (e) => `Couldn't save: ${e}` });
+ * ```
+ */
+export declare const toast: typeof show & {
+    success: (title: string, options?: Omit<ToastOptions, "tone">) => number;
+    error: (title: string, options?: Omit<ToastOptions, "tone">) => number;
+    loading: (title: string, options?: Omit<ToastOptions, "tone">) => number;
+    /** One toast that says the work is under way, then how it went. */
+    promise<T>(promise: Promise<T>, messages: {
+        loading: string;
+        success: Message<T>;
+        error: Message<unknown>;
+    }): Promise<T>;
+    update: typeof update;
+    dismiss: typeof dismiss;
+};
+export {};

package/dist/components/toast/toasts.svelte.js

@@ -0,0 +1,66 @@
+/**
+ * Toasts: short notes about something that happened away from where the person
+ * is looking. Call `toast()` from anywhere; one <Toaster /> shows them.
+ */
+const DURATION = 5000;
+let next = 1;
+class Toasts {
+    list = $state([]);
+}
+export const toasts = new Toasts();
+function show(title, options = {}) {
+    const tone = options.tone ?? 'default';
+    const entry = {
+        id: next++,
+        title,
+        ...options,
+        tone,
+        // Errors and work in progress stay until they are dealt with
+        duration: options.duration !== undefined
+            ? options.duration
+            : tone === 'error' || tone === 'loading'
+                ? null
+                : DURATION
+    };
+    toasts.list = [...toasts.list, entry];
+    return entry.id;
+}
+function update(id, patch) {
+    toasts.list = toasts.list.map((entry) => {
+        if (entry.id !== id)
+            return entry;
+        const tone = patch.tone ?? entry.tone;
+        const duration = patch.duration !== undefined
+            ? patch.duration
+            : tone === 'error' || tone === 'loading'
+                ? null
+                : DURATION;
+        return { ...entry, ...patch, tone, duration };
+    });
+}
+function dismiss(id) {
+    toasts.list = id === undefined ? [] : toasts.list.filter((entry) => entry.id !== id);
+}
+/**
+ * Shows a toast and returns its id.
+ *
+ * ```ts
+ * toast('Copied');
+ * toast.error("Couldn't push the branch", { description: reason, action: { label: 'Retry', onclick: push } });
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: (e) => `Couldn't save: ${e}` });
+ * ```
+ */
+export const toast = Object.assign(show, {
+    success: (title, options) => show(title, { ...options, tone: 'success' }),
+    error: (title, options) => show(title, { ...options, tone: 'error' }),
+    loading: (title, options) => show(title, { ...options, tone: 'loading' }),
+    /** One toast that says the work is under way, then how it went. */
+    promise(promise, messages) {
+        const id = show(messages.loading, { tone: 'loading' });
+        const say = (message, value) => typeof message === 'function' ? message(value) : message;
+        promise.then((value) => update(id, { title: say(messages.success, value), tone: 'success' }), (error) => update(id, { title: say(messages.error, error), tone: 'error' }));
+        return promise;
+    },
+    update,
+    dismiss
+});

package/dist/components/tool/ToolContent.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Collapse from '../../internal/Collapse.svelte';
+	import type { Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+	import { getToolContext } from './context.js';
+
+	export type ToolContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		/** A Tool.Input and a Tool.Output, or anything else the tool produced. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// Input and output hang from a rail under the tile, in line with the title
+		body: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.75rem',
+			marginTop: '0.5rem',
+			marginBottom: '0.25rem',
+			marginInlineStart: 'calc(0.75rem - 0.5px)',
+			paddingInlineStart: 'calc(1.375rem - 0.5px)',
+			paddingBlock: '0.125rem',
+			borderInlineStartWidth: '1px',
+			borderInlineStartStyle: 'solid',
+			borderInlineStartColor: colors.line
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: ToolContentProps = $props();
+
+	const tool = getToolContext('Content');
+</script>
+
+<Collapse
+	open={tool.open}
+	id={tool.contentId}
+	role="region"
+	aria-labelledby={tool.triggerId}
+	data-slot="tool-content"
+	class={className}
+	innerSx={[styles.body, sx]}
+	{...rest}
+>
+	{@render children?.()}
+</Collapse>

package/dist/components/tool/ToolContent.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 ToolContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    /** A Tool.Input and a Tool.Output, or anything else the tool produced. */
+    children?: Snippet;
+};
+declare const ToolContent: import("svelte").Component<ToolContentProps, {}, "">;
+type ToolContent = ReturnType<typeof ToolContent>;
+export default ToolContent;