@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/rail/RailItem.svelte

@@ -0,0 +1,170 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import * as Tooltip from '../tooltip/index.js';
+
+	export type RailItemProps = {
+		/** What it is. Names the button and shows as its tooltip. */
+		label: string;
+		href?: string;
+		onclick?: (event: MouseEvent) => void;
+		/** The place that is open now. */
+		current?: boolean;
+		/** A count, or `true` for a dot: something there wants attention. */
+		badge?: number | boolean;
+		/** The keys that go there, shown in the tooltip. */
+		shortcut?: string[];
+		sx?: Sx;
+		class?: string;
+		/** A 16 to 20px icon, or a mark. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const FORCED = '@media (forced-colors: active)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		item: {
+			position: 'relative',
+			display: 'grid',
+			placeItems: 'center',
+			flexShrink: 0,
+			width: '2.25rem',
+			height: '2.25rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.lg,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			color: { default: colors.textSubtle, ':hover': { default: null, [HOVER]: colors.text } },
+			cursor: 'pointer',
+			textDecoration: 'none',
+			WebkitTapHighlightColor: 'transparent',
+			scale: { default: null, ':active': { default: null, [MOTION]: 0.95 } },
+			transitionProperty: {
+				default: 'background-color, color',
+				[MOTION]: 'background-color, color, scale'
+			},
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		// The open place: lifted, with ithildin at the rail's edge
+		current: {
+			backgroundColor: { default: colors.surfaceRaised, ':hover': colors.surfaceRaised },
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 1px 2px ${colors.shade}`,
+			color: colors.text,
+			'::before': {
+				content: '""',
+				position: 'absolute',
+				insetInlineStart: '-0.5rem',
+				top: '25%',
+				bottom: '25%',
+				width: '2px',
+				borderRadius: '2px',
+				backgroundColor: { default: colors.ithil, [FORCED]: 'Highlight' },
+				boxShadow: `0 0 8px ${colors.glow}`,
+				forcedColorAdjust: 'none'
+			}
+		},
+		badge: {
+			position: 'absolute',
+			top: '0.125rem',
+			insetInlineEnd: '0.125rem',
+			display: 'grid',
+			placeItems: 'center',
+			minWidth: '1rem',
+			height: '1rem',
+			paddingInline: '0.25rem',
+			boxSizing: 'border-box',
+			borderRadius: radius.full,
+			backgroundColor: colors.ithil,
+			boxShadow: `0 0 0 2px ${colors.bg}`,
+			color: colors.onIthil,
+			fontSize: '0.625rem',
+			fontWeight: font.weightSemibold,
+			fontVariantNumeric: 'tabular-nums',
+			lineHeight: 1
+		},
+		dot: {
+			minWidth: '0.5rem',
+			height: '0.5rem',
+			padding: 0,
+			top: '0.375rem',
+			insetInlineEnd: '0.375rem'
+		},
+		hidden: {
+			position: 'absolute',
+			width: '1px',
+			height: '1px',
+			overflow: 'hidden',
+			clipPath: 'inset(50%)',
+			whiteSpace: 'nowrap'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		href,
+		onclick,
+		current = false,
+		badge,
+		shortcut,
+		sx,
+		class: className,
+		children
+	}: RailItemProps = $props();
+
+	const count = $derived(typeof badge === 'number' && badge > 0 ? badge : undefined);
+	const dot = $derived(badge === true);
+</script>
+
+{#snippet face()}
+	{@render children?.()}
+	{#if count !== undefined}
+		<span aria-hidden="true" {...stylex.attrs(styles.badge)}>{count > 99 ? '99+' : count}</span>
+		<span {...stylex.attrs(styles.hidden)}>, {count} new</span>
+	{:else if dot}
+		<span aria-hidden="true" {...stylex.attrs(styles.badge, styles.dot)}></span>
+		<span {...stylex.attrs(styles.hidden)}>, new</span>
+	{/if}
+{/snippet}
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			{@const own = attrs(
+				[styles.item, shared.focusable, current && styles.current, sx],
+				className
+			)}
+			{#if href !== undefined}
+				<a {...props} {href} data-rail-item aria-current={current ? 'page' : undefined} {...own}>
+					<span {...stylex.attrs(styles.hidden)}>{label}</span>{@render face()}
+				</a>
+			{:else}
+				<button
+					{...props}
+					type="button"
+					data-rail-item
+					aria-current={current ? 'page' : undefined}
+					{...own}
+					onclick={(event) => {
+						(props.onclick as ((event: MouseEvent) => void) | undefined)?.(event);
+						onclick?.(event);
+					}}
+				>
+					<span {...stylex.attrs(styles.hidden)}>{label}</span>{@render face()}
+				</button>
+			{/if}
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content side="right" {shortcut}>{label}</Tooltip.Content>
+</Tooltip.Root>

package/dist/components/rail/RailItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type RailItemProps = {
+    /** What it is. Names the button and shows as its tooltip. */
+    label: string;
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+    /** The place that is open now. */
+    current?: boolean;
+    /** A count, or `true` for a dot: something there wants attention. */
+    badge?: number | boolean;
+    /** The keys that go there, shown in the tooltip. */
+    shortcut?: string[];
+    sx?: Sx;
+    class?: string;
+    /** A 16 to 20px icon, or a mark. */
+    children?: Snippet;
+};
+declare const RailItem: import("svelte").Component<RailItemProps, {}, "">;
+type RailItem = ReturnType<typeof RailItem>;
+export default RailItem;

package/dist/components/rail/RailRoot.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { roving } from '../../internal/roving.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import * as Tooltip from '../tooltip/index.js';
+
+	export type RailRootProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Names it for assistive technology: "Workspaces". */
+		label: string;
+		sx?: Sx;
+		/** Rail.Item buttons; anything after a `Rail.Spacer` sits at the bottom. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		rail: {
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			gap: '0.25rem',
+			width: '100%',
+			paddingBlock: '0.5rem',
+			overflowY: 'auto',
+			scrollbarWidth: 'none'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { label, sx, class: className, children, ...rest }: RailRootProps = $props();
+</script>
+
+<!-- A vertical toolbar: one tab stop, the arrow keys move along it -->
+<nav
+	aria-label={label}
+	data-slot="rail"
+	{...rest}
+	{...attrs([styles.rail, sx], className)}
+	{@attach roving({ selector: '[data-rail-item]' })}
+>
+	<Tooltip.Provider delayDuration={400}>
+		{@render children?.()}
+	</Tooltip.Provider>
+</nav>

package/dist/components/rail/RailRoot.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type RailRootProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Names it for assistive technology: "Workspaces". */
+    label: string;
+    sx?: Sx;
+    /** Rail.Item buttons; anything after a `Rail.Spacer` sits at the bottom. */
+    children?: Snippet;
+};
+declare const RailRoot: import("svelte").Component<RailRootProps, {}, "">;
+type RailRoot = ReturnType<typeof RailRoot>;
+export default RailRoot;

package/dist/components/rail/RailSpacer.svelte

@@ -0,0 +1,2 @@
+<!-- Pushes the Rail.Items after it to the bottom of the rail, such as Settings. -->
+<div data-slot="rail-spacer" aria-hidden="true" style="flex-grow: 1"></div>

package/dist/components/rail/RailSpacer.svelte.d.ts

@@ -0,0 +1,26 @@
+export default RailSpacer;
+type RailSpacer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const RailSpacer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,6 @@
+import Item from './RailItem.svelte';
+import Root from './RailRoot.svelte';
+import Spacer from './RailSpacer.svelte';
+export { Root, Item, Spacer };
+export type { RailItemProps } from './RailItem.svelte';
+export type { RailRootProps } from './RailRoot.svelte';

package/dist/components/rail/index.js

@@ -0,0 +1,4 @@
+import Item from './RailItem.svelte';
+import Root from './RailRoot.svelte';
+import Spacer from './RailSpacer.svelte';
+export { Root, Item, Spacer };

package/dist/components/reasoning/ReasoningContent.svelte

@@ -0,0 +1,56 @@
+<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, font } from '../../tokens.stylex.js';
+	import { getReasoningContext } from './context.js';
+
+	export type ReasoningContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Styles for the text of the thoughts. */
+		sx?: Sx;
+		/** The model's thoughts. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// The thoughts hang from a rail under the bulb, set apart from the answer and
+		// quieter than it; their text lines up with the label above
+		thoughts: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.5rem',
+			marginTop: '0.375rem',
+			marginBottom: '0.25rem',
+			marginInlineStart: 'calc(0.75rem - 0.5px)',
+			paddingInlineStart: 'calc(1.375rem - 0.5px)',
+			borderInlineStartWidth: '1px',
+			borderInlineStartStyle: 'solid',
+			borderInlineStartColor: colors.line,
+			color: colors.textMuted,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingNormal,
+			overflowWrap: 'break-word'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: ReasoningContentProps = $props();
+
+	const reasoning = getReasoningContext('Content');
+</script>
+
+<Collapse
+	open={reasoning.open}
+	id={reasoning.contentId}
+	role="region"
+	aria-labelledby={reasoning.triggerId}
+	data-slot="reasoning-content"
+	class={className}
+	innerSx={[styles.thoughts, sx]}
+	{...rest}
+>
+	{@render children?.()}
+</Collapse>

package/dist/components/reasoning/ReasoningContent.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Sx } from '../../internal/sx.js';
+export type ReasoningContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Styles for the text of the thoughts. */
+    sx?: Sx;
+    /** The model's thoughts. */
+    children?: Snippet;
+};
+declare const ReasoningContent: import("svelte").Component<ReasoningContentProps, {}, "">;
+type ReasoningContent = ReturnType<typeof ReasoningContent>;
+export default ReasoningContent;

package/dist/components/reasoning/ReasoningRoot.svelte

@@ -0,0 +1,102 @@
+<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';
+	import { setReasoningContext } from './context.js';
+
+	export type ReasoningRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/**
+		 * Set while the model is thinking. Reasoning opens when thinking starts,
+		 * times it, and folds away when it ends, unless the person has opened or
+		 * closed it themselves.
+		 */
+		streaming?: boolean;
+		/** Whether the thoughts are showing. Bindable. Opens while streaming by default. */
+		open?: boolean;
+		/**
+		 * How long the thinking took, in seconds. Reasoning times itself while it
+		 * watches `streaming`; pass this for a message loaded from history.
+		 */
+		duration?: number;
+		sx?: Sx;
+		ref?: HTMLDivElement | null;
+		/** A Reasoning.Trigger and a Reasoning.Content. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		root: {
+			display: 'flex',
+			flexDirection: 'column',
+			minWidth: 0,
+			color: colors.text,
+			fontFamily: font.body
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+
+	let {
+		streaming = false,
+		open = $bindable(),
+		duration,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: ReasoningRootProps = $props();
+
+	const uid = $props.id();
+	// Seeded once. A fallback of `streaming` would be worked out again whenever
+	// streaming changed, and undo what the person chose.
+	if (open === undefined) open = untrack(() => streaming);
+	// Once the person opens or closes it, it stays the way they left it
+	let touched = false;
+	let started: number | undefined;
+	let measured = $state<number | undefined>();
+
+	$effect.pre(() => {
+		if (streaming) {
+			started ??= performance.now();
+			if (!touched) open = true;
+		} else if (started !== undefined) {
+			measured = Math.round((performance.now() - started) / 1000);
+			started = undefined;
+			if (!touched) open = false;
+		}
+	});
+
+	setReasoningContext({
+		get open() {
+			return open ?? false;
+		},
+		toggle() {
+			touched = true;
+			open = !open;
+		},
+		get streaming() {
+			return streaming;
+		},
+		get duration() {
+			return duration ?? measured;
+		},
+		triggerId: `${uid}-trigger`,
+		contentId: `${uid}-content`
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="reasoning"
+	data-state={open ? 'open' : 'closed'}
+	data-streaming={streaming || undefined}
+	{...rest}
+	{...attrs([styles.root, sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/reasoning/ReasoningRoot.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 ReasoningRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * Set while the model is thinking. Reasoning opens when thinking starts,
+     * times it, and folds away when it ends, unless the person has opened or
+     * closed it themselves.
+     */
+    streaming?: boolean;
+    /** Whether the thoughts are showing. Bindable. Opens while streaming by default. */
+    open?: boolean;
+    /**
+     * How long the thinking took, in seconds. Reasoning times itself while it
+     * watches `streaming`; pass this for a message loaded from history.
+     */
+    duration?: number;
+    sx?: Sx;
+    ref?: HTMLDivElement | null;
+    /** A Reasoning.Trigger and a Reasoning.Content. */
+    children?: Snippet;
+};
+declare const ReasoningRoot: import("svelte").Component<ReasoningRootProps, {}, "ref" | "open">;
+type ReasoningRoot = ReturnType<typeof ReasoningRoot>;
+export default ReasoningRoot;

package/dist/components/reasoning/ReasoningTrigger.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 Chevron from '../../internal/Chevron.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Tile from '../../internal/Tile.svelte';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import Shimmer from '../shimmer/Shimmer.svelte';
+	import { getReasoningContext } from './context.js';
+
+	export type ReasoningTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+		/**
+		 * The label, in place of "Thinking" and "Thought for 4 seconds". It receives
+		 * whether the model is still thinking and, once known, for how many seconds.
+		 */
+		children?: Snippet<[{ streaming: boolean; duration: number | undefined }]>;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		trigger: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			alignSelf: 'flex-start',
+			gap: '0.625rem',
+			minHeight: '1.75rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.xs,
+			backgroundColor: 'transparent',
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			fontFamily: 'inherit',
+			fontSize: font.sizeMd,
+			lineHeight: 1,
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		label: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' },
+		chevron: { display: 'grid', color: colors.textSubtle }
+	});
+
+	/** "Thought for 4 seconds", "Thought for 1m 12s" */
+	function describe(duration: number | undefined): string {
+		if (duration === undefined) return 'Thoughts';
+		if (duration < 2) return 'Thought for a second';
+		if (duration < 60) return `Thought for ${duration} seconds`;
+		const minutes = Math.floor(duration / 60);
+		const seconds = duration % 60;
+		return `Thought for ${minutes}m${seconds ? ` ${seconds}s` : ''}`;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		onclick,
+		...rest
+	}: ReasoningTriggerProps = $props();
+
+	const reasoning = getReasoningContext('Trigger');
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	id={reasoning.triggerId}
+	aria-expanded={reasoning.open}
+	aria-controls={reasoning.contentId}
+	data-slot="reasoning-trigger"
+	{...rest}
+	{...attrs([styles.trigger, sx], className)}
+	onclick={(event) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) reasoning.toggle();
+	}}
+>
+	<Tile glyph="bulb" tone={reasoning.streaming ? 'live' : 'neutral'} />
+	<span {...stylex.attrs(styles.label)}>
+		{#if children}
+			{@render children({ streaming: reasoning.streaming, duration: reasoning.duration })}
+		{:else if reasoning.streaming}
+			<Shimmer>Thinking</Shimmer>
+		{:else}
+			{describe(reasoning.duration)}
+		{/if}
+		<span {...stylex.attrs(styles.chevron)}><Chevron open={reasoning.open} size={12} /></span>
+	</span>
+</button>

package/dist/components/reasoning/ReasoningTrigger.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ReasoningTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+    /**
+     * The label, in place of "Thinking" and "Thought for 4 seconds". It receives
+     * whether the model is still thinking and, once known, for how many seconds.
+     */
+    children?: Snippet<[{
+        streaming: boolean;
+        duration: number | undefined;
+    }]>;
+};
+declare const ReasoningTrigger: import("svelte").Component<ReasoningTriggerProps, {}, "ref">;
+type ReasoningTrigger = ReturnType<typeof ReasoningTrigger>;
+export default ReasoningTrigger;

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

@@ -0,0 +1,8 @@
+import type { DisclosureContext } from '../../internal/disclosure.js';
+export type ReasoningContext = DisclosureContext & {
+    readonly streaming: boolean;
+    /** How long the thinking took, in seconds, once it is known. */
+    readonly duration: number | undefined;
+};
+export declare function setReasoningContext(context: ReasoningContext): void;
+export declare function getReasoningContext(part: string): ReasoningContext;

package/dist/components/reasoning/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.reasoning');
+export function setReasoningContext(context) {
+    setContext(KEY, context);
+}
+export function getReasoningContext(part) {
+    const context = getContext(KEY);
+    if (!context)
+        throw new Error(`<Reasoning.${part}> must be placed inside <Reasoning.Root>.`);
+    return context;
+}

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

@@ -0,0 +1,7 @@
+import Content from './ReasoningContent.svelte';
+import Root from './ReasoningRoot.svelte';
+import Trigger from './ReasoningTrigger.svelte';
+export { Root, Trigger, Content, Root as ReasoningRoot, Trigger as ReasoningTrigger, Content as ReasoningContent };
+export type { ReasoningContentProps } from './ReasoningContent.svelte';
+export type { ReasoningRootProps } from './ReasoningRoot.svelte';
+export type { ReasoningTriggerProps } from './ReasoningTrigger.svelte';

package/dist/components/reasoning/index.js

@@ -0,0 +1,6 @@
+import Content from './ReasoningContent.svelte';
+import Root from './ReasoningRoot.svelte';
+import Trigger from './ReasoningTrigger.svelte';
+export { Root, Trigger, Content, 
+//
+Root as ReasoningRoot, Trigger as ReasoningTrigger, Content as ReasoningContent };